videochat integriert

client/src/components/ChatWindow.vue

@@ -23,8 +23,48 @@
         </span>
       </div>
     </div>
-    
+
     <div v-else class="messages-container">
+      <div v-if="currentVideoSession" class="video-call-banner">
+        <div class="video-call-banner-copy">
+          <strong>{{ currentVideoSession.withUserName }}</strong>
+          <span>{{ statusLabel(currentVideoSession.status) }} · {{ currentVideoSession.remoteMuted ? 'Mikro aus' : 'Mikro an' }}</span>
+        </div>
+        <div class="video-call-banner-actions">
+          <button
+            v-if="currentVideoSession.status === 'ringing' && currentVideoSession.initiatedBy !== chatStore.userName"
+            type="button"
+            @click="chatStore.acceptVideoCall(currentVideoSession.callId)"
+          >
+            Annehmen
+          </button>
+          <button
+            v-if="currentVideoSession.status === 'ringing' && currentVideoSession.initiatedBy !== chatStore.userName"
+            type="button"
+            class="danger"
+            @click="chatStore.rejectVideoCall(currentVideoSession.callId)"
+          >
+            Ablehnen
+          </button>
+          <button
+            v-if="currentVideoSession.status === 'ringing' && currentVideoSession.initiatedBy === chatStore.userName"
+            type="button"
+            class="secondary"
+            @click="chatStore.cancelVideoCall(currentVideoSession.callId)"
+          >
+            Abbrechen
+          </button>
+          <button
+            v-if="currentVideoSession.status === 'connecting' || currentVideoSession.status === 'active'"
+            type="button"
+            class="secondary"
+            @click="chatStore.bringVideoSessionToFront(currentVideoSession.callId)"
+          >
+            Vordergrund
+          </button>
+        </div>
+      </div>
+
       <div
         v-for="(message, index) in chatStore.messages"
         :key="index"
@@ -33,33 +73,33 @@
       >
         <strong>{{ message.from }}:</strong>
         <span v-if="message.isImage" class="image-message">
-          <img 
-            :src="message.message" 
-            :alt="'Bild von ' + message.from" 
-            class="chat-image" 
+          <img
+            :src="message.message"
+            :alt="'Bild von ' + message.from"
+            class="chat-image"
             @click="openImageModal(message.message)"
           />
         </span>
         <span v-else v-html="replaceSmileys(message.message)"></span>
-      
-      <!-- Bild-Modal -->
+      </div>
+
       <div v-if="selectedImage" class="image-modal-overlay" @click="closeImageModal">
         <div class="image-modal-content" @click.stop>
           <button class="image-modal-close" @click="closeImageModal" title="Schließen">×</button>
           <img :src="selectedImage" alt="Vergrößertes Bild" class="image-modal-image" />
         </div>
       </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useChatStore } from '../stores/chat';
 
 const chatStore = useChatStore();
 const selectedImage = ref(null);
+const currentVideoSession = computed(() => chatStore.currentConversationVideoSession);
 
 function openImageModal(imageSrc) {
   selectedImage.value = imageSrc;
@@ -69,7 +109,6 @@ function closeImageModal() {
   selectedImage.value = null;
 }
 
-// Smiley-Definitionen (wie im Original)
 const smileys = {
   ':)': { code: '1F642' },
   ':D': { code: '1F600' },
@@ -95,21 +134,18 @@ const smileys = {
 
 function replaceSmileys(text) {
   if (!text) return '';
-  
-  // HTML-Sonderzeichen escapen
+
   let outputText = text
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;');
-  
-  // Smileys ersetzen (längere Codes zuerst, um Überschneidungen zu vermeiden)
+
   const sortedCodes = Object.keys(smileys).sort((a, b) => b.length - a.length);
-  
   for (const code of sortedCodes) {
     const regex = new RegExp(escapeRegex(code), 'g');
     outputText = outputText.replace(regex, `&#x${smileys[code].code};`);
   }
-  
+
   return outputText;
 }
 
@@ -121,6 +157,19 @@ function formatTime(timestamp) {
   const date = new Date(timestamp);
   return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
 }
+
+function statusLabel(status) {
+  switch (status) {
+    case 'ringing':
+      return 'Videoanruf klingelt';
+    case 'connecting':
+      return 'Videoanruf verbindet';
+    case 'active':
+      return 'Videoanruf aktiv';
+    default:
+      return status;
+  }
+}
 </script>
 
 <style scoped>
@@ -212,15 +261,63 @@ function formatTime(timestamp) {
   font-size: 11px;
 }
 
-@media (max-width: 620px) {
-  .empty-stats {
-    grid-template-columns: 1fr;
-  }
-}
-
 .messages-container {
   display: flex;
   flex-direction: column;
+  gap: 10px;
+}
+
+.video-call-banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid #d8e1da;
+  border-radius: 10px;
+  background: #f7fbf8;
+}
+
+.video-call-banner-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.video-call-banner-copy strong {
+  color: #223026;
+}
+
+.video-call-banner-copy span {
+  color: #58685d;
+  font-size: 13px;
+}
+
+.video-call-banner-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.video-call-banner-actions button {
+  min-height: 34px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 12px;
+  background: #1d6a42;
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.video-call-banner-actions button.secondary {
+  background: #edf2ee;
+  color: #1d6a42;
+  border: 1px solid #ccd9cf;
+}
+
+.video-call-banner-actions button.danger {
+  background: #b03737;
 }
 
 .chat-image {
@@ -298,4 +395,15 @@ function formatTime(timestamp) {
   object-fit: contain;
   border-radius: 4px;
 }
+
+@media (max-width: 620px) {
+  .empty-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .video-call-banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
 </style>