From 6cde4718c039925df02f3d6c62383b042c23894c Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Thu, 11 May 2023 12:41:55 +0200 Subject: [PATCH] [Glitch] Fix UI crash in moderation interface when opening the media modal Port 778fd4d29b00650a2be44efab69c7d6901834b45 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/media_gallery.jsx | 2 +- .../flavours/glitch/components/status.jsx | 5 +++-- .../glitch/containers/media_container.jsx | 10 ++++++---- .../glitch/containers/status_container.js | 8 ++++---- .../glitch/features/account_gallery/index.jsx | 7 ++++--- .../containers/detailed_status_container.js | 8 ++++---- .../flavours/glitch/features/status/index.jsx | 8 ++++---- .../features/ui/components/media_modal.jsx | 16 ++++++---------- .../flavours/glitch/features/video/index.jsx | 2 +- 9 files changed, 33 insertions(+), 33 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx index 3c63124493..33ddb8a29c 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.jsx +++ b/app/javascript/flavours/glitch/components/media_gallery.jsx @@ -286,7 +286,7 @@ class MediaGallery extends React.PureComponent { }; handleClick = (index) => { - this.props.onOpenMedia(this.props.media, index); + this.props.onOpenMedia(this.props.media, index, this.props.lang); }; handleRef = (node) => { diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 78deb5f2aa..441936a431 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -388,11 +388,12 @@ class Status extends ImmutablePureComponent { handleOpenVideo = (options) => { const { status } = this.props; - this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), options); + this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), status.get('language'), options); }; handleOpenMedia = (media, index) => { - this.props.onOpenMedia(this.props.status.get('id'), media, index); + const { status } = this.props; + this.props.onOpenMedia(status.get('id'), media, index, status.get('language')); }; handleHotkeyOpenMedia = e => { diff --git a/app/javascript/flavours/glitch/containers/media_container.jsx b/app/javascript/flavours/glitch/containers/media_container.jsx index f245e2f0a4..06db0a0030 100644 --- a/app/javascript/flavours/glitch/containers/media_container.jsx +++ b/app/javascript/flavours/glitch/containers/media_container.jsx @@ -29,19 +29,20 @@ export default class MediaContainer extends PureComponent { state = { media: null, index: null, + lang: null, time: null, backgroundColor: null, options: null, }; - handleOpenMedia = (media, index) => { + handleOpenMedia = (media, index, lang) => { document.body.classList.add('with-modals--active'); document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; - this.setState({ media, index }); + this.setState({ media, index, lang }); }; - handleOpenVideo = (options) => { + handleOpenVideo = (lang, options) => { const { components } = this.props; const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props')); const mediaList = fromJS(media); @@ -49,7 +50,7 @@ export default class MediaContainer extends PureComponent { document.body.classList.add('with-modals--active'); document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; - this.setState({ media: mediaList, options }); + this.setState({ media: mediaList, lang, options }); }; handleCloseMedia = () => { @@ -105,6 +106,7 @@ export default class MediaContainer extends PureComponent { ({ dispatch(mentionCompose(account, router)); }, - onOpenMedia (statusId, media, index) { - dispatch(openModal('MEDIA', { statusId, media, index })); + onOpenMedia (statusId, media, index, lang) { + dispatch(openModal('MEDIA', { statusId, media, index, lang })); }, - onOpenVideo (statusId, media, options) { - dispatch(openModal('VIDEO', { statusId, media, options })); + onOpenVideo (statusId, media, lang, options) { + dispatch(openModal('VIDEO', { statusId, media, lang, options })); }, onBlock (status) { diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.jsx b/app/javascript/flavours/glitch/features/account_gallery/index.jsx index b4fc8be721..26c45eff6d 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/index.jsx +++ b/app/javascript/flavours/glitch/features/account_gallery/index.jsx @@ -142,16 +142,17 @@ class AccountGallery extends ImmutablePureComponent { handleOpenMedia = attachment => { const { dispatch } = this.props; const statusId = attachment.getIn(['status', 'id']); + const lang = attachment.getIn(['status', 'language']); if (attachment.get('type') === 'video') { - dispatch(openModal('VIDEO', { media: attachment, statusId, options: { autoPlay: true } })); + dispatch(openModal('VIDEO', { media: attachment, statusId, lang, options: { autoPlay: true } })); } else if (attachment.get('type') === 'audio') { - dispatch(openModal('AUDIO', { media: attachment, statusId, options: { autoPlay: true } })); + dispatch(openModal('AUDIO', { media: attachment, statusId, lang, options: { autoPlay: true } })); } else { const media = attachment.getIn(['status', 'media_attachments']); const index = media.findIndex(x => x.get('id') === attachment.get('id')); - dispatch(openModal('MEDIA', { media, index, statusId })); + dispatch(openModal('MEDIA', { media, index, statusId, lang })); } }; diff --git a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js index 25517a9f78..0b3e0a2f04 100644 --- a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js +++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js @@ -125,12 +125,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ dispatch(mentionCompose(account, router)); }, - onOpenMedia (media, index) { - dispatch(openModal('MEDIA', { media, index })); + onOpenMedia (media, index, lang) { + dispatch(openModal('MEDIA', { media, index, lang })); }, - onOpenVideo (media, options) { - dispatch(openModal('VIDEO', { media, options })); + onOpenVideo (media, lang, options) { + dispatch(openModal('VIDEO', { media, lang, options })); }, onBlock (status) { diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx index 09c1aa9926..39a7780456 100644 --- a/app/javascript/flavours/glitch/features/status/index.jsx +++ b/app/javascript/flavours/glitch/features/status/index.jsx @@ -392,12 +392,12 @@ class Status extends ImmutablePureComponent { this.props.dispatch(mentionCompose(account, router)); }; - handleOpenMedia = (media, index) => { - this.props.dispatch(openModal('MEDIA', { statusId: this.props.status.get('id'), media, index })); + handleOpenMedia = (media, index, lang) => { + this.props.dispatch(openModal('MEDIA', { statusId: this.props.status.get('id'), media, index, lang })); }; - handleOpenVideo = (media, options) => { - this.props.dispatch(openModal('VIDEO', { statusId: this.props.status.get('id'), media, options })); + handleOpenVideo = (media, lang, options) => { + this.props.dispatch(openModal('VIDEO', { statusId: this.props.status.get('id'), media, lang, options })); }; handleHotkeyOpenMedia = e => { diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx index 1e51db0099..36d42d270a 100644 --- a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx @@ -3,7 +3,6 @@ import ReactSwipeableViews from 'react-swipeable-views'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Video from 'flavours/glitch/features/video'; -import { connect } from 'react-redux'; import classNames from 'classnames'; import { defineMessages, injectIntl } from 'react-intl'; import { IconButton } from 'flavours/glitch/components/icon_button'; @@ -21,10 +20,6 @@ const messages = defineMessages({ next: { id: 'lightbox.next', defaultMessage: 'Next' }, }); -const mapStateToProps = (state, { statusId }) => ({ - language: state.getIn(['statuses', statusId, 'language']), -}); - class MediaModal extends ImmutablePureComponent { static contextTypes = { @@ -34,6 +29,7 @@ class MediaModal extends ImmutablePureComponent { static propTypes = { media: ImmutablePropTypes.list.isRequired, statusId: PropTypes.string, + lang: PropTypes.string, index: PropTypes.number.isRequired, onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, @@ -135,7 +131,7 @@ class MediaModal extends ImmutablePureComponent { } render () { - const { media, language, statusId, intl, onClose } = this.props; + const { media, statusId, lang, intl, onClose } = this.props; const { navigationHidden } = this.state; const index = this.getIndex(); @@ -155,7 +151,7 @@ class MediaModal extends ImmutablePureComponent { width={width} height={height} alt={image.get('description')} - lang={language} + lang={lang} key={image.get('url')} onClick={this.toggleNavigation} zoomButtonHidden={this.state.zoomButtonHidden} @@ -178,7 +174,7 @@ class MediaModal extends ImmutablePureComponent { onCloseVideo={onClose} detailed alt={image.get('description')} - lang={language} + lang={lang} key={image.get('url')} /> ); @@ -190,7 +186,7 @@ class MediaModal extends ImmutablePureComponent { height={height} key={image.get('url')} alt={image.get('description')} - lang={language} + lang={lang} onClick={this.toggleNavigation} /> ); @@ -258,4 +254,4 @@ class MediaModal extends ImmutablePureComponent { } -export default connect(mapStateToProps, null, null, { forwardRef: true })(injectIntl(MediaModal)); +export default injectIntl(MediaModal); diff --git a/app/javascript/flavours/glitch/features/video/index.jsx b/app/javascript/flavours/glitch/features/video/index.jsx index e70702ee74..8375ffe946 100644 --- a/app/javascript/flavours/glitch/features/video/index.jsx +++ b/app/javascript/flavours/glitch/features/video/index.jsx @@ -476,7 +476,7 @@ class Video extends React.PureComponent { handleOpenVideo = () => { this.video.pause(); - this.props.onOpenVideo({ + this.props.onOpenVideo(this.props.lang, { startTime: this.video.currentTime, autoPlay: !this.state.paused, defaultVolume: this.state.volume,