diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/video')
| -rw-r--r-- | app/javascript/flavours/glitch/features/video/index.jsx (renamed from app/javascript/flavours/glitch/features/video/index.js) | 67 |
1 files changed, 35 insertions, 32 deletions
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.jsx index 0daab747b..28a8bb1fd 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.jsx @@ -93,7 +93,6 @@ export const fileNameFromURL = str => { return pathname.slice(index + 1); }; -export default @injectIntl class Video extends React.PureComponent { static propTypes = { @@ -101,6 +100,7 @@ class Video extends React.PureComponent { frameRate: PropTypes.string, src: PropTypes.string.isRequired, alt: PropTypes.string, + lang: PropTypes.string, width: PropTypes.number, height: PropTypes.number, sensitive: PropTypes.bool, @@ -156,7 +156,7 @@ class Video extends React.PureComponent { if (this.player) { this._setDimensions(); } - } + }; _setDimensions () { const width = this.player.offsetWidth; @@ -178,26 +178,26 @@ class Video extends React.PureComponent { if (this.video) { this.setState({ volume: this.video.volume, muted: this.video.muted }); } - } + }; setSeekRef = c => { this.seek = c; - } + }; setVolumeRef = c => { this.volume = c; - } + }; handleClickRoot = e => e.stopPropagation(); handlePlay = () => { this.setState({ paused: false }); this._updateTime(); - } + }; handlePause = () => { this.setState({ paused: true }); - } + }; _updateTime () { requestAnimationFrame(() => { @@ -216,7 +216,7 @@ class Video extends React.PureComponent { currentTime: this.video.currentTime, duration:this.video.duration, }); - } + }; handleVolumeMouseDown = e => { document.addEventListener('mousemove', this.handleMouseVolSlide, true); @@ -228,14 +228,14 @@ class Video extends React.PureComponent { e.preventDefault(); e.stopPropagation(); - } + }; handleVolumeMouseUp = () => { document.removeEventListener('mousemove', this.handleMouseVolSlide, true); document.removeEventListener('mouseup', this.handleVolumeMouseUp, true); document.removeEventListener('touchmove', this.handleMouseVolSlide, true); document.removeEventListener('touchend', this.handleVolumeMouseUp, true); - } + }; handleMouseVolSlide = throttle(e => { const { x } = getPointerPosition(this.volume, e); @@ -259,7 +259,7 @@ class Video extends React.PureComponent { e.preventDefault(); e.stopPropagation(); - } + }; handleMouseUp = () => { document.removeEventListener('mousemove', this.handleMouseMove, true); @@ -269,7 +269,7 @@ class Video extends React.PureComponent { this.setState({ dragging: false }); this.video.play(); - } + }; handleMouseMove = throttle(e => { const { x } = getPointerPosition(this.seek, e); @@ -301,7 +301,7 @@ class Video extends React.PureComponent { e.stopPropagation(); this.togglePlay(); } - } + }; handleKeyDown = e => { const frameTime = 1 / this.getFrameRate(); @@ -355,7 +355,7 @@ class Video extends React.PureComponent { exitFullscreen(); } } - } + }; togglePlay = () => { if (this.state.paused) { @@ -363,7 +363,7 @@ class Video extends React.PureComponent { } else { this.setState({ paused: true }, () => this.video.pause()); } - } + }; toggleFullscreen = () => { if (isFullscreen()) { @@ -371,7 +371,7 @@ class Video extends React.PureComponent { } else { requestFullscreen(this.player); } - } + }; componentDidMount () { document.addEventListener('fullscreenchange', this.handleFullscreenChange, true); @@ -444,19 +444,19 @@ class Video extends React.PureComponent { this.setState({ paused: true }); } - }, 150, { trailing: true }) + }, 150, { trailing: true }); handleFullscreenChange = () => { this.setState({ fullscreen: isFullscreen() }); - } + }; handleMouseEnter = () => { this.setState({ hovered: true }); - } + }; handleMouseLeave = () => { this.setState({ hovered: false }); - } + }; toggleMute = () => { const muted = !this.video.muted; @@ -464,7 +464,7 @@ class Video extends React.PureComponent { this.setState({ muted }, () => { this.video.muted = muted; }); - } + }; toggleReveal = () => { if (this.state.revealed) { @@ -476,7 +476,7 @@ class Video extends React.PureComponent { } else { this.setState({ revealed: !this.state.revealed }); } - } + }; handleLoadedData = () => { const { currentTime, volume, muted, autoPlay } = this.props; @@ -496,7 +496,7 @@ class Video extends React.PureComponent { if (autoPlay) { this.video.play(); } - } + }; handleProgress = () => { const lastTimeRange = this.video.buffered.length - 1; @@ -504,11 +504,11 @@ class Video extends React.PureComponent { if (lastTimeRange > -1) { this.setState({ buffer: Math.ceil(this.video.buffered.end(lastTimeRange) / this.video.duration * 100) }); } - } + }; handleVolumeChange = () => { this.setState({ volume: this.video.volume, muted: this.video.muted }); - } + }; handleOpenVideo = () => { this.video.pause(); @@ -519,12 +519,12 @@ class Video extends React.PureComponent { defaultVolume: this.state.volume, componentIndex: this.props.componentIndex, }); - } + }; handleCloseVideo = () => { this.video.pause(); this.props.onCloseVideo(); - } + }; getFrameRate () { if (this.props.frameRate && isNaN(this.props.frameRate)) { @@ -538,7 +538,7 @@ class Video extends React.PureComponent { } render () { - const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus } = this.props; + const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, lang, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus } = this.props; const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; const progress = Math.min((currentTime / duration) * 100, 100); const playerStyle = {}; @@ -553,7 +553,7 @@ class Video extends React.PureComponent { playerStyle.height = height; } else if (inline) { - return (<div className={computedClass} ref={this.setPlayerRef} tabindex={0}></div>); + return (<div className={computedClass} ref={this.setPlayerRef} tabindex={0} />); } let preload; @@ -600,9 +600,10 @@ class Video extends React.PureComponent { preload={preload} loop role='button' - tabIndex='0' + tabIndex={0} aria-label={alt} title={alt} + lang={lang} width={width} height={height} volume={volume} @@ -628,7 +629,7 @@ class Video extends React.PureComponent { <span className={classNames('video-player__seek__handle', { active: dragging })} - tabIndex='0' + tabIndex={0} style={{ left: `${progress}%` }} onKeyDown={this.handleVideoKeyDown} /> @@ -644,7 +645,7 @@ class Video extends React.PureComponent { <span className={classNames('video-player__volume__handle')} - tabIndex='0' + tabIndex={0} style={{ left: `${volume * 100}%` }} /> </div> @@ -671,3 +672,5 @@ class Video extends React.PureComponent { } } + +export default injectIntl(Video); |