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

* rename setting

* preview (web)

* preview (native)

* improve autoplay disabled behaviour on web

1 files changed, 10 insertions, 1 deletions

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