From 712d8465a7645559ca2638d5eda6444534f5eeb0 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Fri, 28 Apr 2023 20:56:03 -0400
Subject: [PATCH] fix small images style (#7310)

---
 app/components/files/file.tsx       | 150 +++++++++++++++-------------
 app/components/files/image_file.tsx |   8 +-
 2 files changed, 86 insertions(+), 72 deletions(-)

diff --git a/app/components/files/file.tsx b/app/components/files/file.tsx
index 7f5f83304..426228602 100644
--- a/app/components/files/file.tsx
+++ b/app/components/files/file.tsx
@@ -99,95 +99,109 @@ const File = ({
         onOptionsPress?.(file);
     }, [file, onOptionsPress]);
 
-    const optionsButton = (
-        <FileOptionsIcon
-            onPress={handleOnOptionsPress}
-            selected={optionSelected}
-        />
-    );
-
-    const fileInfo = (
-        <FileInfo
-            file={file}
-            showDate={showDate}
-            channelName={channelName}
-            onPress={handlePreviewPress}
-        />
-    );
-
-    const renderImageFileOverlay = (
-        <ImageFileOverlay
-            value={nonVisibleImagesCount}
-        />
-    );
-
-    const renderImageFile = (
-        <TouchableWithoutFeedback onPress={onGestureEvent}>
-            <Animated.View style={[styles, asCard ? style.imageVideo : null]}>
-                <ImageFile
-                    file={file}
-                    forwardRef={ref}
-                    inViewPort={inViewPort}
-                    isSingleImage={isSingleImage}
-                    resizeMode={'cover'}
-                    wrapperWidth={wrapperWidth}
-                />
-                {Boolean(nonVisibleImagesCount) && renderImageFileOverlay}
-            </Animated.View>
-        </TouchableWithoutFeedback>
-    );
-
-    const renderVideoFile = (
-        <TouchableWithoutFeedback onPress={onGestureEvent}>
-            <Animated.View style={[styles, asCard ? style.imageVideo : null]}>
-                <VideoFile
-                    file={file}
-                    forwardRef={ref}
-                    inViewPort={inViewPort}
-                    isSingleImage={isSingleImage}
-                    resizeMode={'cover'}
-                    wrapperWidth={wrapperWidth}
-                    updateFileForGallery={updateFileForGallery}
-                    index={index}
-                />
-                {Boolean(nonVisibleImagesCount) && renderImageFileOverlay}
-            </Animated.View>
-        </TouchableWithoutFeedback>
-    );
-
-    const renderDocumentFile = (
-        <View style={style.iconWrapper}>
-            <DocumentFile
-                ref={document}
-                canDownloadFiles={canDownloadFiles}
-                file={file}
-            />
-        </View>
-    );
-
     const renderCardWithImage = (fileIcon: JSX.Element) => {
+        const fileInfo = (
+            <FileInfo
+                file={file}
+                showDate={showDate}
+                channelName={channelName}
+                onPress={handlePreviewPress}
+            />
+        );
+
         return (
             <View style={[style.fileWrapper]}>
                 <View style={style.iconWrapper}>
                     {fileIcon}
                 </View>
                 {fileInfo}
-                {onOptionsPress && optionsButton}
+                {onOptionsPress &&
+                <FileOptionsIcon
+                    onPress={handleOnOptionsPress}
+                    selected={optionSelected}
+                />
+                }
             </View>
         );
     };
 
     let fileComponent;
     if (isVideo(file) && publicLinkEnabled) {
+        const renderVideoFile = (
+            <TouchableWithoutFeedback onPress={onGestureEvent}>
+                <Animated.View style={[styles, asCard ? style.imageVideo : null]}>
+                    <VideoFile
+                        file={file}
+                        forwardRef={ref}
+                        inViewPort={inViewPort}
+                        isSingleImage={isSingleImage}
+                        resizeMode={'cover'}
+                        wrapperWidth={wrapperWidth}
+                        updateFileForGallery={updateFileForGallery}
+                        index={index}
+                    />
+                    {Boolean(nonVisibleImagesCount) &&
+                    <ImageFileOverlay
+                        value={nonVisibleImagesCount}
+                    />
+                    }
+                </Animated.View>
+            </TouchableWithoutFeedback>
+        );
+
         fileComponent = asCard ? renderCardWithImage(renderVideoFile) : renderVideoFile;
     } else if (isImage(file)) {
+        const renderImageFile = (
+            <TouchableWithoutFeedback onPress={onGestureEvent}>
+                <Animated.View style={[styles, asCard ? style.imageVideo : null]}>
+                    <ImageFile
+                        file={file}
+                        forwardRef={ref}
+                        inViewPort={inViewPort}
+                        isSingleImage={isSingleImage}
+                        resizeMode={'cover'}
+                        wrapperWidth={wrapperWidth}
+                    />
+                    {Boolean(nonVisibleImagesCount) &&
+                    <ImageFileOverlay
+                        value={nonVisibleImagesCount}
+                    />
+                    }
+                </Animated.View>
+            </TouchableWithoutFeedback>
+        );
+
         fileComponent = asCard ? renderCardWithImage(renderImageFile) : renderImageFile;
     } else if (isDocument(file)) {
+        const renderDocumentFile = (
+            <View style={style.iconWrapper}>
+                <DocumentFile
+                    ref={document}
+                    canDownloadFiles={canDownloadFiles}
+                    file={file}
+                />
+            </View>
+        );
+
+        const fileInfo = (
+            <FileInfo
+                file={file}
+                showDate={showDate}
+                channelName={channelName}
+                onPress={handlePreviewPress}
+            />
+        );
+
         fileComponent = (
             <View style={[style.fileWrapper]}>
                 {renderDocumentFile}
                 {fileInfo}
-                {onOptionsPress && optionsButton}
+                {onOptionsPress &&
+                <FileOptionsIcon
+                    onPress={handleOnOptionsPress}
+                    selected={optionSelected}
+                />
+                }
             </View>
         );
     } else {
diff --git a/app/components/files/image_file.tsx b/app/components/files/image_file.tsx
index 263863dc4..f935fcc6e 100644
--- a/app/components/files/image_file.tsx
+++ b/app/components/files/image_file.tsx
@@ -63,15 +63,14 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         borderRadius: 5,
     },
     smallImageOverlay: {
-        ...StyleSheet.absoluteFillObject,
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: 4,
+        position: 'absolute',
     },
     singleSmallImageWrapper: {
         height: SMALL_IMAGE_MAX_HEIGHT,
         width: SMALL_IMAGE_MAX_WIDTH,
-        overflow: 'hidden',
     },
 }));
 
@@ -118,7 +117,8 @@ const ImageFile = ({
         return props;
     };
 
-    if (file.height <= SMALL_IMAGE_MAX_HEIGHT || file.width <= SMALL_IMAGE_MAX_WIDTH) {
+    const imageDimensions = getImageDimensions();
+    if (imageDimensions && (imageDimensions.height <= SMALL_IMAGE_MAX_HEIGHT || imageDimensions.width <= SMALL_IMAGE_MAX_WIDTH)) {
         let wrapperStyle: StyleProp<ViewStyle> = style.fileImageWrapper;
         if (isSingleImage) {
             wrapperStyle = style.singleSmallImageWrapper;
@@ -169,7 +169,6 @@ const ImageFile = ({
         );
     }
 
-    const imageDimensions = getImageDimensions();
     image = (
         <ProgressiveImage
             id={file.id!}
@@ -215,6 +214,7 @@ const ImageFile = ({
             </View>
         );
     }
+
     return (
         <View
             style={style.fileImageWrapper}