[Glitch] Fix expand video on public page

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main
Takeshi Umeda 4 years ago committed by Claire
parent d8e756eda8
commit 34cc6f45ac

@ -2,7 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider, addLocaleData } from 'react-intl';
import { List as ImmutableList, fromJS } from 'immutable'; import { fromJS } from 'immutable';
import { getLocale } from 'mastodon/locales'; import { getLocale } from 'mastodon/locales';
import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar'; import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar';
import MediaGallery from 'flavours/glitch/components/media_gallery'; import MediaGallery from 'flavours/glitch/components/media_gallery';
@ -31,6 +31,7 @@ export default class MediaContainer extends PureComponent {
index: null, index: null,
time: null, time: null,
backgroundColor: null, backgroundColor: null,
options: null,
}; };
handleOpenMedia = (media, index) => { handleOpenMedia = (media, index) => {
@ -40,13 +41,15 @@ export default class MediaContainer extends PureComponent {
this.setState({ media, index }); this.setState({ media, index });
} }
handleOpenVideo = (video, time) => { handleOpenVideo = (options) => {
const media = ImmutableList([video]); const { components } = this.props;
const { media } = JSON.parse(components[options.componetIndex].getAttribute('data-props'));
const mediaList = fromJS(media);
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, time }); this.setState({ media: mediaList, options });
} }
handleCloseMedia = () => { handleCloseMedia = () => {
@ -58,6 +61,7 @@ export default class MediaContainer extends PureComponent {
index: null, index: null,
time: null, time: null,
backgroundColor: null, backgroundColor: null,
options: null,
}); });
} }
@ -83,6 +87,7 @@ export default class MediaContainer extends PureComponent {
...(hashtag ? { hashtag: fromJS(hashtag) } : {}), ...(hashtag ? { hashtag: fromJS(hashtag) } : {}),
...(componentName === 'Video' ? { ...(componentName === 'Video' ? {
componetIndex: i,
onOpenVideo: this.handleOpenVideo, onOpenVideo: this.handleOpenVideo,
} : { } : {
onOpenMedia: this.handleOpenMedia, onOpenMedia: this.handleOpenMedia,
@ -100,7 +105,9 @@ 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}
time={this.state.time} currentTime={this.state.options?.startTime}
autoPlay={this.state.options?.autoPlay}
volume={this.state.options?.defaultVolume}
onClose={this.handleCloseMedia} onClose={this.handleCloseMedia}
onChangeBackgroundColor={this.setBackgroundColor} onChangeBackgroundColor={this.setBackgroundColor}
/> />

@ -33,6 +33,9 @@ class MediaModal extends ImmutablePureComponent {
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
onChangeBackgroundColor: PropTypes.func.isRequired, onChangeBackgroundColor: PropTypes.func.isRequired,
currentTime: PropTypes.number,
autoPlay: PropTypes.bool,
volume: PropTypes.number,
}; };
state = { state = {
@ -162,7 +165,7 @@ class MediaModal extends ImmutablePureComponent {
/> />
); );
} else if (image.get('type') === 'video') { } else if (image.get('type') === 'video') {
const { time } = this.props; const { currentTime, autoPlay, volume } = this.props;
return ( return (
<Video <Video
@ -171,7 +174,10 @@ class MediaModal extends ImmutablePureComponent {
src={image.get('url')} src={image.get('url')}
width={image.get('width')} width={image.get('width')}
height={image.get('height')} height={image.get('height')}
currentTime={time || 0} frameRate={image.getIn(['meta', 'original', 'frame_rate'])}
currentTime={currentTime || 0}
autoPlay={autoPlay || false}
volume={volume || 1}
onCloseVideo={onClose} onCloseVideo={onClose}
detailed detailed
alt={image.get('description')} alt={image.get('description')}

@ -123,6 +123,7 @@ class Video extends React.PureComponent {
autoPlay: PropTypes.bool, autoPlay: PropTypes.bool,
volume: PropTypes.number, volume: PropTypes.number,
muted: PropTypes.bool, muted: PropTypes.bool,
componetIndex: PropTypes.number,
}; };
static defaultProps = { static defaultProps = {
@ -515,6 +516,7 @@ class Video extends React.PureComponent {
startTime: this.video.currentTime, startTime: this.video.currentTime,
autoPlay: !this.state.paused, autoPlay: !this.state.paused,
defaultVolume: this.state.volume, defaultVolume: this.state.volume,
componetIndex: this.props.componetIndex,
}); });
} }

Loading…
Cancel
Save