[Video] Disable autoplay option (preview + web player) (#5167)

* rename setting

* preview (web)

* preview (native)

* improve autoplay disabled behaviour on web

2 files changed, 21 insertions, 2 deletions

diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx
index 199a1fff7..28b46bae2 100644
--- a/src/view/com/composer/videos/VideoPreview.tsx
+++ b/src/view/com/composer/videos/VideoPreview.tsx
@@ -6,8 +6,10 @@ import {useVideoPlayer, VideoView} from 'expo-video'
 
 import {CompressedVideo} from '#/lib/media/video/types'
 import {clamp} from '#/lib/numbers'
+import {useAutoplayDisabled} from '#/state/preferences'
 import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn'
 import {atoms as a, useTheme} from '#/alf'
+import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 
 export function VideoPreview({
   asset,
@@ -20,10 +22,13 @@ export function VideoPreview({
   clear: () => void
 }) {
   const t = useTheme()
+  const autoplayDisabled = useAutoplayDisabled()
   const player = useVideoPlayer(video.uri, player => {
     player.loop = true
     player.muted = true
-    player.play()
+    if (!autoplayDisabled) {
+      player.play()
+    }
   })
 
   let aspectRatio = asset.width / asset.height
@@ -53,6 +58,11 @@ export function VideoPreview({
         contentFit="contain"
       />
       <ExternalEmbedRemoveBtn onRemove={clear} />
+      {autoplayDisabled && (
+        <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
+          <PlayButtonIcon size={48} />
+        </View>
+      )}
     </View>
   )
 }
diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx
index 4c44781cf..9473be074 100644
--- a/src/view/com/composer/videos/VideoPreview.web.tsx
+++ b/src/view/com/composer/videos/VideoPreview.web.tsx
@@ -6,9 +6,11 @@ import {useLingui} from '@lingui/react'
 
 import {CompressedVideo} from '#/lib/media/video/types'
 import {clamp} from '#/lib/numbers'
+import {useAutoplayDisabled} from '#/state/preferences'
 import * as Toast from '#/view/com/util/Toast'
 import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn'
 import {atoms as a} from '#/alf'
+import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 
 export function VideoPreview({
   asset,
@@ -23,6 +25,7 @@ export function VideoPreview({
 }) {
   const ref = useRef<HTMLVideoElement>(null)
   const {_} = useLingui()
+  const autoplayDisabled = useAutoplayDisabled()
 
   useEffect(() => {
     if (!ref.current) return
@@ -66,17 +69,23 @@ export function VideoPreview({
         {aspectRatio},
         a.overflow_hidden,
         {backgroundColor: 'black'},
+        a.relative,
       ]}>
       <ExternalEmbedRemoveBtn onRemove={clear} />
       <video
         ref={ref}
         src={video.uri}
         style={{width: '100%', height: '100%', objectFit: 'cover'}}
-        autoPlay
+        autoPlay={!autoplayDisabled}
         loop
         muted
         playsInline
       />
+      {autoplayDisabled && (
+        <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
+          <PlayButtonIcon size={48} />
+        </View>
+      )}
     </View>
   )
 }