- import React from 'react';
- import ImmutablePropTypes from 'react-immutable-proptypes';
- import PropTypes from 'prop-types';
- import Video from 'mastodon/features/video';
- import ImmutablePureComponent from 'react-immutable-pure-component';
-
- export const previewState = 'previewVideoModal';
-
- export default class VideoModal extends ImmutablePureComponent {
-
- static propTypes = {
- media: ImmutablePropTypes.map.isRequired,
- statusId: PropTypes.string,
- options: PropTypes.shape({
- startTime: PropTypes.number,
- autoPlay: PropTypes.bool,
- defaultVolume: PropTypes.number,
- }),
- onClose: PropTypes.func.isRequired,
- };
-
- static contextTypes = {
- router: PropTypes.object,
- };
-
- componentDidMount () {
- if (this.context.router) {
- const history = this.context.router.history;
-
- history.push(history.location.pathname, previewState);
-
- this.unlistenHistory = history.listen(() => {
- this.props.onClose();
- });
- }
- }
-
- componentWillUnmount () {
- if (this.context.router) {
- this.unlistenHistory();
-
- if (this.context.router.history.location.state === previewState) {
- this.context.router.history.goBack();
- }
- }
- }
-
- render () {
- const { media, onClose } = this.props;
- const options = this.props.options || {};
-
- return (
- <div className='modal-root__modal video-modal'>
- <div className='video-modal__container'>
- <Video
- preview={media.get('preview_url')}
- frameRate={media.getIn(['meta', 'original', 'frame_rate'])}
- blurhash={media.get('blurhash')}
- src={media.get('url')}
- currentTime={options.startTime}
- autoPlay={options.autoPlay}
- volume={options.defaultVolume}
- onCloseVideo={onClose}
- detailed
- alt={media.get('description')}
- />
- </div>
- </div>
- );
- }
-
- }
|