[Video] Volume controls on web (#5363)

* split up VideoWebControls

* add basic slider

* logarithmic volume

* integrate mute state

* fix typo

* shared video volume

* rm log

* animate in/out

* disable for touch devices

* remove flicker on touch devices

* more detailed comment

* move into correct context provider

* add minHeight

* hack

* bettern umber

---------

Co-authored-by: Hailey <me@haileyok.com>

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
 }