Bluesky app fork with some witchin' additions 💫

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

authored by hailey.at and committed by

GitHub 6eabedd0 7eb4cd89

+48 -44
+47 -43
src/view/com/util/post-embeds/VideoEmbed.tsx
··· 68 68 useActiveVideoNative() 69 69 const viewId = useId() 70 70 71 - const [playerStatus, setPlayerStatus] = useState<VideoPlayerStatus>('loading') 71 + const [playerStatus, setPlayerStatus] = useState< 72 + VideoPlayerStatus | 'switching' 73 + >('loading') 72 74 const [isMuted, setIsMuted] = useState(player.muted) 73 75 const [isFullscreen, setIsFullscreen] = React.useState(false) 74 76 const [timeRemaining, setTimeRemaining] = React.useState(0) ··· 77 79 isActive && 78 80 (playerStatus === 'waitingToPlayAtSpecifiedRate' || 79 81 playerStatus === 'loading') 82 + const isSwitching = playerStatus === 'switching' 83 + const showOverlay = !isActive || isLoading || isSwitching 80 84 81 85 // send error up to error boundary 82 86 const [error, setError] = useState<Error | PlayerError | null>(null) ··· 130 134 player.play() 131 135 } 132 136 } else { 137 + setPlayerStatus('switching') 133 138 player.muted = true 134 139 if (player.playing) { 135 140 player.pause() ··· 148 153 setIsFullscreen={setIsFullscreen} 149 154 /> 150 155 ) : null} 151 - {!isActive || isLoading ? ( 152 - <View 153 - style={[ 154 - { 155 - position: 'absolute', 156 - top: 0, 157 - bottom: 0, 158 - left: 0, 159 - right: 0, 160 - }, 161 - ]}> 162 - <Image 163 - source={{uri: embed.thumbnail}} 164 - alt={embed.alt} 165 - style={a.flex_1} 166 - contentFit="cover" 167 - accessibilityIgnoresInvertColors 168 - /> 169 - <Button 170 - style={[a.absolute, a.inset_0]} 171 - onPress={() => { 172 - setActiveSource(embed.playlist, viewId) 173 - }} 174 - label={_(msg`Play video`)} 175 - color="secondary"> 176 - {isLoading ? ( 177 - <View 178 - style={[ 179 - a.rounded_full, 180 - a.p_xs, 181 - a.absolute, 182 - {top: 'auto', left: 'auto'}, 183 - {backgroundColor: 'rgba(0,0,0,0.5)'}, 184 - ]}> 185 - <Loader size="2xl" style={{color: 'white'}} /> 186 - </View> 187 - ) : ( 188 - <PlayButtonIcon /> 189 - )} 190 - </Button> 191 - </View> 192 - ) : null} 156 + <View 157 + style={[ 158 + { 159 + position: 'absolute', 160 + top: 0, 161 + bottom: 0, 162 + left: 0, 163 + right: 0, 164 + display: showOverlay ? 'flex' : 'none', 165 + }, 166 + ]}> 167 + <Image 168 + source={{uri: embed.thumbnail}} 169 + alt={embed.alt} 170 + style={a.flex_1} 171 + contentFit="cover" 172 + accessibilityIgnoresInvertColors 173 + /> 174 + <Button 175 + style={[a.absolute, a.inset_0]} 176 + onPress={() => { 177 + setActiveSource(embed.playlist, viewId) 178 + }} 179 + label={_(msg`Play video`)} 180 + color="secondary"> 181 + {isLoading ? ( 182 + <View 183 + style={[ 184 + a.rounded_full, 185 + a.p_xs, 186 + a.absolute, 187 + {top: 'auto', left: 'auto'}, 188 + {backgroundColor: 'rgba(0,0,0,0.5)'}, 189 + ]}> 190 + <Loader size="2xl" style={{color: 'white'}} /> 191 + </View> 192 + ) : ( 193 + <PlayButtonIcon /> 194 + )} 195 + </Button> 196 + </View> 193 197 </VisibilityView> 194 198 ) 195 199 }
+1 -1
yarn.lock
··· 12416 12416 12417 12417 "expo-video@https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4.tgz": 12418 12418 version "1.2.4" 12419 - resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4.tgz#584c17e34f59cb018eed2f4f408b6c94e2a1910f" 12419 + resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4.tgz#15af07368c72cb847124be9922d5c7a3fe4293a4" 12420 12420 12421 12421 expo-web-browser@~13.0.3: 12422 12422 version "13.0.3"