Show buffering in video player (#5261)
This commit is contained in:
parent
a3d4f1bd93
commit
292f3cd7e0
|
@ -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
|
||||
|
|
|
@ -4028,7 +4028,8 @@ button.icon-button.active i.fa-retweet {
|
|||
top: 10px;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
&__progress,
|
||||
&__buffer {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
|
@ -4036,6 +4037,10 @@ button.icon-button.active i.fa-retweet {
|
|||
background: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&__buffer {
|
||||
background: rgba($white, 0.2);
|
||||
}
|
||||
|
||||
&__handle {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
|
|
Loading…
Reference in New Issue