forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Remove async resizing from external embed player (#2936)
* remove debug
adjust youtube shorts height
fix webview style
simplify styles
fix resizing
make it more clear
remove async resizes from external player
* remove comment
* ts
* reverse aspect
+48
-84
+14
-14
src/lib/strings/embed-player.ts
+14
-14
src/lib/strings/embed-player.ts
···
343
343
}
344
344
}
345
345
346
-
export function getPlayerHeight({
346
+
export function getPlayerAspect({
347
347
type,
348
-
width,
349
348
hasThumb,
349
+
width,
350
350
}: {
351
351
type: EmbedPlayerParams['type']
352
-
width: number
353
352
hasThumb: boolean
354
-
}) {
355
-
if (!hasThumb) return (width / 16) * 9
353
+
width: number
354
+
}): {aspectRatio?: number; height?: number} {
355
+
if (!hasThumb) return {aspectRatio: 16 / 9}
356
356
357
357
switch (type) {
358
358
case 'youtube_video':
359
359
case 'twitch_video':
360
360
case 'vimeo_video':
361
-
return (width / 16) * 9
361
+
return {aspectRatio: 16 / 9}
362
362
case 'youtube_short':
363
363
if (SCREEN_HEIGHT < 600) {
364
-
return ((width / 9) * 16) / 1.75
364
+
return {aspectRatio: (9 / 16) * 1.75}
365
365
} else {
366
-
return ((width / 9) * 16) / 1.5
366
+
return {aspectRatio: (9 / 16) * 1.5}
367
367
}
368
368
case 'spotify_album':
369
369
case 'apple_music_album':
370
370
case 'apple_music_playlist':
371
371
case 'spotify_playlist':
372
372
case 'soundcloud_set':
373
-
return 380
373
+
return {height: 380}
374
374
case 'spotify_song':
375
375
if (width <= 300) {
376
-
return 155
376
+
return {height: 155}
377
377
}
378
-
return 232
378
+
return {height: 232}
379
379
case 'soundcloud_track':
380
-
return 165
380
+
return {height: 165}
381
381
case 'apple_music_song':
382
-
return 150
382
+
return {height: 150}
383
383
default:
384
-
return width
384
+
return {aspectRatio: 16 / 9}
385
385
}
386
386
}
387
387
+7
-3
src/view/com/util/EventStopper.tsx
+7
-3
src/view/com/util/EventStopper.tsx
···
1
1
import React from 'react'
2
-
import {View} from 'react-native'
2
+
import {View, ViewStyle} from 'react-native'
3
3
4
4
/**
5
5
* This utility function captures events and stops
6
6
* them from propagating upwards.
7
7
*/
8
-
export function EventStopper({children}: React.PropsWithChildren<{}>) {
8
+
export function EventStopper({
9
+
children,
10
+
style,
11
+
}: React.PropsWithChildren<{style?: ViewStyle | ViewStyle[]}>) {
9
12
const stop = (e: any) => {
10
13
e.stopPropagation()
11
14
}
···
15
18
onTouchEnd={stop}
16
19
// @ts-ignore web only -prf
17
20
onClick={stop}
18
-
onKeyDown={stop}>
21
+
onKeyDown={stop}
22
+
style={style}>
19
23
{children}
20
24
</View>
21
25
)
+27
-67
src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
+27
-67
src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
···
21
21
import {useLingui} from '@lingui/react'
22
22
import {useNavigation} from '@react-navigation/native'
23
23
import {AppBskyEmbedExternal} from '@atproto/api'
24
-
import {EmbedPlayerParams, getPlayerHeight} from 'lib/strings/embed-player'
24
+
import {EmbedPlayerParams, getPlayerAspect} from 'lib/strings/embed-player'
25
25
import {EventStopper} from '../EventStopper'
26
26
import {isNative} from 'platform/detection'
27
27
import {NavigationProp} from 'lib/routes/types'
···
67
67
68
68
// This renders the webview/youtube player as a separate layer
69
69
function Player({
70
-
height,
71
70
params,
72
71
onLoad,
73
72
isPlayerActive,
74
73
}: {
75
74
isPlayerActive: boolean
76
75
params: EmbedPlayerParams
77
-
height: number
78
76
onLoad: () => void
79
77
}) {
80
78
// ensures we only load what's requested
···
91
89
if (!isPlayerActive) return null
92
90
93
91
return (
94
-
<View style={[styles.layer, styles.playerLayer]}>
95
-
<EventStopper>
96
-
<View style={{height, width: '100%'}}>
97
-
<WebView
98
-
javaScriptEnabled={true}
99
-
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
100
-
mediaPlaybackRequiresUserAction={false}
101
-
allowsInlineMediaPlayback
102
-
bounces={false}
103
-
allowsFullscreenVideo
104
-
nestedScrollEnabled
105
-
source={{uri: params.playerUri}}
106
-
onLoad={onLoad}
107
-
setSupportMultipleWindows={false} // Prevent any redirects from opening a new window (ads)
108
-
style={[styles.webview, styles.topRadius]}
109
-
/>
110
-
</View>
111
-
</EventStopper>
112
-
</View>
92
+
<EventStopper style={[styles.layer, styles.playerLayer]}>
93
+
<WebView
94
+
javaScriptEnabled={true}
95
+
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
96
+
mediaPlaybackRequiresUserAction={false}
97
+
allowsInlineMediaPlayback
98
+
bounces={false}
99
+
allowsFullscreenVideo
100
+
nestedScrollEnabled
101
+
source={{uri: params.playerUri}}
102
+
onLoad={onLoad}
103
+
style={styles.webview}
104
+
setSupportMultipleWindows={false} // Prevent any redirects from opening a new window (ads)
105
+
/>
106
+
</EventStopper>
113
107
)
114
108
}
115
109
···
129
123
130
124
const [isPlayerActive, setPlayerActive] = React.useState(false)
131
125
const [isLoading, setIsLoading] = React.useState(true)
132
-
const [dim, setDim] = React.useState({
133
-
width: 0,
134
-
height: 0,
135
-
})
136
126
137
-
const viewRef = useAnimatedRef()
127
+
const aspect = React.useMemo(() => {
128
+
return getPlayerAspect({
129
+
type: params.type,
130
+
width: windowDims.width,
131
+
hasThumb: !!link.thumb,
132
+
})
133
+
}, [params.type, windowDims.width, link.thumb])
138
134
135
+
const viewRef = useAnimatedRef()
139
136
const frameCallback = useFrameCallback(() => {
140
137
const measurement = measure(viewRef)
141
138
if (!measurement) return
···
180
177
}
181
178
}, [navigation, isPlayerActive, frameCallback])
182
179
183
-
// calculate height for the player and the screen size
184
-
const height = React.useMemo(
185
-
() =>
186
-
getPlayerHeight({
187
-
type: params.type,
188
-
width: dim.width,
189
-
hasThumb: !!link.thumb,
190
-
}),
191
-
[params.type, dim.width, link.thumb],
192
-
)
193
-
194
180
const onLoad = React.useCallback(() => {
195
181
setIsLoading(false)
196
182
}, [])
···
216
202
[externalEmbedsPrefs, openModal, params.source],
217
203
)
218
204
219
-
// measure the layout to set sizing
220
-
const onLayout = React.useCallback(
221
-
(event: {nativeEvent: {layout: {width: any; height: any}}}) => {
222
-
setDim({
223
-
width: event.nativeEvent.layout.width,
224
-
height: event.nativeEvent.layout.height,
225
-
})
226
-
},
227
-
[],
228
-
)
229
-
230
205
return (
231
-
<Animated.View
232
-
ref={viewRef}
233
-
style={{height}}
234
-
collapsable={false}
235
-
onLayout={onLayout}>
206
+
<Animated.View ref={viewRef} collapsable={false} style={[aspect]}>
236
207
{link.thumb && (!isPlayerActive || isLoading) && (
237
208
<Image
238
-
style={[
239
-
{
240
-
width: dim.width,
241
-
height,
242
-
},
243
-
styles.topRadius,
244
-
]}
209
+
style={[{flex: 1}, styles.topRadius]}
245
210
source={{uri: link.thumb}}
246
211
accessibilityIgnoresInvertColors
247
212
/>
···
251
216
isPlayerActive={isPlayerActive}
252
217
onPress={onPlayPress}
253
218
/>
254
-
<Player
255
-
isPlayerActive={isPlayerActive}
256
-
params={params}
257
-
height={height}
258
-
onLoad={onLoad}
259
-
/>
219
+
<Player isPlayerActive={isPlayerActive} params={params} onLoad={onLoad} />
260
220
</Animated.View>
261
221
)
262
222
}