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