Revert tests, update gif loading

app/javascript/gabsocial/components/media_gallery.js

@@ -50,6 +50,13 @@ class Item extends React.PureComponent {
     }
   }
 
+  handleLoadedData = (e) => {
+    if (!this.hoverToPlay()) {
+      e.target.play();
+    }
+  }
+
+
   hoverToPlay () {
     const { attachment } = this.props;
     return !autoPlayGif && attachment.get('type') === 'gifv';
@@ -70,13 +77,6 @@ class Item extends React.PureComponent {
     e.stopPropagation();
   }
 
-  onLoadedData = (e) => {
-    console.log("onLoadedData:", e);
-    if (!this.hoverToPlay()) {
-      e.target.play();
-    }
-  };
-
   componentDidMount () {
     if (this.props.attachment.get('blurhash')) {
       this._decode();
@@ -105,10 +105,6 @@ class Item extends React.PureComponent {
     this.canvas = c;
   }
 
-  setVideoRef = v => {
-    this.videoRef = v;
-  }
-
   handleImageLoad = () => {
     this.setState({ loaded: true });
   }
@@ -186,23 +182,20 @@ class Item extends React.PureComponent {
     } else if (attachment.get('type') === 'gifv') {
       const autoPlay = !isIOS() && autoPlayGif;
 
-      const attachUrl = attachment.get('url');
-      // const gifsrc = attachUrl.indexOf('?') > -1 ? attachUrl.split("?")[0] : attachUrl;
-      const gifsrc = 'https://video.twimg.com/tweet_video/EOOQ7zfWkAENTFm.mp4';
-
       thumbnail = (
         <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
           <video
-            ref={this.setVideoRef}
             className='media-gallery__item-gifv-thumbnail'
             aria-label={attachment.get('description')}
             title={attachment.get('description')}
             role='application'
-            src={gifsrc}
+            src={attachment.get('url')}
-            type='video/mp4'
+            onClick={this.handleClick}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave}
+            onLoadedData={this.handleLoadedData}
             autoPlay={autoPlay}
-            onLoadedData={this.onLoadedData}
+            type='video/mp4'
-            preload='auto'
             loop
             muted
             playsInline
@@ -215,8 +208,8 @@ class Item extends React.PureComponent {
 
     return (
       <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
-        <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': true })} />
+        <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
-        {thumbnail}
+        {visible && thumbnail}
       </div>
     );
   }