Differential D7994 Diff 27084 web/modals/threads/gallery/thread-settings-media-gallery-item.react.js

Changeset View

Standalone View

web/modals/threads/gallery/thread-settings-media-gallery-item.react.js

This file was added.

				// @flow

				import invariant from 'invariant';
				import * as React from 'react';

				import { fetchableMediaURI } from 'lib/media/media-utils.js';

				import EncryptedMultimedia from '../../../media/encrypted-multimedia.react.js';
				import { usePlaceholder } from '../../../media/media-utils.js';

				type MediaSource =
				\| {
				+kind: 'plain',
				+uri: string,
				+thumbHash: ?string,
				}
				\| {
				+kind: 'encrypted',
				+holder: string,
				+encryptionKey: string,
				+thumbHash: ?string,
				};
				type Props = {
				+imageSource: MediaSource,
				+imageCSSClass: string,
				+imageContainerCSSClass: string,
				+onClick?: () => void,
				};
				function MediaGalleryItem(props: Props) {
				const { imageSource, imageCSSClass, imageContainerCSSClass } = props;

				const { thumbHash, encryptionKey } = imageSource;
				const placeholderImage = usePlaceholder(thumbHash, encryptionKey);
				const imageStyle = React.useMemo(
				() => ({
				background: placeholderImage
				? `center / cover url(${placeholderImage})`
				: undefined,
				}),
				[placeholderImage],
				);
				atulUnsubmitted Not Done Inline Actions Can we use the `classnames` utility instead of passing things to `img` `style` prop? There should be a lot of examples of `classnames` usage throughout the codebase eg: Definitely let me know if I'm missing something here though atul: Can we use the `classnames` utility instead of passing things to `img` `style` prop? There…
				bartekAuthorUnsubmitted Done Inline Actions Ok but how do I pass dynamic URL value to such classname thing? bartek: Ok but how do I pass dynamic URL value to such classname thing?
				atulUnsubmitted Not Done Inline Actions Good point... not sure what I was thinking. Sorry for blocking stack on this. atul: Good point... not sure what I was thinking. Sorry for blocking stack on this.

				let image;
				if (imageSource.kind === 'plain') {
				const uri = fetchableMediaURI(imageSource.uri);
				image = <img src={uri} className={imageCSSClass} style={imageStyle} />;
				} else if (imageSource.kind === 'encrypted') {
				const { holder } = imageSource;
				invariant(encryptionKey, 'encryptionKey undefined for encrypted image');
				image = (
				<EncryptedMultimedia
				type="encrypted_photo"
				holder={holder}
				encryptionKey={encryptionKey}
				placeholderSrc={placeholderImage}
				multimediaClassName={imageCSSClass}
				/>
				);
				}

				return (
				<div className={imageContainerCSSClass} onClick={props.onClick}>
				{image}
				</div>
				);
				}

				const MemoizedItem: React.ComponentType<Props> =
				React.memo<Props>(MediaGalleryItem);

				export default MemoizedItem;