forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Tweak playback handling (#5127)
+26
-10
+22
-9
src/view/com/util/post-embeds/VideoEmbed.tsx
+22
-9
src/view/com/util/post-embeds/VideoEmbed.tsx
···
18
18
19
19
export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
20
20
const t = useTheme()
21
-
const {activeSource, setActiveSource} = useActiveVideoNative()
21
+
const {activeSource, setActiveSource, player} = useActiveVideoNative()
22
+
const [isFullscreen, setIsFullscreen] = React.useState(false)
22
23
const isActive = embed.playlist === activeSource
23
24
const {_} = useLingui()
24
25
···
31
32
)
32
33
const gate = useGate()
33
34
35
+
const onChangeStatus = (isVisible: boolean) => {
36
+
if (isVisible) {
37
+
setActiveSource(embed.playlist)
38
+
if (!player.playing) {
39
+
player.play()
40
+
}
41
+
} else if (!isFullscreen) {
42
+
player.muted = true
43
+
if (player.playing) {
44
+
player.pause()
45
+
}
46
+
}
47
+
}
48
+
34
49
if (!gate('video_view_on_posts')) {
35
50
return null
36
51
}
···
54
69
a.my_xs,
55
70
]}>
56
71
<ErrorBoundary renderError={renderError} key={key}>
57
-
<VisibilityView
58
-
enabled={true}
59
-
onChangeStatus={isVisible => {
60
-
if (isVisible) {
61
-
setActiveSource(embed.playlist)
62
-
}
63
-
}}>
72
+
<VisibilityView enabled={true} onChangeStatus={onChangeStatus}>
64
73
{isActive ? (
65
-
<VideoEmbedInnerNative embed={embed} />
74
+
<VideoEmbedInnerNative
75
+
embed={embed}
76
+
isFullscreen={isFullscreen}
77
+
setIsFullscreen={setIsFullscreen}
78
+
/>
66
79
) : (
67
80
<>
68
81
<Image
+4
-1
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+4
-1
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
···
20
20
21
21
export function VideoEmbedInnerNative({
22
22
embed,
23
+
isFullscreen,
24
+
setIsFullscreen,
23
25
}: {
24
26
embed: AppBskyEmbedVideo.View
27
+
isFullscreen: boolean
28
+
setIsFullscreen: (isFullscreen: boolean) => void
25
29
}) {
26
30
const {_} = useLingui()
27
31
const {player} = useActiveVideoNative()
28
32
const ref = useRef<VideoView>(null)
29
-
const [isFullscreen, setIsFullscreen] = useState(false)
30
33
31
34
const enterFullscreen = useCallback(() => {
32
35
ref.current?.enterFullscreen()