Differential D7993 Diff 27288 web/media/encrypted-multimedia.react.js

Changeset View

Standalone View

web/media/encrypted-multimedia.react.js

Show All 11 Lines
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,		+holder: string,
+encryptionKey: string,		+encryptionKey: string,
+type: EncryptedMediaType,		+type: EncryptedMediaType,
+thumbnailHolder: ?string,		+thumbnailHolder?: ?string,
+thumbnailEncryptionKey: ?string,		+thumbnailEncryptionKey?: ?string,
+placeholderSrc?: ?string,		+placeholderSrc?: ?string,
		+multimediaClassName?: string,
+elementStyle?: ?Shape<CSSStyleDeclaration>,		+elementStyle?: ?Shape<CSSStyleDeclaration>,
};		};

function EncryptedMultimedia(props: Props): React.Node {		function EncryptedMultimedia(props: Props): React.Node {
const { holder, encryptionKey, placeholderSrc, elementStyle } = props;		const {
		holder,
		encryptionKey,
		placeholderSrc,
		elementStyle,
		multimediaClassName,
		} = 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);
▲ Show 20 Lines • Show All 50 Lines • ▼ Show 20 Lines	function EncryptedMultimedia(props: Props): React.Node {
}		}

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={holder}
		className={multimediaClassName}
style={elementStyle}		style={elementStyle}
/>		/>
);		);
} else {		} else {
const { thumbnailHolder, thumbnailEncryptionKey } = props;		const { thumbnailHolder, thumbnailEncryptionKey } = props;
invariant(		invariant(
thumbnailHolder && thumbnailEncryptionKey,		thumbnailHolder && 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={holder}
thumbnailSource={{ thumbnailHolder, thumbnailEncryptionKey }}		thumbnailSource={{ thumbnailHolder, thumbnailEncryptionKey }}
elementStyle={elementStyle}		elementStyle={elementStyle}
thumbHashDataURL={placeholderSrc}		thumbHashDataURL={placeholderSrc}
		multimediaClassName={multimediaClassName}
/>		/>
);		);
}		}

return (		return (
<>		<>
{mediaNode}		{mediaNode}
{loadingIndicator}		{loadingIndicator}
{errorIndicator}		{errorIndicator}
</>		</>
);		);
}		}

export default EncryptedMultimedia;		export default EncryptedMultimedia;