Use pressable for video controls (#5452)

* use pressable for video controls

* add `as any` to preexisiting bad type

* stop mutating prop

4 files changed, 43 insertions, 42 deletions

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 59bb77e36..d36d794b7 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -1,9 +1,9 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {isNative} from '#/platform/detection'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {Text} from '../util/text/Text'
 import {DraggableScrollView} from './DraggableScrollView'
@@ -131,7 +131,7 @@ export function TabBar({
             <PressableWithHover
               testID={`${testID}-selector-${i}`}
               key={`${item}-${i}`}
-              ref={node => (itemRefs.current[i] = node)}
+              ref={node => (itemRefs.current[i] = node as any)}
               onLayout={e => onItemLayout(e, i)}
               style={styles.item}
               hoverStyle={pal.viewLight}
diff --git a/src/view/com/util/PressableWithHover.tsx b/src/view/com/util/PressableWithHover.tsx
index 77276f184..48659e229 100644
--- a/src/view/com/util/PressableWithHover.tsx
+++ b/src/view/com/util/PressableWithHover.tsx
@@ -1,39 +1,35 @@
-import React, {
-  useState,
-  useCallback,
-  PropsWithChildren,
-  forwardRef,
-  Ref,
-} from 'react'
+import React, {forwardRef, PropsWithChildren} from 'react'
 import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
-import {addStyle} from 'lib/styles'
+import {View} from 'react-native'
+
+import {addStyle} from '#/lib/styles'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
 
 interface PressableWithHover extends PressableProps {
   hoverStyle: StyleProp<ViewStyle>
 }
 
-export const PressableWithHover = forwardRef(function PressableWithHoverImpl(
-  {
-    children,
-    style,
-    hoverStyle,
-    ...props
-  }: PropsWithChildren<PressableWithHover>,
-  ref: Ref<any>,
+export const PressableWithHover = forwardRef<
+  View,
+  PropsWithChildren<PressableWithHover>
+>(function PressableWithHoverImpl(
+  {children, style, hoverStyle, ...props},
+  ref,
 ) {
-  const [isHovering, setIsHovering] = useState(false)
-
-  const onHoverIn = useCallback(() => setIsHovering(true), [setIsHovering])
-  const onHoverOut = useCallback(() => setIsHovering(false), [setIsHovering])
-  style =
-    typeof style !== 'function' && isHovering
-      ? addStyle(style, hoverStyle)
-      : style
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
 
   return (
     <Pressable
       {...props}
-      style={style}
+      style={
+        typeof style !== 'function' && hovered
+          ? addStyle(style, hoverStyle)
+          : style
+      }
       onHoverIn={onHoverIn}
       onHoverOut={onHoverOut}
       ref={ref}>
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
index 6b509d09a..8ffe482a8 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
+++ b/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>
   )
 }
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
index 5bd7e0d17..2d1427347 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
+++ b/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 && (