diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx new file mode 100644 index 00000000..4d07ee78 --- /dev/null +++ b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated' + +import {atoms as a, native, useTheme} from '#/alf' +import {Text} from '#/components/Typography' + +/** + * Absolutely positioned time indicator showing how many seconds are remaining + * Time is in seconds + */ +export function TimeIndicator({time}: {time: number}) { + const t = useTheme() + + if (isNaN(time)) { + return null + } + + const minutes = Math.floor(time / 60) + const seconds = String(time % 60).padStart(2, '0') + + return ( + + + {minutes}:{seconds} + + + ) +} diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx index fa494387..8cbf32a8 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useEffect, useRef, useState} from 'react' import {Pressable, View} from 'react-native' -import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated' +import Animated, {FadeInDown} from 'react-native-reanimated' import {VideoPlayer, VideoView} from 'expo-video' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -10,14 +10,14 @@ import {HITSLOP_30} from '#/lib/constants' import {useAppState} from '#/lib/hooks/useAppState' import {logger} from '#/logger' import {useVideoPlayer} from '#/view/com/util/post-embeds/VideoPlayerContext' -import {android, atoms as a, useTheme} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute' import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker' -import {Text} from '#/components/Typography' import { AudioCategory, PlatformInfo, } from '../../../../../../modules/expo-bluesky-swiss-army' +import {TimeIndicator} from './TimeIndicator' export function VideoEmbedInnerNative() { const player = useVideoPlayer() @@ -86,10 +86,6 @@ function Controls({ Math.floor(player.currentTime), ) - const timeRemaining = duration - currentTime - const minutes = Math.floor(timeRemaining / 60) - const seconds = String(timeRemaining % 60).padStart(2, '0') - useEffect(() => { const interval = setInterval(() => { // duration gets reset to 0 on loop @@ -143,37 +139,12 @@ function Controls({ // 1. timeRemaining is a number - was seeing NaNs // 2. duration is greater than 0 - means metadata has loaded // 3. we're less than 5 second into the video + const timeRemaining = duration - currentTime const showTime = !isNaN(timeRemaining) && duration > 0 && currentTime <= 5 return ( - {showTime && ( - - - {minutes}:{seconds} - - - )} + {showTime && } + {active && !showControls && !focused && ( + + )}