zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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

zio/stable
Hailey 2024-09-05 14:54:09 -07:00 committed by GitHub
parent 7eb4cd89c5
commit 6eabedd037
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/view/com/util/post-embeds/VideoEmbed.tsx
View File

@ -68,7 +68,9 @@ function InnerWrapper({embed}: Props) {
useActiveVideoNative() useActiveVideoNative()
const viewId = useId() const viewId = useId()
const [playerStatus, setPlayerStatus] = useState<VideoPlayerStatus>('loading') const [playerStatus, setPlayerStatus] = useState<
VideoPlayerStatus | 'switching'
>('loading')
const [isMuted, setIsMuted] = useState(player.muted) const [isMuted, setIsMuted] = useState(player.muted)
const [isFullscreen, setIsFullscreen] = React.useState(false) const [isFullscreen, setIsFullscreen] = React.useState(false)
const [timeRemaining, setTimeRemaining] = React.useState(0) const [timeRemaining, setTimeRemaining] = React.useState(0)
@ -77,6 +79,8 @@ function InnerWrapper({embed}: Props) {
isActive && isActive &&
(playerStatus === 'waitingToPlayAtSpecifiedRate' || (playerStatus === 'waitingToPlayAtSpecifiedRate' ||
playerStatus === 'loading') playerStatus === 'loading')
const isSwitching = playerStatus === 'switching'
const showOverlay = !isActive || isLoading || isSwitching
// send error up to error boundary // send error up to error boundary
const [error, setError] = useState<Error | PlayerError | null>(null) const [error, setError] = useState<Error | PlayerError | null>(null)
@ -130,6 +134,7 @@ function InnerWrapper({embed}: Props) {
player.play() player.play()
} }
} else { } else {
setPlayerStatus('switching')
player.muted = true player.muted = true
if (player.playing) { if (player.playing) {
player.pause() player.pause()
@ -148,48 +153,47 @@ function InnerWrapper({embed}: Props) {
setIsFullscreen={setIsFullscreen} setIsFullscreen={setIsFullscreen}
/> />
) : null} ) : null}
{!isActive || isLoading ? ( <View
<View style={[
style={[ {
{ position: 'absolute',
position: 'absolute', top: 0,
top: 0, bottom: 0,
bottom: 0, left: 0,
left: 0, right: 0,
right: 0, display: showOverlay ? 'flex' : 'none',
}, },
]}> ]}>
<Image <Image
source={{uri: embed.thumbnail}} source={{uri: embed.thumbnail}}
alt={embed.alt} alt={embed.alt}
style={a.flex_1} style={a.flex_1}
contentFit="cover" contentFit="cover"
accessibilityIgnoresInvertColors accessibilityIgnoresInvertColors
/> />
<Button <Button
style={[a.absolute, a.inset_0]} style={[a.absolute, a.inset_0]}
onPress={() => { onPress={() => {
setActiveSource(embed.playlist, viewId) setActiveSource(embed.playlist, viewId)
}} }}
label={_(msg`Play video`)} label={_(msg`Play video`)}
color="secondary"> color="secondary">
{isLoading ? ( {isLoading ? (
<View <View
style={[ style={[
a.rounded_full, a.rounded_full,
a.p_xs, a.p_xs,
a.absolute, a.absolute,
{top: 'auto', left: 'auto'}, {top: 'auto', left: 'auto'},
{backgroundColor: 'rgba(0,0,0,0.5)'}, {backgroundColor: 'rgba(0,0,0,0.5)'},
]}> ]}>
<Loader size="2xl" style={{color: 'white'}} /> <Loader size="2xl" style={{color: 'white'}} />
</View> </View>
) : ( ) : (
<PlayButtonIcon /> <PlayButtonIcon />
)} )}
</Button> </Button>
</View> </View>
) : null}
</VisibilityView> </VisibilityView>
) )
} }

2
yarn.lock
View File

@ -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": "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" 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: expo-web-browser@~13.0.3:
version "13.0.3" version "13.0.3"