diff options
| -rw-r--r-- | src/view/com/util/post-embeds/VideoEmbed.tsx | 90 | ||||
| -rw-r--r-- | yarn.lock | 2 |
2 files changed, 48 insertions, 44 deletions
diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx index 2dafce7ba..7db25b4d0 100644 --- a/src/view/com/util/post-embeds/VideoEmbed.tsx +++ b/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,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> ) } diff --git a/yarn.lock b/yarn.lock index 3333e2208..cc2330608 100644 --- a/yarn.lock +++ b/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" |