Updated Video component x3

• Updated:
- Video component x3 for buffering

• Added:
- SensitiveMediaItem for Video if sensitive is true

app/javascript/gabsocial/components/video.js

@@ -18,6 +18,7 @@ import {
 import Responsive from '../features/ui/util/responsive_component'
 import Button from './button'
 import Icon from './icon'
+import SensitiveMediaItem from './sensitive_media_item'
 import Text from './text'
 
 // check every 50 ms for buffer
@@ -35,6 +36,7 @@ const messages = defineMessages({
   sensitive: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
   hidden: { id: 'status.media_hidden', defaultMessage: 'Media hidden' },
   video_stats: { id: 'video.stats_label', defaultMessage: 'Video meta stats' },
+  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide media' },
 })
 
 const formatTime = (secondsNum) => {
@@ -168,10 +170,6 @@ class Video extends ImmutablePureComponent {
     document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true)
     document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true)
 
-    if (blurhash) {
-      this._decode()
-    }
-
     if (meta) {
       this.setState({ duration: parseInt(meta.get('duration')) })
     }
@@ -200,28 +198,25 @@ class Video extends ImmutablePureComponent {
     if (prevState.revealed && !this.state.revealed && this.video) {
       this.video.pause()
     }
-    if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
-      this._decode()
-    }
   }
 
   checkBuffering = () => {
-    const { isBuffering, paused, currentTime } = this.state
+    const { isBuffering, paused } = this.state
+    if (!this.video) {
+      this.handlePause()
+      return
+    }
+    const { currentTime } = this.video
 
-    // checking offset should be at most the check interval
+    // Checking offset should be at most the check interval but allow for some margin
-    // but allow for some margin
     let offset = checkInterval / 1000
 
-    // if no buffering is currently detected,
-    // and the position does not seem to increase
-    // and the player isn't manually paused...
     if (!isBuffering && currentTime < (this.lastPlayPos + offset) && !paused) {
+      // If no buffering is currently detected, and the position does not seem to increase
+      // and the player isn't manually paused...
       this.setState({ isBuffering: true })
-    }
+    } else if (isBuffering && currentTime > (this.lastPlayPos + offset) && !paused) {
-
+      // If we were buffering but the player has advanced, then there is no buffering
-    // if we were buffering but the player has advanced,
-    // then there is no buffering
-    if (isBuffering && currentTime > (this.lastPlayPos + offset) && !paused) {
       this.setState({ isBuffering: false })
     }
 
@@ -264,10 +259,6 @@ class Video extends ImmutablePureComponent {
     this.volume = n
   }
 
-  setCanvasRef = (n) => {
-    this.canvas = n
-  }
-
   setSettingsBtnRef = (n) => {
     this.settingsBtn = n
   }
@@ -405,18 +396,6 @@ class Video extends ImmutablePureComponent {
     }
   }
 
-  _decode() {
-    const hash = this.props.blurhash
-    const pixels = decode(hash, 32, 32)
-
-    if (pixels && this.canvas) {
-      const ctx = this.canvas.getContext('2d')
-      const imageData = new ImageData(pixels, 32, 32)
-
-      ctx.putImageData(imageData, 0, 0)
-    }
-  }
-
   handleFullscreenChange = () => {
     this.setState({ fullscreen: isFullscreen() })
   }
@@ -500,7 +479,7 @@ class Video extends ImmutablePureComponent {
       alt,
       detailed,
       sensitive,
-      aspectRatio
+      aspectRatio,
     } = this.props
 
     const {
@@ -637,6 +616,10 @@ class Video extends ImmutablePureComponent {
       displayNone: !paused,
     })
 
+    if (!revealed && sensitive) {
+      return <SensitiveMediaItem onClick={this.toggleReveal} />
+    }
+
     return (
       <div
         className={mainContainerClasses}
@@ -648,16 +631,6 @@ class Video extends ImmutablePureComponent {
         tabIndex={0}
       >
 
-        {
-          !revealed &&
-          <canvas
-            width={32}
-            height={32}
-            ref={this.setCanvasRef}
-            className={[_s.default, _s.posAbs, _s.height100PC, _s.width100PC, _s.top0, _s.left0].join(' ')}
-          />
-        }
-
         <div className={overlayClasses}>
           {
             paused && !isBuffering &&
@@ -676,32 +649,29 @@ class Video extends ImmutablePureComponent {
           }
         </div>
 
-        {
+        <video
-          revealed &&
+          className={[_s.default, _s.height100PC, _s.width100PC, _s.outlineNone].join(' ')}
-          <video
+          playsInline
-            className={[_s.default, _s.height100PC, _s.width100PC, _s.outlineNone].join(' ')}
+          ref={this.setVideoRef}
-            playsInline
+          src={src}
-            ref={this.setVideoRef}
+          poster={preview}
-            src={src}
+          preload={preload}
-            poster={preview}
+          loop
-            preload={preload}
+          role='button'
-            loop
+          tabIndex='0'
-            role='button'
+          aria-label={alt}
-            tabIndex='0'
+          title={alt}
-            aria-label={alt}
+          width={width}
-            title={alt}
+          height={height}
-            width={width}
+          volume={volume}
-            height={height}
+          onClick={this.togglePlay}
-            volume={volume}
+          onPlay={this.handlePlay}
-            onClick={this.togglePlay}
+          onPause={this.handlePause}
-            onPlay={this.handlePlay}
+          onTimeUpdate={this.handleTimeUpdate}
-            onPause={this.handlePause}
+          onLoadedData={this.handleLoadedData}
-            onTimeUpdate={this.handleTimeUpdate}
+          onProgress={this.handleProgress}
-            onLoadedData={this.handleLoadedData}
+          onVolumeChange={this.handleVolumeChange}
-            onProgress={this.handleProgress}
+        />
-            onVolumeChange={this.handleVolumeChange}
-          />
-        }
 
         { /* <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed })}>
           <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
@@ -841,8 +811,20 @@ class Video extends ImmutablePureComponent {
           </div>
 
         </div>
+
+        {
+          revealed && sensitive &&
+          <div className={[_s.posAbs, _s.z2, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}>
+            <Button
+              title={intl.formatMessage(messages.toggle_visible)}
+              icon='hidden'
+              backgroundColor='black'
+              className={[_s.px10, _s.bgBlackOpaque_onHover].join(' ')}
+              onClick={this.toggleReveal}
+            />
+          </div>
+        }
       </div>
     )
   }
-
 }