[Video] more minor tweaks (#4906)

* update expo-video

* pause when on a different screen

* rm collapsable

* add mute/unmute button

---------

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>

3 files changed, 72 insertions, 14 deletions

diff --git a/package.json b/package.json
index faeee448c..7c6e13afb 100644
--- a/package.json
+++ b/package.json
@@ -139,7 +139,7 @@
     "expo-system-ui": "~3.0.4",
     "expo-task-manager": "~11.8.1",
     "expo-updates": "~0.25.14",
-    "expo-video": "^1.1.10",
+    "expo-video": "^1.2.4",
     "expo-web-browser": "~13.0.3",
     "fast-text-encoding": "^1.0.6",
     "history": "^5.3.0",
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
index b95b9c809..26f6111bc 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
@@ -1,18 +1,37 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import Animated, {FadeIn} from 'react-native-reanimated'
 import {VideoPlayer, VideoView} from 'expo-video'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useIsFocused} from '@react-navigation/native'
 
-import {useVideoPlayer} from 'view/com/util/post-embeds/VideoPlayerContext'
-import {android, atoms as a} from '#/alf'
+import {HITSLOP_30} from '#/lib/constants'
+import {useVideoPlayer} from '#/view/com/util/post-embeds/VideoPlayerContext'
+import {android, atoms as a, useTheme} from '#/alf'
+import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
+import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
 import {Text} from '#/components/Typography'
 
 export function VideoEmbedInnerNative() {
   const player = useVideoPlayer()
   const ref = useRef<VideoView>(null)
+  const isScreenFocused = useIsFocused()
+
+  // pause the video when the screen is not focused
+  useEffect(() => {
+    if (!isScreenFocused) {
+      let wasPlaying = player.playing
+      player.pause()
+
+      return () => {
+        if (wasPlaying) player.play()
+      }
+    }
+  }, [isScreenFocused, player])
 
   return (
-    <View style={[a.flex_1, a.relative]} collapsable={false}>
+    <View style={[a.flex_1, a.relative]}>
       <VideoView
         ref={ref}
         player={player}
@@ -37,6 +56,9 @@ function Controls({
   player: VideoPlayer
   enterFullscreen: () => void
 }) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const [isMuted, setIsMuted] = useState(player.muted)
   const [duration, setDuration] = useState(() => Math.floor(player.duration))
   const [currentTime, setCurrentTime] = useState(() =>
     Math.floor(player.currentTime),
@@ -55,11 +77,21 @@ function Controls({
       // 1000 gets out of sync with the video time
     }, 250)
 
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const sub = player.addListener('volumeChange', ({isMuted}) => {
+      setIsMuted(isMuted)
+    })
+
     return () => {
       clearInterval(interval)
+      sub.remove()
     }
   }, [player])
 
+  const toggleSound = useCallback(() => {
+    player.muted = !player.muted
+  }, [player])
+
   return (
     <View style={[a.absolute, a.inset_0]}>
       {!isNaN(timeRemaining) && (
@@ -74,12 +106,13 @@ function Controls({
               position: 'absolute',
               left: 5,
               bottom: 5,
+              minHeight: 20,
+              justifyContent: 'center',
             },
-          ]}
-          pointerEvents="none">
+          ]}>
           <Text
             style={[
-              {color: 'white', fontSize: 12},
+              {color: t.palette.white, fontSize: 12},
               a.font_bold,
               android({lineHeight: 1.25}),
             ]}>
@@ -90,10 +123,35 @@ function Controls({
       <Pressable
         onPress={enterFullscreen}
         style={a.flex_1}
-        accessibilityLabel="Video"
-        accessibilityHint="Tap to enter full screen"
+        accessibilityLabel={_(msg`Video`)}
+        accessibilityHint={_(msg`Tap to enter full screen`)}
         accessibilityRole="button"
       />
+      <Pressable
+        onPress={toggleSound}
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.75)',
+          borderRadius: 6,
+          paddingHorizontal: 6,
+          paddingVertical: 3,
+          position: 'absolute',
+          bottom: 5,
+          right: 5,
+          minHeight: 20,
+          justifyContent: 'center',
+        }}
+        accessibilityLabel={isMuted ? _(msg`Muted`) : _(msg`Unmuted`)}
+        accessibilityHint={_(msg`Tap to toggle sound`)}
+        accessibilityRole="button"
+        hitSlop={HITSLOP_30}>
+        <Animated.View entering={FadeIn.duration(100)}>
+          {isMuted ? (
+            <MuteIcon width={14} fill={t.palette.white} />
+          ) : (
+            <UnmuteIcon width={14} fill={t.palette.white} />
+          )}
+        </Animated.View>
+      </Pressable>
     </View>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 16547aa3a..ba1227f30 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12302,10 +12302,10 @@ expo-updates@~0.25.14:
     ignore "^5.3.1"
     resolve-from "^5.0.0"
 
-expo-video@^1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/expo-video/-/expo-video-1.1.10.tgz#b47c0d40c21f401236639424bd25d70c09316b7b"
-  integrity sha512-k9ecpgtwAK8Ut8enm8Jv398XkB/uVOyLLqk80M/d8pH9EN5CVrBQ7iEzWlR3quvVUFM7Uf5wRukJ4hk3mZ8NCg==
+expo-video@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/expo-video/-/expo-video-1.2.4.tgz#787342aded4295a1b6864f59227d178b93e1bb53"
+  integrity sha512-pBK9mt7vYAbuPQjCSQxHQ7xrNjbmRheJep7JIStEg57O183/JRfP2blKuXniiSt1HBdZYPdoQnGRa3jGMXB9pg==
 
 expo-web-browser@~13.0.3:
   version "13.0.3"