animate controls + fade out time after a while (#4913)

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

src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, View} from 'react-native'
-import Animated, {FadeIn} from 'react-native-reanimated'
+import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated'
 import {VideoPlayer, VideoView} from 'expo-video'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -39,7 +39,7 @@ export function VideoEmbedInnerNative() {
       <VideoView
         ref={ref}
         player={player}
-        style={a.flex_1}
+        style={[a.flex_1, a.rounded_sm]}
         nativeControls={true}
         onEnterFullscreen={() => {
           PlatformInfo.setAudioCategory(AudioCategory.Playback)
@@ -86,6 +86,7 @@ function Controls({
       // duration gets reset to 0 on loop
       if (player.duration) setDuration(Math.floor(player.duration))
       setCurrentTime(Math.floor(player.currentTime))
+
       // how often should we update the time?
       // 1000 gets out of sync with the video time
     }, 250)
@@ -113,11 +114,18 @@ function Controls({
     player.muted = muted
   }, [player])
 
+  // show countdown when:
+  // 1. timeRemaining is a number - was seeing NaNs
+  // 2. duration is greater than 0 - means metadata has loaded
+  // 3. we're less than 5 second into the video
+  const showTime = !isNaN(timeRemaining) && duration > 0 && currentTime <= 5
+
   return (
     <View style={[a.absolute, a.inset_0]}>
-      {!isNaN(timeRemaining) && (
+      {showTime && (
         <Animated.View
-          entering={FadeIn.duration(100)}
+          entering={FadeInDown.duration(300)}
+          exiting={FadeOutDown.duration(500)}
           style={[
             {
               backgroundColor: 'rgba(0, 0, 0, 0.75)',
@@ -148,8 +156,9 @@ function Controls({
         accessibilityHint={_(msg`Tap to enter full screen`)}
         accessibilityRole="button"
       />
-      <Pressable
+      {duration > 0 && (
-        onPress={toggleMuted}
+        <Animated.View
+          entering={FadeInDown.duration(300)}
           style={{
             backgroundColor: 'rgba(0, 0, 0, 0.75)',
             borderRadius: 6,
@@ -160,19 +169,22 @@ function Controls({
             right: 5,
             minHeight: 20,
             justifyContent: 'center',
-        }}
+          }}>
+          <Pressable
+            onPress={toggleMuted}
+            style={a.flex_1}
             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>
+        </Animated.View>
+      )}
     </View>
   )
 }