forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Only allow one `VideoView` to be active at a time, regardless of source (#5131)
+25
-9
+16
-3
src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx
+16
-3
src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx
···
4
4
import {isNative} from '#/platform/detection'
5
5
6
6
const Context = React.createContext<{
7
-
activeSource: string | null
8
-
setActiveSource: (src: string) => void
7
+
activeSource: string
8
+
activeViewId: string | undefined
9
+
setActiveSource: (src: string, viewId: string) => void
9
10
player: VideoPlayer
10
11
} | null>(null)
11
12
···
15
16
}
16
17
17
18
const [activeSource, setActiveSource] = React.useState('')
19
+
const [activeViewId, setActiveViewId] = React.useState<string>()
18
20
19
21
const player = useVideoPlayer(activeSource, p => {
20
22
p.muted = true
···
22
24
p.play()
23
25
})
24
26
27
+
const setActiveSourceOuter = (src: string, viewId: string) => {
28
+
setActiveSource(src)
29
+
setActiveViewId(viewId)
30
+
}
31
+
25
32
return (
26
-
<Context.Provider value={{activeSource, setActiveSource, player}}>
33
+
<Context.Provider
34
+
value={{
35
+
activeSource,
36
+
setActiveSource: setActiveSourceOuter,
37
+
activeViewId,
38
+
player,
39
+
}}>
27
40
{children}
28
41
</Context.Provider>
29
42
)
+9
-6
src/view/com/util/post-embeds/VideoEmbed.tsx
+9
-6
src/view/com/util/post-embeds/VideoEmbed.tsx
···
1
-
import React, {useCallback, useState} from 'react'
1
+
import React, {useCallback, useId, useState} from 'react'
2
2
import {View} from 'react-native'
3
3
import {Image} from 'expo-image'
4
4
import {AppBskyEmbedVideo} from '@atproto/api'
···
17
17
import * as VideoFallback from './VideoEmbedInner/VideoFallback'
18
18
19
19
export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
20
+
const {_} = useLingui()
20
21
const t = useTheme()
21
-
const {activeSource, setActiveSource, player} = useActiveVideoNative()
22
+
const {activeSource, activeViewId, setActiveSource, player} =
23
+
useActiveVideoNative()
24
+
const viewId = useId()
25
+
22
26
const [isFullscreen, setIsFullscreen] = React.useState(false)
23
-
const isActive = embed.playlist === activeSource
24
-
const {_} = useLingui()
27
+
const isActive = embed.playlist === activeSource && activeViewId === viewId
25
28
26
29
const [key, setKey] = useState(0)
27
30
const renderError = useCallback(
···
34
37
35
38
const onChangeStatus = (isVisible: boolean) => {
36
39
if (isVisible) {
37
-
setActiveSource(embed.playlist)
40
+
setActiveSource(embed.playlist, viewId)
38
41
if (!player.playing) {
39
42
player.play()
40
43
}
···
88
91
<Button
89
92
style={[a.absolute, a.inset_0]}
90
93
onPress={() => {
91
-
setActiveSource(embed.playlist)
94
+
setActiveSource(embed.playlist, viewId)
92
95
}}
93
96
label={_(msg`Play video`)}
94
97
color="secondary">