From 27809d61306e002929974fb7bd7e754ab9ee096a Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 7 Jun 2024 15:15:47 +0530 Subject: [PATCH 1/2] fix: mWeb - Chat - Uploading an image while offline briefly shows an offline message in the preview. Signed-off-by: Krishna Gupta --- src/components/ImageView/index.tsx | 10 ++++++---- src/components/Lightbox/index.tsx | 6 ++++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/ImageView/index.tsx b/src/components/ImageView/index.tsx index f08941ef7d77..da77f93ab65c 100644 --- a/src/components/ImageView/index.tsx +++ b/src/components/ImageView/index.tsx @@ -195,6 +195,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV }; }, [canUseTouchScreen, trackMovement, trackPointerPosition]); + const isLocalFile = url.startsWith('blob:') || url.startsWith('file:'); + if (canUseTouchScreen) { return ( - {((isLoading && !isOffline) || (!isLoading && zoomScale === 0)) && } - {isLoading && } + {((isLoading && (!isOffline || isLocalFile)) || (!isLoading && zoomScale === 0)) && } + {isLoading && !isLocalFile && } ); } @@ -247,8 +249,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV /> - {isLoading && !isOffline && } - {isLoading && } + {isLoading && (!isOffline || isLocalFile) && } + {isLoading && !isLocalFile && } ); } diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx index 0be0171eaa9a..6b3b7557cf58 100644 --- a/src/components/Lightbox/index.tsx +++ b/src/components/Lightbox/index.tsx @@ -197,6 +197,8 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan [onScaleChangedContext, onScaleChangedProp], ); + const isLocalFile = uri.startsWith('blob:') || uri.startsWith('file:'); + return ( )} - {isLoading && } + {isLoading && !isLocalFile && } )} From 1047f73ef9cfefaa2d8dce93c9a7f6e09b73f649 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 19 Jun 2024 03:34:33 +0530 Subject: [PATCH 2/2] add util function for checking local files. Signed-off-by: Krishna Gupta --- src/components/ImageView/index.tsx | 3 ++- src/components/Lightbox/index.tsx | 3 ++- src/libs/ReceiptUtils.ts | 2 +- src/libs/fileDownload/FileUtils.ts | 8 ++++++++ src/pages/iou/request/step/IOURequestStepConfirmation.tsx | 3 ++- 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/ImageView/index.tsx b/src/components/ImageView/index.tsx index da77f93ab65c..c74d9bd5aa52 100644 --- a/src/components/ImageView/index.tsx +++ b/src/components/ImageView/index.tsx @@ -12,6 +12,7 @@ import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import * as FileUtils from '@libs/fileDownload/FileUtils'; import CONST from '@src/CONST'; import viewRef from '@src/types/utils/viewRef'; import type ImageViewProps from './types'; @@ -195,7 +196,7 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV }; }, [canUseTouchScreen, trackMovement, trackPointerPosition]); - const isLocalFile = url.startsWith('blob:') || url.startsWith('file:'); + const isLocalFile = FileUtils.isLocalFile(url); if (canUseTouchScreen) { return ( diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx index 6b3b7557cf58..ea10e104a59d 100644 --- a/src/components/Lightbox/index.tsx +++ b/src/components/Lightbox/index.tsx @@ -12,6 +12,7 @@ import {getCanvasFitScale} from '@components/MultiGestureCanvas/utils'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as FileUtils from '@libs/fileDownload/FileUtils'; import NUMBER_OF_CONCURRENT_LIGHTBOXES from './numberOfConcurrentLightboxes'; const cachedImageDimensions = new Map(); @@ -197,7 +198,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan [onScaleChangedContext, onScaleChangedProp], ); - const isLocalFile = uri.startsWith('blob:') || uri.startsWith('file:'); + const isLocalFile = FileUtils.isLocalFile(uri); return ( , receiptPa return {thumbnail: `${path.substring(0, path.length - 4)}.jpg.1024.jpg`, image: path, filename}; } - const isLocalFile = typeof path === 'number' || path.startsWith('blob:') || path.startsWith('file:') || path.startsWith('/'); + const isLocalFile = FileUtils.isLocalFile(path); const {fileExtension} = FileUtils.splitExtensionFromFileName(filename); return {isThumbnail: true, fileExtension: Object.values(CONST.IOU.FILE_TYPES).find((type) => type === fileExtension), image: path, isLocalFile, filename}; } diff --git a/src/libs/fileDownload/FileUtils.ts b/src/libs/fileDownload/FileUtils.ts index f058ce0f80d8..0ce33a02f95d 100644 --- a/src/libs/fileDownload/FileUtils.ts +++ b/src/libs/fileDownload/FileUtils.ts @@ -252,6 +252,13 @@ function validateImageForCorruption(file: FileObject): Promise { }); } +function isLocalFile(receiptUri?: string | number): boolean { + if (!receiptUri) { + return false; + } + return typeof receiptUri === 'number' || receiptUri?.startsWith('blob:') || receiptUri?.startsWith('file:') || receiptUri?.startsWith('/'); +} + export { showGeneralErrorAlert, showSuccessAlert, @@ -264,5 +271,6 @@ export { appendTimeToFileName, readFileAsync, base64ToFile, + isLocalFile, validateImageForCorruption, }; diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index 1683ef3e3df2..d5dafa58cd9e 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -13,6 +13,7 @@ import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import * as FileUtils from '@libs/fileDownload/FileUtils'; import getCurrentPosition from '@libs/getCurrentPosition'; import * as IOUUtils from '@libs/IOUUtils'; import Log from '@libs/Log'; @@ -204,7 +205,7 @@ function IOURequestStepConfirmation({ // skip this in case user is moving the transaction as the receipt path will be valid in that case useEffect(() => { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const isLocalFile = typeof receiptPath === 'number' || receiptPath?.startsWith('blob:') || receiptPath?.startsWith('file:') || receiptPath?.startsWith('/'); + const isLocalFile = FileUtils.isLocalFile(receiptPath); if (!isLocalFile) { setReceiptFile(transaction?.receipt);