diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -233,8 +233,10 @@
     const { pendingUploads, cancelPendingUpload } = this.props.inputState;
     const multimediaPreviews = pendingUploads.map(pendingUpload => (
       <Multimedia
-        uri={pendingUpload.uri}
-        type={pendingUpload.mediaType}
+        mediaSource={{
+          type: pendingUpload.mediaType,
+          uri: pendingUpload.uri,
+        }}
         pendingUpload={pendingUpload}
         remove={cancelPendingUpload}
         multimediaCSSClass={css.multimedia}
diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -35,18 +35,26 @@
     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;
+      let mediaSource;
+      if (singleMedia.type === 'photo' || singleMedia.type === 'video') {
+        mediaSource = {
+          type: singleMedia.type,
+          uri: singleMedia.uri,
+        };
+      } else {
+        mediaSource = {
+          type: singleMedia.type,
+          holder: singleMedia.holder,
+          encryptionKey: singleMedia.encryptionKey,
+        };
+      }
+
       multimedia.push(
         <Multimedia
-          uri={singleMedia.uri}
-          type={singleMedia.type}
+          mediaSource={mediaSource}
           pendingUpload={pendingUpload}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -14,16 +14,27 @@
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react.js';
-import type { MediaType } from 'lib/types/media-types.js';
+import type { MediaType, EncryptedMediaType } from 'lib/types/media-types.js';
 
+import EncryptedMultimedia from './encrypted-multimedia.react.js';
 import css from './media.css';
 import MultimediaModal from './multimedia-modal.react.js';
 import Button from '../components/button.react.js';
 import { type PendingMultimediaUpload } from '../input/input-state.js';
 
+type MediaSource =
+  | {
+      +type: MediaType,
+      +uri: string,
+    }
+  | {
+      +type: EncryptedMediaType,
+      +holder: string,
+      +encryptionKey: string,
+    };
+
 type BaseProps = {
-  +uri: string,
-  +type: MediaType,
+  +mediaSource: MediaSource,
   +pendingUpload?: ?PendingMultimediaUpload,
   +remove?: (uploadID: string) => void,
   +multimediaCSSClass: string,
@@ -36,15 +47,23 @@
 
 class Multimedia extends React.PureComponent<Props> {
   componentDidUpdate(prevProps: Props) {
-    const { uri, pendingUpload } = this.props;
-    if (uri === prevProps.uri) {
+    const { mediaSource, pendingUpload } = this.props;
+    if (
+      prevProps.mediaSource.type === 'encrypted_photo' ||
+      prevProps.mediaSource.type === 'encrypted_video'
+    ) {
+      return;
+    }
+
+    const prevUri = prevProps.mediaSource?.uri;
+    if (!prevUri || mediaSource.uri === prevUri) {
       return;
     }
     if (
       (!pendingUpload || pendingUpload.uriIsReal) &&
       (!prevProps.pendingUpload || !prevProps.pendingUpload.uriIsReal)
     ) {
-      URL.revokeObjectURL(prevProps.uri);
+      URL.revokeObjectURL(prevUri);
     }
   }
 
@@ -54,8 +73,7 @@
     const {
       pendingUpload,
       remove,
-      type,
-      uri,
+      mediaSource,
       multimediaImageCSSClass,
       multimediaCSSClass,
     } = this.props;
@@ -97,24 +115,42 @@
     ];
     imageContainerClasses.push(css.clickable);
 
+    // Media element is the actual image or video element (or encrypted version)
+    let mediaElement;
+    if (mediaSource.type === 'photo') {
+      mediaElement = <img src={mediaSource.uri} />;
+    } else if (mediaSource.type === 'video') {
+      mediaElement = (
+        <video controls>
+          <source src={mediaSource.uri} />
+        </video>
+      );
+    } else if (
+      mediaSource.type === 'encrypted_photo' ||
+      mediaSource.type === 'encrypted_video'
+    ) {
+      const { ...encryptedMediaProps } = mediaSource;
+      mediaElement = <EncryptedMultimedia {...encryptedMediaProps} />;
+    }
+
+    // Media node is the container for the media element (button if photo)
     let mediaNode;
-    if (type === 'photo') {
+    if (
+      mediaSource.type === 'photo' ||
+      mediaSource.type === 'encrypted_photo'
+    ) {
       mediaNode = (
         <Button
           className={classNames(imageContainerClasses)}
           onClick={this.onClick}
         >
-          <img src={uri} />
+          {mediaElement}
           {removeButton}
         </Button>
       );
     } else {
       mediaNode = (
-        <div className={classNames(imageContainerClasses)}>
-          <video controls>
-            <source src={uri} />
-          </video>
-        </div>
+        <div className={classNames(imageContainerClasses)}>{mediaElement}</div>
       );
     }
 
@@ -140,9 +176,8 @@
   };
 
   onClick: () => void = () => {
-    const { pushModal, type, uri } = this.props;
-    const mediaInfo = { type, uri };
-    pushModal(<MultimediaModal media={mediaInfo} />);
+    const { pushModal, mediaSource } = this.props;
+    pushModal(<MultimediaModal media={mediaSource} />);
   };
 }