Fix broken windows

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 &&

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

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}
                                 />
                                 <Button
                                     theme={theme}
                                     size={'lg'}
                                     onPress={onPressYes}
                                     text={intl.formatMessage({id: 'share_feedback.button.yes', defaultMessage: 'Yes'})}
-                                    backgroundStyle={styles.rightButton}
+                                    buttonContainerStyle={styles.rightButton}
                                 />
                             </View>
                         </View>

app/utils/images/index.test.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {Dimensions} from 'react-native';
+import RNUtils from '@mattermost/rnutils';
 
 import {IMAGE_MAX_HEIGHT} from '@constants/image';
 
@@ -11,10 +11,8 @@ import {
     isGifTooLarge,
 } from './index';
 
-jest.mock('react-native', () => ({
-    Dimensions: {
-        get: jest.fn(() => ({width: 800, height: 600})),
-    },
+jest.mock('@mattermost/rnutils', () => ({
+    getWindowDimensions: jest.fn(() => ({width: 800, height: 600})),
 }));
 
 jest.mock('@constants/image', () => ({
@@ -100,7 +98,7 @@ describe('calculateDimensions', () => {
 
 describe('getViewPortWidth', () => {
     beforeEach(() => {
-        (Dimensions.get as jest.Mock).mockReturnValue({width: 800, height: 600});
+        (RNUtils.getWindowDimensions as jest.Mock).mockReturnValue({width: 800, height: 600});
     });
 
     it('should calculate viewport width for normal post', () => {

app/utils/images/index.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {Dimensions} from 'react-native';
+import RNUtils from '@mattermost/rnutils';
 
 import {View} from '@constants';
 import {
@@ -55,7 +55,7 @@ export const calculateDimensions = (height?: number, width?: number, viewPortWid
 };
 
 export function getViewPortWidth(isReplyPost: boolean, tabletOffset = false, imageAttachmentOffset = false) {
-    const {width, height} = Dimensions.get('window');
+    const {width, height} = RNUtils.getWindowDimensions();
     let portraitPostWidth = Math.min(width, height) - VIEWPORT_IMAGE_OFFSET;
 
     if (tabletOffset) {