diff options
Diffstat (limited to 'src')
3 files changed, 32 insertions, 38 deletions
diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx index 24802d188..f268bf8db 100644 --- a/src/view/com/util/post-embeds/VideoEmbed.tsx +++ b/src/view/com/util/post-embeds/VideoEmbed.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useState} from 'react' -import {View} from 'react-native' +import {ActivityIndicator, View} from 'react-native' import {ImageBackground} from 'expo-image' import {AppBskyEmbedVideo} from '@atproto/api' import {msg, Trans} from '@lingui/macro' @@ -10,7 +10,6 @@ import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner import {atoms as a} from '#/alf' import {Button} from '#/components/Button' import {useThrottledValue} from '#/components/hooks/useThrottledValue' -import {Loader} from '#/components/Loader' import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' import {ErrorBoundary} from '../ErrorBoundary' import * as VideoFallback from './VideoEmbedInner/VideoFallback' @@ -89,12 +88,9 @@ function InnerWrapper({embed}: Props) { source={{uri: embed.thumbnail}} accessibilityIgnoresInvertColors style={[ + a.absolute, + a.inset_0, { - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, backgroundColor: 'transparent', // If you don't add `backgroundColor` to the styles here, // the play button won't show up on the first render on android 🥴😮💨 display: showOverlay ? 'flex' : 'none', @@ -102,27 +98,29 @@ function InnerWrapper({embed}: Props) { ]} cachePolicy="memory-disk" // Preferring memory cache helps to avoid flicker when re-displaying on android > - <Button - style={[a.flex_1, a.align_center, a.justify_center]} - onPress={() => { - ref.current?.togglePlayback() - }} - label={_(msg`Play video`)} - color="secondary"> - {showSpinner ? ( - <View - style={[ - a.rounded_full, - a.p_xs, - a.align_center, - a.justify_center, - ]}> - <Loader size="2xl" style={{color: 'white'}} /> - </View> - ) : ( - <PlayButtonIcon /> - )} - </Button> + {showOverlay && ( + <Button + style={[a.flex_1, a.align_center, a.justify_center]} + onPress={() => { + ref.current?.togglePlayback() + }} + label={_(msg`Play video`)} + color="secondary"> + {showSpinner ? ( + <View + style={[ + a.rounded_full, + a.p_xs, + a.align_center, + a.justify_center, + ]}> + <ActivityIndicator size="large" color="white" /> + </View> + ) : ( + <PlayButtonIcon /> + )} + </Button> + )} </ImageBackground> </> ) diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx index 66e1df50d..9b082cd95 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx @@ -1,8 +1,8 @@ import React from 'react' import {StyleProp, ViewStyle} from 'react-native' -import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated' +import {View} from 'react-native' -import {atoms as a, native, useTheme} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' /** @@ -26,9 +26,7 @@ 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" style={[ { @@ -52,6 +50,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> ) } |