c955f98d36
Fixes #13536 - Expanding a paused video doesn't autoplay anymore - Default volume level for the expanded video inherited from the original video Position/playing state/volume are carried over from the original video player to the modal, but they're not reported back to the modal as it would require deeper changes.
88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
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';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import classNames from 'classnames';
|
|
import Icon from 'mastodon/components/icon';
|
|
|
|
export const previewState = 'previewVideoModal';
|
|
|
|
export default class VideoModal extends ImmutablePureComponent {
|
|
|
|
static propTypes = {
|
|
media: ImmutablePropTypes.map.isRequired,
|
|
status: ImmutablePropTypes.map,
|
|
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();
|
|
}
|
|
}
|
|
}
|
|
|
|
handleStatusClick = e => {
|
|
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
|
e.preventDefault();
|
|
this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
|
|
}
|
|
}
|
|
|
|
render () {
|
|
const { media, status, 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')}
|
|
blurhash={media.get('blurhash')}
|
|
src={media.get('url')}
|
|
startTime={options.startTime}
|
|
autoPlay={options.autoPlay}
|
|
defaultVolume={options.defaultVolume}
|
|
onCloseVideo={onClose}
|
|
detailed
|
|
alt={media.get('description')}
|
|
/>
|
|
</div>
|
|
|
|
{status && (
|
|
<div className={classNames('media-modal__meta')}>
|
|
<a href={status.get('url')} onClick={this.handleStatusClick}><Icon id='comments' /> <FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|