Page MenuHomePhabricator
Files F3400744

D7994.id27289.diff
No OneTemporary
Actions

D7994.id27289.diff
View Options

diff --git a/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js b/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/gallery/thread-settings-media-gallery-item.react.js
@@ -0,0 +1,71 @@
+// @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],
+ );
+
+ 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;

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 3, 8:39 AM (20 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2611056
Default Alt Text
D7994.id27289.diff (2 KB)

Event Timeline