diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx index 83bb2f42..ae3a4a22 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, {FadeIn} from 'react-native-reanimated' +import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated' import {VideoPlayer, VideoView} from 'expo-video' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -39,7 +39,7 @@ export function VideoEmbedInnerNative() { { PlatformInfo.setAudioCategory(AudioCategory.Playback) @@ -86,6 +86,7 @@ function Controls({ // duration gets reset to 0 on loop if (player.duration) setDuration(Math.floor(player.duration)) setCurrentTime(Math.floor(player.currentTime)) + // how often should we update the time? // 1000 gets out of sync with the video time }, 250) @@ -113,11 +114,18 @@ function Controls({ player.muted = muted }, [player]) + // show countdown when: + // 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 showTime = !isNaN(timeRemaining) && duration > 0 && currentTime <= 5 + return ( - {!isNaN(timeRemaining) && ( + {showTime && ( - - - {isMuted ? ( - - ) : ( - - )} + {duration > 0 && ( + + + {isMuted ? ( + + ) : ( + + )} + - + )} ) }