forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Use pressable for video controls (#5452)
* use pressable for video controls
* add `as any` to preexisiting bad type
* stop mutating prop
authored by
Samuel Newman
and committed by
GitHub
443f3a64
5e333d4d
+43
-42
+3
-3
src/view/com/pager/TabBar.tsx
+3
-3
src/view/com/pager/TabBar.tsx
···
1
1
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
2
2
import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
3
3
4
+
import {usePalette} from '#/lib/hooks/usePalette'
5
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
4
6
import {isNative} from '#/platform/detection'
5
-
import {usePalette} from 'lib/hooks/usePalette'
6
-
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
7
7
import {PressableWithHover} from '../util/PressableWithHover'
8
8
import {Text} from '../util/text/Text'
9
9
import {DraggableScrollView} from './DraggableScrollView'
···
131
131
<PressableWithHover
132
132
testID={`${testID}-selector-${i}`}
133
133
key={`${item}-${i}`}
134
-
ref={node => (itemRefs.current[i] = node)}
134
+
ref={node => (itemRefs.current[i] = node as any)}
135
135
onLayout={e => onItemLayout(e, i)}
136
136
style={styles.item}
137
137
hoverStyle={pal.viewLight}
+21
-25
src/view/com/util/PressableWithHover.tsx
+21
-25
src/view/com/util/PressableWithHover.tsx
···
1
-
import React, {
2
-
useState,
3
-
useCallback,
4
-
PropsWithChildren,
5
-
forwardRef,
6
-
Ref,
7
-
} from 'react'
1
+
import React, {forwardRef, PropsWithChildren} from 'react'
8
2
import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
9
-
import {addStyle} from 'lib/styles'
3
+
import {View} from 'react-native'
4
+
5
+
import {addStyle} from '#/lib/styles'
6
+
import {useInteractionState} from '#/components/hooks/useInteractionState'
10
7
11
8
interface PressableWithHover extends PressableProps {
12
9
hoverStyle: StyleProp<ViewStyle>
13
10
}
14
11
15
-
export const PressableWithHover = forwardRef(function PressableWithHoverImpl(
16
-
{
17
-
children,
18
-
style,
19
-
hoverStyle,
20
-
...props
21
-
}: PropsWithChildren<PressableWithHover>,
22
-
ref: Ref<any>,
12
+
export const PressableWithHover = forwardRef<
13
+
View,
14
+
PropsWithChildren<PressableWithHover>
15
+
>(function PressableWithHoverImpl(
16
+
{children, style, hoverStyle, ...props},
17
+
ref,
23
18
) {
24
-
const [isHovering, setIsHovering] = useState(false)
25
-
26
-
const onHoverIn = useCallback(() => setIsHovering(true), [setIsHovering])
27
-
const onHoverOut = useCallback(() => setIsHovering(false), [setIsHovering])
28
-
style =
29
-
typeof style !== 'function' && isHovering
30
-
? addStyle(style, hoverStyle)
31
-
: style
19
+
const {
20
+
state: hovered,
21
+
onIn: onHoverIn,
22
+
onOut: onHoverOut,
23
+
} = useInteractionState()
32
24
33
25
return (
34
26
<Pressable
35
27
{...props}
36
-
style={style}
28
+
style={
29
+
typeof style !== 'function' && hovered
30
+
? addStyle(style, hoverStyle)
31
+
: style
32
+
}
37
33
onHoverIn={onHoverIn}
38
34
onHoverOut={onHoverOut}
39
35
ref={ref}>
+12
-10
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
+12
-10
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
···
1
1
import React from 'react'
2
2
import {SvgProps} from 'react-native-svg'
3
3
4
-
import {atoms as a, useTheme} from '#/alf'
5
-
import {Button} from '#/components/Button'
4
+
import {atoms as a, useTheme, web} from '#/alf'
5
+
import {PressableWithHover} from '../../../PressableWithHover'
6
6
7
7
export function ControlButton({
8
8
active,
···
21
21
}) {
22
22
const t = useTheme()
23
23
return (
24
-
<Button
25
-
label={active ? activeLabel : inactiveLabel}
24
+
<PressableWithHover
25
+
accessibilityRole="button"
26
+
accessibilityHint={active ? activeLabel : inactiveLabel}
26
27
onPress={onPress}
27
-
variant="ghost"
28
-
shape="round"
29
-
size="large"
30
-
style={a.p_2xs}
31
-
hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.1)'}}>
28
+
style={[
29
+
a.p_xs,
30
+
a.rounded_full,
31
+
web({transition: 'background-color 0.1s'}),
32
+
]}
33
+
hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}>
32
34
{active ? (
33
35
<ActiveIcon fill={t.palette.white} width={20} />
34
36
) : (
35
37
<InactiveIcon fill={t.palette.white} width={20} />
36
38
)}
37
-
</Button>
39
+
</PressableWithHover>
38
40
)
39
41
}
+7
-4
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
+7
-4
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
···
358
358
style={[
359
359
a.flex_1,
360
360
a.px_xs,
361
-
a.pt_2xs,
362
-
a.pb_md,
363
-
a.gap_md,
361
+
a.pb_sm,
362
+
a.gap_sm,
364
363
a.flex_row,
365
364
a.align_center,
366
365
]}>
···
373
372
onPress={onPressPlayPause}
374
373
/>
375
374
<View style={a.flex_1} />
376
-
<Text style={{color: t.palette.white, fontVariant: ['tabular-nums']}}>
375
+
<Text
376
+
style={[
377
+
a.px_xs,
378
+
{color: t.palette.white, fontVariant: ['tabular-nums']},
379
+
]}>
377
380
{formatTime(currentTime)} / {formatTime(duration)}
378
381
</Text>
379
382
{hasSubtitleTrack && (