Fix gallery header & footer as well as download video toast (#6695)

app/screens/gallery/footer/footer.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {DeviceEventEmitter, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import Animated from 'react-native-reanimated';
-import {SafeAreaView, Edge} from 'react-native-safe-area-context';
+import {SafeAreaView, Edge, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {Events} from '@constants';
 import {GALLERY_FOOTER_HEIGHT} from '@constants/gallery';
@@ -39,11 +39,11 @@ type Props = {
 }
 
 const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
-const edges: Edge[] = ['left', 'right', 'bottom'];
+const edges: Edge[] = ['left', 'right'];
 const styles = StyleSheet.create({
     container: {
         alignItems: 'center',
-        backgroundColor: changeOpacity('#000', 0.6),
+        backgroundColor: '#000',
         borderTopColor: changeOpacity('#fff', 0.4),
         borderTopWidth: 1,
         flex: 1,
@@ -71,6 +71,9 @@ const Footer = ({
 }: Props) => {
     const showActions = !hideActions && Boolean(item.id) && !item.id?.startsWith('uid');
     const [action, setAction] = useState<GalleryAction>('none');
+    const {bottom} = useSafeAreaInsets();
+
+    const bottomStyle = useMemo(() => ({height: bottom, backgroundColor: '#000'}), [bottom]);
 
     let overrideIconUrl;
     if (enablePostIconOverride && post?.props?.use_user_icon !== 'true' && post?.props?.override_icon_url) {
@@ -152,6 +155,7 @@ const Footer = ({
                 />
                 }
             </View>
+            <View style={bottomStyle}/>
         </AnimatedSafeAreaView>
     );
 };

app/screens/gallery/header/index.tsx

@@ -5,7 +5,7 @@ import React, {useMemo} from 'react';
 import {StyleProp, StyleSheet, useWindowDimensions, View, ViewStyle} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
-import {SafeAreaView, Edge} from 'react-native-safe-area-context';
+import {SafeAreaView, Edge, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import CompassIcon from '@components/compass_icon';
 import FormattedText from '@components/formatted_text';
@@ -23,7 +23,7 @@ type Props = {
 const styles = StyleSheet.create({
     container: {
         alignItems: 'center',
-        backgroundColor: changeOpacity('#000', 0.6),
+        backgroundColor: '#000',
         borderBottomColor: changeOpacity('#fff', 0.4),
         borderBottomWidth: 1,
         flexDirection: 'row',
@@ -39,12 +39,14 @@ const styles = StyleSheet.create({
     },
 });
 
-const edges: Edge[] = ['left', 'right', 'top'];
+const edges: Edge[] = ['left', 'right'];
 const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 
 const Header = ({index, onClose, style, total}: Props) => {
     const {width} = useWindowDimensions();
     const height = useDefaultHeaderHeight();
+    const {top} = useSafeAreaInsets();
+    const topContainerStyle = useMemo(() => [{height: top, backgroundColor: '#000'}], [top]);
     const containerStyle = useMemo(() => [styles.container, {height}], [height]);
     const iconStyle = useMemo(() => [{width: height}, styles.icon], [height]);
     const titleStyle = useMemo(() => ({width: width - (height * 2)}), [height, width]);
@@ -55,6 +57,7 @@ const Header = ({index, onClose, style, total}: Props) => {
             edges={edges}
             style={style}
         >
+            <Animated.View style={topContainerStyle}/>
             <Animated.View style={containerStyle}>
                 <TouchableOpacity
                     onPress={onClose}

app/screens/gallery/video_renderer/index.tsx

@@ -172,10 +172,7 @@ const VideoRenderer = ({height, index, initialIndex, item, isPageActive, onShoul
     }, [isPageActive.value, paused]);
 
     return (
-        <Animated.View
-            onTouchStart={handleTouchStart}
-            style={styles.video}
-        >
+        <>
             <AnimatedVideo
                 ref={videoRef}
                 source={source}
@@ -189,17 +186,18 @@ const VideoRenderer = ({height, index, initialIndex, item, isPageActive, onShoul
                 onFullscreenPlayerWillPresent={onFullscreenPlayerWillPresent}
                 onReadyForDisplay={onReadyForDisplay}
                 onEnd={onEnd}
+                onTouchStart={handleTouchStart}
             />
             {Platform.OS === 'android' && paused && videoReady &&
-                <Animated.View style={styles.playContainer}>
-                    <CompassIcon
-                        color={changeOpacity('#fff', 0.8)}
-                        style={styles.play}
-                        name='play'
-                        onPress={onPlay}
-                        size={80}
-                    />
-                </Animated.View>
+            <Animated.View style={styles.playContainer}>
+                <CompassIcon
+                    color={changeOpacity('#fff', 0.8)}
+                    style={styles.play}
+                    name='play'
+                    onPress={onPlay}
+                    size={80}
+                />
+            </Animated.View>
             }
             {downloading &&
             <DownloadWithAction
@@ -209,7 +207,7 @@ const VideoRenderer = ({height, index, initialIndex, item, isPageActive, onShoul
                 item={item}
             />
             }
-        </Animated.View>
+        </>
     );
 };