cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Show buffering in video player (#5261)

This commit is contained in:
Eugen Rochko 2017-10-08 02:33:08 +02:00 committed by GitHub
parent a3d4f1bd93
commit 292f3cd7e0
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/mastodon/features/video/index.js
View File

@ -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 = () => { handleOpenVideo = () => {
this.video.pause(); this.video.pause();
this.props.onOpenVideo(this.video.currentTime); this.props.onOpenVideo(this.video.currentTime);
@ -221,7 +225,7 @@ export default class Video extends React.PureComponent {
render () { render () {
const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt } = this.props; 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 ( 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}> <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} ref={this.setVideoRef}
src={src} src={src}
poster={preview} poster={preview}
preload={!!startTime} preload={startTime ? true : null}
loop loop
role='button' role='button'
tabIndex='0' tabIndex='0'
@ -241,6 +245,7 @@ export default class Video extends React.PureComponent {
onPause={this.handlePause} onPause={this.handlePause}
onTimeUpdate={this.handleTimeUpdate} onTimeUpdate={this.handleTimeUpdate}
onLoadedData={this.handleLoadedData} onLoadedData={this.handleLoadedData}
onProgress={this.handleProgress}
/> />
<button className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}> <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={classNames('video-player__controls', { active: paused || hovered })}>
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}> <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}%` }} /> <div className='video-player__seek__progress' style={{ width: `${progress}%` }} />
<span <span

7
app/javascript/styles/components.scss
View File

@ -4028,7 +4028,8 @@ button.icon-button.active i.fa-retweet {
top: 10px; top: 10px;
} }
&__progress { &__progress,
&__buffer {
display: block; display: block;
position: absolute; position: absolute;
height: 4px; height: 4px;
@ -4036,6 +4037,10 @@ button.icon-button.active i.fa-retweet {
background: $ui-highlight-color; background: $ui-highlight-color;
} }
&__buffer {
background: rgba($white, 0.2);
}
&__handle { &__handle {
position: absolute; position: absolute;
z-index: 3; z-index: 3;