diff options
Diffstat (limited to 'src/view/com/util/post-embeds/VideoVolumeContext.tsx')
-rw-r--r-- | src/view/com/util/post-embeds/VideoVolumeContext.tsx | 31 |
1 files changed, 23 insertions, 8 deletions
diff --git a/src/view/com/util/post-embeds/VideoVolumeContext.tsx b/src/view/com/util/post-embeds/VideoVolumeContext.tsx index cccb93ba8..6343081da 100644 --- a/src/view/com/util/post-embeds/VideoVolumeContext.tsx +++ b/src/view/com/util/post-embeds/VideoVolumeContext.tsx @@ -1,21 +1,26 @@ import React from 'react' -const Context = React.createContext( - {} as { - muted: boolean - setMuted: (muted: boolean) => void - }, -) +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], + [muted, setMuted, volume, setVolume], ) return <Context.Provider value={value}>{children}</Context.Provider> @@ -28,5 +33,15 @@ export function useVideoVolumeState() { 'useVideoVolumeState must be used within a VideoVolumeProvider', ) } - return context + 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 } |