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
commit 400adfe0c6
5 changed files with 11 additions and 11 deletions

View File

@ -59,7 +59,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
};
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 => {

View File

@ -117,9 +117,9 @@ const Status: React.FC<IStatus> = (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 }));
}
}
};

View File

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

View File

@ -228,7 +228,7 @@ const Thread: React.FC<IThread> = (props) => {
};
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) => {

View File

@ -23,7 +23,7 @@ const messages = defineMessages({
interface IMediaModal {
media: ImmutableList<Attachment>,
status: Status,
status?: Status,
account: Account,
index: number,
time?: number,
@ -96,17 +96,17 @@ const MediaModal: React.FC<IMediaModal> = (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<IMediaModal> = (props) => {
<Audio
src={attachment.url}
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}
foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}