Page MenuHomePhabricator
Files F3405287

D7996.diff
No OneTemporary
Actions

D7996.diff
View Options

diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -125,12 +125,13 @@
return (
<div
className={css.multimediaModalOverlay}
- ref={this.overlayRef}
onClick={this.onBackgroundClick}
tabIndex={0}
onKeyDown={this.onKeyDown}
>
- <div className={css.mediaContainer}>{mediaModalItem}</div>
+ <div ref={this.overlayRef} className={css.mediaContainer}>
+ {mediaModalItem}
+ </div>
<XCircleIcon
onClick={this.props.popModal}
className={css.closeMultimediaModal}
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -83,68 +83,61 @@
[pushModal],
);
- const filteredMediaInfos = React.useMemo(() => {
+ const mediaGalleryItems = React.useMemo(() => {
+ let filteredMediaInfos = mediaInfos;
if (tab === 'Images') {
- return mediaInfos.filter(
+ filteredMediaInfos = mediaInfos.filter(
mediaInfo =>
mediaInfo.type === 'photo' || mediaInfo.type === 'encrypted_photo',
);
} else if (tab === 'Videos') {
- return mediaInfos.filter(
+ filteredMediaInfos = mediaInfos.filter(
mediaInfo =>
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video',
);
}
- return mediaInfos;
- }, [tab, mediaInfos]);
-
- const mediaCoverPhotos = React.useMemo(
- () =>
- filteredMediaInfos.map(media => {
- if (media.type === 'photo') {
- return {
- kind: 'plain',
- uri: media.uri,
- thumbHash: media.thumbHash,
- };
- } else if (media.type === 'video') {
- return {
- kind: 'plain',
- uri: media.thumbnailURI,
- thumbHash: media.thumbnailThumbHash,
- };
- } else if (media.type === 'encrypted_photo') {
- return {
- kind: 'encrypted',
- holder: media.holder,
- encryptionKey: media.encryptionKey,
- thumbHash: media.thumbHash,
- };
- } else {
- return {
- kind: 'encrypted',
- holder: media.thumbnailHolder,
- encryptionKey: media.thumbnailEncryptionKey,
- thumbHash: media.thumbnailThumbHash,
- };
- }
- }),
- [filteredMediaInfos],
- );
- const mediaGalleryItems = React.useMemo(
- () =>
- filteredMediaInfos.map((media, i) => (
+ return filteredMediaInfos.map((media, i) => {
+ let imageSource;
+ if (media.type === 'photo') {
+ imageSource = {
+ kind: 'plain',
+ uri: media.uri,
+ thumbHash: media.thumbHash,
+ };
+ } else if (media.type === 'video') {
+ imageSource = {
+ kind: 'plain',
+ uri: media.thumbnailURI,
+ thumbHash: media.thumbnailThumbHash,
+ };
+ } else if (media.type === 'encrypted_photo') {
+ imageSource = {
+ kind: 'encrypted',
+ holder: media.holder,
+ encryptionKey: media.encryptionKey,
+ thumbHash: media.thumbHash,
+ };
+ } else {
+ imageSource = {
+ kind: 'encrypted',
+ holder: media.thumbnailHolder,
+ encryptionKey: media.thumbnailEncryptionKey,
+ thumbHash: media.thumbnailThumbHash,
+ };
+ }
+
+ return (
<GalleryItem
key={i}
onClick={() => onClick(media)}
- imageSource={mediaCoverPhotos[i]}
+ imageSource={imageSource}
imageCSSClass={css.media}
imageContainerCSSClass={css.mediaContainer}
/>
- )),
- [filteredMediaInfos, onClick, mediaCoverPhotos],
- );
+ );
+ });
+ }, [tab, mediaInfos, onClick]);
const handleScroll = React.useCallback(
async event => {

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 4, 7:52 PM (3 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2614719
Default Alt Text
D7996.diff (4 KB)

Event Timeline