about summary refs log tree commit diff
path: root/src/view/com/util/post-embeds/VideoVolumeContext.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util/post-embeds/VideoVolumeContext.tsx')
-rw-r--r--src/view/com/util/post-embeds/VideoVolumeContext.tsx31
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
 }