diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx index 2721d726b..0052a9564 100644 --- a/app/soapbox/components/status-media.tsx +++ b/app/soapbox/components/status-media.tsx @@ -59,7 +59,7 @@ const StatusMedia: React.FC = ({ }; const openMedia = (media: ImmutableList, index: number) => { - dispatch(openModal('MEDIA', { media, index })); + dispatch(openModal('MEDIA', { media, status, index })); }; const openVideo = (media: Attachment, time: number): void => { diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 99de0da5d..27b1731bd 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -117,9 +117,9 @@ const Status: React.FC = (props) => { if (firstAttachment) { if (firstAttachment.type === 'video') { - dispatch(openModal('VIDEO', { media: firstAttachment, time: 0 })); + dispatch(openModal('VIDEO', { status, media: firstAttachment, time: 0 })); } else { - dispatch(openModal('MEDIA', { media: status.media_attachments, index: 0 })); + dispatch(openModal('MEDIA', { status, media: status.media_attachments, index: 0 })); } } }; diff --git a/app/soapbox/features/admin/components/report_status.tsx b/app/soapbox/features/admin/components/report_status.tsx index 8ec01792e..4f9ff1af0 100644 --- a/app/soapbox/features/admin/components/report_status.tsx +++ b/app/soapbox/features/admin/components/report_status.tsx @@ -27,7 +27,7 @@ const ReportStatus: React.FC = ({ status }) => { const dispatch = useAppDispatch(); const handleOpenMedia = (media: Attachment, index: number) => { - dispatch(openModal('MEDIA', { media, index })); + dispatch(openModal('MEDIA', { media, status, index })); }; const handleDeleteStatus = () => { diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx index c5130b759..2ba338bcc 100644 --- a/app/soapbox/features/status/index.tsx +++ b/app/soapbox/features/status/index.tsx @@ -228,7 +228,7 @@ const Thread: React.FC = (props) => { }; const handleOpenMedia = (media: ImmutableList, index: number) => { - dispatch(openModal('MEDIA', { media, index })); + dispatch(openModal('MEDIA', { media, status, index })); }; const handleOpenVideo = (media: ImmutableList, time: number) => { diff --git a/app/soapbox/features/ui/components/media-modal.tsx b/app/soapbox/features/ui/components/media-modal.tsx index a04808ece..17bddabeb 100644 --- a/app/soapbox/features/ui/components/media-modal.tsx +++ b/app/soapbox/features/ui/components/media-modal.tsx @@ -23,7 +23,7 @@ const messages = defineMessages({ interface IMediaModal { media: ImmutableList, - status: Status, + status?: Status, account: Account, index: number, time?: number, @@ -96,17 +96,17 @@ const MediaModal: React.FC = (props) => { const handleStatusClick: React.MouseEventHandler = e => { if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { e.preventDefault(); - history.push(`/@${account.acct}/posts/${status.id}`); + history.push(`/@${account.acct}/posts/${status?.id}`); onClose(); } }; - const handleCloserClick: React.MouseEventHandler = ({ currentTarget }) => { + const handleCloserClick: React.MouseEventHandler = ({ target }) => { const whitelist = ['zoomable-image']; const activeSlide = document.querySelector('.media-modal .react-swipeable-view-container > div[aria-hidden="false"]'); - const isClickOutside = currentTarget === activeSlide || !activeSlide?.contains(currentTarget); - const isWhitelisted = whitelist.some(w => currentTarget.classList.contains(w)); + const isClickOutside = target === activeSlide || !activeSlide?.contains(target as Element); + const isWhitelisted = whitelist.some(w => (target as Element).classList.contains(w)); if (isClickOutside || isWhitelisted) { onClose(); @@ -209,7 +209,7 @@ const MediaModal: React.FC = (props) => {