// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import 'react-circular-progressbar/dist/styles.css';		import 'react-circular-progressbar/dist/styles.css';
import { AlertCircle as AlertCircleIcon } from 'react-feather';		import { AlertCircle as AlertCircleIcon } from 'react-feather';

import type { Shape } from 'lib/types/core.js';		import type { Shape } from 'lib/types/core.js';
import type { EncryptedMediaType } from 'lib/types/media-types.js';		import type { EncryptedMediaType } from 'lib/types/media-types.js';

import { decryptMedia } from './encryption-utils.js';		import { decryptMedia } from './encryption-utils.js';
import LoadableVideo from './loadable-video.react.js';		import LoadableVideo from './loadable-video.react.js';
import css from './media.css';		import css from './media.css';
import LoadingIndicator from '../loading-indicator.react.js';		import LoadingIndicator from '../loading-indicator.react.js';

type Props = {		type Props = {
+holder: string,		+blobURI: string,
+encryptionKey: string,		+encryptionKey: string,
+type: EncryptedMediaType,		+type: EncryptedMediaType,
+thumbnailHolder?: ?string,		+thumbnailBlobURI?: ?string,
+thumbnailEncryptionKey?: ?string,		+thumbnailEncryptionKey?: ?string,
+placeholderSrc?: ?string,		+placeholderSrc?: ?string,
+multimediaClassName?: string,		+multimediaClassName?: string,
+elementStyle?: ?Shape<CSSStyleDeclaration>,		+elementStyle?: ?Shape<CSSStyleDeclaration>,
};		};

function EncryptedMultimedia(props: Props): React.Node {		function EncryptedMultimedia(props: Props): React.Node {
const {		const {
holder,		blobURI,
encryptionKey,		encryptionKey,
placeholderSrc,		placeholderSrc,
elementStyle,		elementStyle,
multimediaClassName,		multimediaClassName,
} = props;		} = props;

const [source, setSource] = React.useState(null);		const [source, setSource] = React.useState(null);
const videoRef = React.useRef(null);		const videoRef = React.useRef(null);

React.useEffect(() => {		React.useEffect(() => {
let isMounted = true,		let isMounted = true,
uriToDispose;		uriToDispose;
setSource(null);		setSource(null);

const loadDecrypted = async () => {		const loadDecrypted = async () => {
const { result } = await decryptMedia(holder, encryptionKey);		const { result } = await decryptMedia(blobURI, encryptionKey);
if (!isMounted) {		if (!isMounted) {
return;		return;
}		}

if (result.success) {		if (result.success) {
const { uri } = result;		const { uri } = result;
setSource({ uri });		setSource({ uri });
uriToDispose = uri;		uriToDispose = uri;
} else {		} else {
setSource({ error: result.reason });		setSource({ error: result.reason });
}		}
};		};

loadDecrypted();		loadDecrypted();

return () => {		return () => {
isMounted = false;		isMounted = false;
if (uriToDispose) {		if (uriToDispose) {
URL.revokeObjectURL(uriToDispose);		URL.revokeObjectURL(uriToDispose);
}		}
};		};
}, [holder, encryptionKey]);		}, [blobURI, encryptionKey]);

// we need to update the video source when the source changes		// we need to update the video source when the source changes
// because re-rendering the <source> element wouldn't reload parent <video>		// because re-rendering the <source> element wouldn't reload parent <video>
React.useEffect(() => {		React.useEffect(() => {
if (videoRef.current && source?.uri) {		if (videoRef.current && source?.uri) {
videoRef.current.src = source.uri;		videoRef.current.src = source.uri;
videoRef.current.load();		videoRef.current.load();
}		}
Show All 16 Lines	if (source?.error) {
errorIndicator = <AlertCircleIcon className={css.uploadError} size={36} />;		errorIndicator = <AlertCircleIcon className={css.uploadError} size={36} />;
}		}

let mediaNode;		let mediaNode;
if (props.type === 'encrypted_photo') {		if (props.type === 'encrypted_photo') {
mediaNode = (		mediaNode = (
<img		<img
src={source?.uri ?? placeholderSrc}		src={source?.uri ?? placeholderSrc}
key={holder}		key={blobURI}
className={multimediaClassName}		className={multimediaClassName}
style={elementStyle}		style={elementStyle}
/>		/>
);		);
} else {		} else {
const { thumbnailHolder, thumbnailEncryptionKey } = props;		const { thumbnailBlobURI, thumbnailEncryptionKey } = props;
invariant(		invariant(
thumbnailHolder && thumbnailEncryptionKey,		thumbnailBlobURI && thumbnailEncryptionKey,
'Thumbnail missing for encrypted video',		'Thumbnail missing for encrypted video',
);		);

mediaNode = (		mediaNode = (
<LoadableVideo		<LoadableVideo
uri={null}		uri={null}
ref={videoRef}		ref={videoRef}
key={holder}		key={blobURI}
thumbnailSource={{ thumbnailHolder, thumbnailEncryptionKey }}		thumbnailSource={{ thumbnailBlobURI, thumbnailEncryptionKey }}
elementStyle={elementStyle}		elementStyle={elementStyle}
thumbHashDataURL={placeholderSrc}		thumbHashDataURL={placeholderSrc}
multimediaClassName={multimediaClassName}		multimediaClassName={multimediaClassName}
/>		/>
);		);
}		}

return (		return (
Show All 9 Lines

TestAbandonedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 16658

lib/utils/action-utils.js

Test
AbandonedPublic
Actions

Revision Contents
Changeset List