From 06f71f2f0dbd99a08aa90245efc42ff0bd6e17f8 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 28 May 2020 12:31:30 -0400 Subject: [PATCH] Revert "pause gifs until hover" This reverts commit e97a03c5c964001906ace267bce45f9de4dc7bb8. --- ui/component/channelThumbnail/view.jsx | 10 +------- ui/component/fileThumbnail/view.jsx | 14 +++++------ ui/component/txoList/view.jsx | 2 +- ui/page/channel/view.jsx | 14 ++--------- ui/scss/component/_claim-list.scss | 33 +++++++++++--------------- ui/scss/component/_main.scss | 2 +- ui/scss/init/_mixins.scss | 22 ----------------- 7 files changed, 26 insertions(+), 71 deletions(-) diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx index 9bf1306a3..659a5bb0c 100644 --- a/ui/component/channelThumbnail/view.jsx +++ b/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 channelThumbnail = thumbnail || thumbnailPreview; - - if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) { - return ; - } - + const { thumbnail, uri, className, thumbnailPreview, obscure, small = false } = props; const showThumb = (!obscure && !!thumbnail) || thumbnailPreview; // Generate a random color class based on the first letter of the channel name diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx index e15dea242..9f016a34a 100644 --- a/ui/component/fileThumbnail/view.jsx +++ b/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 { +class CardMedia extends React.PureComponent { render() { const { thumbnail, children } = this.props; - if (thumbnail && thumbnail.endsWith('gif')) { - return ; - } - + // Disabling temporarily to see if people complain + // if (thumbnail && thumbnail.endsWith('gif')) { + // return ; + // } let url; // @if TARGET='web' // Pass image urls through a compression proxy @@ -41,4 +41,4 @@ class FileThumbnail extends React.PureComponent { } } -export default FileThumbnail; +export default CardMedia; diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx index 7bbc58b07..30098ef3a 100644 --- a/ui/component/txoList/view.jsx +++ b/ui/component/txoList/view.jsx @@ -175,7 +175,7 @@ function TxoList(props: Props) { title={__(`Transactions`)} titleActions={
-
} isBodyList diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx index 3356bbd78..e7dfac69b 100644 --- a/ui/page/channel/view.jsx +++ b/ui/page/channel/view.jsx @@ -233,20 +233,10 @@ function ChannelPage(props: Props) { {/* component that offers select/upload */}
{!editing && ( - + )} {editing && ( - + )}

{title || '@' + channelName}

diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index 649532038..f71883daf 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -90,16 +90,14 @@ } .media__thumb { - $width: var(--file-list-thumbnail-width); - width: $width; - @include handleClaimListGifThumbnail($width); - + width: var(--file-list-thumbnail-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: $width; - @include handleClaimListGifThumbnail($width); - + width: calc((100% - var(--spacing-medium) * 3) / 4); 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: $width; - @include handleClaimListGifThumbnail($width); + width: calc((100% - var(--spacing-medium) * 2) / 3); &:first-child, &:nth-child(3n + 1) { @@ -359,9 +355,7 @@ } @media (max-width: $breakpoint-small) { - $width: calc((100vw / 2) - var(--spacing-medium) * 2); - width: $width; - @include handleClaimListGifThumbnail($width); + width: calc((100% - var(--spacing-medium) * 1) / 2); 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); } } diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss index 64b317c4a..c31f74058 100644 --- a/ui/scss/component/_main.scss +++ b/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); diff --git a/ui/scss/init/_mixins.scss b/ui/scss/init/_mixins.scss index 3911291f8..2b7c6a4ab 100644 --- a/ui/scss/init/_mixins.scss +++ b/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; - } - } -}