[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>
2024-09-16 21:37:33 +01:00
parent 38c8f01594
commit 8241747fc2
13 changed files with 1148 additions and 911 deletions
@@ -0,0 +1,39 @@
+import React from 'react'
+import {SvgProps} from 'react-native-svg'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
+
+export function ControlButton({
+  active,
+  activeLabel,
+  inactiveLabel,
+  activeIcon: ActiveIcon,
+  inactiveIcon: InactiveIcon,
+  onPress,
+}: {
+  active: boolean
+  activeLabel: string
+  inactiveLabel: string
+  activeIcon: React.ComponentType<Pick<SvgProps, 'fill' | 'width'>>
+  inactiveIcon: React.ComponentType<Pick<SvgProps, 'fill' | 'width'>>
+  onPress: () => void
+}) {
+  const t = useTheme()
+  return (
+    <Button
+      label={active ? activeLabel : inactiveLabel}
+      onPress={onPress}
+      variant="ghost"
+      shape="round"
+      size="medium"
+      style={a.p_2xs}
+      hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.1)'}}>
+      {active ? (
+        <ActiveIcon fill={t.palette.white} width={20} />
+      ) : (
+        <InactiveIcon fill={t.palette.white} width={20} />
+      )}
+    </Button>
+  )
+}