1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import React from 'react'
const Context = React.createContext<{
// native
muted: boolean
setMuted: React.Dispatch<React.SetStateAction<boolean>>
// web
volume: number
setVolume: React.Dispatch<React.SetStateAction<number>>
} | null>(null)
export function Provider({children}: {children: React.ReactNode}) {
const [muted, setMuted] = React.useState(true)
const [volume, setVolume] = React.useState(1)
const value = React.useMemo(
() => ({
muted,
setMuted,
volume,
setVolume,
}),
[muted, setMuted, volume, setVolume],
)
return <Context.Provider value={value}>{children}</Context.Provider>
}
export function useVideoVolumeState() {
const context = React.useContext(Context)
if (!context) {
throw new Error(
'useVideoVolumeState must be used within a VideoVolumeProvider',
)
}
return [context.volume, context.setVolume] as const
}
export function useVideoMuteState() {
const context = React.useContext(Context)
if (!context) {
throw new Error(
'useVideoMuteState must be used within a VideoVolumeProvider',
)
}
return [context.muted, context.setMuted] as const
}
|
