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

* rename setting

* preview (web)

* preview (native)

* improve autoplay disabled behaviour on web

4 files changed, 32 insertions, 8 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>
   )
 }
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
index d9b99ef3a..82c0ab7a6 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
@@ -111,9 +111,9 @@ export function Controls({
   // autoplay/pause based on visibility
   const autoplayDisabled = useAutoplayDisabled()
   useEffect(() => {
-    if (active && !autoplayDisabled) {
+    if (active) {
       if (onScreen) {
-        play()
+        if (!autoplayDisabled) play()
       } else {
         pause()
       }
@@ -151,10 +151,11 @@ export function Controls({
   const onPressEmptySpace = useCallback(() => {
     if (!focused) {
       drawFocus()
+      if (autoplayDisabled) play()
     } else {
       togglePlayPause()
     }
-  }, [togglePlayPause, drawFocus, focused])
+  }, [togglePlayPause, drawFocus, focused, autoplayDisabled, play])
 
   const onPressPlayPause = useCallback(() => {
     drawFocus()
@@ -240,7 +241,8 @@ export function Controls({
   }, [])
 
   const showControls =
-    (focused && !playing) || (interactingViaKeypress ? hasFocus : hovered)
+    ((focused || autoplayDisabled) && !playing) ||
+    (interactingViaKeypress ? hasFocus : hovered)
 
   return (
     <div
@@ -273,7 +275,10 @@ export function Controls({
             ? msg`Pause video`
             : msg`Play video`,
         )}
-        style={[a.flex_1, web({cursor: showCursor ? 'pointer' : 'none'})]}
+        style={[
+          a.flex_1,
+          web({cursor: showCursor || !playing ? 'pointer' : 'none'}),
+        ]}
         onPress={onPressEmptySpace}
       />
       {!showControls && !focused && duration > 0 && (
diff --git a/src/view/screens/AccessibilitySettings.tsx b/src/view/screens/AccessibilitySettings.tsx
index 5cb5c6a39..2992e5c7e 100644
--- a/src/view/screens/AccessibilitySettings.tsx
+++ b/src/view/screens/AccessibilitySettings.tsx
@@ -108,7 +108,7 @@ export function AccessibilitySettingsScreen({}: Props) {
         <View style={[pal.view, styles.toggleCard]}>
           <ToggleButton
             type="default-light"
-            label={_(msg`Disable autoplay for GIFs`)}
+            label={_(msg`Disable autoplay for videos and GIFs`)}
             labelType="lg"
             isSelected={autoplayDisabled}
             onPress={() => setAutoplayDisabled(!autoplayDisabled)}