diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -5,12 +5,24 @@
 import { XCircle as XCircleIcon } from 'react-feather';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { EncryptedMediaType, MediaType } from 'lib/types/media-types.js';
 
+import EncryptedMultimedia from './encrypted-multimedia.react.js';
 import css from './media.css';
 
+type MediaInfo =
+  | {
+      +type: MediaType,
+      +uri: string,
+    }
+  | {
+      +type: EncryptedMediaType,
+      +holder: string,
+      +encryptionKey: string,
+    };
+
 type BaseProps = {
-  +type: string,
-  +uri: string,
+  +media: MediaInfo,
 };
 
 type Props = {
@@ -28,14 +40,28 @@
 
   render(): React.Node {
     let mediaModalItem;
-    if (this.props.type === 'photo') {
-      mediaModalItem = <img src={this.props.uri} />;
-    } else {
+    const { media } = this.props;
+    if (media.type === 'photo') {
+      mediaModalItem = <img src={media.uri} />;
+    } else if (media.type === 'video') {
       mediaModalItem = (
         <video controls>
-          <source src={this.props.uri} />
+          <source src={media.uri} />
         </video>
       );
+    } else {
+      invariant(
+        media.type === 'encrypted_photo' || media.type === 'encrypted_video',
+        'invalid media type',
+      );
+      const { type, holder, encryptionKey } = media;
+      mediaModalItem = (
+        <EncryptedMultimedia
+          type={type}
+          holder={holder}
+          encryptionKey={encryptionKey}
+        />
+      );
     }
 
     return (
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
@@ -141,7 +141,8 @@
 
   onClick: () => void = () => {
     const { pushModal, type, uri } = this.props;
-    pushModal(<MultimediaModal type={type} uri={uri} />);
+    const mediaInfo = { type, uri };
+    pushModal(<MultimediaModal media={mediaInfo} />);
   };
 }
 
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -1,6 +1,5 @@
 // @flow
 
-import invariant from 'invariant';
 import * as React from 'react';
 
 import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
@@ -49,11 +48,21 @@
 
   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} />);
+      // this branching is needed for Flow
+      let mediaInfo;
+      if (media.type === 'photo' || media.type === 'video') {
+        mediaInfo = {
+          type: media.type,
+          uri: media.uri,
+        };
+      } else {
+        mediaInfo = {
+          type: media.type,
+          holder: media.holder,
+          encryptionKey: media.encryptionKey,
+        };
+      }
+      pushModal(<MultimediaModal media={mediaInfo} />);
     },
     [pushModal],
   );