Revert "pause gifs until hover"

This reverts commit e97a03c5c9.

ui/component/channelThumbnail/view.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { parseURI } from 'lbry-redux';
 import classnames from 'classnames';
 import Gerbil from './gerbil.png';
-import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
 
 type Props = {
   thumbnail: ?string,
@@ -12,17 +11,10 @@ type Props = {
   thumbnailPreview: ?string,
   obscure?: boolean,
   small?: boolean,
-  allowGifs?: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri, className, thumbnailPreview, obscure, small = false, allowGifs = false } = props;
+  const { thumbnail, uri, className, thumbnailPreview, obscure, small = false } = props;
-  const channelThumbnail = thumbnail || thumbnailPreview;
-
-  if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
-    return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />;
-  }
-
   const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
 
   // Generate a random color class based on the first letter of the channel name

ui/component/fileThumbnail/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import type { Node } from 'react';
 import React from 'react';
-import FreezeframeWrapper from './FreezeframeWrapper';
+// import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
 
 type Props = {
@@ -11,14 +11,14 @@ type Props = {
 
 const className = 'media__thumb';
 
-class FileThumbnail extends React.PureComponent<Props> {
+class CardMedia extends React.PureComponent<Props> {
   render() {
     const { thumbnail, children } = this.props;
 
-    if (thumbnail && thumbnail.endsWith('gif')) {
+    // Disabling temporarily to see if people complain
-      return <FreezeframeWrapper src={thumbnail} className={className} />;
+    // if (thumbnail && thumbnail.endsWith('gif')) {
-    }
+    //   return <FreezeframeWrapper src={thumbnail} className={className} />;
-
+    // }
     let url;
     // @if TARGET='web'
     // Pass image urls through a compression proxy
@@ -41,4 +41,4 @@ class FileThumbnail extends React.PureComponent<Props> {
   }
 }
 
-export default FileThumbnail;
+export default CardMedia;

ui/component/txoList/view.jsx

@@ -175,7 +175,7 @@ function TxoList(props: Props) {
       title={__(`Transactions`)}
       titleActions={
         <div className="card__actions--inline">
-          <Button button="alt" label={__('Refresh')} onClick={() => fetchTxoPage()} />
+          <Button button="secondary" label={__('Refresh')} onClick={() => fetchTxoPage()} />
         </div>
       }
       isBodyList

ui/page/channel/view.jsx

@@ -233,20 +233,10 @@ function ChannelPage(props: Props) {
         {/* component that offers select/upload */}
         <div className="channel__primary-info">
           {!editing && (
-            <ChannelThumbnail
+            <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
-              className="channel__thumbnail--channel-page"
-              uri={uri}
-              obscure={channelIsBlocked}
-              allowGifs
-            />
           )}
           {editing && (
-            <ChannelThumbnail
+            <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} thumbnailPreview={thumbPreview} />
-              className="channel__thumbnail--channel-page"
-              uri={uri}
-              thumbnailPreview={thumbPreview}
-              allowGifs
-            />
           )}
           <h1 className="channel__title">{title || '@' + channelName}</h1>
           <div className="channel__meta">

ui/scss/component/_claim-list.scss

@@ -90,16 +90,14 @@
   }
 
   .media__thumb {
-    $width: var(--file-list-thumbnail-width);
+    width: var(--file-list-thumbnail-width);
-    width: $width;
-    @include handleClaimListGifThumbnail($width);
-
     flex-shrink: 0;
     margin-right: var(--spacing-medium);
   }
 
   .channel-thumbnail {
-    @include handleChannelGif(6rem);
+    width: 6rem;
+    height: 6rem;
   }
 
   &:hover {
@@ -117,7 +115,8 @@
     }
 
     .channel-thumbnail {
-      @include handleChannelGif(5rem);
+      width: 5rem;
+      height: 5rem;
     }
   }
 }
@@ -138,7 +137,8 @@
   }
 
   .channel-thumbnail {
-    @include handleChannelGif(7.5rem);
+    width: 7.5rem;
+    height: 7.5rem;
   }
 }
 
@@ -149,7 +149,8 @@
   }
 
   .channel-thumbnail {
-    @include handleChannelGif(4rem);
+    width: 4rem;
+    height: 4rem;
   }
 }
 
@@ -317,10 +318,7 @@
 }
 
 .claim-preview--tile {
-  $width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 3) / 4);
+  width: calc((100% - var(--spacing-medium) * 3) / 4);
-  width: $width;
-  @include handleClaimListGifThumbnail($width);
-
   margin-bottom: var(--spacing-large);
   margin-right: 0;
   margin-top: 0;
@@ -344,9 +342,7 @@
   }
 
   @media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
-    $width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 2) / 3);
+    width: calc((100% - var(--spacing-medium) * 2) / 3);
-    width: $width;
-    @include handleClaimListGifThumbnail($width);
 
     &:first-child,
     &:nth-child(3n + 1) {
@@ -359,9 +355,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    $width: calc((100vw / 2) - var(--spacing-medium) * 2);
+    width: calc((100% - var(--spacing-medium) * 1) / 2);
-    width: $width;
-    @include handleClaimListGifThumbnail($width);
     margin-bottom: var(--spacing-large);
 
     &:first-child,
@@ -396,7 +390,8 @@
   color: var(--color-subtitle);
 
   .channel-thumbnail {
-    @include handleChannelGif(2.1rem);
+    width: 2.1rem;
+    height: 2.1rem;
     margin-right: var(--spacing-small);
   }
 }

ui/scss/component/_main.scss

@@ -15,7 +15,7 @@
   margin-left: auto;
   margin-right: auto;
   margin-top: var(--header-height);
-  padding: var(--spacing-large); // Unfortunately this is coupled with .claim-preview--tile width calculation
+  padding: var(--spacing-large);
 
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-small);

ui/scss/init/_mixins.scss

@@ -17,25 +17,3 @@
     }
   }
 }
-
-@mixin handleClaimListGifThumbnail($width) {
-  .ff-container {
-    .ff-canvas.ff-canvas-ready,
-    img {
-      height: calc(#{$width} * (9 / 16));
-    }
-  }
-}
-
-@mixin handleChannelGif($size) {
-  height: $size;
-  width: $size;
-
-  .ff-container {
-    .ff-canvas.ff-canvas-ready,
-    img {
-      height: $size;
-      width: $size;
-    }
-  }
-}