Show info for permanently undownloadable visual attachments

ts/components/conversation/Image.tsx

@@ -14,10 +14,12 @@ import type {
 } from '../../types/Attachment';
 import {
   defaultBlurHash,
+  isDownloadable,
   isIncremental,
   isReadyToView,
 } from '../../types/Attachment';
 import { ProgressCircle } from '../ProgressCircle';
+import { useUndownloadableMediaHandler } from '../../hooks/useUndownloadableMediaHandler';
 
 export enum CurveType {
   None = 0,
@@ -55,6 +57,7 @@ export type Props = {
 
   i18n: LocalizerType;
   theme?: ThemeType;
+  showMediaNoLongerAvailableToast?: () => void;
   showVisualAttachment?: (attachment: AttachmentType) => void;
   cancelDownload?: () => void;
   startDownload?: () => void;
@@ -78,6 +81,7 @@ export function Image({
   i18n,
   noBackground,
   noBorder,
+  showMediaNoLongerAvailableToast,
   showVisualAttachment,
   startDownload,
   cancelDownload,
@@ -164,6 +168,9 @@ export function Image({
     },
     [startDownload]
   );
+  const undownloadableClick = useUndownloadableMediaHandler(
+    showMediaNoLongerAvailableToast
+  );
 
   const imageOrBlurHash = url ? (
     <img
@@ -211,6 +218,8 @@ export function Image({
           tabIndex,
         });
 
+  const isMediaDownloadable = isDownloadable(attachment);
+
   return (
     <div
       className={classNames(
@@ -226,7 +235,19 @@ export function Image({
       }}
     >
       {imageOrBlurHash}
-      {startDownloadButton}
+      {isMediaDownloadable ? (
+        startDownloadButton
+      ) : (
+        <button
+          type="button"
+          className="module-image__overlay-circle module-image__overlay-circle--undownloadable"
+          aria-label={i18n('icu:mediaNoLongerAvailable')}
+          onClick={undownloadableClick}
+          tabIndex={tabIndex}
+        >
+          <div className="module-image__undownloadable-icon" />
+        </button>
+      )}
       {spinner}
 
       {attachment.caption ? (
@@ -245,7 +266,9 @@ export function Image({
           }}
         />
       ) : null}
-      {(attachment.path || isIncremental(attachment)) && playIconOverlay ? (
+      {(attachment.path || isIncremental(attachment)) &&
+      isMediaDownloadable &&
+      playIconOverlay ? (
         <div className="module-image__overlay-circle">
           <div className="module-image__play-icon" />
         </div>
@@ -267,7 +290,9 @@ export function Image({
           style={curveStyles}
         />
       ) : null}
-      {showVisualAttachment && isReadyToView(attachment) ? (
+      {showVisualAttachment &&
+      isReadyToView(attachment) &&
+      isMediaDownloadable ? (
         <button
           type="button"
           className={classNames('module-image__border-overlay', {