1 files changed, 47 insertions, 0 deletions
diff --git a/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx b/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
new file mode 100644
index 000000000..6343081da
--- /dev/null
+++ b/src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx
@@ -0,0 +1,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
+}