feat: autoplay videos when previewing (#1036)

app/assets/javascripts/Components/Files/FilePreviewModal.tsx

@@ -4,7 +4,7 @@ import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { addToast, ToastType } from '@standardnotes/stylekit'
 import { NoPreviewIllustration } from '@standardnotes/icons'
 import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { getFileIconComponent } from '@/Components/AttachedFilesPopover/PopoverFileItem'
 import { Button } from '@/Components/Button/Button'
 import { Icon } from '@/Components/Icon/Icon'
@@ -87,7 +87,8 @@ export const FilePreviewModal: FunctionComponent<Props> = observer(({ applicatio
     }
   }, [currentFile, getObjectUrl, objectUrl])
 
-  const keyDownHandler = (event: KeyboardEvent) => {
+  const keyDownHandler = useCallback(
+    (event: KeyboardEvent) => {
       if (event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right) {
         return
       }
@@ -114,7 +115,18 @@ export const FilePreviewModal: FunctionComponent<Props> = observer(({ applicatio
           break
         }
       }
-  }
+    },
+    [currentFile.uuid, otherFiles, setCurrentFile],
+  )
+
+  const IconComponent = useMemo(
+    () =>
+      getFileIconComponent(
+        application.iconsController.getIconForFileType(currentFile.mimeType),
+        'w-6 h-6 flex-shrink-0',
+      ),
+    [application.iconsController, currentFile.mimeType],
+  )
 
   return (
     <DialogOverlay
@@ -139,12 +151,7 @@ export const FilePreviewModal: FunctionComponent<Props> = observer(({ applicatio
           onKeyDown={keyDownHandler}
         >
           <div className="flex items-center">
-            <div className="w-6 h-6">
+            <div className="w-6 h-6">{IconComponent}</div>
-              {getFileIconComponent(
-                application.iconsController.getIconForFileType(currentFile.mimeType),
-                'w-6 h-6 flex-shrink-0',
-              )}
-            </div>
             <span className="ml-3 font-medium">{currentFile.name}</span>
           </div>
           <div className="flex items-center">

app/assets/javascripts/Components/Files/PreviewComponent.tsx

@@ -13,7 +13,7 @@ export const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl })
   }
 
   if (file.mimeType.startsWith('video/')) {
-    return <video className="w-full h-full" src={objectUrl} controls />
+    return <video className="w-full h-full" src={objectUrl} controls autoPlay />
   }
 
   if (file.mimeType.startsWith('audio/')) {