diff --git a/lib/shared/message-utils.js b/lib/shared/message-utils.js
index 2eaae2f55..2a2f67d39 100644
--- a/lib/shared/message-utils.js
+++ b/lib/shared/message-utils.js
@@ -1,596 +1,596 @@
 // @flow
 
 import invariant from 'invariant';
 import _maxBy from 'lodash/fp/maxBy.js';
 import _orderBy from 'lodash/fp/orderBy.js';
 import * as React from 'react';
 
 import { codeBlockRegex, type ParserRules } from './markdown.js';
 import type { CreationSideEffectsFunc } from './messages/message-spec.js';
 import { messageSpecs } from './messages/message-specs.js';
 import { threadIsGroupChat } from './thread-utils.js';
 import { useStringForUser } from '../hooks/ens-cache.js';
 import { userIDsToRelativeUserInfos } from '../selectors/user-selectors.js';
 import { type PlatformDetails, isWebPlatform } from '../types/device-types.js';
 import type { Media } from '../types/media-types.js';
 import {
   type MessageInfo,
   type RawMessageInfo,
   type RobotextMessageInfo,
   type RawMultimediaMessageInfo,
   type MessageData,
   type MessageTruncationStatus,
   type MultimediaMessageData,
   type MessageStore,
   type ComposableMessageInfo,
   messageTypes,
   messageTruncationStatus,
   type RawComposableMessageInfo,
   type ThreadMessageInfo,
 } from '../types/message-types.js';
 import type {
   EditMessageInfo,
   RawEditMessageInfo,
 } from '../types/messages/edit.js';
 import type { ImagesMessageData } from '../types/messages/images.js';
 import type { MediaMessageData } from '../types/messages/media.js';
 import type {
   RawReactionMessageInfo,
   ReactionMessageInfo,
 } from '../types/messages/reaction.js';
 import { type ThreadInfo } from '../types/thread-types.js';
 import type { UserInfos } from '../types/user-types.js';
 import {
   type EntityText,
   useEntityTextAsString,
 } from '../utils/entity-text.js';
 
 const localIDPrefix = 'local';
 
 const defaultMediaMessageOptions = Object.freeze({});
 
 // Prefers localID
 function messageKey(messageInfo: MessageInfo | RawMessageInfo): string {
   if (messageInfo.localID) {
     return messageInfo.localID;
   }
   invariant(messageInfo.id, 'localID should exist if ID does not');
   return messageInfo.id;
 }
 
 // Prefers serverID
 function messageID(messageInfo: MessageInfo | RawMessageInfo): string {
   if (messageInfo.id) {
     return messageInfo.id;
   }
   invariant(messageInfo.localID, 'localID should exist if ID does not');
   return messageInfo.localID;
 }
 
 function robotextForMessageInfo(
   messageInfo: RobotextMessageInfo,
   threadInfo: ?ThreadInfo,
 ): EntityText {
   const messageSpec = messageSpecs[messageInfo.type];
   invariant(
     messageSpec.robotext,
     `we're not aware of messageType ${messageInfo.type}`,
   );
   return messageSpec.robotext(messageInfo, { threadInfo });
 }
 
 function createMessageInfo(
   rawMessageInfo: RawMessageInfo,
   viewerID: ?string,
   userInfos: UserInfos,
   threadInfos: { +[id: string]: ThreadInfo },
 ): ?MessageInfo {
   const creatorInfo = userInfos[rawMessageInfo.creatorID];
   const creator = {
     id: rawMessageInfo.creatorID,
     username: creatorInfo ? creatorInfo.username : 'anonymous',
     isViewer: rawMessageInfo.creatorID === viewerID,
   };
 
   const createRelativeUserInfos = (userIDs: $ReadOnlyArray<string>) =>
     userIDsToRelativeUserInfos(userIDs, viewerID, userInfos);
   const createMessageInfoFromRaw = (rawInfo: RawMessageInfo) =>
     createMessageInfo(rawInfo, viewerID, userInfos, threadInfos);
 
   const messageSpec = messageSpecs[rawMessageInfo.type];
 
   return messageSpec.createMessageInfo(rawMessageInfo, creator, {
     threadInfos,
     createMessageInfoFromRaw,
     createRelativeUserInfos,
   });
 }
 
 type LengthResult = {
   +local: number,
   +realized: number,
 };
 function findMessageIDMaxLengths(
   messageIDs: $ReadOnlyArray<?string>,
 ): LengthResult {
   const result = {
     local: 0,
     realized: 0,
   };
   for (const id of messageIDs) {
     if (!id) {
       continue;
     }
     if (id.startsWith(localIDPrefix)) {
       result.local = Math.max(result.local, id.length - localIDPrefix.length);
     } else {
       result.realized = Math.max(result.realized, id.length);
     }
   }
   return result;
 }
 
 function extendMessageID(id: ?string, lengths: LengthResult): ?string {
   if (!id) {
     return id;
   }
   if (id.startsWith(localIDPrefix)) {
     const zeroPaddedID = id
       .substr(localIDPrefix.length)
       .padStart(lengths.local, '0');
     return `${localIDPrefix}${zeroPaddedID}`;
   }
   return id.padStart(lengths.realized, '0');
 }
 
 function sortMessageInfoList<T: MessageInfo | RawMessageInfo>(
   messageInfos: $ReadOnlyArray<T>,
 ): T[] {
   const lengths = findMessageIDMaxLengths(
     messageInfos.map(message => message?.id),
   );
   return _orderBy([
     'time',
     (message: T) => extendMessageID(message?.id, lengths),
   ])(['desc', 'desc'])(messageInfos);
 }
 
 const sortMessageIDs: (messages: { +[id: string]: RawMessageInfo }) => (
   messageIDs: $ReadOnlyArray<string>,
 ) => string[] = messages => messageIDs => {
   const lengths = findMessageIDMaxLengths(messageIDs);
   return _orderBy([
     (id: string) => messages[id].time,
     (id: string) => extendMessageID(id, lengths),
   ])(['desc', 'desc'])(messageIDs);
 };
 
 function rawMessageInfoFromMessageData(
   messageData: MessageData,
   id: ?string,
 ): RawMessageInfo {
   const messageSpec = messageSpecs[messageData.type];
   invariant(
     messageSpec.rawMessageInfoFromMessageData,
     `we're not aware of messageType ${messageData.type}`,
   );
   return messageSpec.rawMessageInfoFromMessageData(messageData, id);
 }
 
 function mostRecentMessageTimestamp(
   messageInfos: $ReadOnlyArray<RawMessageInfo>,
   previousTimestamp: number,
 ): number {
   if (messageInfos.length === 0) {
     return previousTimestamp;
   }
   return _maxBy('time')(messageInfos).time;
 }
 
 function usersInMessageInfos(
   messageInfos: $ReadOnlyArray<MessageInfo | RawMessageInfo>,
 ): string[] {
   const userIDs = new Set();
   for (const messageInfo of messageInfos) {
     if (messageInfo.creatorID) {
       userIDs.add(messageInfo.creatorID);
     } else if (messageInfo.creator) {
       userIDs.add(messageInfo.creator.id);
     }
   }
   return [...userIDs];
 }
 
 function combineTruncationStatuses(
   first: MessageTruncationStatus,
   second: ?MessageTruncationStatus,
 ): MessageTruncationStatus {
   if (
     first === messageTruncationStatus.EXHAUSTIVE ||
     second === messageTruncationStatus.EXHAUSTIVE
   ) {
     return messageTruncationStatus.EXHAUSTIVE;
   } else if (
     first === messageTruncationStatus.UNCHANGED &&
     second !== null &&
     second !== undefined
   ) {
     return second;
   } else {
     return first;
   }
 }
 
 function shimUnsupportedRawMessageInfos(
   rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   platformDetails: ?PlatformDetails,
 ): RawMessageInfo[] {
   if (platformDetails && isWebPlatform(platformDetails.platform)) {
     return [...rawMessageInfos];
   }
   return rawMessageInfos.map(rawMessageInfo => {
     const { shimUnsupportedMessageInfo } = messageSpecs[rawMessageInfo.type];
     if (shimUnsupportedMessageInfo) {
       return shimUnsupportedMessageInfo(rawMessageInfo, platformDetails);
     }
     return rawMessageInfo;
   });
 }
 
 type MediaMessageDataCreationInput = {
   +threadID: string,
   +creatorID: string,
   +media: $ReadOnlyArray<Media>,
   +localID?: ?string,
   +time?: ?number,
   +sidebarCreation?: ?boolean,
   ...
 };
 function createMediaMessageData(
   input: MediaMessageDataCreationInput,
   options: {
     +forceMultimediaMessageType?: boolean,
   } = defaultMediaMessageOptions,
 ): MultimediaMessageData {
   let allMediaArePhotos = true;
   const photoMedia = [];
   for (const singleMedia of input.media) {
-    if (singleMedia.type === 'video') {
+    if (singleMedia.type !== 'photo') {
       allMediaArePhotos = false;
       break;
     } else {
       photoMedia.push(singleMedia);
     }
   }
 
   const { localID, threadID, creatorID, sidebarCreation } = input;
   const { forceMultimediaMessageType = false } = options;
   const time = input.time ? input.time : Date.now();
   let messageData;
   if (allMediaArePhotos && !forceMultimediaMessageType) {
     messageData = ({
       type: messageTypes.IMAGES,
       threadID,
       creatorID,
       time,
       media: photoMedia,
     }: ImagesMessageData);
     if (localID) {
       messageData = { ...messageData, localID };
     }
     if (sidebarCreation) {
       messageData = { ...messageData, sidebarCreation };
     }
   } else {
     messageData = ({
       type: messageTypes.MULTIMEDIA,
       threadID,
       creatorID,
       time,
       media: input.media,
     }: MediaMessageData);
     if (localID) {
       messageData = { ...messageData, localID };
     }
     if (sidebarCreation) {
       messageData = { ...messageData, sidebarCreation };
     }
   }
   return messageData;
 }
 
 type MediaMessageInfoCreationInput = {
   ...$Exact<MediaMessageDataCreationInput>,
   +id?: ?string,
 };
 function createMediaMessageInfo(
   input: MediaMessageInfoCreationInput,
   options: {
     +forceMultimediaMessageType?: boolean,
   } = defaultMediaMessageOptions,
 ): RawMultimediaMessageInfo {
   const messageData = createMediaMessageData(input, options);
   const createRawMessageInfo =
     messageSpecs[messageData.type].rawMessageInfoFromMessageData;
   invariant(
     createRawMessageInfo,
     'multimedia message spec should have rawMessageInfoFromMessageData',
   );
   const result = createRawMessageInfo(messageData, input.id);
   invariant(
     result.type === messageTypes.MULTIMEDIA ||
       result.type === messageTypes.IMAGES,
     `media messageSpec returned MessageType ${result.type}`,
   );
   return result;
 }
 
 function stripLocalID(
   rawMessageInfo:
     | RawComposableMessageInfo
     | RawReactionMessageInfo
     | RawEditMessageInfo,
 ) {
   const { localID, ...rest } = rawMessageInfo;
   return rest;
 }
 
 function stripLocalIDs(
   input: $ReadOnlyArray<RawMessageInfo>,
 ): RawMessageInfo[] {
   const output = [];
   for (const rawMessageInfo of input) {
     if (rawMessageInfo.localID) {
       invariant(
         rawMessageInfo.id,
         'serverID should be set if localID is being stripped',
       );
       output.push(stripLocalID(rawMessageInfo));
     } else {
       output.push(rawMessageInfo);
     }
   }
   return output;
 }
 
 // Normally we call trim() to remove whitespace at the beginning and end of each
 // message. However, our Markdown parser supports a "codeBlock" format where the
 // user can indent each line to indicate a code block. If we match the
 // corresponding RegEx, we'll only trim whitespace off the end.
 function trimMessage(message: string): string {
   message = message.replace(/^\n*/, '');
   return codeBlockRegex.exec(message) ? message.trimEnd() : message.trim();
 }
 
 function createMessageQuote(message: string): string {
   // add `>` to each line to include empty lines in the quote
   return message.replace(/^/gm, '> ');
 }
 
 function createMessageReply(message: string): string {
   return createMessageQuote(message) + '\n\n';
 }
 
 function getMostRecentNonLocalMessageID(
   threadID: string,
   messageStore: MessageStore,
 ): ?string {
   const thread = messageStore.threads[threadID];
   return thread?.messageIDs.find(id => !id.startsWith(localIDPrefix));
 }
 
 function getMessageTitle(
   messageInfo:
     | ComposableMessageInfo
     | RobotextMessageInfo
     | ReactionMessageInfo
     | EditMessageInfo,
   threadInfo: ThreadInfo,
   markdownRules: ParserRules,
 ): EntityText {
   const { messageTitle } = messageSpecs[messageInfo.type];
   if (messageTitle) {
     return messageTitle({ messageInfo, threadInfo, markdownRules });
   }
 
   invariant(
     messageInfo.type !== messageTypes.TEXT &&
       messageInfo.type !== messageTypes.IMAGES &&
       messageInfo.type !== messageTypes.MULTIMEDIA &&
       messageInfo.type !== messageTypes.REACTION &&
       messageInfo.type !== messageTypes.EDIT_MESSAGE,
     'messageTitle can only be auto-generated for RobotextMessageInfo',
   );
   return robotextForMessageInfo(messageInfo, threadInfo);
 }
 
 function mergeThreadMessageInfos(
   first: ThreadMessageInfo,
   second: ThreadMessageInfo,
   messages: { +[id: string]: RawMessageInfo },
 ): ThreadMessageInfo {
   let firstPointer = 0;
   let secondPointer = 0;
   const mergedMessageIDs = [];
   let firstCandidate = first.messageIDs[firstPointer];
   let secondCandidate = second.messageIDs[secondPointer];
   while (firstCandidate !== undefined || secondCandidate !== undefined) {
     if (firstCandidate === undefined) {
       mergedMessageIDs.push(secondCandidate);
       secondPointer++;
     } else if (secondCandidate === undefined) {
       mergedMessageIDs.push(firstCandidate);
       firstPointer++;
     } else if (firstCandidate === secondCandidate) {
       mergedMessageIDs.push(firstCandidate);
       firstPointer++;
       secondPointer++;
     } else {
       const firstMessage = messages[firstCandidate];
       const secondMessage = messages[secondCandidate];
       invariant(
         firstMessage && secondMessage,
         'message in messageIDs not present in MessageStore',
       );
       if (
         (firstMessage.id &&
           secondMessage.id &&
           firstMessage.id === secondMessage.id) ||
         (firstMessage.localID &&
           secondMessage.localID &&
           firstMessage.localID === secondMessage.localID)
       ) {
         mergedMessageIDs.push(firstCandidate);
         firstPointer++;
         secondPointer++;
       } else if (firstMessage.time < secondMessage.time) {
         mergedMessageIDs.push(secondCandidate);
         secondPointer++;
       } else {
         mergedMessageIDs.push(firstCandidate);
         firstPointer++;
       }
     }
     firstCandidate = first.messageIDs[firstPointer];
     secondCandidate = second.messageIDs[secondPointer];
   }
   return {
     messageIDs: mergedMessageIDs,
     startReached: first.startReached && second.startReached,
     lastNavigatedTo: Math.max(first.lastNavigatedTo, second.lastNavigatedTo),
     lastPruned: Math.max(first.lastPruned, second.lastPruned),
   };
 }
 
 type MessagePreviewPart = {
   +text: string,
   // unread has highest contrast, followed by primary, followed by secondary
   +style: 'unread' | 'primary' | 'secondary',
 };
 type MessagePreviewResult = {
   +message: MessagePreviewPart,
   +username: ?MessagePreviewPart,
 };
 function useMessagePreview(
   originalMessageInfo: ?MessageInfo,
   threadInfo: ThreadInfo,
   markdownRules: ParserRules,
 ): ?MessagePreviewResult {
   let messageInfo;
   if (
     originalMessageInfo &&
     originalMessageInfo.type === messageTypes.SIDEBAR_SOURCE
   ) {
     messageInfo = originalMessageInfo.sourceMessage;
   } else {
     messageInfo = originalMessageInfo;
   }
 
   const hasUsername =
     threadIsGroupChat(threadInfo) ||
     threadInfo.name !== '' ||
     messageInfo?.creator.isViewer;
   const shouldDisplayUser =
     messageInfo?.type === messageTypes.TEXT && hasUsername;
 
   const stringForUser = useStringForUser(
     shouldDisplayUser ? messageInfo?.creator : null,
   );
 
   const { unread } = threadInfo.currentUser;
   const username = React.useMemo(() => {
     if (!shouldDisplayUser) {
       return null;
     }
     invariant(
       stringForUser,
       'useStringForUser should only return falsey if pass null or undefined',
     );
     return {
       text: stringForUser,
       style: unread ? 'unread' : 'secondary',
     };
   }, [shouldDisplayUser, stringForUser, unread]);
 
   const messageTitleEntityText = React.useMemo(() => {
     if (!messageInfo) {
       return messageInfo;
     }
     return getMessageTitle(messageInfo, threadInfo, markdownRules);
   }, [messageInfo, threadInfo, markdownRules]);
 
   const threadID = threadInfo.id;
   const entityTextToStringParams = React.useMemo(
     () => ({
       threadID,
     }),
     [threadID],
   );
   const messageTitle = useEntityTextAsString(
     messageTitleEntityText,
     entityTextToStringParams,
   );
 
   const isTextMessage = messageInfo?.type === messageTypes.TEXT;
   const message = React.useMemo(() => {
     if (messageTitle === null || messageTitle === undefined) {
       return messageTitle;
     }
 
     let style;
     if (unread) {
       style = 'unread';
     } else if (isTextMessage) {
       style = 'primary';
     } else {
       style = 'secondary';
     }
 
     return { text: messageTitle, style };
   }, [messageTitle, unread, isTextMessage]);
 
   return React.useMemo(() => {
     if (!message) {
       return message;
     }
     return { message, username };
   }, [message, username]);
 }
 
 function useMessageCreationSideEffectsFunc<Info: RawMessageInfo>(
   messageType: $PropertyType<Info, 'type'>,
 ): CreationSideEffectsFunc<Info> {
   const messageSpec = messageSpecs[messageType];
   invariant(messageSpec, `we're not aware of messageType ${messageType}`);
   invariant(
     messageSpec.useCreationSideEffectsFunc,
     `no useCreationSideEffectsFunc in message spec for ${messageType}`,
   );
   return messageSpec.useCreationSideEffectsFunc();
 }
 
 export {
   localIDPrefix,
   messageKey,
   messageID,
   robotextForMessageInfo,
   createMessageInfo,
   sortMessageInfoList,
   sortMessageIDs,
   rawMessageInfoFromMessageData,
   mostRecentMessageTimestamp,
   usersInMessageInfos,
   combineTruncationStatuses,
   shimUnsupportedRawMessageInfos,
   createMediaMessageData,
   createMediaMessageInfo,
   stripLocalIDs,
   trimMessage,
   createMessageQuote,
   createMessageReply,
   getMostRecentNonLocalMessageID,
   getMessageTitle,
   mergeThreadMessageInfos,
   useMessagePreview,
   useMessageCreationSideEffectsFunc,
 };
diff --git a/lib/types/media-types.js b/lib/types/media-types.js
index 192db9440..b51a52116 100644
--- a/lib/types/media-types.js
+++ b/lib/types/media-types.js
@@ -1,530 +1,560 @@
 // @flow
 
 import type { Shape } from './core.js';
 import { type Platform } from './device-types.js';
 
 export type Dimensions = $ReadOnly<{
   +height: number,
   +width: number,
 }>;
 
 export type MediaType = 'photo' | 'video';
 
 export type Image = {
   +id: string,
   +uri: string,
   +type: 'photo',
   +dimensions: Dimensions,
   // stored on native only during creation in case retry needed after state lost
   +localMediaSelection?: NativeMediaSelection,
 };
 
+export type EncryptedImage = {
+  +id: string,
+  // a media URI for keyserver uploads / blob holder for Blob service uploads
+  +holder: string,
+  +encryptionKey: string,
+  +type: 'encrypted_photo',
+  +dimensions: Dimensions,
+};
+
 export type Video = {
   +id: string,
   +uri: string,
   +type: 'video',
   +dimensions: Dimensions,
   +loop?: boolean,
   +thumbnailID: string,
   +thumbnailURI: string,
   // stored on native only during creation in case retry needed after state lost
   +localMediaSelection?: NativeMediaSelection,
 };
 
-export type Media = Image | Video;
+export type EncryptedVideo = {
+  +id: string,
+  // a media URI for keyserver uploads / blob holder for Blob service uploads
+  +holder: string,
+  +encryptionKey: string,
+  +type: 'encrypted_video',
+  +dimensions: Dimensions,
+  +loop?: boolean,
+  +thumbnailID: string,
+  +thumbnailHolder: string,
+  +thumbnailEncryptionKey: string,
+};
+
+export type Media = Image | Video | EncryptedImage | EncryptedVideo;
 
 export type AvatarMediaInfo = {
   +type: 'photo',
   +uri: string,
 };
 
 export type ClientDBMediaInfo = {
   +id: string,
   +uri: string,
   +type: 'photo' | 'video',
   +extras: string,
 };
 
 export type Corners = Shape<{
   +topLeft: boolean,
   +topRight: boolean,
   +bottomLeft: boolean,
   +bottomRight: boolean,
 }>;
 
 export type MediaInfo =
   | {
       ...Image,
       +index: number,
     }
   | {
       ...Video,
       +index: number,
+    }
+  | {
+      ...EncryptedImage,
+      +index: number,
+    }
+  | {
+      ...EncryptedVideo,
+      +index: number,
     };
 
 export type UploadMultimediaResult = {
   +id: string,
   +uri: string,
   +dimensions: Dimensions,
   +mediaType: MediaType,
   +loop: boolean,
 };
 
 export type UpdateMultimediaMessageMediaPayload = {
   +messageID: string,
   +currentMediaID: string,
   +mediaUpdate: Shape<Media>,
 };
 
 export type UploadDeletionRequest = {
   +id: string,
 };
 
 export type FFmpegStatistics = {
   // seconds of video being processed per second
   +speed: number,
   // total milliseconds of video processed so far
   +time: number,
   // total result file size in bytes so far
   +size: number,
   +videoQuality: number,
   +videoFrameNumber: number,
   +videoFps: number,
   +bitrate: number,
 };
 
 export type TranscodeVideoMediaMissionStep = {
   +step: 'video_ffmpeg_transcode',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +returnCode: ?number,
   +newPath: ?string,
   +stats: ?FFmpegStatistics,
 };
 
 export type VideoGenerateThumbnailMediaMissionStep = {
   +step: 'video_generate_thumbnail',
   +success: boolean,
   +time: number, // ms
   +returnCode: number,
   +thumbnailURI: string,
 };
 
 export type VideoInfo = {
   +codec: ?string,
   +dimensions: ?Dimensions,
   +duration: number, // seconds
   +format: $ReadOnlyArray<string>,
 };
 
 export type VideoProbeMediaMissionStep = {
   +step: 'video_probe',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
   +validFormat: boolean,
   +duration: ?number, // seconds
   +codec: ?string,
   +format: ?$ReadOnlyArray<string>,
   +dimensions: ?Dimensions,
 };
 
 export type ReadFileHeaderMediaMissionStep = {
   +step: 'read_file_header',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +uri: string,
   +mime: ?string,
   +mediaType: ?MediaType,
 };
 
 export type DetermineFileTypeMediaMissionStep = {
   +step: 'determine_file_type',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +inputFilename: string,
   +outputMIME: ?string,
   +outputMediaType: ?MediaType,
   +outputFilename: ?string,
 };
 
 export type FrameCountMediaMissionStep = {
   +step: 'frame_count',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number,
   +path: string,
   +mime: string,
   +hasMultipleFrames: ?boolean,
 };
 
 export type DisposeTemporaryFileMediaMissionStep = {
   +step: 'dispose_temporary_file',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
 };
 
 export type MakeDirectoryMediaMissionStep = {
   +step: 'make_directory',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
 };
 
 export type AndroidScanFileMediaMissionStep = {
   +step: 'android_scan_file',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
 };
 
 export type FetchFileHashMediaMissionStep = {
   +step: 'fetch_file_hash',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
   +hash: ?string,
 };
 
 export type CopyFileMediaMissionStep = {
   +step: 'copy_file',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +source: string,
   +destination: string,
 };
 
 export type GetOrientationMediaMissionStep = {
   +step: 'exif_fetch',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +orientation: ?number,
 };
 
 export type MediaLibrarySelection =
   | {
       +step: 'photo_library',
       +dimensions: Dimensions,
       +filename: ?string,
       +uri: string,
       +mediaNativeID: ?string,
       +selectTime: number, // ms timestamp
       +sendTime: number, // ms timestamp
       +retries: number,
     }
   | {
       +step: 'video_library',
       +dimensions: Dimensions,
       +filename: ?string,
       +uri: string,
       +mediaNativeID: ?string,
       +selectTime: number, // ms timestamp
       +sendTime: number, // ms timestamp
       +retries: number,
       +duration: number, // seconds
     };
 
 export type PhotoCapture = {
   +step: 'photo_capture',
   +time: number, // ms
   +dimensions: Dimensions,
   +filename: string,
   +uri: string,
   +captureTime: number, // ms timestamp
   +selectTime: number, // ms timestamp
   +sendTime: number, // ms timestamp
   +retries: number,
 };
 
 export type PhotoPaste = {
   +step: 'photo_paste',
   +dimensions: Dimensions,
   +filename: string,
   +uri: string,
   +selectTime: number, // ms timestamp
   +sendTime: number, // ms timestamp
   +retries: number,
 };
 
 export type NativeMediaSelection =
   | MediaLibrarySelection
   | PhotoCapture
   | PhotoPaste;
 
 export type MediaMissionStep =
   | NativeMediaSelection
   | {
       +step: 'web_selection',
       +filename: string,
       +size: number, // in bytes
       +mime: string,
       +selectTime: number, // ms timestamp
     }
   | {
       +step: 'asset_info_fetch',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +localURI: ?string,
       +orientation: ?number,
     }
   | {
       +step: 'stat_file',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +uri: string,
       +fileSize: ?number,
     }
   | ReadFileHeaderMediaMissionStep
   | DetermineFileTypeMediaMissionStep
   | FrameCountMediaMissionStep
   | {
       +step: 'photo_manipulation',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +manipulation: Object,
       +newMIME: ?string,
       +newDimensions: ?Dimensions,
       +newURI: ?string,
     }
   | VideoProbeMediaMissionStep
   | TranscodeVideoMediaMissionStep
   | VideoGenerateThumbnailMediaMissionStep
   | DisposeTemporaryFileMediaMissionStep
   | {
       +step: 'save_media',
       +uri: string,
       +time: number, // ms timestamp
     }
   | {
       +step: 'permissions_check',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +platform: Platform,
       +permissions: $ReadOnlyArray<string>,
     }
   | MakeDirectoryMediaMissionStep
   | AndroidScanFileMediaMissionStep
   | {
       +step: 'ios_save_to_library',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +uri: string,
     }
   | {
       +step: 'fetch_blob',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +inputURI: string,
       +uri: string,
       +size: ?number,
       +mime: ?string,
     }
   | {
       +step: 'data_uri_from_blob',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +first255Chars: ?string,
     }
   | {
       +step: 'array_buffer_from_blob',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
     }
   | {
       +step: 'mime_check',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +mime: ?string,
     }
   | {
       +step: 'write_file',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +path: string,
       +length: number,
     }
   | FetchFileHashMediaMissionStep
   | CopyFileMediaMissionStep
   | GetOrientationMediaMissionStep
   | {
       +step: 'preload_image',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +uri: string,
       +dimensions: ?Dimensions,
     }
   | {
       +step: 'reorient_image',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +uri: ?string,
     }
   | {
       +step: 'upload',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +inputFilename: string,
       +outputMediaType: ?MediaType,
       +outputURI: ?string,
       +outputDimensions: ?Dimensions,
       +outputLoop: ?boolean,
       +hasWiFi?: boolean,
     }
   | {
       +step: 'wait_for_capture_uri_unload',
       +success: boolean,
       +time: number, // ms
       +uri: string,
     };
 
 export type MediaMissionFailure =
   | {
       +success: false,
       +reason: 'no_file_path',
     }
   | {
       +success: false,
       +reason: 'file_stat_failed',
       +uri: string,
     }
   | {
       +success: false,
       +reason: 'photo_manipulation_failed',
       +size: number, // in bytes
     }
   | {
       +success: false,
       +reason: 'media_type_fetch_failed',
       +detectedMIME: ?string,
     }
   | {
       +success: false,
       +reason: 'mime_type_mismatch',
       +reportedMediaType: MediaType,
       +reportedMIME: string,
       +detectedMIME: string,
     }
   | {
       +success: false,
       +reason: 'http_upload_failed',
       +exceptionMessage: ?string,
     }
   | {
       +success: false,
       +reason: 'video_too_long',
       +duration: number, // in seconds
     }
   | {
       +success: false,
       +reason: 'video_probe_failed',
     }
   | {
       +success: false,
       +reason: 'video_transcode_failed',
     }
   | {
       +success: false,
       +reason: 'video_generate_thumbnail_failed',
     }
   | {
       +success: false,
       +reason: 'processing_exception',
       +time: number, // ms
       +exceptionMessage: ?string,
     }
   | {
       +success: false,
       +reason: 'save_unsupported',
     }
   | {
       +success: false,
       +reason: 'missing_permission',
     }
   | {
       +success: false,
       +reason: 'make_directory_failed',
     }
   | {
       +success: false,
       +reason: 'resolve_failed',
       +uri: string,
     }
   | {
       +success: false,
       +reason: 'save_to_library_failed',
       +uri: string,
     }
   | {
       +success: false,
       +reason: 'fetch_failed',
     }
   | {
       +success: false,
       +reason: 'data_uri_failed',
     }
   | {
       +success: false,
       +reason: 'array_buffer_failed',
     }
   | {
       +success: false,
       +reason: 'mime_check_failed',
       +mime: ?string,
     }
   | {
       +success: false,
       +reason: 'write_file_failed',
     }
   | {
       +success: false,
       +reason: 'fetch_file_hash_failed',
     }
   | {
       +success: false,
       +reason: 'copy_file_failed',
     }
   | {
       +success: false,
       +reason: 'exif_fetch_failed',
     }
   | {
       +success: false,
       +reason: 'reorient_image_failed',
     }
   | {
       +success: false,
       +reason: 'web_sibling_validation_failed',
     };
 
 export type MediaMissionResult = MediaMissionFailure | { +success: true };
 
 export type MediaMission = {
   +steps: $ReadOnlyArray<MediaMissionStep>,
   +result: MediaMissionResult,
   +userTime: number,
   +totalTime: number,
 };
diff --git a/lib/types/messages/media.js b/lib/types/messages/media.js
index 4a8ed6337..28e2d9d5e 100644
--- a/lib/types/messages/media.js
+++ b/lib/types/messages/media.js
@@ -1,78 +1,79 @@
 // @flow
 
 import type { Media } from '../media-types.js';
 import type { RelativeUserInfo } from '../user-types.js';
 
 type MediaSharedBase = {
   +type: 15,
   +localID?: string, // for optimistic creations. included by new clients
   +threadID: string,
   +creatorID: string,
   +time: number,
   +media: $ReadOnlyArray<Media>,
 };
 
 export type MediaMessageData = {
   ...MediaSharedBase,
   +sidebarCreation?: boolean,
 };
 
 export type RawMediaMessageInfo = {
   ...MediaSharedBase,
   +id?: string, // null if local copy without ID yet
 };
 
 export type MediaMessageInfo = {
   +type: 15,
   +id?: string, // null if local copy without ID yet
   +localID?: string, // for optimistic creations
   +threadID: string,
   +creator: RelativeUserInfo,
   +time: number, // millisecond timestamp
   +media: $ReadOnlyArray<Media>,
 };
 
 export type MediaMessageServerDBContent =
   | {
       +type: 'photo',
       +uploadID: string,
     }
   | {
       +type: 'video',
       +uploadID: string,
       +thumbnailUploadID: string,
     };
 
 function getUploadIDsFromMediaMessageServerDBContents(
   mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
 ): $ReadOnlyArray<string> {
   const uploadIDs: string[] = [];
   for (const mediaContent of mediaMessageContents) {
     uploadIDs.push(mediaContent.uploadID);
     if (mediaContent.type === 'video') {
       uploadIDs.push(mediaContent.thumbnailUploadID);
     }
   }
   return uploadIDs;
 }
 
 function getMediaMessageServerDBContentsFromMedia(
   media: $ReadOnlyArray<Media>,
 ): $ReadOnlyArray<MediaMessageServerDBContent> {
   return media.map(m => {
-    if (m.type === 'photo') {
+    if (m.type === 'photo' || m.type === 'encrypted_photo') {
       return { type: 'photo', uploadID: m.id };
-    } else {
+    } else if (m.type === 'video' || m.type === 'encrypted_video') {
       return {
         type: 'video',
         uploadID: m.id,
         thumbnailUploadID: m.thumbnailID,
       };
     }
+    throw new Error(`Unexpected media type: ${m.type}`);
   });
 }
 
 export {
   getUploadIDsFromMediaMessageServerDBContents,
   getMediaMessageServerDBContentsFromMedia,
 };
diff --git a/lib/utils/message-ops-utils.js b/lib/utils/message-ops-utils.js
index bd0f89a25..7630e742a 100644
--- a/lib/utils/message-ops-utils.js
+++ b/lib/utils/message-ops-utils.js
@@ -1,207 +1,212 @@
 // @flow
 
+import invariant from 'invariant';
 import _keyBy from 'lodash/fp/keyBy.js';
 
 import { messageID } from '../shared/message-utils.js';
 import { messageSpecs } from '../shared/messages/message-specs.js';
 import type {
   Media,
   ClientDBMediaInfo,
   Image,
   Video,
 } from '../types/media-types.js';
 import {
   type ClientDBMessageInfo,
   type RawMessageInfo,
   messageTypes,
   assertMessageType,
   type MessageStoreOperation,
   type ClientDBMessageStoreOperation,
 } from '../types/message-types.js';
 import type { MediaMessageServerDBContent } from '../types/messages/media.js';
 
 function translateMediaToClientDBMediaInfos(
   media: $ReadOnlyArray<Media>,
 ): $ReadOnlyArray<ClientDBMediaInfo> {
   const clientDBMediaInfos = [];
   for (const m of media) {
+    invariant(
+      m.type === 'photo' || m.type === 'video',
+      'unimplemented media type',
+    );
     clientDBMediaInfos.push({
       id: m.id,
       uri: m.uri,
       type: m.type,
       extras: JSON.stringify({
         dimensions: m.dimensions,
         loop: m.type === 'video' ? m.loop : false,
         local_media_selection: m.localMediaSelection,
       }),
     });
     if (m.type === 'video') {
       clientDBMediaInfos.push({
         id: m.thumbnailID,
         uri: m.thumbnailURI,
         type: 'photo',
         extras: JSON.stringify({
           dimensions: m.dimensions,
           loop: false,
         }),
       });
     }
   }
   return clientDBMediaInfos;
 }
 
 function translateClientDBMediaInfoToImage(
   clientDBMediaInfo: ClientDBMediaInfo,
 ): Image {
   const { dimensions, local_media_selection } = JSON.parse(
     clientDBMediaInfo.extras,
   );
 
   if (!local_media_selection) {
     return {
       id: clientDBMediaInfo.id,
       uri: clientDBMediaInfo.uri,
       type: 'photo',
       dimensions: dimensions,
     };
   }
   return {
     id: clientDBMediaInfo.id,
     uri: clientDBMediaInfo.uri,
     type: 'photo',
     dimensions: dimensions,
     localMediaSelection: local_media_selection,
   };
 }
 
 function translateClientDBMediaInfosToMedia(
   clientDBMessageInfo: ClientDBMessageInfo,
 ): $ReadOnlyArray<Media> {
   if (parseInt(clientDBMessageInfo.type) === messageTypes.IMAGES) {
     if (!clientDBMessageInfo.media_infos) {
       return [];
     }
     return clientDBMessageInfo.media_infos.map(
       translateClientDBMediaInfoToImage,
     );
   }
   if (!clientDBMessageInfo.media_infos) {
     return [];
   }
   const mediaInfos: $ReadOnlyArray<ClientDBMediaInfo> =
     clientDBMessageInfo.media_infos;
   const mediaMap = _keyBy('id')(mediaInfos);
 
   if (!clientDBMessageInfo.content) {
     return [];
   }
   const messageContent: $ReadOnlyArray<MediaMessageServerDBContent> =
     JSON.parse(clientDBMessageInfo.content);
 
   const translatedMedia = [];
   for (const media of messageContent) {
     if (media.type === 'photo') {
       const extras = JSON.parse(mediaMap[media.uploadID].extras);
       const { dimensions } = extras;
 
       const image: Image = {
         id: media.uploadID,
         uri: mediaMap[media.uploadID].uri,
         type: 'photo',
         dimensions,
       };
       translatedMedia.push(image);
     } else if (media.type === 'video') {
       const extras = JSON.parse(mediaMap[media.uploadID].extras);
       const {
         dimensions,
         loop,
         local_media_selection: localMediaSelection,
       } = extras;
 
       const video: Video = {
         id: media.uploadID,
         uri: mediaMap[media.uploadID].uri,
         type: 'video',
         dimensions,
         loop,
         thumbnailID: media.thumbnailUploadID,
         thumbnailURI: mediaMap[media.thumbnailUploadID].uri,
       };
       translatedMedia.push(
         localMediaSelection ? { ...video, localMediaSelection } : video,
       );
     }
   }
   return translatedMedia;
 }
 
 function translateRawMessageInfoToClientDBMessageInfo(
   rawMessageInfo: RawMessageInfo,
 ): ClientDBMessageInfo {
   return {
     id: messageID(rawMessageInfo),
     local_id: rawMessageInfo.localID ? rawMessageInfo.localID : null,
     thread: rawMessageInfo.threadID,
     user: rawMessageInfo.creatorID,
     type: rawMessageInfo.type.toString(),
     future_type:
       rawMessageInfo.type === messageTypes.UNSUPPORTED
         ? rawMessageInfo.unsupportedMessageInfo.type.toString()
         : null,
     time: rawMessageInfo.time.toString(),
     content:
       messageSpecs[rawMessageInfo.type].messageContentForClientDB?.(
         rawMessageInfo,
       ),
     media_infos:
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
         ? translateMediaToClientDBMediaInfos(rawMessageInfo.media)
         : null,
   };
 }
 
 function translateClientDBMessageInfoToRawMessageInfo(
   clientDBMessageInfo: ClientDBMessageInfo,
 ): RawMessageInfo {
   return messageSpecs[
     assertMessageType(parseInt(clientDBMessageInfo.type))
   ].rawMessageInfoFromClientDB(clientDBMessageInfo);
 }
 
 function translateClientDBMessageInfosToRawMessageInfos(
   clientDBMessageInfos: $ReadOnlyArray<ClientDBMessageInfo>,
 ): { +[id: string]: RawMessageInfo } {
   return Object.fromEntries(
     clientDBMessageInfos.map((dbMessageInfo: ClientDBMessageInfo) => [
       dbMessageInfo.id,
       translateClientDBMessageInfoToRawMessageInfo(dbMessageInfo),
     ]),
   );
 }
 
 function convertMessageStoreOperationsToClientDBOperations(
   messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
 ): $ReadOnlyArray<ClientDBMessageStoreOperation> {
   return messageStoreOperations.map(messageStoreOperation => {
     if (messageStoreOperation.type !== 'replace') {
       return messageStoreOperation;
     }
     return {
       type: 'replace',
       payload: translateRawMessageInfoToClientDBMessageInfo(
         messageStoreOperation.payload.messageInfo,
       ),
     };
   });
 }
 
 export {
   translateClientDBMediaInfoToImage,
   translateRawMessageInfoToClientDBMessageInfo,
   translateClientDBMessageInfoToRawMessageInfo,
   translateClientDBMessageInfosToRawMessageInfos,
   convertMessageStoreOperationsToClientDBOperations,
   translateClientDBMediaInfosToMedia,
 };
diff --git a/native/input/input-state-container.react.js b/native/input/input-state-container.react.js
index 837818ae0..00f28c4f1 100644
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1,1530 +1,1535 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform } from 'react-native';
 import * as Upload from 'react-native-background-upload';
 import { useDispatch } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   sendMultimediaMessage,
   sendTextMessageActionTypes,
   sendTextMessage,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { newThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   updateMultimediaMessageMediaActionType,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
 } from 'lib/actions/upload-actions.js';
 import { pathFromURI, replaceExtension } from 'lib/media/file-utils.js';
 import {
   isLocalUploadID,
   getNextLocalUploadID,
 } from 'lib/media/media-utils.js';
 import { videoDurationLimit } from 'lib/media/video-utils.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import {
   createMediaMessageInfo,
   localIDPrefix,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   Media,
   NativeMediaSelection,
   MediaMissionResult,
   MediaMission,
 } from 'lib/types/media-types.js';
 import {
   messageTypes,
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } from 'lib/types/message-types.js';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images.js';
 import type {
   MediaMessageServerDBContent,
   RawMediaMessageInfo,
 } from 'lib/types/messages/media.js';
 import { getMediaMessageServerDBContentsFromMedia } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import {
   type MediaMissionReportCreationRequest,
   reportTypes,
 } from 'lib/types/report-types.js';
 import {
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ThreadInfo,
   threadTypes,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import type {
   CallServerEndpointOptions,
   CallServerEndpointResponse,
 } from 'lib/utils/call-server-endpoint.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
 import { values } from 'lib/utils/objects.js';
 import { useIsReportEnabled } from 'lib/utils/report-utils.js';
 
 import {
   InputStateContext,
   type PendingMultimediaUploads,
   type MultimediaProcessingStep,
 } from './input-state.js';
 import { disposeTempFile } from '../media/file-utils.js';
 import { processMedia } from '../media/media-utils.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type MediaIDs =
   | { +type: 'photo', +localMediaID: string }
   | { +type: 'video', +localMediaID: string, +localThumbnailID: string };
 type UploadFileInput = {
   +selection: NativeMediaSelection,
   +ids: MediaIDs,
 };
 type CompletedUploads = { +[localMessageID: string]: ?Set<string> };
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +nextLocalID: number,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +ongoingMessageCreation: boolean,
   +hasWiFi: boolean,
   +mediaReportsEnabled: boolean,
   +calendarQuery: () => CalendarQuery,
   +dispatch: Dispatch,
   +staffCanSee: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +sendMultimediaMessage: (
     threadID: string,
     localID: string,
     mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
     sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (
     threadID: string,
     localID: string,
     text: string,
     sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type State = {
   +pendingUploads: PendingMultimediaUploads,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
   };
   sendCallbacks: Array<() => void> = [];
   activeURIs = new Map();
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
   pendingThreadUpdateHandlers = new Map<string, (ThreadInfo) => mixed>();
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs = new Set<string>();
 
   static getCompletedUploads(props: Props, state: State): CompletedUploads {
     const completedUploads = {};
     for (const localMessageID in state.pendingUploads) {
       const messagePendingUploads = state.pendingUploads[localMessageID];
       const rawMessageInfo = props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
 
       let allUploadsComplete = true;
       const completedUploadIDs = new Set(Object.keys(messagePendingUploads));
       for (const singleMedia of rawMessageInfo.media) {
         if (isLocalUploadID(singleMedia.id)) {
           allUploadsComplete = false;
           completedUploadIDs.delete(singleMedia.id);
         }
       }
 
       if (allUploadsComplete) {
         completedUploads[localMessageID] = null;
       } else if (completedUploadIDs.size > 0) {
         completedUploads[localMessageID] = completedUploadIDs;
       }
     }
     return completedUploads;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const currentlyComplete = InputStateContainer.getCompletedUploads(
       this.props,
       this.state,
     );
     const previouslyComplete = InputStateContainer.getCompletedUploads(
       prevProps,
       prevState,
     );
 
     const newPendingUploads = {};
     let pendingUploadsChanged = false;
     const readyMessageIDs = [];
     for (const localMessageID in this.state.pendingUploads) {
       const messagePendingUploads = this.state.pendingUploads[localMessageID];
       const prevRawMessageInfo = prevProps.messageStoreMessages[localMessageID];
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       const completedUploadIDs = currentlyComplete[localMessageID];
       const previouslyCompletedUploadIDs = previouslyComplete[localMessageID];
 
       if (!rawMessageInfo && prevRawMessageInfo) {
         pendingUploadsChanged = true;
         continue;
       } else if (completedUploadIDs === null) {
         // All of this message's uploads have been completed
         newPendingUploads[localMessageID] = {};
         if (previouslyCompletedUploadIDs !== null) {
           readyMessageIDs.push(localMessageID);
           pendingUploadsChanged = true;
         }
         continue;
       } else if (!completedUploadIDs) {
         // Nothing has been completed
         newPendingUploads[localMessageID] = messagePendingUploads;
         continue;
       }
 
       const newUploads = {};
       let uploadsChanged = false;
       for (const localUploadID in messagePendingUploads) {
         if (!completedUploadIDs.has(localUploadID)) {
           newUploads[localUploadID] = messagePendingUploads[localUploadID];
         } else if (
           !previouslyCompletedUploadIDs ||
           !previouslyCompletedUploadIDs.has(localUploadID)
         ) {
           uploadsChanged = true;
         }
       }
 
       if (uploadsChanged) {
         pendingUploadsChanged = true;
         newPendingUploads[localMessageID] = newUploads;
       } else {
         newPendingUploads[localMessageID] = messagePendingUploads;
       }
     }
     if (pendingUploadsChanged) {
       this.setState({ pendingUploads: newPendingUploads });
     }
 
     for (const localMessageID of readyMessageIDs) {
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
       this.dispatchMultimediaMessageAction(rawMessageInfo);
     }
   }
 
   async dispatchMultimediaMessageAction(messageInfo: RawMultimediaMessageInfo) {
     if (!threadIsPending(messageInfo.threadID)) {
       this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaMessageContents = getMediaMessageServerDBContentsFromMedia(
       messageInfo.media,
     );
     try {
       const result = await this.props.sendMultimediaMessage(
         threadID,
         localID,
         mediaMessageContents,
         sidebarCreation,
       );
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = localID;
       copy.threadID = threadID;
       throw copy;
     }
   }
 
   inputStateSelector = createSelector(
     (state: State) => state.pendingUploads,
     (pendingUploads: PendingMultimediaUploads) => ({
       pendingUploads,
       sendTextMessage: this.sendTextMessage,
       sendMultimediaMessage: this.sendMultimediaMessage,
       addReply: this.addReply,
       addReplyListener: this.addReplyListener,
       removeReplyListener: this.removeReplyListener,
       messageHasUploadFailure: this.messageHasUploadFailure,
       retryMessage: this.retryMessage,
       registerSendCallback: this.registerSendCallback,
       unregisterSendCallback: this.unregisterSendCallback,
       uploadInProgress: this.uploadInProgress,
       reportURIDisplayed: this.reportURIDisplayed,
       setPendingThreadUpdateHandler: this.setPendingThreadUpdateHandler,
     }),
   );
 
   uploadInProgress = () => {
     if (this.props.ongoingMessageCreation) {
       return true;
     }
     const { pendingUploads } = this.state;
     return values(pendingUploads).some(messagePendingUploads =>
       values(messagePendingUploads).some(upload => !upload.failed),
     );
   };
 
   sendTextMessage = async (
     messageInfo: RawTextMessageInfo,
     inputThreadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     if (threadIsPendingSidebar(inputThreadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localID);
     }
 
     if (!threadIsPending(inputThreadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(
           messageInfo,
           inputThreadInfo,
           parentThreadInfo,
         ),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let threadInfo = inputThreadInfo;
     const { viewerID } = this.props;
     if (viewerID && inputThreadInfo.type === threadTypes.SIDEBAR) {
       invariant(parentThreadInfo, 'sidebar should have parent');
       threadInfo = patchThreadInfoToIncludeMentionedMembersOfParent(
         inputThreadInfo,
         parentThreadInfo,
         messageInfo.text,
         viewerID,
       );
       if (threadInfo !== inputThreadInfo) {
         const pendingThreadUpdateHandler = this.pendingThreadUpdateHandlers.get(
           threadInfo.id,
         );
         pendingThreadUpdateHandler?.(threadInfo);
       }
     }
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     const newThreadInfo = {
       ...threadInfo,
       id: newThreadID,
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   };
 
   startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return Promise.resolve(threadInfo.id);
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ): Promise<SendMessagePayload> {
     try {
       await this.props.textMessageCreationSideEffectsFunc(
         messageInfo,
         threadInfo,
         parentThreadInfo,
       );
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const sidebarCreation =
         this.pendingSidebarCreationMessageLocalIDs.has(localID);
       const result = await this.props.sendTextMessage(
         messageInfo.threadID,
         localID,
         messageInfo.text,
         sidebarCreation,
       );
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID: messageInfo.threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       throw copy;
     }
   }
 
   sendMultimediaMessage = async (
     selections: $ReadOnlyArray<NativeMediaSelection>,
     threadInfo: ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
     const localMessageID = `${localIDPrefix}${this.props.nextLocalID}`;
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const uploadFileInputs = [],
       media = [];
     for (const selection of selections) {
       const localMediaID = getNextLocalUploadID();
       let ids;
       if (
         selection.step === 'photo_library' ||
         selection.step === 'photo_capture' ||
         selection.step === 'photo_paste'
       ) {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'photo',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
         });
         ids = { type: 'photo', localMediaID };
       }
       const localThumbnailID = getNextLocalUploadID();
       if (selection.step === 'video_library') {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'video',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           loop: false,
           thumbnailID: localThumbnailID,
           thumbnailURI: selection.uri,
         });
         ids = { type: 'video', localMediaID, localThumbnailID };
       }
       invariant(ids, `unexpected MediaSelection ${selection.step}`);
       uploadFileInputs.push({ selection, ids });
     }
 
     const pendingUploads = {};
     for (const uploadFileInput of uploadFileInputs) {
       const { localMediaID } = uploadFileInput.ids;
       pendingUploads[localMediaID] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (uploadFileInput.ids.type === 'video') {
         const { localThumbnailID } = uploadFileInput.ids;
         pendingUploads[localThumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
 
     this.setState(
       prevState => {
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [localMessageID]: pendingUploads,
           },
         };
       },
       () => {
         const creatorID = this.props.viewerID;
         invariant(creatorID, 'need viewer ID in order to send a message');
         const messageInfo = createMediaMessageInfo({
           localID: localMessageID,
           threadID: threadInfo.id,
           creatorID,
           media,
         });
         this.props.dispatch({
           type: createLocalMessageActionType,
           payload: messageInfo,
         });
       },
     );
 
     await this.uploadFiles(localMessageID, uploadFileInputs);
   };
 
   async uploadFiles(
     localMessageID: string,
     uploadFileInputs: $ReadOnlyArray<UploadFileInput>,
   ) {
     const results = await Promise.all(
       uploadFileInputs.map(uploadFileInput =>
         this.uploadFile(localMessageID, uploadFileInput),
       ),
     );
     const errors = [...new Set(results.filter(Boolean))];
     if (errors.length > 0) {
       displayActionResultModal(errors.join(', ') + ' :(');
     }
   }
 
   async uploadFile(
     localMessageID: string,
     uploadFileInput: UploadFileInput,
   ): Promise<?string> {
     const { ids, selection } = uploadFileInput;
     const { localMediaID } = ids;
     const start = selection.sendTime;
     const steps = [selection];
     let serverID;
     let userTime;
     let errorMessage;
     let reportPromise;
 
     const onUploadFinished = async (result: MediaMissionResult) => {
       if (!this.props.mediaReportsEnabled) {
         return errorMessage;
       }
       if (reportPromise) {
         const finalSteps = await reportPromise;
         steps.push(...finalSteps);
       }
       const totalTime = Date.now() - start;
       userTime = userTime ? userTime : totalTime;
       this.queueMediaMissionReport(
         { localID: localMediaID, localMessageID, serverID },
         { steps, result, totalTime, userTime },
       );
       return errorMessage;
     };
     const onUploadFailed = (mediaID: string, message: string) => {
       errorMessage = message;
       this.handleUploadFailure(localMessageID, mediaID);
       userTime = Date.now() - start;
     };
 
     let processedMedia;
     const processingStart = Date.now();
     try {
       const processMediaReturn = processMedia(
         selection,
         this.mediaProcessConfig(localMessageID, localMediaID),
       );
       reportPromise = processMediaReturn.reportPromise;
       const processResult = await processMediaReturn.resultPromise;
       if (!processResult.success) {
         const message =
           processResult.reason === 'video_too_long'
             ? `can't do vids longer than ${videoDurationLimit}min`
             : 'processing failed';
         onUploadFailed(localMediaID, message);
         return await onUploadFinished(processResult);
       }
       processedMedia = processResult;
     } catch (e) {
       onUploadFailed(localMediaID, 'processing failed');
       return await onUploadFinished({
         success: false,
         reason: 'processing_exception',
         time: Date.now() - processingStart,
         exceptionMessage: getMessageForException(e),
       });
     }
 
     const { uploadURI, shouldDisposePath, filename, mime } = processedMedia;
 
     const { hasWiFi } = this.props;
 
     const uploadStart = Date.now();
     let uploadExceptionMessage,
       uploadResult,
       uploadThumbnailResult,
       mediaMissionResult;
     try {
       const uploadPromises = [];
       uploadPromises.push(
         this.props.uploadMultimedia(
           { uri: uploadURI, name: filename, type: mime },
           {
             ...processedMedia.dimensions,
             loop:
               processedMedia.mediaType === 'video'
                 ? processedMedia.loop
                 : undefined,
           },
           {
             onProgress: (percent: number) =>
               this.setProgress(
                 localMessageID,
                 localMediaID,
                 'uploading',
                 percent,
               ),
             uploadBlob: this.uploadBlob,
           },
         ),
       );
 
       if (processedMedia.mediaType === 'video') {
         uploadPromises.push(
           this.props.uploadMultimedia(
             {
               uri: processedMedia.uploadThumbnailURI,
               name: replaceExtension(`thumb${filename}`, 'jpg'),
               type: 'image/jpeg',
             },
             {
               ...processedMedia.dimensions,
               loop: false,
             },
             {
               uploadBlob: this.uploadBlob,
             },
           ),
         );
       }
       [uploadResult, uploadThumbnailResult] = await Promise.all(uploadPromises);
       mediaMissionResult = { success: true };
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       onUploadFailed(localMediaID, 'upload failed');
       mediaMissionResult = {
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       };
     }
 
     if (
       (processedMedia.mediaType === 'photo' && uploadResult) ||
       (processedMedia.mediaType === 'video' &&
         uploadResult &&
         uploadThumbnailResult)
     ) {
       const { id, uri, dimensions, loop } = uploadResult;
       serverID = id;
 
       let updateMediaPayload = {
         messageID: localMessageID,
         currentMediaID: localMediaID,
         mediaUpdate: {
           id,
           type: uploadResult.mediaType,
           uri,
           dimensions,
           localMediaSelection: undefined,
           loop: uploadResult.mediaType === 'video' ? loop : undefined,
         },
       };
 
       if (processedMedia.mediaType === 'video') {
         invariant(uploadThumbnailResult, 'uploadThumbnailResult exists');
         const { uri: thumbnailURI, id: thumbnailID } = uploadThumbnailResult;
         updateMediaPayload = {
           ...updateMediaPayload,
           mediaUpdate: {
             ...updateMediaPayload.mediaUpdate,
             thumbnailURI,
             thumbnailID,
           },
         };
       }
 
       // When we dispatch this action, it updates Redux and triggers the
       // componentDidUpdate in this class. componentDidUpdate will handle
       // calling dispatchMultimediaMessageAction once all the uploads are
       // complete, and does not wait until this function concludes.
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: updateMediaPayload,
       });
       userTime = Date.now() - start;
     }
 
     const processSteps = await reportPromise;
     reportPromise = null;
     steps.push(...processSteps);
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: filename,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
       hasWiFi,
     });
 
     const cleanupPromises = [];
 
     if (shouldDisposePath) {
       // If processMedia needed to do any transcoding before upload, we dispose
       // of the resultant temporary file here. Since the transcoded temporary
       // file is only used for upload, we can dispose of it after processMedia
       // (reportPromise) and the upload are complete
       cleanupPromises.push(
         (async () => {
           const disposeStep = await disposeTempFile(shouldDisposePath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     // if there's a thumbnail we'll temporarily unlink it here
     // instead of in media-utils, will be changed in later diffs
     if (processedMedia.mediaType === 'video') {
       const { uploadThumbnailURI } = processedMedia;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: thumbnailPath } =
             await this.waitForCaptureURIUnload(uploadThumbnailURI);
           steps.push(...clearSteps);
           if (!thumbnailPath) {
             return;
           }
           const disposeStep = await disposeTempFile(thumbnailPath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     if (selection.captureTime || selection.step === 'photo_paste') {
       // If we are uploading a newly captured photo, we dispose of the original
       // file here. Note that we try to save photo captures to the camera roll
       // if we have permission. Even if we fail, this temporary file isn't
       // visible to the user, so there's no point in keeping it around. Since
       // the initial URI is used in rendering paths, we have to wait for it to
       // be replaced with the remote URI before we can dispose. Check out the
       // Multimedia component to see how the URIs get switched out.
       const captureURI = selection.uri;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: capturePath } =
             await this.waitForCaptureURIUnload(captureURI);
           steps.push(...clearSteps);
           if (!capturePath) {
             return;
           }
           const disposeStep = await disposeTempFile(capturePath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     await Promise.all(cleanupPromises);
 
     return await onUploadFinished(mediaMissionResult);
   }
 
   mediaProcessConfig(localMessageID: string, localID: string) {
     const { hasWiFi, staffCanSee } = this.props;
     const onTranscodingProgress = (percent: number) => {
       this.setProgress(localMessageID, localID, 'transcoding', percent);
     };
     if (staffCanSee) {
       return {
         hasWiFi,
         finalFileHeaderCheck: true,
         onTranscodingProgress,
       };
     }
     return { hasWiFi, onTranscodingProgress };
   }
 
   setProgress(
     localMessageID: string,
     localUploadID: string,
     processingStep: MultimediaProcessingStep,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const pendingUploads = prevState.pendingUploads[localMessageID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newOutOfHundred = Math.floor(progressPercent * 100);
       const oldOutOfHundred = Math.floor(pendingUpload.progressPercent * 100);
       if (newOutOfHundred === oldOutOfHundred) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
           processingStep,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: newPendingUploads,
         },
       };
     });
   }
 
   uploadBlob = async (
     url: string,
     cookie: ?string,
     sessionID: ?string,
     input: { [key: string]: mixed },
     options?: ?CallServerEndpointOptions,
   ): Promise<CallServerEndpointResponse> => {
     invariant(
       cookie &&
         input.multimedia &&
         Array.isArray(input.multimedia) &&
         input.multimedia.length === 1 &&
         input.multimedia[0] &&
         typeof input.multimedia[0] === 'object',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
     const { uri, name, type } = input.multimedia[0];
     invariant(
       typeof uri === 'string' &&
         typeof name === 'string' &&
         typeof type === 'string',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
 
     const parameters = {};
     parameters.cookie = cookie;
     parameters.filename = name;
 
     for (const key in input) {
       if (
         key === 'multimedia' ||
         key === 'cookie' ||
         key === 'sessionID' ||
         key === 'filename'
       ) {
         continue;
       }
       const value = input[key];
       invariant(
         typeof value === 'string',
         'blobUpload calls can only handle string values for non-multimedia keys',
       );
       parameters[key] = value;
     }
 
     let path = uri;
     if (Platform.OS === 'android') {
       const resolvedPath = pathFromURI(uri);
       if (resolvedPath) {
         path = resolvedPath;
       }
     }
     const uploadID = await Upload.startUpload({
       url,
       path,
       type: 'multipart',
       headers: {
         Accept: 'application/json',
       },
       field: 'multimedia',
       parameters,
     });
     if (options && options.abortHandler) {
       options.abortHandler(() => {
         Upload.cancelUpload(uploadID);
       });
     }
     return await new Promise((resolve, reject) => {
       Upload.addListener('error', uploadID, data => {
         reject(data.error);
       });
       Upload.addListener('cancelled', uploadID, () => {
         reject(new Error('request aborted'));
       });
       Upload.addListener('completed', uploadID, data => {
         try {
           resolve(JSON.parse(data.responseBody));
         } catch (e) {
           reject(e);
         }
       });
       if (options && options.onProgress) {
         const { onProgress } = options;
         Upload.addListener('progress', uploadID, data =>
           onProgress(data.progress / 100),
         );
       }
     });
   };
 
   handleUploadFailure(localMessageID: string, localUploadID: string) {
     this.setState(prevState => {
       const uploads = prevState.pendingUploads[localMessageID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReport(
     ids: { localID: string, localMessageID: string, serverID: ?string },
     mediaMission: MediaMission,
   ) {
     const report: MediaMissionReportCreationRequest = {
       type: reportTypes.MEDIA_MISSION,
       time: Date.now(),
       platformDetails: getConfig().platformDetails,
       mediaMission,
       uploadServerID: ids.serverID,
       uploadLocalID: ids.localID,
       messageLocalID: ids.localMessageID,
     };
     this.props.dispatch({
       type: queueReportsActionType,
       payload: {
         reports: [report],
       },
     });
   }
 
   messageHasUploadFailure = (localMessageID: string) => {
     const pendingUploads = this.state.pendingUploads[localMessageID];
     if (!pendingUploads) {
       return false;
     }
     return values(pendingUploads).some(upload => upload.failed);
   };
 
   addReply = (message: string) => {
     this.replyCallbacks.forEach(addReplyCallback => addReplyCallback(message));
   };
 
   addReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks.push(callbackReply);
   };
 
   removeReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks = this.replyCallbacks.filter(
       candidate => candidate !== callbackReply,
     );
   };
 
   retryTextMessage = async (
     rawMessageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     await this.sendTextMessage(
       {
         ...rawMessageInfo,
         time: Date.now(),
       },
       threadInfo,
       parentThreadInfo,
     );
   };
 
   retryMultimediaMessage = async (
     rawMessageInfo: RawMultimediaMessageInfo,
     localMessageID: string,
     threadInfo: ThreadInfo,
   ) => {
     const pendingUploads = this.state.pendingUploads[localMessageID] ?? {};
 
     const now = Date.now();
 
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const updateMedia = <T: Media>(media: $ReadOnlyArray<T>): T[] =>
       media.map(singleMedia => {
+        invariant(
+          singleMedia.type === 'photo' || singleMedia.type === 'video',
+          'Retry selection must be unencrypted',
+        );
+
         let updatedMedia = singleMedia;
 
         const oldMediaID = updatedMedia.id;
         if (
           // not complete
           isLocalUploadID(oldMediaID) &&
           // not still ongoing
           (!pendingUploads[oldMediaID] || pendingUploads[oldMediaID].failed)
         ) {
           // If we have an incomplete upload that isn't in pendingUploads, that
           // indicates the app has restarted. We'll reassign a new localID to
           // avoid collisions. Note that this isn't necessary for the message ID
           // since the localID reducer prevents collisions there
           const mediaID = pendingUploads[oldMediaID]
             ? oldMediaID
             : getNextLocalUploadID();
           if (updatedMedia.type === 'photo') {
             updatedMedia = {
               type: 'photo',
               ...updatedMedia,
               id: mediaID,
             };
           } else {
             updatedMedia = {
               type: 'video',
               ...updatedMedia,
               id: mediaID,
             };
           }
         }
 
         if (updatedMedia.type === 'video') {
           const oldThumbnailID = updatedMedia.thumbnailID;
           invariant(oldThumbnailID, 'oldThumbnailID not null or undefined');
           if (
             // not complete
             isLocalUploadID(oldThumbnailID) &&
             // not still ongoing
             (!pendingUploads[oldThumbnailID] ||
               pendingUploads[oldThumbnailID].failed)
           ) {
             const thumbnailID = pendingUploads[oldThumbnailID]
               ? oldThumbnailID
               : getNextLocalUploadID();
             updatedMedia = {
               ...updatedMedia,
               thumbnailID,
             };
           }
         }
 
         if (updatedMedia === singleMedia) {
           return singleMedia;
         }
 
         const oldSelection = updatedMedia.localMediaSelection;
         invariant(
           oldSelection,
           'localMediaSelection should be set on locally created Media',
         );
         const retries = oldSelection.retries ? oldSelection.retries + 1 : 1;
 
         // We switch for Flow
         let selection;
         if (oldSelection.step === 'photo_capture') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_library') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_paste') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else {
           selection = { ...oldSelection, sendTime: now, retries };
         }
 
         if (updatedMedia.type === 'photo') {
           return {
             type: 'photo',
             ...updatedMedia,
             localMediaSelection: selection,
           };
         }
         return {
           type: 'video',
           ...updatedMedia,
           localMediaSelection: selection,
         };
       });
 
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawMediaMessageInfo);
     } else if (rawMessageInfo.type === messageTypes.IMAGES) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawImagesMessageInfo);
     } else {
       invariant(false, `rawMessageInfo ${localMessageID} should be multimedia`);
     }
 
     const incompleteMedia: Media[] = [];
     for (const singleMedia of newRawMessageInfo.media) {
       if (isLocalUploadID(singleMedia.id)) {
         incompleteMedia.push(singleMedia);
       }
     }
     if (incompleteMedia.length === 0) {
       this.dispatchMultimediaMessageAction(newRawMessageInfo);
       this.setState(prevState => ({
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {},
         },
       }));
       return;
     }
 
     const retryMedia = incompleteMedia.filter(
       ({ id }) => !pendingUploads[id] || pendingUploads[id].failed,
     );
     if (retryMedia.length === 0) {
       // All media are already in the process of being uploaded
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     // We clear out the failed status on individual media here,
     // which makes the UI show pending status instead of error messages
     for (const singleMedia of retryMedia) {
       pendingUploads[singleMedia.id] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (singleMedia.type === 'video') {
         const { thumbnailID } = singleMedia;
         invariant(thumbnailID, 'thumbnailID not null or undefined');
         pendingUploads[thumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
     this.setState(prevState => ({
       pendingUploads: {
         ...prevState.pendingUploads,
         [localMessageID]: pendingUploads,
       },
     }));
 
     const uploadFileInputs = retryMedia.map(singleMedia => {
       invariant(
         singleMedia.localMediaSelection,
         'localMediaSelection should be set on locally created Media',
       );
 
       let ids;
       if (singleMedia.type === 'photo') {
         ids = { type: 'photo', localMediaID: singleMedia.id };
       } else {
         invariant(
           singleMedia.thumbnailID,
           'singleMedia.thumbnailID should be set for videos',
         );
         ids = {
           type: 'video',
           localMediaID: singleMedia.id,
           localThumbnailID: singleMedia.thumbnailID,
         };
       }
 
       return {
         selection: singleMedia.localMediaSelection,
         ids,
       };
     });
 
     await this.uploadFiles(localMessageID, uploadFileInputs);
   };
 
   retryMessage = async (
     localMessageID: string,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
 
     if (rawMessageInfo.type === messageTypes.TEXT) {
       await this.retryTextMessage(rawMessageInfo, threadInfo, parentThreadInfo);
     } else if (
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
     ) {
       await this.retryMultimediaMessage(
         rawMessageInfo,
         localMessageID,
         threadInfo,
       );
     }
   };
 
   registerSendCallback = (callback: () => void) => {
     this.sendCallbacks.push(callback);
   };
 
   unregisterSendCallback = (callback: () => void) => {
     this.sendCallbacks = this.sendCallbacks.filter(
       candidate => candidate !== callback,
     );
   };
 
   reportURIDisplayed = (uri: string, loaded: boolean) => {
     const prevActiveURI = this.activeURIs.get(uri);
     const curCount = prevActiveURI && prevActiveURI.count;
     const prevCount = curCount ? curCount : 0;
     const count = loaded ? prevCount + 1 : prevCount - 1;
     const prevOnClear = prevActiveURI && prevActiveURI.onClear;
     const onClear = prevOnClear ? prevOnClear : [];
     const activeURI = { count, onClear };
     if (count) {
       this.activeURIs.set(uri, activeURI);
       return;
     }
     this.activeURIs.delete(uri);
     for (const callback of onClear) {
       callback();
     }
   };
 
   waitForCaptureURIUnload(uri: string) {
     const start = Date.now();
     const path = pathFromURI(uri);
     if (!path) {
       return Promise.resolve({
         result: null,
         steps: [
           {
             step: 'wait_for_capture_uri_unload',
             success: false,
             time: Date.now() - start,
             uri,
           },
         ],
       });
     }
 
     const getResult = () => ({
       result: path,
       steps: [
         {
           step: 'wait_for_capture_uri_unload',
           success: true,
           time: Date.now() - start,
           uri,
         },
       ],
     });
 
     const activeURI = this.activeURIs.get(uri);
     if (!activeURI) {
       return Promise.resolve(getResult());
     }
 
     return new Promise(resolve => {
       const finish = () => resolve(getResult());
       const newActiveURI = {
         ...activeURI,
         onClear: [...activeURI.onClear, finish],
       };
       this.activeURIs.set(uri, newActiveURI);
     });
   }
 
   setPendingThreadUpdateHandler = (
     threadID: string,
     pendingThreadUpdateHandler: ?(ThreadInfo) => mixed,
   ) => {
     if (!pendingThreadUpdateHandler) {
       this.pendingThreadUpdateHandlers.delete(threadID);
     } else {
       this.pendingThreadUpdateHandlers.set(
         threadID,
         pendingThreadUpdateHandler,
       );
     }
   };
 
   render() {
     const inputState = this.inputStateSelector(this.state);
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const mediaCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendMultimediaMessageActionTypes,
 );
 const textCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendTextMessageActionTypes,
 );
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(
     props: BaseProps,
   ) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useSelector(state => state.nextLocalID);
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const ongoingMessageCreation = useSelector(
       state =>
         combineLoadingStatuses(
           mediaCreationLoadingStatusSelector(state),
           textCreationLoadingStatusSelector(state),
         ) === 'loading',
     );
     const hasWiFi = useSelector(state => state.connectivity.hasWiFi);
     const calendarQuery = useCalendarQuery();
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callSendMultimediaMessage = useServerCall(sendMultimediaMessage);
     const callSendTextMessage = useServerCall(sendTextMessage);
     const callNewThread = useServerCall(newThread);
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
     const mediaReportsEnabled = useIsReportEnabled('mediaReports');
     const staffCanSee = useStaffCanSee();
     const textMessageCreationSideEffectsFunc =
       useMessageCreationSideEffectsFunc(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         viewerID={viewerID}
         nextLocalID={nextLocalID}
         messageStoreMessages={messageStoreMessages}
         ongoingMessageCreation={ongoingMessageCreation}
         hasWiFi={hasWiFi}
         mediaReportsEnabled={mediaReportsEnabled}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
         staffCanSee={staffCanSee}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/native/media/image-modal.react.js b/native/media/image-modal.react.js
index 9462155c8..899050ef7 100644
--- a/native/media/image-modal.react.js
+++ b/native/media/image-modal.react.js
@@ -1,1296 +1,1301 @@
 // @flow
 
 import Clipboard from '@react-native-clipboard/clipboard';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   Platform,
 } from 'react-native';
 import {
   PinchGestureHandler,
   PanGestureHandler,
   TapGestureHandler,
   State as GestureState,
 } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import Animated from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { type MediaInfo, type Dimensions } from 'lib/types/media-types.js';
 
 import Multimedia from './multimedia.react.js';
 import {
   useIntentionalSaveMedia,
   type IntentionalSaveMedia,
 } from './save-media.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
 import {
   type VerticalBounds,
   type LayoutCoordinates,
 } from '../types/layout-types.js';
 import type { NativeMethods } from '../types/react-native.js';
 import {
   clamp,
   gestureJustStarted,
   gestureJustEnded,
   runTiming,
 } from '../utils/animation-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   event,
   Extrapolate,
   block,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   neq,
   greaterThan,
   lessThan,
   add,
   sub,
   multiply,
   divide,
   pow,
   max,
   min,
   round,
   abs,
   interpolateNode,
   startClock,
   stopClock,
   clockRunning,
   decay,
 } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 function scaleDelta(value: Node, gestureActive: Node): Node {
   const diffThisFrame = new Value(1);
   const prevValue = new Value(1);
   return cond(
     gestureActive,
     [
       set(diffThisFrame, divide(value, prevValue)),
       set(prevValue, value),
       diffThisFrame,
     ],
     set(prevValue, 1),
   );
 }
 
 function panDelta(value: Node, gestureActive: Node): Node {
   const diffThisFrame = new Value(0);
   const prevValue = new Value(0);
   return cond(
     gestureActive,
     [
       set(diffThisFrame, sub(value, prevValue)),
       set(prevValue, value),
       diffThisFrame,
     ],
     set(prevValue, 0),
   );
 }
 
 function runDecay(
   clock: Clock,
   velocity: Node,
   initialPosition: Node,
   startStopClock: boolean = true,
 ): Node {
   const state = {
     finished: new Value(0),
     velocity: new Value(0),
     position: new Value(0),
     time: new Value(0),
   };
   const config = { deceleration: 0.99 };
   return block([
     cond(not(clockRunning(clock)), [
       set(state.finished, 0),
       set(state.velocity, velocity),
       set(state.position, initialPosition),
       set(state.time, 0),
       startStopClock ? startClock(clock) : undefined,
     ]),
     decay(clock, state, config),
     cond(state.finished, startStopClock ? stopClock(clock) : undefined),
     state.position,
   ]);
 }
 
 export type ImageModalParams = {
   +presentedFrom: string,
   +mediaInfo: MediaInfo,
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +item: ChatMultimediaMessageInfoItem,
 };
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 type BaseProps = {
   +navigation: AppNavigationProp<'ImageModal'>,
   +route: NavigationRoute<'ImageModal'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +dimensions: DerivedDimensionsInfo,
   +intentionalSaveMedia: IntentionalSaveMedia,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 };
 type State = {
   +closeButtonEnabled: boolean,
   +actionLinksEnabled: boolean,
 };
 class ImageModal extends React.PureComponent<Props, State> {
   state: State = {
     closeButtonEnabled: true,
     actionLinksEnabled: true,
   };
 
   closeButton: ?React.ElementRef<TouchableOpacityInstance>;
   mediaIconsContainer: ?React.ElementRef<typeof View>;
   closeButtonX = new Value(-1);
   closeButtonY = new Value(-1);
   closeButtonWidth = new Value(0);
   closeButtonHeight = new Value(0);
   closeButtonLastState = new Value(1);
   mediaIconsX = new Value(-1);
   mediaIconsY = new Value(-1);
   mediaIconsWidth = new Value(0);
   mediaIconsHeight = new Value(0);
   actionLinksLastState = new Value(1);
 
   centerX: Value;
   centerY: Value;
   frameWidth: Value;
   frameHeight: Value;
   imageWidth: Value;
   imageHeight: Value;
 
   pinchHandler = React.createRef();
   panHandler = React.createRef();
   singleTapHandler = React.createRef();
   doubleTapHandler = React.createRef();
   handlerRefs = [
     this.pinchHandler,
     this.panHandler,
     this.singleTapHandler,
     this.doubleTapHandler,
   ];
   beforeDoubleTapRefs;
   beforeSingleTapRefs;
 
   pinchEvent;
   panEvent;
   singleTapEvent;
   doubleTapEvent;
 
   scale: Node;
   x: Node;
   y: Node;
   backdropOpacity: Node;
   imageContainerOpacity: Node;
   actionLinksOpacity: Node;
   closeButtonOpacity: Node;
 
   constructor(props: Props) {
     super(props);
     this.updateDimensions();
 
     const { imageWidth, imageHeight } = this;
     const left = sub(this.centerX, divide(imageWidth, 2));
     const top = sub(this.centerY, divide(imageHeight, 2));
 
     const { initialCoordinates } = props.route.params;
     const initialScale = divide(initialCoordinates.width, imageWidth);
     const initialTranslateX = sub(
       initialCoordinates.x + initialCoordinates.width / 2,
       add(left, divide(imageWidth, 2)),
     );
     const initialTranslateY = sub(
       initialCoordinates.y + initialCoordinates.height / 2,
       add(top, divide(imageHeight, 2)),
     );
 
     const { overlayContext } = props;
     invariant(overlayContext, 'ImageModal should have OverlayContext');
     const navigationProgress = overlayContext.position;
 
     // The inputs we receive from PanGestureHandler
     const panState = new Value(-1);
     const panTranslationX = new Value(0);
     const panTranslationY = new Value(0);
     const panVelocityX = new Value(0);
     const panVelocityY = new Value(0);
     const panAbsoluteX = new Value(0);
     const panAbsoluteY = new Value(0);
     this.panEvent = event([
       {
         nativeEvent: {
           state: panState,
           translationX: panTranslationX,
           translationY: panTranslationY,
           velocityX: panVelocityX,
           velocityY: panVelocityY,
           absoluteX: panAbsoluteX,
           absoluteY: panAbsoluteY,
         },
       },
     ]);
     const curPanActive = new Value(0);
     const panActive = block([
       cond(
         and(
           gestureJustStarted(panState),
           this.outsideButtons(
             sub(panAbsoluteX, panTranslationX),
             sub(panAbsoluteY, panTranslationY),
           ),
         ),
         set(curPanActive, 1),
       ),
       cond(gestureJustEnded(panState), set(curPanActive, 0)),
       curPanActive,
     ]);
     const lastPanActive = new Value(0);
     const panJustEnded = cond(eq(lastPanActive, panActive), 0, [
       set(lastPanActive, panActive),
       eq(panActive, 0),
     ]);
 
     // The inputs we receive from PinchGestureHandler
     const pinchState = new Value(-1);
     const pinchScale = new Value(1);
     const pinchFocalX = new Value(0);
     const pinchFocalY = new Value(0);
     this.pinchEvent = event([
       {
         nativeEvent: {
           state: pinchState,
           scale: pinchScale,
           focalX: pinchFocalX,
           focalY: pinchFocalY,
         },
       },
     ]);
     const pinchActive = eq(pinchState, GestureState.ACTIVE);
 
     // The inputs we receive from single TapGestureHandler
     const singleTapState = new Value(-1);
     const singleTapX = new Value(0);
     const singleTapY = new Value(0);
     this.singleTapEvent = event([
       {
         nativeEvent: {
           state: singleTapState,
           x: singleTapX,
           y: singleTapY,
         },
       },
     ]);
 
     // The inputs we receive from double TapGestureHandler
     const doubleTapState = new Value(-1);
     const doubleTapX = new Value(0);
     const doubleTapY = new Value(0);
     this.doubleTapEvent = event([
       {
         nativeEvent: {
           state: doubleTapState,
           x: doubleTapX,
           y: doubleTapY,
         },
       },
     ]);
 
     // The all-important outputs
     const curScale = new Value(1);
     const curX = new Value(0);
     const curY = new Value(0);
     const curBackdropOpacity = new Value(1);
     const curCloseButtonOpacity = new Value(1);
     const curActionLinksOpacity = new Value(1);
 
     // The centered variables help us know if we need to be recentered
     const recenteredScale = max(curScale, 1);
     const horizontalPanSpace = this.horizontalPanSpace(recenteredScale);
     const verticalPanSpace = this.verticalPanSpace(recenteredScale);
 
     const resetXClock = new Clock();
     const resetYClock = new Clock();
     const zoomClock = new Clock();
 
     const dismissingFromPan = new Value(0);
 
     const roundedCurScale = divide(round(multiply(curScale, 1000)), 1000);
     const gestureActive = or(pinchActive, panActive);
     const activeInteraction = or(
       gestureActive,
       clockRunning(zoomClock),
       dismissingFromPan,
     );
 
     const updates = [
       this.pinchUpdate(
         pinchActive,
         pinchScale,
         pinchFocalX,
         pinchFocalY,
         curScale,
         curX,
         curY,
       ),
       this.panUpdate(panActive, panTranslationX, panTranslationY, curX, curY),
       this.singleTapUpdate(
         singleTapState,
         singleTapX,
         singleTapY,
         roundedCurScale,
         curCloseButtonOpacity,
         curActionLinksOpacity,
       ),
       this.doubleTapUpdate(
         doubleTapState,
         doubleTapX,
         doubleTapY,
         roundedCurScale,
         zoomClock,
         gestureActive,
         curScale,
         curX,
         curY,
       ),
       this.backdropOpacityUpdate(
         panJustEnded,
         pinchActive,
         panVelocityX,
         panVelocityY,
         roundedCurScale,
         curX,
         curY,
         curBackdropOpacity,
         dismissingFromPan,
       ),
       this.recenter(
         resetXClock,
         resetYClock,
         activeInteraction,
         recenteredScale,
         horizontalPanSpace,
         verticalPanSpace,
         curScale,
         curX,
         curY,
       ),
       this.flingUpdate(
         resetXClock,
         resetYClock,
         activeInteraction,
         panJustEnded,
         panVelocityX,
         panVelocityY,
         horizontalPanSpace,
         verticalPanSpace,
         curX,
         curY,
       ),
     ];
     const updatedScale = [updates, curScale];
     const updatedCurX = [updates, curX];
     const updatedCurY = [updates, curY];
     const updatedBackdropOpacity = [updates, curBackdropOpacity];
     const updatedCloseButtonOpacity = [updates, curCloseButtonOpacity];
     const updatedActionLinksOpacity = [updates, curActionLinksOpacity];
 
     const reverseNavigationProgress = sub(1, navigationProgress);
     this.scale = add(
       multiply(reverseNavigationProgress, initialScale),
       multiply(navigationProgress, updatedScale),
     );
     this.x = add(
       multiply(reverseNavigationProgress, initialTranslateX),
       multiply(navigationProgress, updatedCurX),
     );
     this.y = add(
       multiply(reverseNavigationProgress, initialTranslateY),
       multiply(navigationProgress, updatedCurY),
     );
     this.backdropOpacity = multiply(navigationProgress, updatedBackdropOpacity);
     this.imageContainerOpacity = interpolateNode(navigationProgress, {
       inputRange: [0, 0.1],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     const buttonOpacity = interpolateNode(updatedBackdropOpacity, {
       inputRange: [0.95, 1],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     this.closeButtonOpacity = multiply(
       navigationProgress,
       buttonOpacity,
       updatedCloseButtonOpacity,
     );
     this.actionLinksOpacity = multiply(
       navigationProgress,
       buttonOpacity,
       updatedActionLinksOpacity,
     );
 
     this.beforeDoubleTapRefs = Platform.select({
       android: [],
       default: [this.pinchHandler, this.panHandler],
     });
     this.beforeSingleTapRefs = [
       ...this.beforeDoubleTapRefs,
       this.doubleTapHandler,
     ];
   }
 
   // How much space do we have to pan the image horizontally?
   horizontalPanSpace(scale: Node): Node {
     const apparentWidth = multiply(this.imageWidth, scale);
     const horizPop = divide(sub(apparentWidth, this.frameWidth), 2);
     return max(horizPop, 0);
   }
 
   // How much space do we have to pan the image vertically?
   verticalPanSpace(scale: Node): Node {
     const apparentHeight = multiply(this.imageHeight, scale);
     const vertPop = divide(sub(apparentHeight, this.frameHeight), 2);
     return max(vertPop, 0);
   }
 
   pinchUpdate(
     // Inputs
     pinchActive: Node,
     pinchScale: Node,
     pinchFocalX: Node,
     pinchFocalY: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const deltaScale = scaleDelta(pinchScale, pinchActive);
     const deltaPinchX = multiply(
       sub(1, deltaScale),
       sub(pinchFocalX, curX, this.centerX),
     );
     const deltaPinchY = multiply(
       sub(1, deltaScale),
       sub(pinchFocalY, curY, this.centerY),
     );
 
     return cond(
       [deltaScale, pinchActive],
       [
         set(curX, add(curX, deltaPinchX)),
         set(curY, add(curY, deltaPinchY)),
         set(curScale, multiply(curScale, deltaScale)),
       ],
     );
   }
 
   outsideButtons(x: Node, y: Node): Node {
     const {
       closeButtonX,
       closeButtonY,
       closeButtonWidth,
       closeButtonHeight,
       closeButtonLastState,
       mediaIconsX,
       mediaIconsY,
       mediaIconsWidth,
       mediaIconsHeight,
       actionLinksLastState,
     } = this;
     return and(
       or(
         eq(closeButtonLastState, 0),
         lessThan(x, closeButtonX),
         greaterThan(x, add(closeButtonX, closeButtonWidth)),
         lessThan(y, closeButtonY),
         greaterThan(y, add(closeButtonY, closeButtonHeight)),
       ),
       or(
         eq(actionLinksLastState, 0),
         lessThan(x, mediaIconsX),
         greaterThan(x, add(mediaIconsX, mediaIconsWidth)),
         lessThan(y, mediaIconsY),
         greaterThan(y, add(mediaIconsY, mediaIconsHeight)),
       ),
     );
   }
 
   panUpdate(
     // Inputs
     panActive: Node,
     panTranslationX: Node,
     panTranslationY: Node,
     // Outputs
     curX: Value,
     curY: Value,
   ): Node {
     const deltaX = panDelta(panTranslationX, panActive);
     const deltaY = panDelta(panTranslationY, panActive);
     return cond(
       [deltaX, deltaY, panActive],
       [set(curX, add(curX, deltaX)), set(curY, add(curY, deltaY))],
     );
   }
 
   singleTapUpdate(
     // Inputs
     singleTapState: Node,
     singleTapX: Node,
     singleTapY: Node,
     roundedCurScale: Node,
     // Outputs
     curCloseButtonOpacity: Value,
     curActionLinksOpacity: Value,
   ): Node {
     const lastTapX = new Value(0);
     const lastTapY = new Value(0);
     const fingerJustReleased = and(
       gestureJustEnded(singleTapState),
       this.outsideButtons(lastTapX, lastTapY),
     );
 
     const wasZoomed = new Value(0);
     const isZoomed = greaterThan(roundedCurScale, 1);
     const becameUnzoomed = and(wasZoomed, not(isZoomed));
 
     const closeButtonState = cond(
       or(
         fingerJustReleased,
         and(becameUnzoomed, eq(this.closeButtonLastState, 0)),
       ),
       sub(1, this.closeButtonLastState),
       this.closeButtonLastState,
     );
 
     const actionLinksState = cond(
       isZoomed,
       0,
       cond(
         or(fingerJustReleased, becameUnzoomed),
         sub(1, this.actionLinksLastState),
         this.actionLinksLastState,
       ),
     );
 
     const closeButtonAppearClock = new Clock();
     const closeButtonDisappearClock = new Clock();
     const actionLinksAppearClock = new Clock();
     const actionLinksDisappearClock = new Clock();
     return block([
       fingerJustReleased,
       set(
         curCloseButtonOpacity,
         cond(
           eq(closeButtonState, 1),
           [
             stopClock(closeButtonDisappearClock),
             runTiming(closeButtonAppearClock, curCloseButtonOpacity, 1),
           ],
           [
             stopClock(closeButtonAppearClock),
             runTiming(closeButtonDisappearClock, curCloseButtonOpacity, 0),
           ],
         ),
       ),
       set(
         curActionLinksOpacity,
         cond(
           eq(actionLinksState, 1),
           [
             stopClock(actionLinksDisappearClock),
             runTiming(actionLinksAppearClock, curActionLinksOpacity, 1),
           ],
           [
             stopClock(actionLinksAppearClock),
             runTiming(actionLinksDisappearClock, curActionLinksOpacity, 0),
           ],
         ),
       ),
       set(this.actionLinksLastState, actionLinksState),
       set(this.closeButtonLastState, closeButtonState),
       set(wasZoomed, isZoomed),
       set(lastTapX, singleTapX),
       set(lastTapY, singleTapY),
       call([eq(curCloseButtonOpacity, 1)], this.setCloseButtonEnabled),
       call([eq(curActionLinksOpacity, 1)], this.setActionLinksEnabled),
     ]);
   }
 
   doubleTapUpdate(
     // Inputs
     doubleTapState: Node,
     doubleTapX: Node,
     doubleTapY: Node,
     roundedCurScale: Node,
     zoomClock: Clock,
     gestureActive: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const zoomClockRunning = clockRunning(zoomClock);
     const zoomActive = and(not(gestureActive), zoomClockRunning);
     const targetScale = cond(greaterThan(roundedCurScale, 1), 1, 3);
 
     const tapXDiff = sub(doubleTapX, this.centerX, curX);
     const tapYDiff = sub(doubleTapY, this.centerY, curY);
     const tapXPercent = divide(tapXDiff, this.imageWidth, curScale);
     const tapYPercent = divide(tapYDiff, this.imageHeight, curScale);
 
     const horizPanSpace = this.horizontalPanSpace(targetScale);
     const vertPanSpace = this.verticalPanSpace(targetScale);
     const horizPanPercent = divide(horizPanSpace, this.imageWidth, targetScale);
     const vertPanPercent = divide(vertPanSpace, this.imageHeight, targetScale);
 
     const tapXPercentClamped = clamp(
       tapXPercent,
       multiply(-1, horizPanPercent),
       horizPanPercent,
     );
     const tapYPercentClamped = clamp(
       tapYPercent,
       multiply(-1, vertPanPercent),
       vertPanPercent,
     );
     const targetX = multiply(tapXPercentClamped, this.imageWidth, targetScale);
     const targetY = multiply(tapYPercentClamped, this.imageHeight, targetScale);
 
     const targetRelativeScale = divide(targetScale, curScale);
     const targetRelativeX = multiply(-1, add(targetX, curX));
     const targetRelativeY = multiply(-1, add(targetY, curY));
 
     const zoomScale = runTiming(zoomClock, 1, targetRelativeScale);
     const zoomX = runTiming(zoomClock, 0, targetRelativeX, false);
     const zoomY = runTiming(zoomClock, 0, targetRelativeY, false);
 
     const deltaScale = scaleDelta(zoomScale, zoomActive);
     const deltaX = panDelta(zoomX, zoomActive);
     const deltaY = panDelta(zoomY, zoomActive);
 
     const fingerJustReleased = and(
       gestureJustEnded(doubleTapState),
       this.outsideButtons(doubleTapX, doubleTapY),
     );
 
     return cond(
       [fingerJustReleased, deltaX, deltaY, deltaScale, gestureActive],
       stopClock(zoomClock),
       cond(or(zoomClockRunning, fingerJustReleased), [
         zoomX,
         zoomY,
         zoomScale,
         set(curX, add(curX, deltaX)),
         set(curY, add(curY, deltaY)),
         set(curScale, multiply(curScale, deltaScale)),
       ]),
     );
   }
 
   backdropOpacityUpdate(
     // Inputs
     panJustEnded: Node,
     pinchActive: Node,
     panVelocityX: Node,
     panVelocityY: Node,
     roundedCurScale: Node,
     // Outputs
     curX: Value,
     curY: Value,
     curBackdropOpacity: Value,
     dismissingFromPan: Value,
   ): Node {
     const progressiveOpacity = max(
       min(
         sub(1, abs(divide(curX, this.frameWidth))),
         sub(1, abs(divide(curY, this.frameHeight))),
       ),
       0,
     );
 
     const resetClock = new Clock();
 
     const velocity = pow(add(pow(panVelocityX, 2), pow(panVelocityY, 2)), 0.5);
     const shouldGoBack = and(
       panJustEnded,
       or(greaterThan(velocity, 50), greaterThan(0.7, progressiveOpacity)),
     );
 
     const decayClock = new Clock();
     const decayItems = [
       set(curX, runDecay(decayClock, panVelocityX, curX, false)),
       set(curY, runDecay(decayClock, panVelocityY, curY)),
     ];
 
     return cond(
       [panJustEnded, dismissingFromPan],
       decayItems,
       cond(
         or(pinchActive, greaterThan(roundedCurScale, 1)),
         set(curBackdropOpacity, runTiming(resetClock, curBackdropOpacity, 1)),
         [
           stopClock(resetClock),
           set(curBackdropOpacity, progressiveOpacity),
           set(dismissingFromPan, shouldGoBack),
           cond(shouldGoBack, [decayItems, call([], this.close)]),
         ],
       ),
     );
   }
 
   recenter(
     // Inputs
     resetXClock: Clock,
     resetYClock: Clock,
     activeInteraction: Node,
     recenteredScale: Node,
     horizontalPanSpace: Node,
     verticalPanSpace: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const resetScaleClock = new Clock();
 
     const recenteredX = clamp(
       curX,
       multiply(-1, horizontalPanSpace),
       horizontalPanSpace,
     );
     const recenteredY = clamp(
       curY,
       multiply(-1, verticalPanSpace),
       verticalPanSpace,
     );
 
     return cond(
       activeInteraction,
       [
         stopClock(resetScaleClock),
         stopClock(resetXClock),
         stopClock(resetYClock),
       ],
       [
         cond(
           or(clockRunning(resetScaleClock), neq(recenteredScale, curScale)),
           set(curScale, runTiming(resetScaleClock, curScale, recenteredScale)),
         ),
         cond(
           or(clockRunning(resetXClock), neq(recenteredX, curX)),
           set(curX, runTiming(resetXClock, curX, recenteredX)),
         ),
         cond(
           or(clockRunning(resetYClock), neq(recenteredY, curY)),
           set(curY, runTiming(resetYClock, curY, recenteredY)),
         ),
       ],
     );
   }
 
   flingUpdate(
     // Inputs
     resetXClock: Clock,
     resetYClock: Clock,
     activeInteraction: Node,
     panJustEnded: Node,
     panVelocityX: Node,
     panVelocityY: Node,
     horizontalPanSpace: Node,
     verticalPanSpace: Node,
     // Outputs
     curX: Value,
     curY: Value,
   ): Node {
     const flingXClock = new Clock();
     const flingYClock = new Clock();
 
     const decayX = runDecay(flingXClock, panVelocityX, curX);
     const recenteredX = clamp(
       decayX,
       multiply(-1, horizontalPanSpace),
       horizontalPanSpace,
     );
     const decayY = runDecay(flingYClock, panVelocityY, curY);
     const recenteredY = clamp(
       decayY,
       multiply(-1, verticalPanSpace),
       verticalPanSpace,
     );
 
     return cond(
       activeInteraction,
       [stopClock(flingXClock), stopClock(flingYClock)],
       [
         cond(
           clockRunning(resetXClock),
           stopClock(flingXClock),
           cond(or(panJustEnded, clockRunning(flingXClock)), [
             set(curX, recenteredX),
             cond(neq(decayX, recenteredX), stopClock(flingXClock)),
           ]),
         ),
         cond(
           clockRunning(resetYClock),
           stopClock(flingYClock),
           cond(or(panJustEnded, clockRunning(flingYClock)), [
             set(curY, recenteredY),
             cond(neq(decayY, recenteredY), stopClock(flingYClock)),
           ]),
         ),
       ],
     );
   }
 
   updateDimensions() {
     const { width: frameWidth, height: frameHeight } = this.frame;
     const { topInset } = this.props.dimensions;
     if (this.frameWidth) {
       this.frameWidth.setValue(frameWidth);
     } else {
       this.frameWidth = new Value(frameWidth);
     }
     if (this.frameHeight) {
       this.frameHeight.setValue(frameHeight);
     } else {
       this.frameHeight = new Value(frameHeight);
     }
 
     const centerX = frameWidth / 2;
     const centerY = frameHeight / 2 + topInset;
     if (this.centerX) {
       this.centerX.setValue(centerX);
     } else {
       this.centerX = new Value(centerX);
     }
     if (this.centerY) {
       this.centerY.setValue(centerY);
     } else {
       this.centerY = new Value(centerY);
     }
 
     const { width, height } = this.imageDimensions;
     if (this.imageWidth) {
       this.imageWidth.setValue(width);
     } else {
       this.imageWidth = new Value(width);
     }
     if (this.imageHeight) {
       this.imageHeight.setValue(height);
     } else {
       this.imageHeight = new Value(height);
     }
   }
 
   componentDidMount() {
     if (ImageModal.isActive(this.props)) {
       Orientation.unlockAllOrientations();
     }
   }
 
   componentWillUnmount() {
     if (ImageModal.isActive(this.props)) {
       Orientation.lockToPortrait();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.dimensions !== prevProps.dimensions) {
       this.updateDimensions();
     }
 
     const isActive = ImageModal.isActive(this.props);
     const wasActive = ImageModal.isActive(prevProps);
     if (isActive && !wasActive) {
       Orientation.unlockAllOrientations();
     } else if (!isActive && wasActive) {
       Orientation.lockToPortrait();
     }
   }
 
   get frame(): Dimensions {
     const { width, safeAreaHeight } = this.props.dimensions;
     return { width, height: safeAreaHeight };
   }
 
   get imageDimensions(): Dimensions {
     // Make space for the close button
     let { height: maxHeight, width: maxWidth } = this.frame;
     if (maxHeight > maxWidth) {
       maxHeight -= 100;
     } else {
       maxWidth -= 100;
     }
 
     const { dimensions } = this.props.route.params.mediaInfo;
     if (dimensions.height < maxHeight && dimensions.width < maxWidth) {
       return dimensions;
     }
 
     const heightRatio = maxHeight / dimensions.height;
     const widthRatio = maxWidth / dimensions.width;
     if (heightRatio < widthRatio) {
       return {
         height: maxHeight,
         width: dimensions.width * heightRatio,
       };
     } else {
       return {
         width: maxWidth,
         height: dimensions.height * widthRatio,
       };
     }
   }
 
   get imageContainerStyle() {
     const { height, width } = this.imageDimensions;
     const { height: frameHeight, width: frameWidth } = this.frame;
     const top = (frameHeight - height) / 2 + this.props.dimensions.topInset;
     const left = (frameWidth - width) / 2;
     const { verticalBounds } = this.props.route.params;
     return {
       height,
       width,
       marginTop: top - verticalBounds.y,
       marginLeft: left,
       opacity: this.imageContainerOpacity,
       transform: [
         { translateX: this.x },
         { translateY: this.y },
         { scale: this.scale },
       ],
     };
   }
 
   static isActive(props) {
     const { overlayContext } = props;
     invariant(overlayContext, 'ImageModal should have OverlayContext');
     return !overlayContext.isDismissing;
   }
 
   get contentContainerStyle() {
     const { verticalBounds } = this.props.route.params;
     const fullScreenHeight = this.props.dimensions.height;
     const top = verticalBounds.y;
     const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height;
 
     // margin will clip, but padding won't
     const verticalStyle = ImageModal.isActive(this.props)
       ? { paddingTop: top, paddingBottom: bottom }
       : { marginTop: top, marginBottom: bottom };
     return [styles.contentContainer, verticalStyle];
   }
 
   render() {
     const { mediaInfo } = this.props.route.params;
     const statusBar = ImageModal.isActive(this.props) ? (
       <ConnectedStatusBar hidden />
     ) : null;
     const backdropStyle = { opacity: this.backdropOpacity };
     const closeButtonStyle = {
       opacity: this.closeButtonOpacity,
     };
     const mediaIconsButtonStyle = {
       opacity: this.actionLinksOpacity,
     };
 
     let copyButton;
     if (Platform.OS === 'ios') {
       copyButton = (
         <TouchableOpacity
           onPress={this.copy}
           disabled={!this.state.actionLinksEnabled}
           style={styles.mediaIconButtons}
         >
           <SWMansionIcon name="copy" style={styles.mediaIcon} />
           <Text style={styles.mediaIconText}>Copy</Text>
         </TouchableOpacity>
       );
     }
 
     const view = (
       <Animated.View style={styles.container}>
         {statusBar}
         <Animated.View style={[styles.backdrop, backdropStyle]} />
         <View style={this.contentContainerStyle}>
           <Animated.View style={this.imageContainerStyle}>
             <Multimedia mediaInfo={mediaInfo} spinnerColor="white" />
           </Animated.View>
         </View>
         <SafeAreaView style={styles.buttonsOverlay}>
           <View style={styles.fill}>
             <Animated.View
               style={[styles.closeButtonContainer, closeButtonStyle]}
             >
               <TouchableOpacity
                 onPress={this.close}
                 disabled={!this.state.closeButtonEnabled}
                 onLayout={this.onCloseButtonLayout}
                 ref={this.closeButtonRef}
               >
                 <Text style={styles.closeButton}>×</Text>
               </TouchableOpacity>
             </Animated.View>
             <Animated.View
               style={[styles.mediaIconsContainer, mediaIconsButtonStyle]}
             >
               <View
                 style={styles.mediaIconsRow}
                 onLayout={this.onMediaIconsLayout}
                 ref={this.mediaIconsRef}
               >
                 <TouchableOpacity
                   onPress={this.save}
                   disabled={!this.state.actionLinksEnabled}
                   style={styles.mediaIconButtons}
                 >
                   <SWMansionIcon name="save" style={styles.mediaIcon} />
                   <Text style={styles.mediaIconText}>Save</Text>
                 </TouchableOpacity>
                 {copyButton}
               </View>
             </Animated.View>
           </View>
         </SafeAreaView>
       </Animated.View>
     );
     return (
       <PinchGestureHandler
         onGestureEvent={this.pinchEvent}
         onHandlerStateChange={this.pinchEvent}
         simultaneousHandlers={this.handlerRefs}
         ref={this.pinchHandler}
       >
         <Animated.View style={styles.container}>
           <PanGestureHandler
             onGestureEvent={this.panEvent}
             onHandlerStateChange={this.panEvent}
             simultaneousHandlers={this.handlerRefs}
             ref={this.panHandler}
             avgTouches
           >
             <Animated.View style={styles.container}>
               <TapGestureHandler
                 onHandlerStateChange={this.doubleTapEvent}
                 simultaneousHandlers={this.handlerRefs}
                 ref={this.doubleTapHandler}
                 waitFor={this.beforeDoubleTapRefs}
                 numberOfTaps={2}
               >
                 <Animated.View style={styles.container}>
                   <TapGestureHandler
                     onHandlerStateChange={this.singleTapEvent}
                     simultaneousHandlers={this.handlerRefs}
                     ref={this.singleTapHandler}
                     waitFor={this.beforeSingleTapRefs}
                     numberOfTaps={1}
                   >
                     {view}
                   </TapGestureHandler>
                 </Animated.View>
               </TapGestureHandler>
             </Animated.View>
           </PanGestureHandler>
         </Animated.View>
       </PinchGestureHandler>
     );
   }
 
   close = () => {
     this.props.navigation.goBackOnce();
   };
 
   save = () => {
     const { mediaInfo, item } = this.props.route.params;
+    invariant(
+      mediaInfo.type === 'photo' || mediaInfo.type === 'video',
+      'saving media of type ' + mediaInfo.type + ' is not supported',
+    );
+
     const { id: uploadID, uri } = mediaInfo;
     const { id: messageServerID, localID: messageLocalID } = item.messageInfo;
     const ids = { uploadID, messageServerID, messageLocalID };
     return this.props.intentionalSaveMedia(uri, ids);
   };
 
   copy = () => {
     const { uri } = this.props.route.params.mediaInfo;
     Clipboard.setImageFromURL(uri, success => {
       displayActionResultModal(success ? 'copied!' : 'failed to copy :(');
     });
   };
 
   setCloseButtonEnabled = ([enabledNum]: [number]) => {
     const enabled = !!enabledNum;
     if (this.state.closeButtonEnabled !== enabled) {
       this.setState({ closeButtonEnabled: enabled });
     }
   };
 
   setActionLinksEnabled = ([enabledNum]: [number]) => {
     const enabled = !!enabledNum;
     if (this.state.actionLinksEnabled !== enabled) {
       this.setState({ actionLinksEnabled: enabled });
     }
   };
 
   closeButtonRef = (
     closeButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.closeButton = (closeButton: any);
   };
 
   mediaIconsRef = (mediaIconsContainer: ?React.ElementRef<typeof View>) => {
     this.mediaIconsContainer = mediaIconsContainer;
   };
 
   onCloseButtonLayout = () => {
     const { closeButton } = this;
     if (!closeButton) {
       return;
     }
     closeButton.measure((x, y, width, height, pageX, pageY) => {
       this.closeButtonX.setValue(pageX);
       this.closeButtonY.setValue(pageY);
       this.closeButtonWidth.setValue(width);
       this.closeButtonHeight.setValue(height);
     });
   };
 
   onMediaIconsLayout = () => {
     const { mediaIconsContainer } = this;
     if (!mediaIconsContainer) {
       return;
     }
 
     mediaIconsContainer.measure((x, y, width, height, pageX, pageY) => {
       this.mediaIconsX.setValue(pageX);
       this.mediaIconsY.setValue(pageY);
       this.mediaIconsWidth.setValue(width);
       this.mediaIconsHeight.setValue(height);
     });
   };
 }
 
 const styles = StyleSheet.create({
   backdrop: {
     backgroundColor: 'black',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   buttonsOverlay: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   closeButton: {
     color: 'white',
     fontSize: 36,
     paddingHorizontal: 8,
     paddingVertical: 2,
     textShadowColor: '#000',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   closeButtonContainer: {
     position: 'absolute',
     right: 4,
     top: 4,
   },
   container: {
     flex: 1,
   },
   contentContainer: {
     flex: 1,
     overflow: 'hidden',
   },
   fill: {
     flex: 1,
   },
   mediaIcon: {
     color: '#D7D7DC',
     fontSize: 36,
     textShadowColor: '#1C1C1E',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   mediaIconButtons: {
     alignItems: 'center',
     paddingBottom: 2,
     paddingLeft: 8,
     paddingRight: 8,
     paddingTop: 2,
   },
   mediaIconText: {
     color: '#D7D7DC',
     fontSize: 14,
     textShadowColor: '#1C1C1E',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   mediaIconsContainer: {
     bottom: 8,
     left: 16,
     position: 'absolute',
   },
   mediaIconsRow: {
     flexDirection: 'row',
   },
 });
 
 const ConnectedImageModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedImageModal(props: BaseProps) {
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const overlayContext = React.useContext(OverlayContext);
     const intentionalSaveMedia = useIntentionalSaveMedia();
     return (
       <ImageModal
         {...props}
         dimensions={dimensions}
         overlayContext={overlayContext}
         intentionalSaveMedia={intentionalSaveMedia}
       />
     );
   });
 
 export default ConnectedImageModal;
diff --git a/native/media/multimedia.react.js b/native/media/multimedia.react.js
index 51201f9a4..df243ea3d 100644
--- a/native/media/multimedia.react.js
+++ b/native/media/multimedia.react.js
@@ -1,152 +1,163 @@
 // @flow
 
 import { Image } from 'expo-image';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import type { MediaInfo, AvatarMediaInfo } from 'lib/types/media-types.js';
 
 import RemoteImage from './remote-image.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 
 type BaseProps = {
   +mediaInfo: MediaInfo | AvatarMediaInfo,
   +spinnerColor: string,
 };
 type Props = {
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
 };
 type State = {
   +currentURI: string,
   +departingURI: ?string,
 };
 class Multimedia extends React.PureComponent<Props, State> {
   static defaultProps = {
     spinnerColor: 'black',
   };
 
   constructor(props: Props) {
     super(props);
+
+    invariant(
+      props.mediaInfo.type === 'photo' || props.mediaInfo.type === 'video',
+      '<Multimedia> supports only unencrypted images and videos',
+    );
+
     this.state = {
       currentURI:
         props.mediaInfo.type === 'video'
           ? props.mediaInfo.thumbnailURI
           : props.mediaInfo.uri,
       departingURI: null,
     };
   }
 
   get inputState() {
     const { inputState } = this.props;
     invariant(inputState, 'inputState should be set in Multimedia');
     return inputState;
   }
 
   componentDidMount() {
     this.inputState.reportURIDisplayed(this.state.currentURI, true);
   }
 
   componentWillUnmount() {
     const { inputState } = this;
     const { currentURI, departingURI } = this.state;
     inputState.reportURIDisplayed(currentURI, false);
     if (departingURI) {
       inputState.reportURIDisplayed(departingURI, false);
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const { inputState } = this;
+    invariant(
+      this.props.mediaInfo.type === 'photo' ||
+        this.props.mediaInfo.type === 'video',
+      '<Multimedia> supports only unencrypted photos and videos',
+    );
 
     const newURI =
       this.props.mediaInfo.type === 'video'
         ? this.props.mediaInfo.thumbnailURI
         : this.props.mediaInfo.uri;
     const oldURI = this.state.currentURI;
     if (newURI !== oldURI) {
       inputState.reportURIDisplayed(newURI, true);
 
       const { departingURI } = this.state;
       if (departingURI && oldURI !== departingURI) {
         // If there's currently an existing departingURI, that means that oldURI
         // hasn't loaded yet. Since it's being replaced anyways we don't need to
         // display it anymore, so we can unlink it now
         inputState.reportURIDisplayed(oldURI, false);
         this.setState({ currentURI: newURI });
       } else {
         this.setState({ currentURI: newURI, departingURI: oldURI });
       }
     }
 
     const newDepartingURI = this.state.departingURI;
     const oldDepartingURI = prevState.departingURI;
     if (oldDepartingURI && oldDepartingURI !== newDepartingURI) {
       inputState.reportURIDisplayed(oldDepartingURI, false);
     }
   }
 
   render() {
     const images = [];
     const { currentURI, departingURI } = this.state;
     if (departingURI) {
       images.push(this.renderURI(currentURI, true));
       images.push(this.renderURI(departingURI, true));
     } else {
       images.push(this.renderURI(currentURI));
     }
     return <View style={styles.container}>{images}</View>;
   }
 
   renderURI(uri: string, invisibleLoad?: boolean = false) {
     if (uri.startsWith('http')) {
       return (
         <RemoteImage
           uri={uri}
           onLoad={this.onLoad}
           spinnerColor={this.props.spinnerColor}
           style={styles.image}
           invisibleLoad={invisibleLoad}
           key={uri}
         />
       );
     } else {
       const source = { uri };
       return (
         <Image
           source={source}
           onLoad={this.onLoad}
           style={styles.image}
           key={uri}
         />
       );
     }
   }
 
   onLoad = () => {
     this.setState({ departingURI: null });
   };
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   image: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
 });
 
 const ConnectedMultimedia: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMultimedia(props: BaseProps) {
     const inputState = React.useContext(InputStateContext);
     return <Multimedia {...props} inputState={inputState} />;
   });
 
 export default ConnectedMultimedia;
diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
index fb1233974..fd69bd7c1 100644
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -1,81 +1,86 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { messageTypes } from 'lib/types/message-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './chat-message-list.css';
 import ComposedMessage from './composed-message.react.js';
 import sendFailed from './multimedia-message-send-failed.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import Multimedia from '../media/multimedia.react.js';
 type BaseProps = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
 };
 class MultimediaMessage extends React.PureComponent<Props> {
   render() {
     const { item, inputState } = this.props;
     invariant(
       item.messageInfo.type === messageTypes.IMAGES ||
         item.messageInfo.type === messageTypes.MULTIMEDIA,
       'MultimediaMessage should only be used for multimedia messages',
     );
     const { localID, media } = item.messageInfo;
 
     invariant(inputState, 'inputState should be set in MultimediaMessage');
     const pendingUploads = localID ? inputState.assignedUploads[localID] : null;
     const multimedia = [];
     for (const singleMedia of media) {
+      invariant(
+        singleMedia.type === 'photo' || singleMedia.type === 'video',
+        '<Multimedia> supports only unencrypted images and videos',
+      );
+
       const pendingUpload = pendingUploads
         ? pendingUploads.find(upload => upload.localID === singleMedia.id)
         : null;
       multimedia.push(
         <Multimedia
           uri={singleMedia.uri}
           type={singleMedia.type}
           pendingUpload={pendingUpload}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
           key={singleMedia.id}
         />,
       );
     }
 
     invariant(multimedia.length > 0, 'should be at least one multimedia...');
     const content =
       multimedia.length > 1 ? (
         <div className={css.imageGrid}>{multimedia}</div>
       ) : (
         multimedia
       );
 
     return (
       <ComposedMessage
         item={item}
         threadInfo={this.props.threadInfo}
         sendFailed={sendFailed(item, inputState)}
         fixedWidth={multimedia.length > 1}
         borderRadius={16}
       >
         {content}
       </ComposedMessage>
     );
   }
 }
 
 const ConnectedMultimediaMessage: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMultimediaMessage(props) {
     const inputState = React.useContext(InputStateContext);
     return <MultimediaMessage {...props} inputState={inputState} />;
   });
 
 export default ConnectedMultimediaMessage;
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
index 17ced2938..9f273b2a9 100644
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -1,130 +1,135 @@
 // @flow
 
+import invariant from 'invariant';
 import * as React from 'react';
 
 import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { Media } from 'lib/types/media-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useServerCall } from 'lib/utils/action-utils.js';
 
 import css from './thread-settings-media-gallery.css';
 import Tabs from '../../../components/tabs.react.js';
 import MultimediaModal from '../../../media/multimedia-modal.react.js';
 import Modal from '../../modal.react.js';
 
 type MediaGalleryTab = 'All' | 'Images' | 'Videos';
 
 type ThreadSettingsMediaGalleryModalProps = {
   +onClose: () => void,
   +parentThreadInfo: ThreadInfo,
   +limit: number,
   +activeTab: MediaGalleryTab,
 };
 
 function ThreadSettingsMediaGalleryModal(
   props: ThreadSettingsMediaGalleryModalProps,
 ): React.Node {
   const { pushModal } = useModalContext();
   const { onClose, parentThreadInfo, limit, activeTab } = props;
   const { id: threadID } = parentThreadInfo;
   const modalName = 'Media';
 
   const callFetchThreadMedia = useServerCall(fetchThreadMedia);
   const [mediaInfos, setMediaInfos] = React.useState([]);
   const [tab, setTab] = React.useState<MediaGalleryTab>(activeTab);
 
   React.useEffect(() => {
     const fetchData = async () => {
       const result = await callFetchThreadMedia({
         threadID,
         limit,
         offset: 0,
       });
       setMediaInfos(result.media);
     };
     fetchData();
   }, [callFetchThreadMedia, threadID, limit]);
 
   const onClick = React.useCallback(
     (media: Media) => {
+      invariant(
+        media.type === 'photo' || media.type === 'video',
+        '<MultimediaModal> supports only unencrypted images and videos',
+      );
       pushModal(<MultimediaModal type={media.type} uri={media.uri} />);
     },
     [pushModal],
   );
 
   const filteredMediaInfos = React.useMemo(() => {
     if (tab === 'Images') {
       return mediaInfos.filter(mediaInfo => mediaInfo.type === 'photo');
     } else if (tab === 'Videos') {
       return mediaInfos.filter(mediaInfo => mediaInfo.type === 'video');
     }
     return mediaInfos;
   }, [tab, mediaInfos]);
 
   const mediaCoverPhotos = React.useMemo(
     () => filteredMediaInfos.map(media => media.thumbnailURI || media.uri),
     [filteredMediaInfos],
   );
 
   const mediaGalleryItems = React.useMemo(
     () =>
       filteredMediaInfos.map((media, i) => (
         <div
           key={i}
           onClick={() => onClick(media)}
           className={css.mediaContainer}
         >
           <img src={mediaCoverPhotos[i]} className={css.media} />
         </div>
       )),
     [filteredMediaInfos, onClick, mediaCoverPhotos],
   );
 
   const handleScroll = React.useCallback(
     async event => {
       const container = event.target;
       // Load more data when the user is within 1000 pixels of the end
       const buffer = 1000;
 
       if (
         container.scrollHeight - container.scrollTop >
         container.clientHeight + buffer
       ) {
         return;
       }
 
       const result = await callFetchThreadMedia({
         threadID,
         limit,
         offset: mediaInfos.length,
       });
       setMediaInfos([...mediaInfos, ...result.media]);
     },
     [callFetchThreadMedia, threadID, limit, mediaInfos],
   );
 
   return (
     <Modal name={modalName} onClose={onClose} size="large">
       <Tabs.Container activeTab={tab} setTab={setTab}>
         <Tabs.Item id="All" header="All">
           <div className={css.container} onScroll={handleScroll}>
             {mediaGalleryItems}
           </div>
         </Tabs.Item>
         <Tabs.Item id="Images" header="Images">
           <div className={css.container} onScroll={handleScroll}>
             {mediaGalleryItems}
           </div>
         </Tabs.Item>
         <Tabs.Item id="Videos" header="Videos">
           <div className={css.container} onScroll={handleScroll}>
             {mediaGalleryItems}
           </div>
         </Tabs.Item>
       </Tabs.Container>
     </Modal>
   );
 }
 
 export default ThreadSettingsMediaGalleryModal;