[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>

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') && (
+          <VideoDebug />
-            <VideoEmbed source="https://lumi.jazco.dev/watch/did:plc:q6gjnaw2blty4crticxkmujt/Qmc8w93UpTa2adJHg4ZhnDPrBs1EsbzrekzPcqF5SwusuZ/playlist.m3u8" />
-          )}
           <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,

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,16 +60,14 @@ function Controls({
     }
   }, [player])
 
-  if (isNaN(timeRemaining)) {
-    return null
-  }
-
   return (
     <View style={[a.absolute, a.inset_0]}>
-      <View
+      {!isNaN(timeRemaining) && (
+        <Animated.View
+          entering={FadeIn.duration(100)}
           style={[
             {
-            backgroundColor: 'rgba(0, 0, 0, 0.75',
+              backgroundColor: 'rgba(0, 0, 0, 0.75)',
               borderRadius: 6,
               paddingHorizontal: 6,
               paddingVertical: 3,
@@ -83,7 +85,8 @@ function Controls({
             ]}>
             {minutes}:{seconds}
           </Text>
-      </View>
+        </Animated.View>
+      )}
       <Pressable
         onPress={enterFullscreen}
         style={a.flex_1}

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()
   })