diff --git a/app/screens/gallery/video_renderer/error.tsx b/app/screens/gallery/video_renderer/error.tsx index 52ba1248cad..350956fe8c7 100644 --- a/app/screens/gallery/video_renderer/error.tsx +++ b/app/screens/gallery/video_renderer/error.tsx @@ -3,16 +3,16 @@ import {Image} from 'expo-image'; import React, {type Dispatch, type SetStateAction, useCallback, useState} from 'react'; -import {StyleSheet, Text, useWindowDimensions, View} from 'react-native'; -import {RectButton, TouchableWithoutFeedback} from 'react-native-gesture-handler'; +import {useIntl} from 'react-intl'; +import {StyleSheet, Text, TouchableWithoutFeedback, useWindowDimensions, View} from 'react-native'; import Animated from 'react-native-reanimated'; +import Button from '@components/button'; import CompassIcon from '@components/compass_icon'; import FormattedText from '@components/formatted_text'; import {Preferences} from '@constants'; import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles'; import {calculateDimensions} from '@utils/images'; -import {changeOpacity} from '@utils/theme'; import {typography} from '@utils/typography'; const styles = StyleSheet.create({ @@ -20,7 +20,6 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', flex: 1, - maxWidth: 600, }, filename: { color: '#FFF', @@ -59,10 +58,12 @@ type Props = { const VideoError = ({filename, height, isDownloading, isRemote, onShouldHideControls, posterUri, setDownloading, width}: Props) => { const [hasPoster, setHasPoster] = useState(false); const [loadPosterError, setLoadPosterError] = useState(false); + const dimensions = useWindowDimensions(); + const intl = useIntl(); const handleDownload = useCallback(() => { setDownloading(true); - }, []); + }, [setDownloading]); const handlePosterSet = useCallback(() => { setHasPoster(true); @@ -72,11 +73,9 @@ const VideoError = ({filename, height, isDownloading, isRemote, onShouldHideCont setLoadPosterError(true); }, []); - const dimensions = useWindowDimensions(); - const imageDimensions = calculateDimensions(height, width, dimensions.width); - let poster; if (posterUri && !loadPosterError) { + const imageDimensions = calculateDimensions(height, width, dimensions.width); poster = ( + {poster} - - - - - + theme={Preferences.THEMES.onyx} + size={'lg'} + textStyle={buttonTextStyle(Preferences.THEMES.onyx, 'lg', 'primary', isDownloading ? 'disabled' : 'default')} + text={intl.formatMessage({id: 'video.download', defaultMessage: 'Download video'})} + backgroundStyle={buttonBackgroundStyle(Preferences.THEMES.onyx, 'lg', 'primary', isDownloading ? 'disabled' : 'default')} + /> } {!isRemote && diff --git a/app/screens/gallery/video_renderer/index.tsx b/app/screens/gallery/video_renderer/index.tsx index fa96ba37838..3981b6def21 100644 --- a/app/screens/gallery/video_renderer/index.tsx +++ b/app/screens/gallery/video_renderer/index.tsx @@ -128,19 +128,15 @@ const VideoRenderer = ({height, index, initialIndex, item, isPageActive, onShoul const w = width; const h = height - (VIDEO_INSET + GALLERY_FOOTER_HEIGHT + bottom); - if (hasError) { - return {height: 0, width: 0}; - } - return {width: w, height: h}; - }, [hasError, fullscreen.value, height, width]); + }, [width, height, bottom]); const animatedStyle = useAnimatedStyle(() => { return { width: withTiming(dimensionsStyle.width, timingConfig), height: withTiming(dimensionsStyle.height, timingConfig), }; - }, [dimensionsStyle, hasError]); + }, [dimensionsStyle]); useEffect(() => { if (initialIndex === index && videoReady) { diff --git a/app/screens/share_feedback/index.tsx b/app/screens/share_feedback/index.tsx index 65a87f3e4cf..90651e3a99e 100644 --- a/app/screens/share_feedback/index.tsx +++ b/app/screens/share_feedback/index.tsx @@ -170,14 +170,14 @@ const ShareFeedback = ({ emphasis={'tertiary'} onPress={onPressNo} text={intl.formatMessage({id: 'share_feedback.button.no', defaultMessage: 'No, thanks'})} - backgroundStyle={styles.leftButton} + buttonContainerStyle={styles.leftButton} />