Changeset View
Changeset View
Standalone View
Standalone View
web/modals/threads/gallery/thread-settings-media-gallery.react.js
| Show First 20 Lines • Show All 77 Lines • ▼ Show 20 Lines | (media: Media) => { | ||||
| thumbnailEncryptionKey, | thumbnailEncryptionKey, | ||||
| }; | }; | ||||
| } | } | ||||
| pushModal(<MultimediaModal media={mediaInfo} />); | pushModal(<MultimediaModal media={mediaInfo} />); | ||||
| }, | }, | ||||
| [pushModal], | [pushModal], | ||||
| ); | ); | ||||
| const filteredMediaInfos = React.useMemo(() => { | const mediaGalleryItems = React.useMemo(() => { | ||||
| let filteredMediaInfos = mediaInfos; | |||||
| if (tab === 'Images') { | if (tab === 'Images') { | ||||
| return mediaInfos.filter( | filteredMediaInfos = mediaInfos.filter( | ||||
| mediaInfo => | mediaInfo => | ||||
| mediaInfo.type === 'photo' || mediaInfo.type === 'encrypted_photo', | mediaInfo.type === 'photo' || mediaInfo.type === 'encrypted_photo', | ||||
| ); | ); | ||||
| } else if (tab === 'Videos') { | } else if (tab === 'Videos') { | ||||
| return mediaInfos.filter( | filteredMediaInfos = mediaInfos.filter( | ||||
| mediaInfo => | mediaInfo => | ||||
| mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video', | mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video', | ||||
| ); | ); | ||||
| } | } | ||||
| return mediaInfos; | |||||
| }, [tab, mediaInfos]); | |||||
| const mediaCoverPhotos = React.useMemo( | return filteredMediaInfos.map((media, i) => { | ||||
| () => | let imageSource; | ||||
| filteredMediaInfos.map(media => { | |||||
| if (media.type === 'photo') { | if (media.type === 'photo') { | ||||
| return { | imageSource = { | ||||
| kind: 'plain', | kind: 'plain', | ||||
| uri: media.uri, | uri: media.uri, | ||||
| thumbHash: media.thumbHash, | thumbHash: media.thumbHash, | ||||
| }; | }; | ||||
| } else if (media.type === 'video') { | } else if (media.type === 'video') { | ||||
| return { | imageSource = { | ||||
| kind: 'plain', | kind: 'plain', | ||||
| uri: media.thumbnailURI, | uri: media.thumbnailURI, | ||||
| thumbHash: media.thumbnailThumbHash, | thumbHash: media.thumbnailThumbHash, | ||||
| }; | }; | ||||
| } else if (media.type === 'encrypted_photo') { | } else if (media.type === 'encrypted_photo') { | ||||
| return { | imageSource = { | ||||
| kind: 'encrypted', | kind: 'encrypted', | ||||
| holder: media.holder, | holder: media.holder, | ||||
| encryptionKey: media.encryptionKey, | encryptionKey: media.encryptionKey, | ||||
| thumbHash: media.thumbHash, | thumbHash: media.thumbHash, | ||||
| }; | }; | ||||
| } else { | } else { | ||||
| return { | imageSource = { | ||||
| kind: 'encrypted', | kind: 'encrypted', | ||||
| holder: media.thumbnailHolder, | holder: media.thumbnailHolder, | ||||
| encryptionKey: media.thumbnailEncryptionKey, | encryptionKey: media.thumbnailEncryptionKey, | ||||
| thumbHash: media.thumbnailThumbHash, | thumbHash: media.thumbnailThumbHash, | ||||
| }; | }; | ||||
| } | } | ||||
| }), | |||||
| [filteredMediaInfos], | |||||
| ); | |||||
| const mediaGalleryItems = React.useMemo( | return ( | ||||
| () => | |||||
| filteredMediaInfos.map((media, i) => ( | |||||
| <GalleryItem | <GalleryItem | ||||
| key={i} | key={i} | ||||
| onClick={() => onClick(media)} | onClick={() => onClick(media)} | ||||
| imageSource={mediaCoverPhotos[i]} | imageSource={imageSource} | ||||
| imageCSSClass={css.media} | imageCSSClass={css.media} | ||||
| imageContainerCSSClass={css.mediaContainer} | imageContainerCSSClass={css.mediaContainer} | ||||
| /> | /> | ||||
| )), | |||||
| [filteredMediaInfos, onClick, mediaCoverPhotos], | |||||
| ); | ); | ||||
| }); | |||||
| }, [tab, mediaInfos, onClick]); | |||||
| const handleScroll = React.useCallback( | const handleScroll = React.useCallback( | ||||
| async event => { | async event => { | ||||
| const container = event.target; | const container = event.target; | ||||
| // Load more data when the user is within 1000 pixels of the end | // Load more data when the user is within 1000 pixels of the end | ||||
| const buffer = 1000; | const buffer = 1000; | ||||
| if ( | if ( | ||||
| Show All 40 Lines | |||||