berserker
/
microblog
2
0
Fork 1
Code Issues 12 Pull Requests Projects Releases Wiki Activity

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

Browse Source 
Port 5241f7b2fd to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
Christian Schmidt 1 year ago committed by Claire
parent d728222121
commit 4a1f4cb6a2
9 changed files with 33 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/javascript/flavours/glitch/components/media_gallery.jsx
  2. 5
      app/javascript/flavours/glitch/components/status.jsx
  3. 10
      app/javascript/flavours/glitch/containers/media_container.jsx
  4. 8
      app/javascript/flavours/glitch/containers/status_container.js
  5. 7
      app/javascript/flavours/glitch/features/account_gallery/index.jsx
  6. 8
      app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
  7. 8
      app/javascript/flavours/glitch/features/status/index.jsx
  8. 16
      app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
  9. 2
      app/javascript/flavours/glitch/features/video/index.jsx

2
app/javascript/flavours/glitch/components/media_gallery.jsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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,

Write Preview
Loading…
Cancel
Save