diff options
Diffstat (limited to 'app/javascript')
3 files changed, 22 insertions, 7 deletions
diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js index ab5f68770..8657b8064 100644 --- a/app/javascript/flavours/glitch/containers/media_container.js +++ b/app/javascript/flavours/glitch/containers/media_container.js @@ -2,7 +2,7 @@ import React, { PureComponent, Fragment } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { IntlProvider, addLocaleData } from 'react-intl'; -import { List as ImmutableList, fromJS } from 'immutable'; +import { fromJS } from 'immutable'; import { getLocale } from 'mastodon/locales'; import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar'; import MediaGallery from 'flavours/glitch/components/media_gallery'; @@ -31,6 +31,7 @@ export default class MediaContainer extends PureComponent { index: null, time: null, backgroundColor: null, + options: null, }; handleOpenMedia = (media, index) => { @@ -40,13 +41,15 @@ export default class MediaContainer extends PureComponent { this.setState({ media, index }); } - handleOpenVideo = (video, time) => { - const media = ImmutableList([video]); + handleOpenVideo = (options) => { + 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.documentElement.style.marginRight = `${getScrollbarWidth()}px`; - this.setState({ media, time }); + this.setState({ media: mediaList, options }); } handleCloseMedia = () => { @@ -58,6 +61,7 @@ export default class MediaContainer extends PureComponent { index: null, time: null, backgroundColor: null, + options: null, }); } @@ -83,6 +87,7 @@ export default class MediaContainer extends PureComponent { ...(hashtag ? { hashtag: fromJS(hashtag) } : {}), ...(componentName === 'Video' ? { + componetIndex: i, onOpenVideo: this.handleOpenVideo, } : { onOpenMedia: this.handleOpenMedia, @@ -100,7 +105,9 @@ export default class MediaContainer extends PureComponent { <MediaModal media={this.state.media} 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} onChangeBackgroundColor={this.setBackgroundColor} /> diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.js b/app/javascript/flavours/glitch/features/ui/components/media_modal.js index e3f3ec6de..a8cbb837e 100644 --- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js @@ -33,6 +33,9 @@ class MediaModal extends ImmutablePureComponent { onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, onChangeBackgroundColor: PropTypes.func.isRequired, + currentTime: PropTypes.number, + autoPlay: PropTypes.bool, + volume: PropTypes.number, }; state = { @@ -162,7 +165,7 @@ class MediaModal extends ImmutablePureComponent { /> ); } else if (image.get('type') === 'video') { - const { time } = this.props; + const { currentTime, autoPlay, volume } = this.props; return ( <Video @@ -171,7 +174,10 @@ class MediaModal extends ImmutablePureComponent { src={image.get('url')} width={image.get('width')} 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} detailed alt={image.get('description')} diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 6ce4ca85b..fcbf07ce2 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -123,6 +123,7 @@ class Video extends React.PureComponent { autoPlay: PropTypes.bool, volume: PropTypes.number, muted: PropTypes.bool, + componetIndex: PropTypes.number, }; static defaultProps = { @@ -515,6 +516,7 @@ class Video extends React.PureComponent { startTime: this.video.currentTime, autoPlay: !this.state.paused, defaultVolume: this.state.volume, + componetIndex: this.props.componetIndex, }); } |