Chat - File does not appear with strikethrough style when uploaded offline and deleted

src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

@@ -30,7 +30,7 @@ type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps &
         onPressOut?: () => void;
     };
 
-function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', download, onPressIn, onPressOut}: BaseAnchorForAttachmentsOnlyProps) {
+function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', download, onPressIn, onPressOut, isDeleted}: BaseAnchorForAttachmentsOnlyProps) {
     const sourceURLWithAuth = addEncryptedAuthTokenToURL(source);
     const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1];
 
@@ -69,6 +69,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
                         shouldShowDownloadIcon={!!sourceID && !isOffline}
                         shouldShowLoadingSpinnerIcon={isDownloading}
                         isUsedAsChatAttachment
+                        isDeleted={!!isDeleted}
                     />
                 </PressableWithoutFeedback>
             )}

src/components/AnchorForAttachmentsOnly/types.ts

@@ -9,6 +9,9 @@ type AnchorForAttachmentsOnlyProps = {
 
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle>;
+
+    /**  Whether the attachment is deleted */
+    isDeleted?: boolean;
 };
 
 export default AnchorForAttachmentsOnlyProps;

src/components/AttachmentDeletedIndicator.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
+import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+
+type AttachmentOfflineIndicatorProps = {
+    /** Any additional styles to apply */
+    containerStyles?: StyleProp<ViewStyle>;
+};
+
+function AttachmentDeletedIndicator({containerStyles}: AttachmentOfflineIndicatorProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {isOffline} = useNetwork();
+
+    if (!isOffline) {
+        return null;
+    }
+
+    return (
+        <>
+            <View
+                style={[styles.pAbsolute, styles.alignItemsCenter, styles.justifyContentCenter, styles.highlightBG, styles.deletedIndicatorOverlay, styles.deletedIndicator, containerStyles]}
+            />
+            <View style={[styles.pAbsolute, styles.deletedIndicator, styles.alignItemsCenter, styles.justifyContentCenter, containerStyles]}>
+                <Icon
+                    fill={theme.icon}
+                    src={Expensicons.Trashcan}
+                    width={variables.iconSizeSuperLarge}
+                    height={variables.iconSizeSuperLarge}
+                />
+            </View>
+        </>
+    );
+}
+
+AttachmentDeletedIndicator.displayName = 'AttachmentDeletedIndicator';
+
+export default AttachmentDeletedIndicator;

src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx

@@ -24,9 +24,12 @@ type DefaultAttachmentViewProps = {
     containerStyles?: StyleProp<ViewStyle>;
 
     icon?: IconAsset;
+
+    /**  Whether the attachment is deleted */
+    isDeleted?: boolean;
 };
 
-function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon}: DefaultAttachmentViewProps) {
+function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isDeleted}: DefaultAttachmentViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -40,7 +43,7 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa
                 />
             </View>
 
-            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{fileName}</Text>
+            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100, isDeleted && styles.lineThrough]}>{fileName}</Text>
             {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && (
                 <Tooltip text={translate('common.download')}>
                     <View style={styles.ml2}>

src/components/Attachments/AttachmentView/index.tsx

@@ -77,6 +77,9 @@ type AttachmentViewProps = AttachmentViewOnyxProps &
 
         /* Flag indicating whether the attachment has been uploaded. */
         isUploaded?: boolean;
+
+        /**  Whether the attachment is deleted */
+        isDeleted?: boolean;
     };
 
 function AttachmentView({
@@ -101,6 +104,7 @@ function AttachmentView({
     duration,
     isUsedAsChatAttachment,
     isUploaded = true,
+    isDeleted,
 }: AttachmentViewProps) {
     const {translate} = useLocalize();
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
@@ -290,6 +294,7 @@ function AttachmentView({
             shouldShowDownloadIcon={shouldShowDownloadIcon}
             shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon}
             containerStyles={containerStyles}
+            isDeleted={isDeleted}
         />
     );
 }

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

@@ -25,12 +25,15 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
     const isAttachment = !!htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE];
     const tNodeChild = tnode?.domNode?.children?.[0];
     const displayName = tNodeChild && 'data' in tNodeChild && typeof tNodeChild.data === 'string' ? tNodeChild.data : '';
-    const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
     const attrHref = htmlAttribs.href || htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || '';
+    const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
     const internalNewExpensifyPath = Link.getInternalNewExpensifyPath(attrHref);
     const internalExpensifyPath = Link.getInternalExpensifyPath(attrHref);
     const isVideo = attrHref && Str.isVideo(attrHref);
 
+    const hasStrikethroughStyle = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
+    const textDecorationLineStyle = hasStrikethroughStyle ? styles.underlineLineThrough : {};
+
     if (!HTMLEngineUtils.isChildOfComment(tnode)) {
         // This is not a comment from a chat, the AnchorForCommentsOnly uses a Pressable to create a context menu on right click.
         // We don't have this behaviour in other links in NewDot
@@ -51,13 +54,11 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
             <AnchorForAttachmentsOnly
                 source={tryResolveUrlFromApiRoot(attrHref)}
                 displayName={displayName}
+                isDeleted={hasStrikethroughStyle}
             />
         );
     }
 
-    const hasStrikethroughStyle = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
-    const textDecorationLineStyle = hasStrikethroughStyle ? styles.underlineLineThrough : {};
-
     return (
         <AnchorForCommentsOnly
             href={attrHref}

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -33,6 +33,9 @@ function ImageRenderer({tnode}: ImageRendererProps) {
 
     const htmlAttribs = tnode.attributes;
 
+    const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
+    const isDeleted = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
+
     // There are two kinds of images that need to be displayed:
     //
     //     - Chat Attachment images
@@ -72,6 +75,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
             fallbackIcon={fallbackIcon}
             imageWidth={imageWidth}
             imageHeight={imageHeight}
+            isDeleted={isDeleted}
             altText={alt}
         />
     );

src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx

@@ -25,6 +25,8 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
     const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]);
     const duration = Number(htmlAttribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]);
     const currentReportIDValue = useCurrentReportID();
+    const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
+    const isDeleted = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
 
     return (
         <ShowContextMenuContext.Consumer>
@@ -39,6 +41,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                             thumbnailUrl={thumbnailUrl}
                             videoDimensions={{width, height}}
                             videoDuration={duration}
+                            isDeleted={isDeleted}
                             onShowModalPress={() => {
                                 if (!sourceURL || !type) {
                                     return;

src/components/ThumbnailImage.tsx

@@ -9,6 +9,7 @@ import useThumbnailDimensions from '@hooks/useThumbnailDimensions';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
+import AttachmentDeletedIndicator from './AttachmentDeletedIndicator';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import type {ImageObjectPosition} from './Image/types';
@@ -55,6 +56,9 @@ type ThumbnailImageProps = {
 
     /** The object position of image */
     objectPosition?: ImageObjectPosition;
+
+    /**  Whether the image is deleted */
+    isDeleted?: boolean;
 };
 
 type UpdateImageSizeParams = {
@@ -75,6 +79,7 @@ function ThumbnailImage({
     fallbackIconColor,
     fallbackIconBackground,
     objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
+    isDeleted,
 }: ThumbnailImageProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -133,6 +138,7 @@ function ThumbnailImage({
 
     return (
         <View style={[style, styles.overflowHidden]}>
+            {isDeleted && <AttachmentDeletedIndicator containerStyles={[...sizeStyles]} />}
             <View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={previewSourceURL}

src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import type {GestureResponderEvent} from 'react-native';
+import AttachmentDeletedIndicator from '@components/AttachmentDeletedIndicator';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Image from '@components/Image';
@@ -22,9 +23,12 @@ type VideoPlayerThumbnailProps = {
 
     /** Accessibility label for the thumbnail. */
     accessibilityLabel: string;
+
+    /**  Whether the video is deleted */
+    isDeleted?: boolean;
 };
 
-function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}: VideoPlayerThumbnailProps) {
+function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel, isDeleted}: VideoPlayerThumbnailProps) {
     const styles = useThemeStyles();
 
     return (
@@ -39,35 +43,39 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}: Video
                     />
                 </View>
             )}
-            <ShowContextMenuContext.Consumer>
-                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
-                    <PressableWithoutFeedback
-                        style={[styles.videoThumbnailContainer]}
-                        accessibilityLabel={accessibilityLabel}
-                        accessibilityRole={CONST.ROLE.BUTTON}
-                        onPress={onPress}
-                        onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                        onPressOut={() => ControlSelection.unblock()}
-                        onLongPress={(event) => {
-                            if (isDisabled) {
-                                return;
-                            }
-                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
-                        }}
-                        shouldUseHapticsOnLongPress
-                    >
-                        <View style={[styles.videoThumbnailPlayButton]}>
-                            <Icon
-                                src={Expensicons.Play}
-                                fill="white"
-                                width={variables.iconSizeXLarge}
-                                height={variables.iconSizeXLarge}
-                                additionalStyles={[styles.ml1]}
-                            />
-                        </View>
-                    </PressableWithoutFeedback>
-                )}
-            </ShowContextMenuContext.Consumer>
+            {!isDeleted ? (
+                <ShowContextMenuContext.Consumer>
+                    {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
+                        <PressableWithoutFeedback
+                            style={[styles.videoThumbnailContainer]}
+                            accessibilityLabel={accessibilityLabel}
+                            accessibilityRole={CONST.ROLE.BUTTON}
+                            onPress={onPress}
+                            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                            onPressOut={() => ControlSelection.unblock()}
+                            onLongPress={(event) => {
+                                if (isDisabled) {
+                                    return;
+                                }
+                                showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                            }}
+                            shouldUseHapticsOnLongPress
+                        >
+                            <View style={[styles.videoThumbnailPlayButton]}>
+                                <Icon
+                                    src={Expensicons.Play}
+                                    fill="white"
+                                    width={variables.iconSizeXLarge}
+                                    height={variables.iconSizeXLarge}
+                                    additionalStyles={[styles.ml1]}
+                                />
+                            </View>
+                        </PressableWithoutFeedback>
+                    )}
+                </ShowContextMenuContext.Consumer>
+            ) : (
+                <AttachmentDeletedIndicator containerStyles={{borderRadius: variables.componentBorderRadiusNormal}} />
+            )}
         </View>
     );
 }

src/components/VideoPlayerPreview/index.tsx

@@ -38,9 +38,12 @@ type VideoPlayerPreviewProps = {
 
     /** Callback executed when modal is pressed. */
     onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
+
+    /**  Whether the video is deleted */
+    isDeleted?: boolean;
 };
 
-function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDimensions, videoDuration, onShowModalPress}: VideoPlayerPreviewProps) {
+function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDimensions, videoDuration, onShowModalPress, isDeleted}: VideoPlayerPreviewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {currentlyPlayingURL, currentlyPlayingURLReportID, updateCurrentlyPlayingURL} = usePlaybackContext();
@@ -71,11 +74,12 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
 
     return (
         <View style={[styles.webViewStyles.tagStyles.video, thumbnailDimensionsStyles]}>
-            {shouldUseNarrowLayout || isThumbnail ? (
+            {shouldUseNarrowLayout || isThumbnail || isDeleted ? (
                 <VideoPlayerThumbnail
                     thumbnailUrl={thumbnailUrl}
                     onPress={handleOnPress}
                     accessibilityLabel={fileName}
+                    isDeleted={isDeleted}
                 />
             ) : (
                 <View style={styles.flex1}>

src/pages/home/report/comment/AttachmentCommentFragment.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
 import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
 import RenderCommentHTML from './RenderCommentHTML';
 
@@ -14,8 +13,7 @@ type AttachmentCommentFragmentProps = {
 
 function AttachmentCommentFragment({addExtraMargin, html, source, styleAsDeleted}: AttachmentCommentFragmentProps) {
     const styles = useThemeStyles();
-    const isUploading = html.includes(CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE);
-    const htmlContent = styleAsDeleted && isUploading ? `<del>${html}</del>` : html;
+    const htmlContent = styleAsDeleted ? `<del>${html}</del>` : html;
 
     return (
         <View style={addExtraMargin ? styles.mt2 : {}}>

src/styles/index.ts

@@ -1111,6 +1111,17 @@ const styles = (theme: ThemeColors) =>
             height: 25,
         },
 
+        deletedIndicator: {
+            zIndex: 20,
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+        },
+
+        deletedIndicatorOverlay: {
+            opacity: 0.8,
+        },
+
         // Actions
         actionAvatar: {
             borderRadius: 20,