videochat integriert

client/src/views/ChatView.vue

@@ -108,6 +108,36 @@
                         <span v-if="currentUserInfo">{{ currentUserInfo.age }} · {{ currentUserInfo.gender }}</span>
                       </div>
                     </div>
+                    <div class="chat-header-actions">
+                      <button
+                        type="button"
+                        class="video-toggle-button"
+                        :class="{ 'is-active': chatStore.videoConsent.localConsent }"
+                        @click="chatStore.setVideoConsent(!chatStore.videoConsent.localConsent)"
+                      >
+                        {{ chatStore.videoConsent.localConsent ? 'Video erlaubt' : 'Video erlauben' }}
+                      </button>
+                      <button
+                        v-if="chatStore.videoConsent.videoVisible"
+                        type="button"
+                        class="video-call-button"
+                        :disabled="!chatStore.canStartVideoCall"
+                        @click="chatStore.inviteVideoCall()"
+                      >
+                        Videochat öffnen
+                      </button>
+                    </div>
+                  </div>
+                  <div v-if="chatStore.currentConversation" class="chat-video-status">
+                    <span>
+                      {{ chatStore.videoConsent.remoteConsent ? 'Partner hat Video freigegeben' : 'Partner hat Video noch nicht freigegeben' }}
+                    </span>
+                    <span v-if="chatStore.maxVideoConnectionsReached" class="chat-video-status-error">
+                      Maximal drei Videoverbindungen gleichzeitig erlaubt
+                    </span>
+                    <span v-else-if="chatStore.currentConversationVideoSession">
+                      {{ videoStatusLabel(chatStore.currentConversationVideoSession.status) }}
+                    </span>
                   </div>
                   <HeaderAdBanner v-if="chatStore.currentConversation" />
                   <ChatWindow />
@@ -115,9 +145,11 @@
                 <ChatInput />
               </div>
             </div>
+            <VideoDock />
           </div>
         </section>
       </div>
+      <FloatingVideoWindow />
       <ImprintContainer />
     </template>
 
@@ -157,6 +189,8 @@ import InboxView from '../components/InboxView.vue';
 import HistoryView from '../components/HistoryView.vue';
 import ImprintContainer from '../components/ImprintContainer.vue';
 import HeaderAdBanner from '../components/HeaderAdBanner.vue';
+import VideoDock from '../components/VideoDock.vue';
+import FloatingVideoWindow from '../components/FloatingVideoWindow.vue';
 
 const chatStore = useChatStore();
 
@@ -202,6 +236,19 @@ onMounted(async () => {
     }
   }
 });
+
+function videoStatusLabel(status) {
+  switch (status) {
+    case 'ringing':
+      return 'Videoanruf klingelt';
+    case 'connecting':
+      return 'Videoanruf verbindet';
+    case 'active':
+      return 'Videoanruf aktiv';
+    default:
+      return '';
+  }
+}
 </script>
 
 <style scoped>
@@ -358,4 +405,92 @@ onMounted(async () => {
   position: sticky;
   top: 0;
 }
+
+.horizontal-box-app {
+  align-items: stretch;
+}
+
+.chat-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-header-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.chat-header-actions button {
+  min-height: 38px;
+  border: 0;
+  border-radius: 9px;
+  padding: 0 14px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.video-toggle-button {
+  background: #edf2ee;
+  color: #265437;
+  border: 1px solid #c8d6cd;
+}
+
+.video-toggle-button.is-active {
+  background: #dff0e5;
+  color: #1c6037;
+}
+
+.video-call-button {
+  background: #1d6a42;
+  color: #ffffff;
+}
+
+.video-call-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.chat-video-status {
+  margin: 10px 0 14px;
+  border: 1px solid #d8e0da;
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: #f8fbf9;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  color: #516257;
+  font-size: 13px;
+}
+
+.chat-video-status-error {
+  color: #9f2c2c;
+  font-weight: 700;
+}
+
+@media (max-width: 860px) {
+  .chat-header {
+    flex-wrap: wrap;
+  }
+
+  .chat-header-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
 </style>