Merge remote-tracking branch 'origin/main' into neue/post-avi

* origin/main:
  [Neue] Handle emoji within custom font (#5449)
  Use pressable for video controls (#5452)
  Resolve source files for fonts, remove hack (#5454)
  changed white (gray_0) text to offwhite (gray_25) (#5453)
  Let Expo/Webpack handle CSS assets (#3942)

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}>

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 && (

src/view/com/util/text/Text.tsx

@@ -56,9 +56,7 @@ export function Text({
     }
 
     if (emoji && !childIsString(children)) {
-      throw new Error(
-        'Text: when <Text emoji />, children can only be strings.',
-      )
+      logger.error('Text: when <Text emoji />, children can only be strings.')
     }
   }