robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] More adjustments for loading state jank (#5171)
hailey.at
+48
-44
+47
-43
src/view/com/util/post-embeds/VideoEmbed.tsx
+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
+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"