Show buffering in video player (#5261)

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

app/javascript/styles/components.scss

@@ -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;