changes to handle staged videos

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerNative.tsx

@@ -13,7 +13,6 @@ import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
 import {Pause_Filled_Corner0_Rounded as PauseIcon} from '#/components/icons/Pause'
 import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
-import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {useVideoMuteState} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
 import {TimeIndicator} from './TimeIndicator'
 
@@ -23,12 +22,14 @@ export const VideoEmbedInnerNative = React.forwardRef(
       embed,
       setStatus,
       setIsLoading,
-      setIsActive,
+      activeState,
+      setActiveState,
     }: {
       embed: AppBskyEmbedVideo.View
       setStatus: (status: 'playing' | 'paused') => void
       setIsLoading: (isLoading: boolean) => void
-      setIsActive: (isActive: boolean) => void
+      activeState: 'active' | 'inactive' | 'staged'
+      setActiveState: (activeState: 'active' | 'inactive' | 'staged') => void
     },
     ref: React.Ref<{togglePlayback: () => void}>,
   ) {
@@ -60,7 +61,13 @@ export const VideoEmbedInnerNative = React.forwardRef(
           beginMuted={autoplayDisabled ? false : muted}
           style={[a.rounded_sm]}
           onActiveChange={e => {
-            setIsActive(e.nativeEvent.isActive)
+            setActiveState(
+              (
+                e.nativeEvent as unknown as {
+                  state: 'active' | 'inactive' | 'staged'
+                }
+              ).state,
+            )
           }}
           onLoadingChange={e => {
             setIsLoading(e.nativeEvent.isLoading)
@@ -85,8 +92,13 @@ export const VideoEmbedInnerNative = React.forwardRef(
           accessibilityHint=""
         />
         <VideoControls
-          enterFullscreen={() => {
+          activeState={activeState}
+          onPress={() => {
+            if (activeState === 'active') {
               videoRef.current?.enterFullscreen(true)
+            } else {
+              videoRef.current?.togglePlayback()
+            }
           }}
           toggleMuted={() => {
             videoRef.current?.toggleMuted()
@@ -97,20 +109,21 @@ export const VideoEmbedInnerNative = React.forwardRef(
           isPlaying={isPlaying}
           timeRemaining={timeRemaining}
         />
-        <MediaInsetBorder />
       </View>
     )
   },
 )
 
 function VideoControls({
-  enterFullscreen,
+  activeState,
+  onPress,
   toggleMuted,
   togglePlayback,
   timeRemaining,
   isPlaying,
 }: {
-  enterFullscreen: () => void
+  activeState: 'active' | 'inactive' | 'staged'
+  onPress: () => void
   toggleMuted: () => void
   togglePlayback: () => void
   timeRemaining: number
@@ -124,18 +137,25 @@ function VideoControls({
   // 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)
+  const showTime =
+    !isNaN(timeRemaining) &&
+    (activeState === 'active' ? true : timeRemaining > 0)
 
   return (
     <View style={[a.absolute, a.inset_0]}>
       <Pressable
-        onPress={enterFullscreen}
+        onPress={onPress}
         style={a.flex_1}
         accessibilityLabel={_(msg`Video`)}
-        accessibilityHint={_(msg`Enters full screen`)}
+        accessibilityHint={
+          activeState === 'active'
+            ? _(msg`Enters full screen`)
+            : _(msg`Play video`)
+        }
         accessibilityRole="button"
       />
       <ControlButton
+        disabled={activeState !== 'active'}
         onPress={togglePlayback}
         label={isPlaying ? _(msg`Pause`) : _(msg`Play`)}
         accessibilityHint={_(msg`Plays or pauses the video`)}
@@ -148,6 +168,7 @@ function VideoControls({
       </ControlButton>
       {showTime && <TimeIndicator time={timeRemaining} style={{left: 33}} />}
 
+      {activeState === 'active' && (
         <ControlButton
           onPress={toggleMuted}
           label={
@@ -163,6 +184,7 @@ function VideoControls({
             <UnmuteIcon width={13} fill={t.palette.white} />
           )}
         </ControlButton>
+      )}
     </View>
   )
 }
@@ -173,12 +195,14 @@ function ControlButton({
   label,
   accessibilityHint,
   style,
+  disabled,
 }: {
   onPress: () => void
   children: React.ReactNode
   label: string
   accessibilityHint: string
   style?: StyleProp<ViewStyle>
+  disabled?: boolean
 }) {
   return (
     <View
@@ -202,7 +226,8 @@ function ControlButton({
         accessibilityLabel={label}
         accessibilityHint={accessibilityHint}
         accessibilityRole="button"
-        hitSlop={HITSLOP_30}>
+        hitSlop={HITSLOP_30}
+        disabled={disabled}>
         {children}
       </Pressable>
     </View>

src/components/Post/Embed/VideoEmbed/index.tsx

@@ -1,15 +1,17 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {ActivityIndicator, View} from 'react-native'
 import {ImageBackground} from 'expo-image'
 import {type AppBskyEmbedVideo} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {isAndroid} from '#/platform/detection'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, platform, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
+import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 import {VideoEmbedInnerNative} from './VideoEmbedInner/VideoEmbedInnerNative'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'
@@ -81,26 +83,31 @@ export function VideoEmbed({embed, crop}: Props) {
 
 function InnerWrapper({embed}: Props) {
   const {_} = useLingui()
-  const ref = React.useRef<{togglePlayback: () => void}>(null)
+  const ref = useRef<{togglePlayback: () => void}>(null)
 
-  const [status, setStatus] = React.useState<'playing' | 'paused' | 'pending'>(
+  const [status, setStatus] = useState<'playing' | 'paused' | 'pending'>(
     'pending',
   )
-  const [isLoading, setIsLoading] = React.useState(false)
+  const [isLoading, setIsLoading] = useState(false)
-  const [isActive, setIsActive] = React.useState(false)
+  const [activeState, setActiveState] = useState<
-  const showSpinner = useThrottledValue(isActive && isLoading, 100)
+    'active' | 'inactive' | 'staged'
+  >('inactive')
+  const showSpinner = useThrottledValue(
+    activeState === 'active' && isLoading,
+    100,
+  )
 
   const showOverlay =
-    !isActive ||
+    activeState === 'inactive' ||
-    isLoading ||
+    (activeState === 'active' && (isLoading || status === 'pending'))
-    (status === 'paused' && !isActive) ||
-    status === 'pending'
 
-  React.useEffect(() => {
+  useEffect(() => {
-    if (!isActive && status !== 'pending') {
+    if (isAndroid) {
+      if (activeState === 'inactive' && status !== 'pending') {
         setStatus('pending')
       }
-  }, [isActive, status])
+    }
+  }, [activeState, status])
 
   return (
     <>
@@ -108,7 +115,8 @@ function InnerWrapper({embed}: Props) {
         embed={embed}
         setStatus={setStatus}
         setIsLoading={setIsLoading}
-        setIsActive={setIsActive}
+        activeState={activeState}
+        setActiveState={setActiveState}
         ref={ref}
       />
       <ImageBackground
@@ -120,14 +128,26 @@ function InnerWrapper({embed}: Props) {
           {
             backgroundColor: 'transparent', // If you don't add `backgroundColor` to the styles here,
             // the play button won't show up on the first render on android 🥴😮‍💨
-            display: showOverlay ? 'flex' : 'none',
           },
+          // loading videos are black on android and transparent on ios
+          // therefore on ios we can just keep the thumbnail behind the video to reduce flicker
+          // but on android we need to overlay it and just turn it on and off
+          platform({
+            ios: {zIndex: showOverlay ? 1 : -1},
+            android: {display: showOverlay ? 'flex' : 'none'},
+          }),
         ]}
         cachePolicy="memory-disk" // Preferring memory cache helps to avoid flicker when re-displaying on android
       >
         {showOverlay && (
           <Button
-            style={[a.flex_1, a.align_center, a.justify_center]}
+            style={[
+              a.flex_1,
+              a.align_center,
+              a.justify_center,
+              a.absolute,
+              a.inset_0,
+            ]}
             onPress={() => {
               ref.current?.togglePlayback()
             }}
@@ -143,12 +163,15 @@ function InnerWrapper({embed}: Props) {
                 ]}>
                 <ActivityIndicator size="large" color="white" />
               </View>
-            ) : (
+            ) : activeState === 'inactive' ? (
               <PlayButtonIcon />
+            ) : (
+              <View />
             )}
           </Button>
         )}
       </ImageBackground>
+      <MediaInsetBorder />
     </>
   )
 }

src/view/com/composer/videos/VideoPreview.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {View} from 'react-native'
-import {ImagePickerAsset} from 'expo-image-picker'
+import {type ImagePickerAsset} from 'expo-image-picker'
 import {BlueskyVideoView} from '@haileyok/bluesky-video'
 
-import {CompressedVideo} from '#/lib/media/video/types'
+import {type CompressedVideo} from '#/lib/media/video/types'
 import {clamp} from '#/lib/numbers'
 import {useAutoplayDisabled} from '#/state/preferences'
 import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn'