[Video] Bundle of minor tweaks (#4904)

* fix bg color

* unique video urls for debug

* improve controls slightly

* mute until fullscreen

---------

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

3 files changed, 45 insertions, 31 deletions

diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 8592f0bec..0071e2401 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -1,4 +1,4 @@
-import React, {memo, useMemo, useState} from 'react'
+import React, {memo, useId, useMemo, useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {
   AppBskyActorDefs,
@@ -137,7 +137,6 @@ let FeedItemInner = ({
   const {openComposer} = useComposerControls()
   const pal = usePalette('default')
   const {_} = useLingui()
-  const gate = useGate()
 
   const href = useMemo(() => {
     const urip = new AtUri(post.uri)
@@ -356,9 +355,7 @@ let FeedItemInner = ({
             postAuthor={post.author}
             onOpenEmbed={onOpenEmbed}
           />
-          {gate('video_debug') && (
-            <VideoEmbed source="https://lumi.jazco.dev/watch/did:plc:q6gjnaw2blty4crticxkmujt/Qmc8w93UpTa2adJHg4ZhnDPrBs1EsbzrekzPcqF5SwusuZ/playlist.m3u8" />
-          )}
+          <VideoDebug />
           <PostCtrls
             post={post}
             record={record}
@@ -501,6 +498,19 @@ function ReplyToLabel({
   )
 }
 
+function VideoDebug() {
+  const gate = useGate()
+  const id = useId()
+
+  if (!gate('video_debug')) return null
+
+  return (
+    <VideoEmbed
+      source={`https://lumi.jazco.dev/watch/did:plc:q6gjnaw2blty4crticxkmujt/Qmc8w93UpTa2adJHg4ZhnDPrBs1EsbzrekzPcqF5SwusuZ/playlist.m3u8?ignore_me_just_testing_frontend_stuff=${id}`}
+    />
+  )
+}
+
 const styles = StyleSheet.create({
   outer: {
     paddingLeft: 10,
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
index cc356fb06..b95b9c809 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
@@ -1,5 +1,6 @@
 import React, {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 {useVideoPlayer} from 'view/com/util/post-embeds/VideoPlayerContext'
@@ -20,7 +21,10 @@ export function VideoEmbedInnerNative() {
       />
       <Controls
         player={player}
-        enterFullscreen={() => ref.current?.enterFullscreen()}
+        enterFullscreen={() => {
+          player.muted = false
+          ref.current?.enterFullscreen()
+        }}
       />
     </View>
   )
@@ -56,34 +60,33 @@ function Controls({
     }
   }, [player])
 
-  if (isNaN(timeRemaining)) {
-    return null
-  }
-
   return (
     <View style={[a.absolute, a.inset_0]}>
-      <View
-        style={[
-          {
-            backgroundColor: 'rgba(0, 0, 0, 0.75',
-            borderRadius: 6,
-            paddingHorizontal: 6,
-            paddingVertical: 3,
-            position: 'absolute',
-            left: 5,
-            bottom: 5,
-          },
-        ]}
-        pointerEvents="none">
-        <Text
+      {!isNaN(timeRemaining) && (
+        <Animated.View
+          entering={FadeIn.duration(100)}
           style={[
-            {color: 'white', fontSize: 12},
-            a.font_bold,
-            android({lineHeight: 1.25}),
-          ]}>
-          {minutes}:{seconds}
-        </Text>
-      </View>
+            {
+              backgroundColor: 'rgba(0, 0, 0, 0.75)',
+              borderRadius: 6,
+              paddingHorizontal: 6,
+              paddingVertical: 3,
+              position: 'absolute',
+              left: 5,
+              bottom: 5,
+            },
+          ]}
+          pointerEvents="none">
+          <Text
+            style={[
+              {color: 'white', fontSize: 12},
+              a.font_bold,
+              android({lineHeight: 1.25}),
+            ]}>
+            {minutes}:{seconds}
+          </Text>
+        </Animated.View>
+      )}
       <Pressable
         onPress={enterFullscreen}
         style={a.flex_1}
diff --git a/src/view/com/util/post-embeds/VideoPlayerContext.tsx b/src/view/com/util/post-embeds/VideoPlayerContext.tsx
index 473343ca4..8f2d11f6b 100644
--- a/src/view/com/util/post-embeds/VideoPlayerContext.tsx
+++ b/src/view/com/util/post-embeds/VideoPlayerContext.tsx
@@ -14,6 +14,7 @@ export function VideoPlayerProvider({
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const player = useExpoVideoPlayer(source, player => {
     player.loop = true
+    player.muted = true
     player.play()
   })