From 0483e2ac0d508450014837286e7ffb7af9f5491d Mon Sep 17 00:00:00 2001
From: Kristina <kristin.fefelova@gmail.com>
Date: Fri, 8 Mar 2024 11:24:59 +0400
Subject: [PATCH] Disable video preload in inbox left panel (#4902)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 .../activity-message/ActivityMessagePresenter.svelte         | 2 ++
 .../src/components/AttachmentDocList.svelte                  | 3 ++-
 .../src/components/AttachmentList.svelte                     | 2 ++
 .../src/components/AttachmentPreview.svelte                  | 3 ++-
 .../src/components/AttachmentVideoPreview.svelte             | 3 ++-
 .../src/components/chat-message/ChatMessagePresenter.svelte  | 5 +++--
 .../src/components/threads/ThreadMessagePresenter.svelte     | 2 ++
 .../inbox/ActivityInboxNotificationPresenter.svelte          | 1 +
 8 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte b/plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte
index 3dbd6842a9..218b2446d8 100644
--- a/plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte
+++ b/plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte
@@ -37,6 +37,7 @@
   export let withShowMore: boolean = true
   export let attachmentImageSize: 'x-large' | undefined = undefined
   export let showLinksPreview = true
+  export let videoPreload = true
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -68,6 +69,7 @@
       withShowMore,
       attachmentImageSize,
       showLinksPreview,
+      videoPreload,
       onClick,
       onReply
     }}
diff --git a/plugins/attachment-resources/src/components/AttachmentDocList.svelte b/plugins/attachment-resources/src/components/AttachmentDocList.svelte
index 099c7e5b26..4a613f890c 100644
--- a/plugins/attachment-resources/src/components/AttachmentDocList.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentDocList.svelte
@@ -24,6 +24,7 @@
   export let value: Doc & { attachments?: number }
   export let attachments: Attachment[] | undefined = undefined
   export let imageSize: AttachmentImageSize = 'auto'
+  export let videoPreload = true
 
   const query = createQuery()
   const savedAttachmentsQuery = createQuery()
@@ -59,4 +60,4 @@
   })
 </script>
 
-<AttachmentList attachments={resAttachments} {savedAttachmentsIds} {imageSize} />
+<AttachmentList attachments={resAttachments} {savedAttachmentsIds} {imageSize} {videoPreload} />
diff --git a/plugins/attachment-resources/src/components/AttachmentList.svelte b/plugins/attachment-resources/src/components/AttachmentList.svelte
index 12a5653411..dc3803a423 100644
--- a/plugins/attachment-resources/src/components/AttachmentList.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentList.svelte
@@ -23,6 +23,7 @@
   export let attachments: Attachment[] = []
   export let savedAttachmentsIds: Ref<Attachment>[] = []
   export let imageSize: AttachmentImageSize | undefined = undefined
+  export let videoPreload = true
 </script>
 
 {#if attachments.length}
@@ -32,6 +33,7 @@
         value={attachment}
         isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false}
         {imageSize}
+        {videoPreload}
       />
     {/each}
   </Scroller>
diff --git a/plugins/attachment-resources/src/components/AttachmentPreview.svelte b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
index 25a4344c3d..c75431d9e8 100644
--- a/plugins/attachment-resources/src/components/AttachmentPreview.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
@@ -33,6 +33,7 @@
   export let listProvider: ListSelectionProvider | undefined = undefined
   export let imageSize: AttachmentImageSize = 'auto'
   export let removable: boolean = false
+  export let videoPreload = true
 
   const dispatch = createEventDispatcher()
 
@@ -69,7 +70,7 @@
   </div>
 {:else if type === 'video'}
   <div class="content buttonContainer flex-center">
-    <AttachmentVideoPreview {value} />
+    <AttachmentVideoPreview {value} preload={videoPreload} />
     <div class="actions conner">
       <AttachmentActions attachment={value} {isSaved} {removable} />
     </div>
diff --git a/plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte b/plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte
index 7f48fea308..552f281453 100644
--- a/plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte
@@ -19,6 +19,7 @@
   import AttachmentPresenter from './AttachmentPresenter.svelte'
 
   export let value: Attachment
+  export let preload = true
 
   const maxSizeRem = 20
   const baseSizeRem = 12
@@ -55,7 +56,7 @@
   }
 </script>
 
-<video controls width={dimensions.width} height={dimensions.height}>
+<video controls width={dimensions.width} height={dimensions.height} preload={preload ? 'auto' : 'none'}>
   <source src={getFileUrl(value.file, 'full', value.name)} />
   <track kind="captions" label={value.name} />
   <div class="container">
diff --git a/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte b/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
index 092c3236aa..52f45a86b5 100644
--- a/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
+++ b/plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte
@@ -48,6 +48,7 @@
   export let withShowMore: boolean = true
   export let attachmentImageSize: AttachmentImageSize = 'auto'
   export let showLinksPreview = true
+  export let videoPreload = true
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -193,7 +194,7 @@
           <ShowMore>
             <div class="clear-mins">
               <MessageViewer message={value.message} />
-              <AttachmentDocList {value} {attachments} imageSize={attachmentImageSize} />
+              <AttachmentDocList {value} {attachments} imageSize={attachmentImageSize} {videoPreload} />
               {#each links as link}
                 <LinkPresenter {link} />
               {/each}
@@ -202,7 +203,7 @@
         {:else}
           <div class="clear-mins">
             <MessageViewer message={value.message} />
-            <AttachmentDocList {value} {attachments} imageSize={attachmentImageSize} />
+            <AttachmentDocList {value} {attachments} imageSize={attachmentImageSize} {videoPreload} />
             {#each links as link}
               <LinkPresenter {link} />
             {/each}
diff --git a/plugins/chunter-resources/src/components/threads/ThreadMessagePresenter.svelte b/plugins/chunter-resources/src/components/threads/ThreadMessagePresenter.svelte
index 8bf7514f06..3b86041624 100644
--- a/plugins/chunter-resources/src/components/threads/ThreadMessagePresenter.svelte
+++ b/plugins/chunter-resources/src/components/threads/ThreadMessagePresenter.svelte
@@ -40,6 +40,7 @@
   export let withShowMore: boolean = true
   export let hoverStyles: 'borderedHover' | 'filledHover' = 'borderedHover'
   export let attachmentImageSize: AttachmentImageSize = 'x-large'
+  export let videoPreload = true
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -76,6 +77,7 @@
     {hoverStyles}
     {withShowMore}
     {attachmentImageSize}
+    {videoPreload}
     showLinksPreview={false}
     {onClick}
     {onReply}
diff --git a/plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte b/plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte
index 55b1593332..2398b83f70 100644
--- a/plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte
+++ b/plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte
@@ -141,6 +141,7 @@
       {actions}
       hoverable={false}
       {withFlatActions}
+      videoPreload={false}
       onReply={() => {
         handleReply(displayMessage)
       }}