diff options
Diffstat (limited to 'src/view/com/util/post-embeds/VideoEmbedInner')
7 files changed, 40 insertions, 18 deletions
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx index 66e1df50d..75e544aca 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx @@ -1,8 +1,9 @@ -import React from 'react' import {StyleProp, ViewStyle} from 'react-native' -import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' -import {atoms as a, native, useTheme} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' /** @@ -17,6 +18,7 @@ export function TimeIndicator({ style?: StyleProp<ViewStyle> }) { const t = useTheme() + const {_} = useLingui() if (isNaN(time)) { return null @@ -26,10 +28,10 @@ export function TimeIndicator({ const seconds = String(time % 60).padStart(2, '0') return ( - <Animated.View - entering={native(FadeInDown.duration(300))} - exiting={native(FadeOutDown.duration(500))} + <View pointerEvents="none" + accessibilityLabel={_(msg`Time remaining: ${time} seconds`)} + accessibilityHint="" style={[ { backgroundColor: 'rgba(0, 0, 0, 0.5)', @@ -52,6 +54,6 @@ export function TimeIndicator({ ]}> {`${minutes}:${seconds}`} </Text> - </Animated.View> + </View> ) } diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx index 21db54322..215e4c406 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx @@ -1,6 +1,5 @@ import React, {useRef} from 'react' import {Pressable, StyleProp, View, ViewStyle} from 'react-native' -import Animated, {FadeInDown} from 'react-native-reanimated' import {AppBskyEmbedVideo} from '@atproto/api' import {BlueskyVideoView} from '@haileyok/bluesky-video' import {msg} from '@lingui/macro' @@ -182,8 +181,7 @@ function ControlButton({ style?: StyleProp<ViewStyle> }) { return ( - <Animated.View - entering={FadeInDown.duration(300)} + <View style={[ a.absolute, a.rounded_full, @@ -207,6 +205,6 @@ function ControlButton({ hitSlop={HITSLOP_30}> {children} </Pressable> - </Animated.View> + </View> ) } diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx index ef989c4a4..e6882a2f6 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx @@ -1,6 +1,8 @@ import React, {useEffect, useId, useRef, useState} from 'react' import {View} from 'react-native' import {AppBskyEmbedVideo} from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import type * as HlsTypes from 'hls.js' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' @@ -13,11 +15,13 @@ export function VideoEmbedInnerWeb({ active, setActive, onScreen, + lastKnownTime, }: { embed: AppBskyEmbedVideo.View active: boolean setActive: () => void onScreen: boolean + lastKnownTime: React.MutableRefObject<number | undefined> }) { const containerRef = useRef<HTMLDivElement>(null) const videoRef = useRef<HTMLVideoElement>(null) @@ -25,6 +29,7 @@ export function VideoEmbedInnerWeb({ const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false) const [hlsLoading, setHlsLoading] = React.useState(false) const figId = useId() + const {_} = useLingui() // send error up to error boundary const [error, setError] = useState<Error | null>(null) @@ -40,8 +45,17 @@ export function VideoEmbedInnerWeb({ setHlsLoading, }) + useEffect(() => { + if (lastKnownTime.current && videoRef.current) { + videoRef.current.currentTime = lastKnownTime.current + } + }, [lastKnownTime]) + return ( - <View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}> + <View + style={[a.flex_1, a.rounded_md, a.overflow_hidden]} + accessibilityLabel={_(msg`Embedded video player`)} + accessibilityHint=""> <div ref={containerRef} style={{height: '100%', width: '100%'}}> <figure style={{margin: 0, position: 'absolute', inset: 0}}> <video @@ -52,6 +66,9 @@ export function VideoEmbedInnerWeb({ preload="none" muted={!focused} aria-labelledby={embed.alt ? figId : undefined} + onTimeUpdate={e => { + lastKnownTime.current = e.currentTarget.currentTime + }} /> {embed.alt && ( <figcaption 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 8ffe482a8..651046445 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 @@ -23,7 +23,8 @@ export function ControlButton({ return ( <PressableWithHover accessibilityRole="button" - accessibilityHint={active ? activeLabel : inactiveLabel} + accessibilityLabel={active ? activeLabel : inactiveLabel} + accessibilityHint="" onPress={onPress} style={[ a.p_xs, @@ -32,9 +33,9 @@ export function ControlButton({ ]} hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}> {active ? ( - <ActiveIcon fill={t.palette.white} width={20} /> + <ActiveIcon fill={t.palette.white} width={20} aria-hidden /> ) : ( - <InactiveIcon fill={t.palette.white} width={20} /> + <InactiveIcon fill={t.palette.white} width={20} aria-hidden /> )} </PressableWithHover> ) diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx index 44978ad51..74aad64e1 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx @@ -186,7 +186,9 @@ export function Scrubber({ </View> <div ref={circleRef} - aria-label={_(msg`Seek slider`)} + aria-label={_( + msg`Seek slider. Use the arrow keys to seek forwards and backwards, and space to play/pause`, + )} role="slider" aria-valuemax={duration} aria-valuemin={0} 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 acd4d1aae..8e134d221 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 @@ -313,13 +313,14 @@ export function Controls({ onPointerEnter={onPointerMoveEmptySpace} onPointerMove={onPointerMoveEmptySpace} onPointerLeave={onPointerLeaveEmptySpace} - accessibilityHint={_( + accessibilityLabel={_( !focused ? msg`Unmute video` : playing ? msg`Pause video` : msg`Play video`, )} + accessibilityHint="" style={[ a.flex_1, web({cursor: showCursor || !playing ? 'pointer' : 'none'}), @@ -401,7 +402,7 @@ export function Controls({ <ControlButton active={isFullscreen} activeLabel={_(msg`Exit fullscreen`)} - inactiveLabel={_(msg`Fullscreen`)} + inactiveLabel={_(msg`Enter fullscreen`)} activeIcon={ArrowsInIcon} inactiveIcon={ArrowsOutIcon} onPress={onPressFullscreen} diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VolumeControl.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VolumeControl.tsx index 63ac32b10..90ffb9e6b 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VolumeControl.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VolumeControl.tsx @@ -77,6 +77,7 @@ export function VolumeControl({ min={0} max={100} value={sliderVolume} + aria-label={_(msg`Volume`)} style={ // Ridiculous safari hack for old version of safari. Fixed in sonoma beta -h isSafari ? {height: 92, minHeight: '100%'} : {height: '100%'} |