Remove a message from lightbox if its been DOE

ts/state/ducks/conversations.ts

@@ -495,8 +495,9 @@ export const SELECTED_CONVERSATION_CHANGED =
   'conversations/SELECTED_CONVERSATION_CHANGED';
 const PUSH_PANEL = 'conversations/PUSH_PANEL';
 const POP_PANEL = 'conversations/POP_PANEL';
-export const MESSAGE_EXPIRED = 'conversations/MESSAGE_EXPIRED';
+export const MESSAGE_CHANGED = 'MESSAGE_CHANGED';
 export const MESSAGE_DELETED = 'MESSAGE_DELETED';
+export const MESSAGE_EXPIRED = 'conversations/MESSAGE_EXPIRED';
 export const SET_VOICE_NOTE_PLAYBACK_RATE =
   'conversations/SET_VOICE_NOTE_PLAYBACK_RATE';
 export const CONVERSATION_UNLOADED = 'CONVERSATION_UNLOADED';
@@ -647,7 +648,7 @@ type ConversationStoppedByMissingVerificationActionType = {
   };
 };
 export type MessageChangedActionType = {
-  type: 'MESSAGE_CHANGED';
+  type: typeof MESSAGE_CHANGED;
   payload: {
     id: string;
     conversationId: string;
@@ -2403,7 +2404,7 @@ function messageChanged(
   data: MessageAttributesType
 ): MessageChangedActionType {
   return {
-    type: 'MESSAGE_CHANGED',
+    type: MESSAGE_CHANGED,
     payload: {
       id,
       conversationId,
@@ -4455,7 +4456,7 @@ export function reducer(
     };
   }
 
-  if (action.type === 'MESSAGE_CHANGED') {
+  if (action.type === MESSAGE_CHANGED) {
     const { id, conversationId, data } = action.payload;
     const existingConversation = state.messagesByConversation[conversationId];
 

ts/state/ducks/lightbox.ts

@@ -6,7 +6,11 @@ import type { ThunkAction } from 'redux-thunk';
 import type { AttachmentType } from '../../types/Attachment';
 import type { BoundActionCreatorsMapObject } from '../../hooks/useBoundActions';
 import type { MediaItemType } from '../../types/MediaItem';
-import type { MessageExpiredActionType } from './conversations';
+import type {
+  MessageChangedActionType,
+  MessageDeletedActionType,
+  MessageExpiredActionType,
+} from './conversations';
 import type { ShowStickerPackPreviewActionType } from './globalModals';
 import type { ShowToastActionType } from './toast';
 import type { StateType as RootStateType } from '../reducer';
@@ -21,7 +25,12 @@ import {
 import { isTapToView } from '../selectors/message';
 import { SHOW_TOAST } from './toast';
 import { ToastType } from '../../types/Toast';
-import { MESSAGE_EXPIRED, saveAttachmentFromMessage } from './conversations';
+import {
+  MESSAGE_CHANGED,
+  MESSAGE_DELETED,
+  MESSAGE_EXPIRED,
+  saveAttachmentFromMessage,
+} from './conversations';
 import { showStickerPackPreview } from './globalModals';
 import { useBoundActions } from '../../hooks/useBoundActions';
 
@@ -54,6 +63,8 @@ type ShowLightboxActionType = {
 
 type LightboxActionType =
   | CloseLightboxActionType
+  | MessageChangedActionType
+  | MessageDeletedActionType
   | MessageExpiredActionType
   | ShowLightboxActionType;
 
@@ -156,7 +167,6 @@ function showLightboxForViewOnceMedia(
         objectURL: getAbsoluteTempPath(path),
         contentType,
         index: 0,
-        // TODO maybe we need to listen for message change?
         message: {
           attachments: message.get('attachments') || [],
           id: message.get('id'),
@@ -315,24 +325,42 @@ export function reducer(
     };
   }
 
-  if (action.type === MESSAGE_EXPIRED) {
+  if (
+    action.type === MESSAGE_CHANGED ||
+    action.type === MESSAGE_DELETED ||
+    action.type === MESSAGE_EXPIRED
+  ) {
     if (!state.isShowingLightbox) {
       return state;
     }
 
-    if (!state.isViewOnce) {
+    if (action.type === MESSAGE_EXPIRED && !state.isViewOnce) {
       return state;
     }
 
-    const hasExpiredMedia = state.media.some(
-      item => item.message.id === action.payload.id
+    if (
+      action.type === MESSAGE_CHANGED &&
+      !action.payload.data.deletedForEveryone
+    ) {
+      return state;
+    }
+
+    const nextMedia = state.media.filter(
+      item => item.message.id !== action.payload.id
     );
 
-    if (!hasExpiredMedia) {
+    if (nextMedia.length === state.media.length) {
       return state;
     }
 
-    return getEmptyState();
+    if (!nextMedia.length) {
+      return getEmptyState();
+    }
+
+    return {
+      ...state,
+      media: nextMedia,
+    };
   }
 
   return state;

ts/state/ducks/mediaGallery.ts

@@ -7,6 +7,7 @@ import type { AttachmentType } from '../../types/Attachment';
 import type { BoundActionCreatorsMapObject } from '../../hooks/useBoundActions';
 import type {
   ConversationUnloadedActionType,
+  MessageChangedActionType,
   MessageDeletedActionType,
   MessageExpiredActionType,
 } from './conversations';
@@ -17,6 +18,7 @@ import type { StateType as RootStateType } from '../reducer';
 import dataInterface from '../../sql/Client';
 import {
   CONVERSATION_UNLOADED,
+  MESSAGE_CHANGED,
   MESSAGE_DELETED,
   MESSAGE_EXPIRED,
 } from './conversations';
@@ -60,6 +62,7 @@ type LoadMediaItemslActionType = {
 type MediaGalleryActionType =
   | ConversationUnloadedActionType
   | LoadMediaItemslActionType
+  | MessageChangedActionType
   | MessageDeletedActionType
   | MessageExpiredActionType;
 
@@ -207,6 +210,20 @@ export function reducer(
     };
   }
 
+  if (action.type === MESSAGE_CHANGED) {
+    if (!action.payload.data.deletedForEveryone) {
+      return state;
+    }
+
+    return {
+      ...state,
+      media: state.media.filter(item => item.message.id !== action.payload.id),
+      documents: state.documents.filter(
+        item => item.message.id !== action.payload.id
+      ),
+    };
+  }
+
   if (action.type === MESSAGE_DELETED || action.type === MESSAGE_EXPIRED) {
     return {
       ...state,