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 && (
+
+ )}