闭社主体 forked from https://github.com/tootsuite/mastodon
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.

197 lines
5.9 KiB

  1. import React from 'react';
  2. import ImmutablePropTypes from 'react-immutable-proptypes';
  3. import PropTypes from 'prop-types';
  4. import IconButton from './icon_button';
  5. import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
  6. import { isIOS } from '../is_mobile';
  7. const messages = defineMessages({
  8. toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
  9. toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' },
  10. expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' },
  11. });
  12. class VideoPlayer extends React.PureComponent {
  13. static propTypes = {
  14. media: ImmutablePropTypes.map.isRequired,
  15. width: PropTypes.number,
  16. height: PropTypes.number,
  17. sensitive: PropTypes.bool,
  18. intl: PropTypes.object.isRequired,
  19. autoplay: PropTypes.bool,
  20. onOpenVideo: PropTypes.func.isRequired,
  21. };
  22. static defaultProps = {
  23. width: 239,
  24. height: 110,
  25. };
  26. state = {
  27. visible: !this.props.sensitive,
  28. preview: true,
  29. muted: true,
  30. hasAudio: true,
  31. videoError: false,
  32. };
  33. handleClick = () => {
  34. this.setState({ muted: !this.state.muted });
  35. }
  36. handleVideoClick = (e) => {
  37. e.stopPropagation();
  38. const node = this.video;
  39. if (node.paused) {
  40. node.play();
  41. } else {
  42. node.pause();
  43. }
  44. }
  45. handleOpen = () => {
  46. this.setState({ preview: !this.state.preview });
  47. }
  48. handleVisibility = () => {
  49. this.setState({
  50. visible: !this.state.visible,
  51. preview: true,
  52. });
  53. }
  54. handleExpand = () => {
  55. this.video.pause();
  56. this.props.onOpenVideo(this.props.media, this.video.currentTime);
  57. }
  58. setRef = (c) => {
  59. this.video = c;
  60. }
  61. handleLoadedData = () => {
  62. if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
  63. this.setState({ hasAudio: false });
  64. }
  65. }
  66. handleVideoError = () => {
  67. this.setState({ videoError: true });
  68. }
  69. componentDidMount () {
  70. if (!this.video) {
  71. return;
  72. }
  73. this.video.addEventListener('loadeddata', this.handleLoadedData);
  74. this.video.addEventListener('error', this.handleVideoError);
  75. }
  76. componentDidUpdate () {
  77. if (!this.video) {
  78. return;
  79. }
  80. this.video.addEventListener('loadeddata', this.handleLoadedData);
  81. this.video.addEventListener('error', this.handleVideoError);
  82. }
  83. componentWillUnmount () {
  84. if (!this.video) {
  85. return;
  86. }
  87. this.video.removeEventListener('loadeddata', this.handleLoadedData);
  88. this.video.removeEventListener('error', this.handleVideoError);
  89. }
  90. render () {
  91. const { media, intl, width, height, sensitive, autoplay } = this.props;
  92. let spoilerButton = (
  93. <div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
  94. <IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
  95. </div>
  96. );
  97. let expandButton = (
  98. <div className='status__video-player-expand'>
  99. <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
  100. </div>
  101. );
  102. let muteButton = '';
  103. if (this.state.hasAudio) {
  104. muteButton = (
  105. <div className='status__video-player-mute'>
  106. <IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
  107. </div>
  108. );
  109. }
  110. if (!this.state.visible) {
  111. if (sensitive) {
  112. return (
  113. <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
  114. {spoilerButton}
  115. <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
  116. <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
  117. </div>
  118. );
  119. } else {
  120. return (
  121. <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
  122. {spoilerButton}
  123. <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
  124. <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
  125. </div>
  126. );
  127. }
  128. }
  129. if (this.state.preview && !autoplay) {
  130. return (
  131. <div role='button' tabIndex='0' className='media-spoiler-video' style={{ width: `${width}px`, height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
  132. {spoilerButton}
  133. <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
  134. </div>
  135. );
  136. }
  137. if (this.state.videoError) {
  138. return (
  139. <div style={{ width: `${width}px`, height: `${height}px` }} className='video-error-cover' >
  140. <span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
  141. </div>
  142. );
  143. }
  144. return (
  145. <div className='status__video-player' style={{ width: `${width}px`, height: `${height}px` }}>
  146. {spoilerButton}
  147. {muteButton}
  148. {expandButton}
  149. <video
  150. className='status__video-player-video'
  151. role='button'
  152. tabIndex='0'
  153. ref={this.setRef}
  154. src={media.get('url')}
  155. autoPlay={!isIOS()}
  156. loop={true}
  157. muted={this.state.muted}
  158. onClick={this.handleVideoClick}
  159. />
  160. </div>
  161. );
  162. }
  163. }
  164. export default injectIntl(VideoPlayer);