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()
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>
)
}

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":
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"