moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'audio-fix' into 'develop' 

MediaModal: fix audio player

Closes #1134 and #1133

See merge request soapbox-pub/soapbox!1841
This commit is contained in:
Alex Gleason 2022-10-19 00:34:47 +00:00
parent 44a2644fa9 ed558ba5ca
commit 400adfe0c6
5 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/status-media.tsx
View File

@ -59,7 +59,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
}; };
const openMedia = (media: ImmutableList<Attachment>, index: number) => { const openMedia = (media: ImmutableList<Attachment>, index: number) => {
dispatch(openModal('MEDIA', { media, index })); dispatch(openModal('MEDIA', { media, status, index }));
}; };
const openVideo = (media: Attachment, time: number): void => { const openVideo = (media: Attachment, time: number): void => {

4
app/soapbox/components/status.tsx
View File

@ -117,9 +117,9 @@ const Status: React.FC<IStatus> = (props) => {
if (firstAttachment) { if (firstAttachment) {
if (firstAttachment.type === 'video') { if (firstAttachment.type === 'video') {
dispatch(openModal('VIDEO', { media: firstAttachment, time: 0 })); dispatch(openModal('VIDEO', { status, media: firstAttachment, time: 0 }));
} else { } else {
dispatch(openModal('MEDIA', { media: status.media_attachments, index: 0 })); dispatch(openModal('MEDIA', { status, media: status.media_attachments, index: 0 }));
} }
} }
}; };

2
app/soapbox/features/admin/components/report_status.tsx
View File

@ -27,7 +27,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const handleOpenMedia = (media: Attachment, index: number) => { const handleOpenMedia = (media: Attachment, index: number) => {
dispatch(openModal('MEDIA', { media, index })); dispatch(openModal('MEDIA', { media, status, index }));
}; };
const handleDeleteStatus = () => { const handleDeleteStatus = () => {

2
app/soapbox/features/status/index.tsx
View File

@ -228,7 +228,7 @@ const Thread: React.FC<IThread> = (props) => {
}; };
const handleOpenMedia = (media: ImmutableList<AttachmentEntity>, index: number) => { const handleOpenMedia = (media: ImmutableList<AttachmentEntity>, index: number) => {
dispatch(openModal('MEDIA', { media, index })); dispatch(openModal('MEDIA', { media, status, index }));
}; };
const handleOpenVideo = (media: ImmutableList<AttachmentEntity>, time: number) => { const handleOpenVideo = (media: ImmutableList<AttachmentEntity>, time: number) => {

12
app/soapbox/features/ui/components/media-modal.tsx
View File

@ -23,7 +23,7 @@ const messages = defineMessages({
interface IMediaModal { interface IMediaModal {
media: ImmutableList<Attachment>, media: ImmutableList<Attachment>,
status: Status, status?: Status,
account: Account, account: Account,
index: number, index: number,
time?: number, time?: number,
@ -96,17 +96,17 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
const handleStatusClick: React.MouseEventHandler = e => { const handleStatusClick: React.MouseEventHandler = e => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault(); e.preventDefault();
history.push(`/@${account.acct}/posts/${status.id}`); history.push(`/@${account.acct}/posts/${status?.id}`);
onClose(); onClose();
} }
}; };
const handleCloserClick: React.MouseEventHandler = ({ currentTarget }) => { const handleCloserClick: React.MouseEventHandler = ({ target }) => {
const whitelist = ['zoomable-image']; const whitelist = ['zoomable-image'];
const activeSlide = document.querySelector('.media-modal .react-swipeable-view-container > div[aria-hidden="false"]'); const activeSlide = document.querySelector('.media-modal .react-swipeable-view-container > div[aria-hidden="false"]');
const isClickOutside = currentTarget === activeSlide || !activeSlide?.contains(currentTarget); const isClickOutside = target === activeSlide || !activeSlide?.contains(target as Element);
const isWhitelisted = whitelist.some(w => currentTarget.classList.contains(w)); const isWhitelisted = whitelist.some(w => (target as Element).classList.contains(w));
if (isClickOutside || isWhitelisted) { if (isClickOutside || isWhitelisted) {
onClose(); onClose();
@ -209,7 +209,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
<Audio <Audio
src={attachment.url} src={attachment.url}
alt={attachment.description} alt={attachment.description}
poster={attachment.preview_url !== attachment.url ? attachment.preview_url : (status.getIn(['account', 'avatar_static'])) as string | undefined} poster={attachment.preview_url !== attachment.url ? attachment.preview_url : (status?.getIn(['account', 'avatar_static'])) as string | undefined}
backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined} backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined}
foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined} foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined} accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}