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

src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

@@ -22,7 +22,7 @@ type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & {
     onPressOut?: () => void;
 };
 
-function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onPressIn, onPressOut}: BaseAnchorForAttachmentsOnlyProps) {
+function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onPressIn, onPressOut, isDeleted}: BaseAnchorForAttachmentsOnlyProps) {
     const sourceURLWithAuth = addEncryptedAuthTokenToURL(source);
     const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1];
 
@@ -63,6 +63,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onP
                         shouldShowDownloadIcon={!!sourceID && !isOffline}
                         shouldShowLoadingSpinnerIcon={isDownloading}
                         isUsedAsChatAttachment
+                        isDeleted={!!isDeleted}
                         isUploading={!sourceID}
                     />
                 </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,52 @@
+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 AttachmentDeletedIndicatorProps = {
+    /** Additional styles for container */
+    containerStyles?: StyleProp<ViewStyle>;
+};
+
+function AttachmentDeletedIndicator({containerStyles}: AttachmentDeletedIndicatorProps) {
+    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.deletedAttachmentIndicator,
+                    containerStyles,
+                ]}
+            />
+            <View style={[styles.pAbsolute, styles.deletedAttachmentIndicator, 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

@@ -25,11 +25,14 @@ type DefaultAttachmentViewProps = {
 
     icon?: IconAsset;
 
+    /** Whether the attachment is deleted */
+    isDeleted?: boolean;
+
     /** Flag indicating if the attachment is being uploaded. */
     isUploading?: boolean;
 };
 
-function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isUploading}: DefaultAttachmentViewProps) {
+function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isUploading, isDeleted}: DefaultAttachmentViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -43,7 +46,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

@@ -72,6 +72,9 @@ type AttachmentViewProps = Attachment & {
     /* Flag indicating whether the attachment has been uploaded. */
     isUploaded?: boolean;
 
+    /** Whether the attachment is deleted */
+    isDeleted?: boolean;
+
     /** Flag indicating if the attachment is being uploaded. */
     isUploading?: boolean;
 };
@@ -98,14 +101,14 @@ function AttachmentView({
     duration,
     isUsedAsChatAttachment,
     isUploaded = true,
+    isDeleted,
     isUploading = false,
 }: AttachmentViewProps) {
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
     const {translate} = useLocalize();
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
 
-    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
-
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -292,6 +295,7 @@ function AttachmentView({
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
             shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon || isUploading}
             containerStyles={containerStyles}
+            isDeleted={isDeleted}
             isUploading={isUploading}
         />
     );

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?.at(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 isDeleted = HTMLEngineUtils.isDeletedNode(tnode);
+    const textDecorationLineStyle = isDeleted ? 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={isDeleted}
             />
         );
     }
 
-    const hasStrikethroughStyle = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
-    const textDecorationLineStyle = hasStrikethroughStyle ? styles.underlineLineThrough : {};
-
     return (
         <AnchorForCommentsOnly
             href={attrHref}

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -3,6 +3,7 @@ import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {AttachmentContext} from '@components/AttachmentContext';
+import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
@@ -33,6 +34,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const {translate} = useLocalize();
 
     const htmlAttribs = tnode.attributes;
+    const isDeleted = isDeletedNode(tnode);
 
     // There are two kinds of images that need to be displayed:
     //
@@ -76,6 +78,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
             fallbackIcon={fallbackIcon}
             imageWidth={imageWidth}
             imageHeight={imageHeight}
+            isDeleted={isDeleted}
             altText={alt}
             onLoadFailure={() => setHasLoadFailed(true)}
             onMeasure={() => setHasLoadFailed(false)}

src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {AttachmentContext} from '@components/AttachmentContext';
+import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import VideoPlayerPreview from '@components/VideoPlayerPreview';
 import useCurrentReportID from '@hooks/useCurrentReportID';
@@ -25,6 +26,7 @@ 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 isDeleted = isDeletedNode(tnode);
 
     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/HTMLEngineProvider/htmlEngineUtils.ts

@@ -59,4 +59,12 @@ function isChildOfH1(tnode: TNode): boolean {
     return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && node.domNode.name.toLowerCase() === 'h1');
 }
 
-export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1};
+/**
+ * Check if the parent node has deleted style.
+ */
+function isDeletedNode(tnode: TNode): boolean {
+    const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
+    return 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
+}
+
+export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1, isDeletedNode};

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';
@@ -56,6 +57,9 @@ type ThumbnailImageProps = {
     /** The object position of image */
     objectPosition?: ImageObjectPosition;
 
+    /** Whether the image is deleted */
+    isDeleted?: boolean;
+
     /** Callback fired when the image fails to load */
     onLoadFailure?: () => void;
 
@@ -81,6 +85,7 @@ function ThumbnailImage({
     fallbackIconColor,
     fallbackIconBackground,
     objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
+    isDeleted,
     onLoadFailure,
     onMeasure,
 }: ThumbnailImageProps) {
@@ -141,6 +146,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}>