MM-62100 fix download video on playback error

mattermost · Dec 10, 2024 · a9103f9 · a9103f9
1 parent 621ebe0
commit a9103f9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 28 deletions.
diff --git a/app/screens/gallery/video_renderer/error.tsx b/app/screens/gallery/video_renderer/error.tsx
@@ -3,24 +3,23 @@
 
 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({
     container: {
         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 = (
             <Image
                 source={{uri: posterUri}}
@@ -96,7 +95,10 @@ const VideoError = ({filename, height, isDownloading, isRemote, onShouldHideCont
     }
 
     return (
-        <TouchableWithoutFeedback onPress={onShouldHideControls}>
+        <TouchableWithoutFeedback
+            onPress={onShouldHideControls}
+            style={styles.container}
+        >
             <Animated.View style={styles.container}>
                 {poster}
                 <Text
@@ -114,20 +116,15 @@ const VideoError = ({filename, height, isDownloading, isRemote, onShouldHideCont
                             style={styles.unsupported}
                         />
                     </View>
-                    <RectButton
-                        enabled={!isDownloading}
-                        exclusive={true}
+                    <Button
+                        disabled={isDownloading}
                         onPress={handleDownload}
-                        rippleColor={changeOpacity('#fff', 0.16)}
-                    >
-                        <View style={buttonBackgroundStyle(Preferences.THEMES.onyx, 'lg', 'primary', isDownloading ? 'disabled' : 'default')}>
-                            <FormattedText
-                                defaultMessage='Download'
-                                id='video.download'
-                                style={buttonTextStyle(Preferences.THEMES.onyx, 'lg', 'primary', isDownloading ? 'disabled' : 'default')}
-                            />
-                        </View>
-                    </RectButton>
+                        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')}
+                    />
                 </View>
                 }
                 {!isRemote &&

diff --git 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) {