Use 1x icon in View-once bubbles, explanatory expired toasts

ts/components/conversation/Message.md

@@ -3681,6 +3681,32 @@ Sticker link previews are forced to use the small link preview form, no matter t
       authorAvatarPath={util.gifObjectUrl}
     />
   </div>
+  <div className="module-message-container">
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="pink"
+      conversationType="direct"
+      authorPhoneNumber="(202) 555-0003"
+      isTapToViewExpired={false}
+      isTapToView={true}
+      text="This should not be shown"
+      attachments={[
+        {
+          url: util.gifObjectUrl,
+          contentType: 'video/mp4',
+          width: 320,
+          height: 240,
+        },
+      ]}
+      i18n={util.i18n}
+      id="messageId1"
+      displayTapToViewMessage={(...args) =>
+        console.log('displayTapToViewMessage', args)
+      }
+      authorAvatarPath={util.gifObjectUrl}
+    />
+  </div>
   <div className="module-message-container">
     <Message
       direction="incoming"

ts/components/conversation/Message.tsx

@@ -129,6 +129,9 @@ export type PropsActions = {
   openLink: (url: string) => void;
   scrollToQuotedMessage: (options: { author: string; sentAt: number }) => void;
   selectMessage?: (messageId: string, conversationId: string) => unknown;
+
+  showExpiredIncomingTapToViewToast: () => unknown;
+  showExpiredOutgoingTapToViewToast: () => unknown;
 };
 
 export type Props = PropsData & PropsHousekeeping & PropsActions;
@@ -1311,7 +1314,7 @@ export class Message extends React.PureComponent<Props, State> {
     );
   }
 
-  // tslint:disable-next-line cyclomatic-complexity
+  // tslint:disable-next-line cyclomatic-complexity max-func-body-length
   public handleOpen = (
     event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent
   ) => {
@@ -1319,19 +1322,32 @@ export class Message extends React.PureComponent<Props, State> {
       attachments,
       contact,
       displayTapToViewMessage,
+      direction,
       id,
       isTapToView,
       isTapToViewExpired,
       openConversation,
       showContactDetail,
       showVisualAttachment,
+      showExpiredIncomingTapToViewToast,
+      showExpiredOutgoingTapToViewToast,
     } = this.props;
     const { imageBroken } = this.state;
 
     const isAttachmentPending = this.isAttachmentPending();
 
     if (isTapToView) {
-      if (!isTapToViewExpired && !isAttachmentPending) {
+      if (isAttachmentPending) {
+        return;
+      }
+
+      if (isTapToViewExpired) {
+        const action =
+          direction === 'outgoing'
+            ? showExpiredOutgoingTapToViewToast
+            : showExpiredIncomingTapToViewToast;
+        action();
+      } else {
         event.preventDefault();
         event.stopPropagation();