[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 <[email protected]> (cherry picked from commit 8241747)
bluesky-social · Sep 16, 2024 · ff19f8d · ff19f8d
1 parent 253bca8
commit ff19f8d
Show file tree

Hide file tree

Showing 13 changed files with 1,148 additions and 911 deletions.
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
@@ -258,6 +258,51 @@
     .force-no-clicks * {
       pointer-events: none !important;
     }
+
+    input[type=range][orient=vertical] {
+      writing-mode: vertical-lr;
+      direction: rtl;
+      appearance: slider-vertical;
+      width: 16px;
+      vertical-align: bottom;
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      cursor: pointer;
+    }
+
+    input[type="range"][orient=vertical]::-webkit-slider-runnable-track {
+      background: white;
+      height: 100%;
+      width: 4px;
+      border-radius: 4px;
+    }
+
+    input[type="range"][orient=vertical]::-moz-range-track {
+      background: white;
+      height: 100%;
+      width: 4px;
+      border-radius: 4px;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      border-radius: 50%;
+      background-color: white;
+      height: 16px;
+      width: 16px;
+      margin-left: -6px;
+    }
+
+    input[type="range"][orient=vertical]::-moz-range-thumb {
+      border: none;
+      border-radius: 50%;
+      background-color: white;
+      height: 16px;
+      width: 16px;
+      margin-left: -6px;
+    }
   </style>
   {% include "scripts.html" %}
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">

diff --git a/src/view/com/util/post-embeds/ActiveVideoWebContext.tsx b/src/view/com/util/post-embeds/ActiveVideoWebContext.tsx
@@ -18,7 +18,7 @@ const Context = React.createContext<{
 
 export function Provider({children}: {children: React.ReactNode}) {
   if (!isWeb) {
-    throw new Error('ActiveVideoWebContext may onl be used on web.')
+    throw new Error('ActiveVideoWebContext may only be used on web.')
   }
 
   const [activeViewId, setActiveViewId] = useState<string | null>(null)

diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
@@ -9,7 +9,7 @@ import {useLingui} from '@lingui/react'
 import {HITSLOP_30} from '#/lib/constants'
 import {clamp} from '#/lib/numbers'
 import {useAutoplayDisabled} from '#/state/preferences'
-import {useVideoVolumeState} from 'view/com/util/post-embeds/VideoVolumeContext'
+import {useVideoMuteState} from 'view/com/util/post-embeds/VideoVolumeContext'
 import {atoms as a, useTheme} from '#/alf'
 import {useIsWithinMessage} from '#/components/dms/MessageContext'
 import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
@@ -38,7 +38,7 @@ export const VideoEmbedInnerNative = React.forwardRef(
     const videoRef = useRef<BlueskyVideoView>(null)
     const autoplayDisabled = useAutoplayDisabled()
     const isWithinMessage = useIsWithinMessage()
-    const {muted, setMuted} = useVideoVolumeState()
+    const [muted, setMuted] = useVideoMuteState()
 
     const [isPlaying, setIsPlaying] = React.useState(false)
     const [timeRemaining, setTimeRemaining] = React.useState(0)
@@ -128,7 +128,7 @@ function VideoControls({
 }) {
   const {_} = useLingui()
   const t = useTheme()
-  const {muted} = useVideoVolumeState()
+  const [muted] = useVideoMuteState()
 
   // show countdown when:
   // 1. timeRemaining is a number - was seeing NaNs

diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx
@@ -5,7 +5,7 @@ import Hls from 'hls.js'
 
 import {atoms as a} from '#/alf'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
-import {Controls} from './VideoWebControls'
+import {Controls} from './web-controls/VideoControls'
 
 export function VideoEmbedInnerWeb({
   embed,