diff options
Diffstat (limited to 'app/javascript/mastodon/features/video/index.js')
-rw-r--r-- | app/javascript/mastodon/features/video/index.js | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js index 7502dda8b..519a2aac9 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -209,6 +209,10 @@ export default class Video extends React.PureComponent { } } + handleProgress = () => { + this.setState({ buffer: this.video.buffered.end(0) / this.video.duration * 100 }); + } + handleOpenVideo = () => { this.video.pause(); this.props.onOpenVideo(this.video.currentTime); @@ -221,7 +225,7 @@ export default class Video extends React.PureComponent { render () { const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt } = this.props; - const { progress, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; + const { progress, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; return ( <div className={classNames('video-player', { inactive: !revealed, inline: width && height && !fullscreen, fullscreen })} style={{ width, height }} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> @@ -229,7 +233,7 @@ export default class Video extends React.PureComponent { ref={this.setVideoRef} src={src} poster={preview} - preload={!!startTime} + preload={startTime ? true : null} loop role='button' tabIndex='0' @@ -241,6 +245,7 @@ export default class Video extends React.PureComponent { onPause={this.handlePause} onTimeUpdate={this.handleTimeUpdate} onLoadedData={this.handleLoadedData} + onProgress={this.handleProgress} /> <button className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}> @@ -250,6 +255,7 @@ export default class Video extends React.PureComponent { <div className={classNames('video-player__controls', { active: paused || hovered })}> <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}> + <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} /> <div className='video-player__seek__progress' style={{ width: `${progress}%` }} /> <span |