implemented for image view

Expensify · Apr 5, 2024 · 17cb608 · 17cb608
1 parent b3f14d6
commit 17cb608
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 17 deletions.
diff --git a/src/components/AttachmentOfflineIndicator.tsx b/src/components/AttachmentOfflineIndicator.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -11,18 +12,13 @@ import Text from './Text';
 type AttachmentOfflineIndicatorProps = {
     /** Whether the offline indicator is displayed for the attachment preview. */
     isPreview?: boolean;
-
-    /** Title text to be displayed. */
-    title: string;
-
-    /** Subtitle text to be displayed. */
-    subtitle: string;
 };
 
-function AttachmentOfflineIndicator({title, subtitle, isPreview = false}: AttachmentOfflineIndicatorProps) {
+function AttachmentOfflineIndicator({isPreview = false}: AttachmentOfflineIndicatorProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
 
     if (!isOffline) {
         return null;
@@ -38,8 +34,8 @@ function AttachmentOfflineIndicator({title, subtitle, isPreview = false}: Attach
             />
             {!isPreview && (
                 <View>
-                    <Text style={[styles.notFoundTextHeader]}>{title}</Text>
-                    <Text>{subtitle}</Text>
+                    <Text style={[styles.notFoundTextHeader]}>{translate('common.youAppearToBeOffline')}</Text>
+                    <Text>{translate('common.attachementWillBeAvailableOnceBackOnline')}</Text>
                 </View>
             )}
         </View>

diff --git a/src/components/ImageView/index.tsx b/src/components/ImageView/index.tsx
@@ -2,11 +2,13 @@ import type {SyntheticEvent} from 'react';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {GestureResponderEvent, LayoutChangeEvent} from 'react-native';
 import {View} from 'react-native';
+import AttachmentOfflineIndicator from '@components/AttachmentOfflineIndicator';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
 import RESIZE_MODES from '@components/Image/resizeModes';
 import type {ImageOnLoadEvent} from '@components/Image/types';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -33,6 +35,7 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
     const [imgHeight, setImgHeight] = useState(0);
     const [zoomScale, setZoomScale] = useState(0);
     const [zoomDelta, setZoomDelta] = useState<ZoomDelta>();
+    const {isOffline} = useNetwork();
 
     const scrollableRef = useRef<HTMLDivElement>(null);
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
@@ -243,7 +246,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
                 />
             </PressableWithoutFeedback>
 
-            {isLoading && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {isLoading && !isOffline && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {isLoading && <AttachmentOfflineIndicator />}
         </View>
     );
 }

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -307,13 +307,7 @@ function BaseVideoPlayer({
                                 )}
                             </PressableWithoutFeedback>
                             {((isLoading && !isOffline) || isBuffering) && <FullScreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
-                            {isLoading && isOffline && (
-                                <AttachmentOfflineIndicator
-                                    title={translate('common.youAppearToBeOffline')}
-                                    subtitle={translate('common.attachementWillBeAvailableOnceBackOnline')}
-                                    isPreview={isPreview}
-                                />
-                            )}
+                            {isLoading && <AttachmentOfflineIndicator isPreview={isPreview} />}
                             {controlsStatus !== CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE && !isLoading && (isPopoverVisible || isHovered || canUseTouchScreen) && (
                                 <VideoPlayerControls
                                     duration={duration}