Differential D7993 Diff 27288 web/media/loadable-video.react.js

Changeset View

Standalone View

web/media/loadable-video.react.js

Show All 15 Lines	\| {
+thumbnailHolder: string,		+thumbnailHolder: string,
+thumbnailEncryptionKey: string,		+thumbnailEncryptionKey: string,
};		};
type Props = {		type Props = {
+uri: ?string,		+uri: ?string,
+thumbnailSource: ThumbnailSource,		+thumbnailSource: ThumbnailSource,
+thumbHashDataURL?: ?string,		+thumbHashDataURL?: ?string,
+elementStyle?: ?Shape<CSSStyleDeclaration>,		+elementStyle?: ?Shape<CSSStyleDeclaration>,
		+multimediaClassName?: string,
};		};

function LoadableVideo(props: Props, videoRef: React.Ref<'video'>): React.Node {		function LoadableVideo(props: Props, videoRef: React.Ref<'video'>): React.Node {
const { uri, thumbHashDataURL, thumbnailSource, elementStyle } = props;		const {
		uri,
		thumbHashDataURL,
		thumbnailSource,
		elementStyle,
		multimediaClassName,
		} = props;
const { thumbnailURI, thumbnailHolder, thumbnailEncryptionKey } =		const { thumbnailURI, thumbnailHolder, thumbnailEncryptionKey } =
thumbnailSource;		thumbnailSource;

const [thumbnailImage, setThumbnailImage] = React.useState(null);		const [thumbnailImage, setThumbnailImage] = React.useState(null);

React.useEffect(() => {		React.useEffect(() => {
let isMounted = true,		let isMounted = true,
uriToDispose;		uriToDispose;
Show All 31 Lines	function LoadableVideo(props: Props, videoRef: React.Ref<'video'>): React.Node {
}, [thumbnailURI, thumbnailHolder, thumbnailEncryptionKey]);		}, [thumbnailURI, thumbnailHolder, thumbnailEncryptionKey]);

let videoSource;		let videoSource;
if (uri) {		if (uri) {
videoSource = <source src={uri} />;		videoSource = <source src={uri} />;
}		}
const poster = thumbnailImage ?? thumbHashDataURL;		const poster = thumbnailImage ?? thumbHashDataURL;
return (		return (
<video controls poster={poster} style={elementStyle} ref={videoRef}>		<video
		controls
		poster={poster}
		className={multimediaClassName}
		style={elementStyle}
		ref={videoRef}
		>
{videoSource}		{videoSource}
</video>		</video>
);		);
}		}

const MemoizedLoadableVideo: React.AbstractComponent<Props, HTMLVideoElement> =		const MemoizedLoadableVideo: React.AbstractComponent<Props, HTMLVideoElement> =
React.memo<Props, HTMLVideoElement>(		React.memo<Props, HTMLVideoElement>(
React.forwardRef<Props, HTMLVideoElement>(LoadableVideo),		React.forwardRef<Props, HTMLVideoElement>(LoadableVideo),
);		);

export default MemoizedLoadableVideo;		export default MemoizedLoadableVideo;