From a8de785783483ecce836ffe2271abe5b9ae26668 Mon Sep 17 00:00:00 2001
From: Max <maxharz@gmail.com>
Date: Wed, 25 Jun 2025 17:27:32 +0200
Subject: [PATCH] Fix video player in Safari (#8711)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/components/Chat/Chat.vue | 183 ++++++++++++++++----------------
 webapp/layouts/default.vue      |   4 +-
 webapp/pages/chat.vue           |  14 +--
 3 files changed, 103 insertions(+), 98 deletions(-)

diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index b83f023f3..5cdc31436 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -1,98 +1,91 @@
 <template>
-  <div>
-    <client-only>
-      <vue-advanced-chat
-        :theme="theme"
-        :current-user-id="currentUser.id"
-        :room-id="computedRoomId"
-        :template-actions="JSON.stringify(templatesText)"
-        :menu-actions="JSON.stringify(menuActions)"
-        :text-messages="JSON.stringify(textMessages)"
-        :message-actions="messageActions"
-        :messages="JSON.stringify(messages)"
-        :messages-loaded="messagesLoaded"
-        :rooms="JSON.stringify(rooms)"
-        :room-actions="JSON.stringify(roomActions)"
-        :rooms-loaded="roomsLoaded"
-        :loading-rooms="loadingRooms"
-        show-files="true"
-        show-audio="true"
-        capture-files="true"
-        :height="'calc(100dvh - 190px)'"
-        :styles="JSON.stringify(computedChatStyle)"
-        :show-footer="true"
-        :responsive-breakpoint="responsiveBreakpoint"
-        :single-room="singleRoom"
-        show-reaction-emojis="false"
-        @send-message="sendMessage($event.detail[0])"
-        @fetch-messages="fetchMessages($event.detail[0])"
-        @fetch-more-rooms="fetchRooms"
-        @add-room="toggleUserSearch"
-        @show-demo-options="showDemoOptions = $event"
-        @open-user-tag="redirectToUserProfile($event.detail[0])"
-        @open-file="openFile($event.detail[0].file.file)"
-      >
-        <div
-          v-if="selectedRoom && selectedRoom.roomId"
-          slot="room-options"
-          class="chat-room-options"
-        >
-          <ds-flex v-if="singleRoom">
-            <ds-flex-item centered class="single-chat-bubble">
-              <nuxt-link :to="{ name: 'chat' }">
-                <base-button icon="expand" size="small" circle />
-              </nuxt-link>
-            </ds-flex-item>
-            <ds-flex-item centered>
-              <div class="vac-svg-button vac-room-options">
-                <slot name="menu-icon">
-                  <base-button
-                    icon="close"
-                    size="small"
-                    circle
-                    @click="$emit('close-single-room', true)"
-                  />
-                </slot>
-              </div>
-            </ds-flex-item>
-          </ds-flex>
-        </div>
-
-        <div slot="room-header-avatar">
-          <div
-            v-if="selectedRoom && selectedRoom.avatar"
-            class="vac-avatar"
-            :style="{ 'background-image': `url('${selectedRoom.avatar}')` }"
-          />
-          <div v-else-if="selectedRoom" class="vac-avatar">
-            <span class="initials">{{ getInitialsName(selectedRoom.roomName) }}</span>
+  <vue-advanced-chat
+    :theme="theme"
+    :current-user-id="currentUser.id"
+    :room-id="computedRoomId"
+    :template-actions="JSON.stringify(templatesText)"
+    :menu-actions="JSON.stringify(menuActions)"
+    :text-messages="JSON.stringify(textMessages)"
+    :message-actions="messageActions"
+    :messages="JSON.stringify(messages)"
+    :messages-loaded="messagesLoaded"
+    :rooms="JSON.stringify(rooms)"
+    :room-actions="JSON.stringify(roomActions)"
+    :rooms-loaded="roomsLoaded"
+    :loading-rooms="loadingRooms"
+    :media-preview-enabled="isSafari ? 'false' : 'true'"
+    show-files="true"
+    show-audio="true"
+    capture-files="true"
+    :height="'calc(100dvh - 190px)'"
+    :styles="JSON.stringify(computedChatStyle)"
+    :show-footer="true"
+    :responsive-breakpoint="responsiveBreakpoint"
+    :single-room="singleRoom"
+    show-reaction-emojis="false"
+    @send-message="sendMessage($event.detail[0])"
+    @fetch-messages="fetchMessages($event.detail[0])"
+    @fetch-more-rooms="fetchRooms"
+    @add-room="toggleUserSearch"
+    @show-demo-options="showDemoOptions = $event"
+    @open-user-tag="redirectToUserProfile($event.detail[0])"
+    @open-file="openFile($event.detail[0].file.file)"
+  >
+    <div v-if="selectedRoom && selectedRoom.roomId" slot="room-options" class="chat-room-options">
+      <ds-flex v-if="singleRoom">
+        <ds-flex-item centered class="single-chat-bubble">
+          <nuxt-link :to="{ name: 'chat' }">
+            <base-button icon="expand" size="small" circle />
+          </nuxt-link>
+        </ds-flex-item>
+        <ds-flex-item centered>
+          <div class="vac-svg-button vac-room-options">
+            <slot name="menu-icon">
+              <base-button
+                icon="close"
+                size="small"
+                circle
+                @click="$emit('close-single-room', true)"
+              />
+            </slot>
           </div>
-        </div>
+        </ds-flex-item>
+      </ds-flex>
+    </div>
 
-        <div
-          v-for="message in messages.filter((m) => m.isUploading)"
-          :slot="'message_' + message._id"
-          v-bind:key="message._id"
-          class="vac-format-message-wrapper"
-        >
-          <div class="markdown">
-            <p>{{ $t('chat.transmitting') }}</p>
-          </div>
-        </div>
+    <div slot="room-header-avatar">
+      <div
+        v-if="selectedRoom && selectedRoom.avatar"
+        class="vac-avatar"
+        :style="{ 'background-image': `url('${selectedRoom.avatar}')` }"
+      />
+      <div v-else-if="selectedRoom" class="vac-avatar">
+        <span class="initials">{{ getInitialsName(selectedRoom.roomName) }}</span>
+      </div>
+    </div>
 
-        <div v-for="room in rooms" :slot="'room-list-avatar_' + room.id" :key="room.id">
-          <div
-            v-if="room.avatar"
-            class="vac-avatar"
-            :style="{ 'background-image': `url('${room.avatar}')` }"
-          />
-          <div v-else class="vac-avatar">
-            <span class="initials">{{ getInitialsName(room.roomName) }}</span>
-          </div>
-        </div>
-      </vue-advanced-chat>
-    </client-only>
-  </div>
+    <div
+      v-for="message in messages.filter((m) => m.isUploading)"
+      :slot="'message_' + message._id"
+      v-bind:key="message._id"
+      class="vac-format-message-wrapper"
+    >
+      <div class="markdown">
+        <p>{{ $t('chat.transmitting') }}</p>
+      </div>
+    </div>
+
+    <div v-for="room in rooms" :slot="'room-list-avatar_' + room.id" :key="room.id">
+      <div
+        v-if="room.avatar"
+        class="vac-avatar"
+        :style="{ 'background-image': `url('${room.avatar}')` }"
+      />
+      <div v-else class="vac-avatar">
+        <span class="initials">{{ getInitialsName(room.roomName) }}</span>
+      </div>
+    </div>
+  </vue-advanced-chat>
 </template>
 
 <script>
@@ -228,6 +221,9 @@ export default {
 
       return roomId
     },
+    isSafari() {
+      return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+    },
     textMessages() {
       return {
         ROOMS_EMPTY: this.$t('chat.roomsEmpty'),
@@ -516,6 +512,11 @@ export default {
 
     openFile: async function (file) {
       if (!file || !file.url) return
+
+      /* For videos, this function is called only on Safari.
+         We don't want to download video files when clicking on them. */
+      if (file.type.startsWith('video/')) return
+
       /* To make the browser download the file instead of opening it, it needs to be
          from the same origin or from local blob storage. So we fetch it first
          and then create a download link from blob storage. */
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index a75535a84..f255d547a 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -14,7 +14,9 @@
       <modal />
     </client-only>
     <div v-if="getShowChat.showChat" class="chat-modul">
-      <chat singleRoom :roomId="getShowChat.roomID" @close-single-room="closeSingleRoom" />
+      <client-only>
+        <chat singleRoom :roomId="getShowChat.roomID" @close-single-room="closeSingleRoom" />
+      </client-only>
     </div>
   </div>
 </template>
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index 0bb4def38..ffeb6a800 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -5,12 +5,14 @@
       @add-chat-room="addChatRoom"
       @close-user-search="showUserSearch = false"
     />
-    <chat
-      :roomId="getShowChat.showChat ? getShowChat.roomID : null"
-      ref="chat"
-      @toggle-user-search="showUserSearch = !showUserSearch"
-      :show-room="showRoom"
-    />
+    <client-only>
+      <chat
+        :roomId="getShowChat.showChat ? getShowChat.roomID : null"
+        ref="chat"
+        @toggle-user-search="showUserSearch = !showUserSearch"
+        :show-room="showRoom"
+      />
+    </client-only>
   </div>
 </template>