Samuel Newman
fff2c079c2
* attempt some sort of "usurping" system * polling-based active video approach * split into inner component again * click to steal active video * disable findAndActivateVideo on native * new intersectionobserver approach - wip * fix types * disable perf optimisation to allow overflow * make active player indicator subtler, clean up video utils * partially fix double-playing * start working on controls * fullscreen API * get buttons working somewhat * rm source from where it shouldn't be * use video elem as source of truth * fix keyboard nav + mute state * new icons, add fullscreen + time + fix play * unmount when far offscreen + round 2dp * listen globally to clicks rather than blur event * move controls to new file * reduce quality when not active * add hover state to buttons * stop propagation of videoplayer click * move around autoplay effects * increase background contrast * add subtitles button * add stopPropagation to root of video player * clean up VideoWebControls * fix chrome * change quality based on focused state * use autoLevelCapping instead of nextLevel * get subtitle track from stream * always use hlsjs * rework hls into a ref * render player earlier, allowing preload * add error boundary * clean up component structure and organisation * rework fullscreen API * disable fullscreen on iPhone * don't play when ready on pause * debounce buffering * simplify giant list of event listeners * update pref * reduce prop drilling * minimise rerenders in `ActiveViewContext` * restore prop drilling --------- Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com> Co-authored-by: Hailey <me@haileyok.com>
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
|
|
import * as persisted from '#/state/persisted'
|
|
|
|
type StateContext = boolean
|
|
type SetContext = (v: boolean) => void
|
|
|
|
const stateContext = React.createContext<StateContext>(
|
|
Boolean(persisted.defaults.subtitlesEnabled),
|
|
)
|
|
const setContext = React.createContext<SetContext>((_: boolean) => {})
|
|
|
|
export function Provider({children}: {children: React.ReactNode}) {
|
|
const [state, setState] = React.useState(
|
|
Boolean(persisted.get('subtitlesEnabled')),
|
|
)
|
|
|
|
const setStateWrapped = React.useCallback(
|
|
(subtitlesEnabled: persisted.Schema['subtitlesEnabled']) => {
|
|
setState(Boolean(subtitlesEnabled))
|
|
persisted.write('subtitlesEnabled', subtitlesEnabled)
|
|
},
|
|
[setState],
|
|
)
|
|
|
|
React.useEffect(() => {
|
|
return persisted.onUpdate('subtitlesEnabled', nextSubtitlesEnabled => {
|
|
setState(Boolean(nextSubtitlesEnabled))
|
|
})
|
|
}, [setStateWrapped])
|
|
|
|
return (
|
|
<stateContext.Provider value={state}>
|
|
<setContext.Provider value={setStateWrapped}>
|
|
{children}
|
|
</setContext.Provider>
|
|
</stateContext.Provider>
|
|
)
|
|
}
|
|
|
|
export const useSubtitlesEnabled = () => React.useContext(stateContext)
|
|
export const useSetSubtitlesEnabled = () => React.useContext(setContext)
|