Page MenuHomePhorge
Files F32618702

D7900.1767461450.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D7900.1767461450.diff
View Options

diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -1,12 +1,15 @@
// @flow
+import invariant from 'invariant';
import * as React from 'react';
import 'react-circular-progressbar/dist/styles.css';
import { AlertCircle as AlertCircleIcon } from 'react-feather';
+import type { Shape } from 'lib/types/core.js';
import type { EncryptedMediaType } from 'lib/types/media-types.js';
import { decryptMedia } from './encryption-utils.js';
+import LoadableVideo from './loadable-video.react.js';
import css from './media.css';
import LoadingIndicator from '../loading-indicator.react.js';
@@ -14,10 +17,14 @@
+holder: string,
+encryptionKey: string,
+type: EncryptedMediaType,
+ +thumbnailHolder: ?string,
+ +thumbnailEncryptionKey: ?string,
+ +placeholderSrc?: ?string,
+ +elementStyle?: ?Shape<CSSStyleDeclaration>,
};
function EncryptedMultimedia(props: Props): React.Node {
- const { holder, encryptionKey } = props;
+ const { holder, encryptionKey, placeholderSrc, elementStyle } = props;
const [source, setSource] = React.useState(null);
const videoRef = React.useRef(null);
@@ -80,9 +87,30 @@
let mediaNode;
if (props.type === 'encrypted_photo') {
- mediaNode = <img src={source?.uri} key={holder} />;
+ mediaNode = (
+ <img
+ src={source?.uri ?? placeholderSrc}
+ key={holder}
+ style={elementStyle}
+ />
+ );
} else {
- mediaNode = <video controls ref={videoRef} key={holder} />;
+ const { thumbnailHolder, thumbnailEncryptionKey } = props;
+ invariant(
+ thumbnailHolder && thumbnailEncryptionKey,
+ 'Thumbnail missing for encrypted video',
+ );
+
+ mediaNode = (
+ <LoadableVideo
+ uri={null}
+ ref={videoRef}
+ key={holder}
+ thumbnailSource={{ thumbnailHolder, thumbnailEncryptionKey }}
+ elementStyle={elementStyle}
+ thumbHashDataURL={placeholderSrc}
+ />
+ );
}
return (
diff --git a/web/media/media.css b/web/media/media.css
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -57,7 +57,8 @@
height: 50px;
}
-span.multimedia .loadingIndicator {
+span.multimedia .loadingIndicator,
+div.multimediaModalOverlay .loadingIndicator {
position: absolute;
top: 0;
bottom: 0;
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
@@ -95,12 +95,29 @@
media.type === 'encrypted_photo' || media.type === 'encrypted_video',
'invalid media type',
);
- const { type, holder, encryptionKey } = media;
+ const {
+ type,
+ holder,
+ encryptionKey,
+ thumbnailHolder,
+ thumbnailEncryptionKey,
+ } = media;
+ const dimensions = this.state.dimensions ?? media.dimensions;
+ const elementStyle = dimensions
+ ? {
+ width: `${dimensions.width}px`,
+ height: `${dimensions.height}px`,
+ }
+ : undefined;
mediaModalItem = (
<EncryptedMultimedia
type={type}
holder={holder}
encryptionKey={encryptionKey}
+ thumbnailHolder={thumbnailHolder}
+ thumbnailEncryptionKey={thumbnailEncryptionKey}
+ placeholderSrc={placeholderImage}
+ elementStyle={elementStyle}
/>
);
}
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
@@ -184,13 +184,17 @@
mediaSource.type === 'encrypted_photo' ||
mediaSource.type === 'encrypted_video'
) {
- const { type, holder } = mediaSource;
+ const { type, holder, thumbnailHolder } = mediaSource;
invariant(encryptionKey, 'encryptionKey undefined for encrypted media');
mediaElement = (
<EncryptedMultimedia
type={type}
holder={holder}
encryptionKey={encryptionKey}
+ thumbnailHolder={thumbnailHolder}
+ thumbnailEncryptionKey={thumbnailEncryptionKey}
+ elementStyle={elementStyle}
+ placeholderSrc={placeholderImage}
/>
);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Jan 3, 5:30 PM (20 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5889976
Default Alt Text
D7900.1767461450.diff (4 KB)

Event Timeline