[Video] More adjustments for loading state jank (#5171)
parent
7eb4cd89c5
commit
6eabedd037
|
@ -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,48 +153,47 @@ function InnerWrapper({embed}: Props) {
|
|||
setIsFullscreen={setIsFullscreen}
|
||||
/>
|
||||
) : null}
|
||||
{!isActive || isLoading ? (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
]}>
|
||||
<Image
|
||||
source={{uri: embed.thumbnail}}
|
||||
alt={embed.alt}
|
||||
style={a.flex_1}
|
||||
contentFit="cover"
|
||||
accessibilityIgnoresInvertColors
|
||||
/>
|
||||
<Button
|
||||
style={[a.absolute, a.inset_0]}
|
||||
onPress={() => {
|
||||
setActiveSource(embed.playlist, viewId)
|
||||
}}
|
||||
label={_(msg`Play video`)}
|
||||
color="secondary">
|
||||
{isLoading ? (
|
||||
<View
|
||||
style={[
|
||||
a.rounded_full,
|
||||
a.p_xs,
|
||||
a.absolute,
|
||||
{top: 'auto', left: 'auto'},
|
||||
{backgroundColor: 'rgba(0,0,0,0.5)'},
|
||||
]}>
|
||||
<Loader size="2xl" style={{color: 'white'}} />
|
||||
</View>
|
||||
) : (
|
||||
<PlayButtonIcon />
|
||||
)}
|
||||
</Button>
|
||||
</View>
|
||||
) : null}
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: showOverlay ? 'flex' : 'none',
|
||||
},
|
||||
]}>
|
||||
<Image
|
||||
source={{uri: embed.thumbnail}}
|
||||
alt={embed.alt}
|
||||
style={a.flex_1}
|
||||
contentFit="cover"
|
||||
accessibilityIgnoresInvertColors
|
||||
/>
|
||||
<Button
|
||||
style={[a.absolute, a.inset_0]}
|
||||
onPress={() => {
|
||||
setActiveSource(embed.playlist, viewId)
|
||||
}}
|
||||
label={_(msg`Play video`)}
|
||||
color="secondary">
|
||||
{isLoading ? (
|
||||
<View
|
||||
style={[
|
||||
a.rounded_full,
|
||||
a.p_xs,
|
||||
a.absolute,
|
||||
{top: 'auto', left: 'auto'},
|
||||
{backgroundColor: 'rgba(0,0,0,0.5)'},
|
||||
]}>
|
||||
<Loader size="2xl" style={{color: 'white'}} />
|
||||
</View>
|
||||
) : (
|
||||
<PlayButtonIcon />
|
||||
)}
|
||||
</Button>
|
||||
</View>
|
||||
</VisibilityView>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue