[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, 5 deletions

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 && (