Page MenuHomePhorge
Files F32209850

D6865.1765128701.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D6865.1765128701.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
@@ -9,6 +9,7 @@
import css from './media.css';
type BaseProps = {
+ +type: string,
+uri: string,
};
@@ -26,6 +27,17 @@
}
render(): React.Node {
+ let mediaModalItem;
+ if (this.props.type === 'photo') {
+ mediaModalItem = <img src={this.props.uri} />;
+ } else {
+ mediaModalItem = (
+ <video controls>
+ <source src={this.props.uri} />
+ </video>
+ );
+ }
+
return (
<div
className={css.multimediaModalOverlay}
@@ -34,7 +46,7 @@
tabIndex={0}
onKeyDown={this.onKeyDown}
>
- <img src={this.props.uri} />
+ {mediaModalItem}
<XCircleIcon
onClick={this.props.popModal}
className={css.closeMultimediaModal}
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -140,8 +140,8 @@
};
onClick: () => void = () => {
- const { pushModal, uri } = this.props;
- pushModal(<MultimediaModal uri={uri} />);
+ const { pushModal, type, uri } = this.props;
+ pushModal(<MultimediaModal type={type} uri={uri} />);
};
}
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
@@ -3,11 +3,14 @@
import * as React from 'react';
import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { Media } from 'lib/types/media-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import { useServerCall } from 'lib/utils/action-utils.js';
import css from './thread-settings-media-gallery.css';
import Tabs from '../../../components/tabs.react.js';
+import MultimediaModal from '../../../media/multimedia-modal.react.js';
import Modal from '../../modal.react.js';
type MediaGalleryTab = 'All' | 'Images' | 'Videos';
@@ -22,6 +25,7 @@
function ThreadSettingsMediaGalleryModal(
props: ThreadSettingsMediaGalleryModalProps,
): React.Node {
+ const { pushModal } = useModalContext();
const { onClose, parentThreadInfo, limit, activeTab } = props;
const { id: threadID } = parentThreadInfo;
const modalName = 'Media';
@@ -42,6 +46,13 @@
fetchData();
}, [callFetchThreadMedia, threadID, limit]);
+ const onClick = React.useCallback(
+ (media: Media) => {
+ pushModal(<MultimediaModal type={media.type} uri={media.uri} />);
+ },
+ [pushModal],
+ );
+
const filteredMediaInfos = React.useMemo(() => {
if (tab === 'Images') {
return mediaInfos.filter(mediaInfo => mediaInfo.type === 'photo');
@@ -59,11 +70,15 @@
const mediaGalleryItems = React.useMemo(
() =>
filteredMediaInfos.map((media, i) => (
- <div key={i} className={css.mediaContainer}>
+ <div
+ key={i}
+ onClick={() => onClick(media)}
+ className={css.mediaContainer}
+ >
<img src={mediaCoverPhotos[i]} className={css.media} />
</div>
)),
- [filteredMediaInfos, mediaCoverPhotos],
+ [filteredMediaInfos, onClick, mediaCoverPhotos],
);
const handleScroll = React.useCallback(

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 5:31 PM (19 h, 29 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5845176
Default Alt Text
D6865.1765128701.diff (3 KB)

Event Timeline