From 2ba3f057252c5e277f2a3965b8b7dddd2c4f2d0d Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 23 Jun 2021 12:05:47 +0800
Subject: [PATCH] FileThumbnail: don't go through optimizer if GIF

## Issue
6301: don't use CDN for GIF thumbnails

## Note
Just a minor mistake in the recent thumbnail refactoring; left out the handling when `allowGif` is true.
---
 ui/component/fileThumbnail/view.jsx | 13 ++++++++-----
 ui/component/loginGraphic/index.jsx |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx
index b9216e973..94a34de4a 100644
--- a/ui/component/fileThumbnail/view.jsx
+++ b/ui/component/fileThumbnail/view.jsx
@@ -19,11 +19,14 @@ type Props = {
 
 function FileThumbnail(props: Props) {
   const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className } = props;
+
   const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
   const thumbnailFromClaim =
     uri && claim && claim.value && claim.value.thumbnail ? claim.value.thumbnail.url : undefined;
   const thumbnail = passedThumbnail || thumbnailFromClaim;
+
   const hasResolvedClaim = claim !== undefined;
+  const isGif = thumbnail && thumbnail.endsWith('gif');
 
   React.useEffect(() => {
     if (!hasResolvedClaim && uri) {
@@ -31,7 +34,7 @@ function FileThumbnail(props: Props) {
     }
   }, [hasResolvedClaim, uri, doResolveUri]);
 
-  if (!allowGifs && thumbnail && thumbnail.endsWith('gif')) {
+  if (!allowGifs && isGif) {
     return (
       <FreezeframeWrapper src={thumbnail} className={classnames('media__thumb', className)}>
         {children}
@@ -42,15 +45,15 @@ function FileThumbnail(props: Props) {
   let url = thumbnail || (hasResolvedClaim ? Placeholder : '');
   // @if TARGET='web'
   // Pass image urls through a compression proxy
-  if (thumbnail) {
+  if (thumbnail && !(isGif && allowGifs)) {
     url = getThumbnailCdnUrl({ thumbnail });
   }
   // @endif
 
-  const thumnailUrl = url ? url.replace(/'/g, "\\'") : '';
+  const thumbnailUrl = url ? url.replace(/'/g, "\\'") : '';
 
-  if (hasResolvedClaim || thumnailUrl) {
-    return <Thumb thumb={thumnailUrl}>{children}</Thumb>;
+  if (hasResolvedClaim || thumbnailUrl) {
+    return <Thumb thumb={thumbnailUrl}>{children}</Thumb>;
   }
   return (
     <div
diff --git a/ui/component/loginGraphic/index.jsx b/ui/component/loginGraphic/index.jsx
index 5f4ee40a5..cefc65753 100644
--- a/ui/component/loginGraphic/index.jsx
+++ b/ui/component/loginGraphic/index.jsx
@@ -15,7 +15,7 @@ function LoginGraphic(props: any) {
 
       let newSrc = imgUrl && imgUrl.trim().replace(/^http:\/\//i, 'https://');
       // @if TARGET='web'
-      // Pass image urls through a compression proxy, except for GIFs.
+      // Pass image urls through a compression proxy.
       newSrc = getThumbnailCdnUrl({ thumbnail: newSrc, width: newWidth, height: newWidth * 2 });
       // @endif