From 21e48bb2d80a5becf3ffdecb1415322e7eae3f14 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 4 Sep 2024 08:00:53 -0700
Subject: [Video] Tweak playback handling (#5127)

---
 src/view/com/util/post-embeds/VideoEmbed.tsx | 31 ++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 9 deletions(-)

(limited to 'src/view/com/util/post-embeds/VideoEmbed.tsx')

diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx
index 55ac18824..03838b662 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.tsx
@@ -18,7 +18,8 @@ import * as VideoFallback from './VideoEmbedInner/VideoFallback'
 
 export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
   const t = useTheme()
-  const {activeSource, setActiveSource} = useActiveVideoNative()
+  const {activeSource, setActiveSource, player} = useActiveVideoNative()
+  const [isFullscreen, setIsFullscreen] = React.useState(false)
   const isActive = embed.playlist === activeSource
   const {_} = useLingui()
 
@@ -31,6 +32,20 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
   )
   const gate = useGate()
 
+  const onChangeStatus = (isVisible: boolean) => {
+    if (isVisible) {
+      setActiveSource(embed.playlist)
+      if (!player.playing) {
+        player.play()
+      }
+    } else if (!isFullscreen) {
+      player.muted = true
+      if (player.playing) {
+        player.pause()
+      }
+    }
+  }
+
   if (!gate('video_view_on_posts')) {
     return null
   }
@@ -54,15 +69,13 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
         a.my_xs,
       ]}>
       <ErrorBoundary renderError={renderError} key={key}>
-        <VisibilityView
-          enabled={true}
-          onChangeStatus={isVisible => {
-            if (isVisible) {
-              setActiveSource(embed.playlist)
-            }
-          }}>
+        <VisibilityView enabled={true} onChangeStatus={onChangeStatus}>
           {isActive ? (
-            <VideoEmbedInnerNative embed={embed} />
+            <VideoEmbedInnerNative
+              embed={embed}
+              isFullscreen={isFullscreen}
+              setIsFullscreen={setIsFullscreen}
+            />
           ) : (
             <>
               <Image
-- 
cgit 1.4.1

