forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Disable autoplay option (preview + web player) (#5167)
* rename setting
* preview (web)
* preview (native)
* improve autoplay disabled behaviour on web
authored by
Samuel Newman
and committed by
GitHub
60b74f7a
d846f5bb
+32
-8
+11
-1
src/view/com/composer/videos/VideoPreview.tsx
+11
-1
src/view/com/composer/videos/VideoPreview.tsx
···
6
6
7
7
import {CompressedVideo} from '#/lib/media/video/types'
8
8
import {clamp} from '#/lib/numbers'
9
+
import {useAutoplayDisabled} from '#/state/preferences'
9
10
import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn'
10
11
import {atoms as a, useTheme} from '#/alf'
12
+
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
11
13
12
14
export function VideoPreview({
13
15
asset,
···
20
22
clear: () => void
21
23
}) {
22
24
const t = useTheme()
25
+
const autoplayDisabled = useAutoplayDisabled()
23
26
const player = useVideoPlayer(video.uri, player => {
24
27
player.loop = true
25
28
player.muted = true
26
-
player.play()
29
+
if (!autoplayDisabled) {
30
+
player.play()
31
+
}
27
32
})
28
33
29
34
let aspectRatio = asset.width / asset.height
···
53
58
contentFit="contain"
54
59
/>
55
60
<ExternalEmbedRemoveBtn onRemove={clear} />
61
+
{autoplayDisabled && (
62
+
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
63
+
<PlayButtonIcon size={48} />
64
+
</View>
65
+
)}
56
66
</View>
57
67
)
58
68
}
+10
-1
src/view/com/composer/videos/VideoPreview.web.tsx
+10
-1
src/view/com/composer/videos/VideoPreview.web.tsx
···
6
6
7
7
import {CompressedVideo} from '#/lib/media/video/types'
8
8
import {clamp} from '#/lib/numbers'
9
+
import {useAutoplayDisabled} from '#/state/preferences'
9
10
import * as Toast from '#/view/com/util/Toast'
10
11
import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn'
11
12
import {atoms as a} from '#/alf'
13
+
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
12
14
13
15
export function VideoPreview({
14
16
asset,
···
23
25
}) {
24
26
const ref = useRef<HTMLVideoElement>(null)
25
27
const {_} = useLingui()
28
+
const autoplayDisabled = useAutoplayDisabled()
26
29
27
30
useEffect(() => {
28
31
if (!ref.current) return
···
66
69
{aspectRatio},
67
70
a.overflow_hidden,
68
71
{backgroundColor: 'black'},
72
+
a.relative,
69
73
]}>
70
74
<ExternalEmbedRemoveBtn onRemove={clear} />
71
75
<video
72
76
ref={ref}
73
77
src={video.uri}
74
78
style={{width: '100%', height: '100%', objectFit: 'cover'}}
75
-
autoPlay
79
+
autoPlay={!autoplayDisabled}
76
80
loop
77
81
muted
78
82
playsInline
79
83
/>
84
+
{autoplayDisabled && (
85
+
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
86
+
<PlayButtonIcon size={48} />
87
+
</View>
88
+
)}
80
89
</View>
81
90
)
82
91
}
+10
-5
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
+10
-5
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
···
111
111
// autoplay/pause based on visibility
112
112
const autoplayDisabled = useAutoplayDisabled()
113
113
useEffect(() => {
114
-
if (active && !autoplayDisabled) {
114
+
if (active) {
115
115
if (onScreen) {
116
-
play()
116
+
if (!autoplayDisabled) play()
117
117
} else {
118
118
pause()
119
119
}
···
151
151
const onPressEmptySpace = useCallback(() => {
152
152
if (!focused) {
153
153
drawFocus()
154
+
if (autoplayDisabled) play()
154
155
} else {
155
156
togglePlayPause()
156
157
}
157
-
}, [togglePlayPause, drawFocus, focused])
158
+
}, [togglePlayPause, drawFocus, focused, autoplayDisabled, play])
158
159
159
160
const onPressPlayPause = useCallback(() => {
160
161
drawFocus()
···
240
241
}, [])
241
242
242
243
const showControls =
243
-
(focused && !playing) || (interactingViaKeypress ? hasFocus : hovered)
244
+
((focused || autoplayDisabled) && !playing) ||
245
+
(interactingViaKeypress ? hasFocus : hovered)
244
246
245
247
return (
246
248
<div
···
273
275
? msg`Pause video`
274
276
: msg`Play video`,
275
277
)}
276
-
style={[a.flex_1, web({cursor: showCursor ? 'pointer' : 'none'})]}
278
+
style={[
279
+
a.flex_1,
280
+
web({cursor: showCursor || !playing ? 'pointer' : 'none'}),
281
+
]}
277
282
onPress={onPressEmptySpace}
278
283
/>
279
284
{!showControls && !focused && duration > 0 && (
+1
-1
src/view/screens/AccessibilitySettings.tsx
+1
-1
src/view/screens/AccessibilitySettings.tsx
···
108
108
<View style={[pal.view, styles.toggleCard]}>
109
109
<ToggleButton
110
110
type="default-light"
111
-
label={_(msg`Disable autoplay for GIFs`)}
111
+
label={_(msg`Disable autoplay for videos and GIFs`)}
112
112
labelType="lg"
113
113
isSelected={autoplayDisabled}
114
114
onPress={() => setAutoplayDisabled(!autoplayDisabled)}