Page MenuHomePhorge
Files F32919796

D7281.1768219238.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D7281.1768219238.diff
View Options

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} />);
};
}

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 12, 12:00 PM (17 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5921423
Default Alt Text
D7281.1768219238.diff (5 KB)

Event Timeline