treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Fix UI crash in moderation interface when opening the media modal 

Port 5241f7b2fd to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/62/head
Christian Schmidt 2023-05-11 12:41:55 +02:00 committed by Claire
parent d728222121
commit 4a1f4cb6a2
9 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/components/media_gallery.jsx
View File

@ -286,7 +286,7 @@ class MediaGallery extends React.PureComponent {
}; };
handleClick = (index) => { handleClick = (index) => {
this.props.onOpenMedia(this.props.media, index); this.props.onOpenMedia(this.props.media, index, this.props.lang);
}; };
handleRef = (node) => { handleRef = (node) => {

5
app/javascript/flavours/glitch/components/status.jsx
View File

@ -388,11 +388,12 @@ class Status extends ImmutablePureComponent {
handleOpenVideo = (options) => { handleOpenVideo = (options) => {
const { status } = this.props; 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) => { 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 => { handleHotkeyOpenMedia = e => {

10
app/javascript/flavours/glitch/containers/media_container.jsx
View File

@ -29,19 +29,20 @@ export default class MediaContainer extends PureComponent {
state = { state = {
media: null, media: null,
index: null, index: null,
lang: null,
time: null, time: null,
backgroundColor: null, backgroundColor: null,
options: null, options: null,
}; };
handleOpenMedia = (media, index) => { handleOpenMedia = (media, index, lang) => {
document.body.classList.add('with-modals--active'); document.body.classList.add('with-modals--active');
document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; 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 { components } = this.props;
const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props')); const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props'));
const mediaList = fromJS(media); const mediaList = fromJS(media);
@ -49,7 +50,7 @@ export default class MediaContainer extends PureComponent {
document.body.classList.add('with-modals--active'); document.body.classList.add('with-modals--active');
document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
this.setState({ media: mediaList, options }); this.setState({ media: mediaList, lang, options });
}; };
handleCloseMedia = () => { handleCloseMedia = () => {
@ -105,6 +106,7 @@ export default class MediaContainer extends PureComponent {
<MediaModal <MediaModal
media={this.state.media} media={this.state.media}
index={this.state.index || 0} index={this.state.index || 0}
lang={this.state.lang}
currentTime={this.state.options?.startTime} currentTime={this.state.options?.startTime}
autoPlay={this.state.options?.autoPlay} autoPlay={this.state.options?.autoPlay}
volume={this.state.options?.defaultVolume} volume={this.state.options?.defaultVolume}

8
app/javascript/flavours/glitch/containers/status_container.js
View File

@ -211,12 +211,12 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
dispatch(mentionCompose(account, router)); dispatch(mentionCompose(account, router));
}, },
onOpenMedia (statusId, media, index) { onOpenMedia (statusId, media, index, lang) {
dispatch(openModal('MEDIA', { statusId, media, index })); dispatch(openModal('MEDIA', { statusId, media, index, lang }));
}, },
onOpenVideo (statusId, media, options) { onOpenVideo (statusId, media, lang, options) {
dispatch(openModal('VIDEO', { statusId, media, options })); dispatch(openModal('VIDEO', { statusId, media, lang, options }));
}, },
onBlock (status) { onBlock (status) {

7
app/javascript/flavours/glitch/features/account_gallery/index.jsx
View File

@ -142,16 +142,17 @@ class AccountGallery extends ImmutablePureComponent {
handleOpenMedia = attachment => { handleOpenMedia = attachment => {
const { dispatch } = this.props; const { dispatch } = this.props;
const statusId = attachment.getIn(['status', 'id']); const statusId = attachment.getIn(['status', 'id']);
const lang = attachment.getIn(['status', 'language']);
if (attachment.get('type') === 'video') { 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') { } 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 { } else {
const media = attachment.getIn(['status', 'media_attachments']); const media = attachment.getIn(['status', 'media_attachments']);
const index = media.findIndex(x => x.get('id') === attachment.get('id')); const index = media.findIndex(x => x.get('id') === attachment.get('id'));
dispatch(openModal('MEDIA', { media, index, statusId })); dispatch(openModal('MEDIA', { media, index, statusId, lang }));
} }
}; };

8
app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
View File

@ -125,12 +125,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(mentionCompose(account, router)); dispatch(mentionCompose(account, router));
}, },
onOpenMedia (media, index) { onOpenMedia (media, index, lang) {
dispatch(openModal('MEDIA', { media, index })); dispatch(openModal('MEDIA', { media, index, lang }));
}, },
onOpenVideo (media, options) { onOpenVideo (media, lang, options) {
dispatch(openModal('VIDEO', { media, options })); dispatch(openModal('VIDEO', { media, lang, options }));
}, },
onBlock (status) { onBlock (status) {

8
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -392,12 +392,12 @@ class Status extends ImmutablePureComponent {
this.props.dispatch(mentionCompose(account, router)); this.props.dispatch(mentionCompose(account, router));
}; };
handleOpenMedia = (media, index) => { handleOpenMedia = (media, index, lang) => {
this.props.dispatch(openModal('MEDIA', { statusId: this.props.status.get('id'), media, index })); this.props.dispatch(openModal('MEDIA', { statusId: this.props.status.get('id'), media, index, lang }));
}; };
handleOpenVideo = (media, options) => { handleOpenVideo = (media, lang, options) => {
this.props.dispatch(openModal('VIDEO', { statusId: this.props.status.get('id'), media, options })); this.props.dispatch(openModal('VIDEO', { statusId: this.props.status.get('id'), media, lang, options }));
}; };
handleHotkeyOpenMedia = e => { handleHotkeyOpenMedia = e => {

16
app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
View File

@ -3,7 +3,6 @@ import ReactSwipeableViews from 'react-swipeable-views';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Video from 'flavours/glitch/features/video'; import Video from 'flavours/glitch/features/video';
import { connect } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { IconButton } from 'flavours/glitch/components/icon_button'; import { IconButton } from 'flavours/glitch/components/icon_button';
@ -21,10 +20,6 @@ const messages = defineMessages({
next: { id: 'lightbox.next', defaultMessage: 'Next' }, next: { id: 'lightbox.next', defaultMessage: 'Next' },
}); });
const mapStateToProps = (state, { statusId }) => ({
language: state.getIn(['statuses', statusId, 'language']),
});
class MediaModal extends ImmutablePureComponent { class MediaModal extends ImmutablePureComponent {
static contextTypes = { static contextTypes = {
@ -34,6 +29,7 @@ class MediaModal extends ImmutablePureComponent {
static propTypes = { static propTypes = {
media: ImmutablePropTypes.list.isRequired, media: ImmutablePropTypes.list.isRequired,
statusId: PropTypes.string, statusId: PropTypes.string,
lang: PropTypes.string,
index: PropTypes.number.isRequired, index: PropTypes.number.isRequired,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
@ -135,7 +131,7 @@ class MediaModal extends ImmutablePureComponent {
} }
render () { render () {
const { media, language, statusId, intl, onClose } = this.props; const { media, statusId, lang, intl, onClose } = this.props;
const { navigationHidden } = this.state; const { navigationHidden } = this.state;
const index = this.getIndex(); const index = this.getIndex();
@ -155,7 +151,7 @@ class MediaModal extends ImmutablePureComponent {
width={width} width={width}
height={height} height={height}
alt={image.get('description')} alt={image.get('description')}
lang={language} lang={lang}
key={image.get('url')} key={image.get('url')}
onClick={this.toggleNavigation} onClick={this.toggleNavigation}
zoomButtonHidden={this.state.zoomButtonHidden} zoomButtonHidden={this.state.zoomButtonHidden}
@ -178,7 +174,7 @@ class MediaModal extends ImmutablePureComponent {
onCloseVideo={onClose} onCloseVideo={onClose}
detailed detailed
alt={image.get('description')} alt={image.get('description')}
lang={language} lang={lang}
key={image.get('url')} key={image.get('url')}
/> />
); );
@ -190,7 +186,7 @@ class MediaModal extends ImmutablePureComponent {
height={height} height={height}
key={image.get('url')} key={image.get('url')}
alt={image.get('description')} alt={image.get('description')}
lang={language} lang={lang}
onClick={this.toggleNavigation} 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);

2
app/javascript/flavours/glitch/features/video/index.jsx
View File

@ -476,7 +476,7 @@ class Video extends React.PureComponent {
handleOpenVideo = () => { handleOpenVideo = () => {
this.video.pause(); this.video.pause();
this.props.onOpenVideo({ this.props.onOpenVideo(this.props.lang, {
startTime: this.video.currentTime, startTime: this.video.currentTime,
autoPlay: !this.state.paused, autoPlay: !this.state.paused,
defaultVolume: this.state.volume, defaultVolume: this.state.volume,