[Video] More adjustments for loading state jank (#5171)

src/view/com/util/post-embeds/VideoEmbed.tsx

@@ -68,7 +68,9 @@ function InnerWrapper({embed}: Props) {
     useActiveVideoNative()
   const viewId = useId()
 
-  const [playerStatus, setPlayerStatus] = useState<VideoPlayerStatus>('loading')
+  const [playerStatus, setPlayerStatus] = useState<
+    VideoPlayerStatus | 'switching'
+  >('loading')
   const [isMuted, setIsMuted] = useState(player.muted)
   const [isFullscreen, setIsFullscreen] = React.useState(false)
   const [timeRemaining, setTimeRemaining] = React.useState(0)
@@ -77,6 +79,8 @@ function InnerWrapper({embed}: Props) {
     isActive &&
     (playerStatus === 'waitingToPlayAtSpecifiedRate' ||
       playerStatus === 'loading')
+  const isSwitching = playerStatus === 'switching'
+  const showOverlay = !isActive || isLoading || isSwitching
 
   // send error up to error boundary
   const [error, setError] = useState<Error | PlayerError | null>(null)
@@ -130,6 +134,7 @@ function InnerWrapper({embed}: Props) {
         player.play()
       }
     } else {
+      setPlayerStatus('switching')
       player.muted = true
       if (player.playing) {
         player.pause()
@@ -148,7 +153,6 @@ function InnerWrapper({embed}: Props) {
           setIsFullscreen={setIsFullscreen}
         />
       ) : null}
-      {!isActive || isLoading ? (
       <View
         style={[
           {
@@ -157,6 +161,7 @@ function InnerWrapper({embed}: Props) {
             bottom: 0,
             left: 0,
             right: 0,
+            display: showOverlay ? 'flex' : 'none',
           },
         ]}>
         <Image
@@ -189,7 +194,6 @@ function InnerWrapper({embed}: Props) {
           )}
         </Button>
       </View>
-      ) : null}
     </VisibilityView>
   )
 }

yarn.lock

@@ -12416,7 +12416,7 @@ expo-updates@~0.25.14:
 
 "expo-video@https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4.tgz":
   version "1.2.4"
-  resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4.tgz#584c17e34f59cb018eed2f4f408b6c94e2a1910f"
+  resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4.tgz#15af07368c72cb847124be9922d5c7a3fe4293a4"
 
 expo-web-browser@~13.0.3:
   version "13.0.3"