Disable video preload in inbox left panel (#4902)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

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
     }}

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} />

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>

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>

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">

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}

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}

plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte

@@ -141,6 +141,7 @@
       {actions}
       hoverable={false}
       {withFlatActions}
+      videoPreload={false}
       onReply={() => {
         handleReply(displayMessage)
       }}