Use pressable for video controls (#5452)

* use pressable for video controls

* add `as any` to preexisiting bad type

* stop mutating prop

src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {SvgProps} from 'react-native-svg'
 
-import {atoms as a, useTheme} from '#/alf'
-import {Button} from '#/components/Button'
+import {atoms as a, useTheme, web} from '#/alf'
+import {PressableWithHover} from '../../../PressableWithHover'
 
 export function ControlButton({
   active,
@@ -21,19 +21,21 @@ export function ControlButton({
 }) {
   const t = useTheme()
   return (
-    <Button
-      label={active ? activeLabel : inactiveLabel}
+    <PressableWithHover
+      accessibilityRole="button"
+      accessibilityHint={active ? activeLabel : inactiveLabel}
       onPress={onPress}
-      variant="ghost"
-      shape="round"
-      size="large"
-      style={a.p_2xs}
-      hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.1)'}}>
+      style={[
+        a.p_xs,
+        a.rounded_full,
+        web({transition: 'background-color 0.1s'}),
+      ]}
+      hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}>
       {active ? (
         <ActiveIcon fill={t.palette.white} width={20} />
       ) : (
         <InactiveIcon fill={t.palette.white} width={20} />
       )}
-    </Button>
+    </PressableWithHover>
   )
 }

src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx

@@ -358,9 +358,8 @@ export function Controls({
           style={[
             a.flex_1,
             a.px_xs,
-            a.pt_2xs,
-            a.pb_md,
-            a.gap_md,
+            a.pb_sm,
+            a.gap_sm,
             a.flex_row,
             a.align_center,
           ]}>
@@ -373,7 +372,11 @@ export function Controls({
             onPress={onPressPlayPause}
           />
           <View style={a.flex_1} />
-          <Text style={{color: t.palette.white, fontVariant: ['tabular-nums']}}>
+          <Text
+            style={[
+              a.px_xs,
+              {color: t.palette.white, fontVariant: ['tabular-nums']},
+            ]}>
             {formatTime(currentTime)} / {formatTime(duration)}
           </Text>
           {hasSubtitleTrack && (