pause gifs until hover round 2

CHANGELOG.md

@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 - Use "grab" cursor on floating player to make it easier to tell you can drag it _community pr!_ ([#4201](https://github.com/lbryio/lbry-desktop/pull/4201))
 - Confirm age before viewing mature content on web ([#4233](https://github.com/lbryio/lbry-desktop/pull/4233))
+- Pause thumbnail gifs until hover ([#4256](https://github.com/lbryio/lbry-desktop/pull/4256))
 
 ### Fixed
 

ui/component/channelThumbnail/view.jsx

@@ -3,6 +3,7 @@ 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,
@@ -11,10 +12,17 @@ type Props = {
   thumbnailPreview: ?string,
   obscure?: boolean,
   small?: boolean,
+  allowGifs?: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri, className, thumbnailPreview, obscure, small = false } = props;
+  const { thumbnail, uri, className, thumbnailPreview, obscure, small = false, allowGifs = 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/FreezeframeWrapper.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Freezeframe from './FreezeframeLite';
 
@@ -13,8 +14,8 @@ const FreezeframeWrapper = props => {
   }, []);
 
   return (
-    <div className={className}>
-      <img ref={imgRef} src={src} />
+    <div className={classnames(className, 'freezeframe-wrapper')}>
+      <img ref={imgRef} src={src} className="freezeframe-img" />
     </div>
   );
 };

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 CardMedia extends React.PureComponent<Props> {
+class FileThumbnail extends React.PureComponent<Props> {
   render() {
     const { thumbnail, children } = this.props;
 
-    // Disabling temporarily to see if people complain
-    // if (thumbnail && thumbnail.endsWith('gif')) {
-    //   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 CardMedia extends React.PureComponent<Props> {
   }
 }
 
-export default CardMedia;
+export default FileThumbnail;

ui/component/txoList/view.jsx

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

ui/page/channel/view.jsx

@@ -233,10 +233,20 @@ function ChannelPage(props: Props) {
         {/* component that offers select/upload */}
         <div className="channel__primary-info">
           {!editing && (
-            <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
+            <ChannelThumbnail
+              className="channel__thumbnail--channel-page"
+              uri={uri}
+              obscure={channelIsBlocked}
+              allowGifs
+            />
           )}
           {editing && (
-            <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} thumbnailPreview={thumbPreview} />
+            <ChannelThumbnail
+              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,14 +90,16 @@
   }
 
   .media__thumb {
-    width: var(--file-list-thumbnail-width);
+    $width: var(--file-list-thumbnail-width);
+    width: $width;
+    @include handleClaimTileGifThumbnail($width);
+
     flex-shrink: 0;
     margin-right: var(--spacing-medium);
   }
 
   .channel-thumbnail {
-    width: 6rem;
-    height: 6rem;
+    @include handleChannelGif(6rem);
   }
 
   &:hover {
@@ -115,8 +117,7 @@
     }
 
     .channel-thumbnail {
-      width: 5rem;
-      height: 5rem;
+      @include handleChannelGif(5rem);
     }
   }
 }
@@ -137,20 +138,13 @@
   }
 
   .channel-thumbnail {
-    width: 7.5rem;
-    height: 7.5rem;
+    @include handleChannelGif(7.5rem);
   }
 }
 
 .claim-preview--small {
-  .media__thumb {
-    width: 8rem;
-    height: auto;
-  }
-
   .channel-thumbnail {
-    width: 4rem;
-    height: 4rem;
+    @include handleChannelGif(4rem);
   }
 }
 
@@ -318,7 +312,10 @@
 }
 
 .claim-preview--tile {
-  width: calc((100% - var(--spacing-medium) * 3) / 4);
+  $width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 3) / 4);
+  width: $width;
+  @include handleClaimTileGifThumbnail($width);
+
   margin-bottom: var(--spacing-large);
   margin-right: 0;
   margin-top: 0;
@@ -342,7 +339,9 @@
   }
 
   @media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
-    width: calc((100% - var(--spacing-medium) * 2) / 3);
+    $width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 2) / 3);
+    width: $width;
+    @include handleClaimTileGifThumbnail($width);
 
     &:first-child,
     &:nth-child(3n + 1) {
@@ -355,7 +354,9 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    width: calc((100% - var(--spacing-medium) * 1) / 2);
+    $width: calc((100vw / 2) - var(--spacing-medium) * 2);
+    width: $width;
+    @include handleClaimTileGifThumbnail($width);
     margin-bottom: var(--spacing-large);
 
     &:first-child,
@@ -390,8 +391,7 @@
   color: var(--color-subtitle);
 
   .channel-thumbnail {
-    width: 2.1rem;
-    height: 2.1rem;
+    @include handleChannelGif(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);
+  padding: var(--spacing-large); // Unfortunately this is coupled with .claim-preview--tile width calculation
 
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-small);

ui/scss/init/_mixins.scss

@@ -17,3 +17,23 @@
     }
   }
 }
+
+@mixin handleClaimTileGifThumbnail($width) {
+  .ff-canvas,
+  .freezeframe-img {
+    height: calc(#{$width} * (9 / 16)) !important;
+    width: $width;
+  }
+}
+
+@mixin handleChannelGif($size) {
+  height: $size;
+  width: $size;
+
+  .ff-canvas,
+  .freezeframe-img {
+    border-radius: var(--border-radius);
+    height: $size !important;
+    width: $size !important;
+  }
+}