You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

80 lines
2.2 KiB

  1. import React from 'react';
  2. import ImmutablePropTypes from 'react-immutable-proptypes';
  3. import PropTypes from 'prop-types';
  4. import Video from 'mastodon/features/video';
  5. import ImmutablePureComponent from 'react-immutable-pure-component';
  6. import { FormattedMessage } from 'react-intl';
  7. import classNames from 'classnames';
  8. import Icon from 'mastodon/components/icon';
  9. export const previewState = 'previewVideoModal';
  10. export default class VideoModal extends ImmutablePureComponent {
  11. static propTypes = {
  12. media: ImmutablePropTypes.map.isRequired,
  13. status: ImmutablePropTypes.map,
  14. time: PropTypes.number,
  15. onClose: PropTypes.func.isRequired,
  16. };
  17. static contextTypes = {
  18. router: PropTypes.object,
  19. };
  20. componentDidMount () {
  21. if (this.context.router) {
  22. const history = this.context.router.history;
  23. history.push(history.location.pathname, previewState);
  24. this.unlistenHistory = history.listen(() => {
  25. this.props.onClose();
  26. });
  27. }
  28. }
  29. componentWillUnmount () {
  30. if (this.context.router) {
  31. this.unlistenHistory();
  32. if (this.context.router.history.location.state === previewState) {
  33. this.context.router.history.goBack();
  34. }
  35. }
  36. }
  37. handleStatusClick = e => {
  38. if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
  39. e.preventDefault();
  40. this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
  41. }
  42. }
  43. render () {
  44. const { media, status, time, onClose } = this.props;
  45. return (
  46. <div className='modal-root__modal video-modal'>
  47. <div className='video-modal__container'>
  48. <Video
  49. preview={media.get('preview_url')}
  50. blurhash={media.get('blurhash')}
  51. src={media.get('url')}
  52. startTime={time}
  53. onCloseVideo={onClose}
  54. detailed
  55. alt={media.get('description')}
  56. />
  57. </div>
  58. {status && (
  59. <div className={classNames('media-modal__meta')}>
  60. <a href={status.get('url')} onClick={this.handleStatusClick}><Icon id='comments' /> <FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
  61. </div>
  62. )}
  63. </div>
  64. );
  65. }
  66. }