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
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import React from 'react'
import {type EmbedPlayerSource} from '#/lib/strings/embed-player'
import * as persisted from '#/state/persisted'
type StateContext = persisted.Schema['externalEmbeds']
type SetContext = (
source: EmbedPlayerSource,
value: 'show' | 'hide' | undefined,
) => void
const stateContext = React.createContext<StateContext>(
persisted.defaults.externalEmbeds,
)
stateContext.displayName = 'ExternalEmbedsPrefsStateContext'
const setContext = React.createContext<SetContext>({} as SetContext)
setContext.displayName = 'ExternalEmbedsPrefsSetContext'
export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = React.useState(persisted.get('externalEmbeds'))
const setStateWrapped = React.useCallback(
(source: EmbedPlayerSource, value: 'show' | 'hide' | undefined) => {
setState(prev => {
persisted.write('externalEmbeds', {
...prev,
[source]: value,
})
return {
...prev,
[source]: value,
}
})
},
[setState],
)
React.useEffect(() => {
return persisted.onUpdate('externalEmbeds', nextExternalEmbeds => {
setState(nextExternalEmbeds)
})
}, [setStateWrapped])
return (
<stateContext.Provider value={state}>
<setContext.Provider value={setStateWrapped}>
{children}
</setContext.Provider>
</stateContext.Provider>
)
}
export function useExternalEmbedsPrefs() {
return React.useContext(stateContext)
}
export function useSetExternalEmbedPref() {
return React.useContext(setContext)
}
|
