From 3322b91c5de1bed7e358d706142f2dcc0327eb32 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 25 Jun 2021 12:15:17 +0800
Subject: [PATCH] Improve <video> poster thumbnail fetching.

Even with the caching changes, a 150kB thumbnail still takes 1-2s to fetch. This impacts the score.

## Change
(1) Start with a large-enough placeholder image (has to be larger than the final image -- inflating doesn't count), then delay just enough for scoring, then switch to the real thumbnail.

(2) Since we are now doing post-mount stuff, we have the exact dimensions to optimize the claim thumbnail. This reduces the typically-several-MBs thumbnail to kBs.
---
 static/img/fileRenderPlaceholder.png      | Bin 0 -> 320 bytes
 ui/component/fileRenderInitiator/index.js |   2 +-
 ui/component/fileRenderInitiator/view.jsx |  33 ++++++++++++++++++++--
 web/middleware/cache-control.js           |   1 +
 4 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 static/img/fileRenderPlaceholder.png

diff --git a/static/img/fileRenderPlaceholder.png b/static/img/fileRenderPlaceholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..12babce33dd0d73b3c2e404839d9a7913c8ac518
GIT binary patch
literal 320
zcmeAS@N?(olHy`uVBq!ia0y~yU~^z#U~XY#28tYR&VLA`7>k44ofy`glX(f`u%tWs
zIx;Y9?C1WI$O_~$2l#}z0_o*dwzq&3XMsm#F#`kNK@eu#F){lsQ1F<ii(^Q|t+xjo
ofgFaz3w{R2KV%36v4;?tlXd721EV~*Ob*D=p00i_>zopr07WM!6#xJL

literal 0
HcmV?d00001

diff --git a/ui/component/fileRenderInitiator/index.js b/ui/component/fileRenderInitiator/index.js
index 8e8865ecc..ad57e20e8 100644
--- a/ui/component/fileRenderInitiator/index.js
+++ b/ui/component/fileRenderInitiator/index.js
@@ -23,7 +23,7 @@ import FileRenderInitiator from './view';
 import { doAnaltyicsPurchaseEvent } from 'redux/actions/app';
 
 const select = (state, props) => ({
-  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
+  claimThumbnail: makeSelectThumbnailForUri(props.uri)(state),
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
   isPlaying: makeSelectIsPlaying(props.uri)(state),
diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx
index 5034356cd..e3ac0204f 100644
--- a/ui/component/fileRenderInitiator/view.jsx
+++ b/ui/component/fileRenderInitiator/view.jsx
@@ -9,7 +9,10 @@ import * as PAGES from 'constants/pages';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import Button from 'component/button';
 import isUserTyping from 'util/detect-typing';
+import { getThumbnailCdnUrl } from 'util/thumbnail';
 import Nag from 'component/common/nag';
+// $FlowFixMe cannot resolve ...
+import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
 
 const SPACE_BAR_KEYCODE = 32;
 
@@ -23,7 +26,7 @@ type Props = {
   location: { search: ?string, pathname: string },
   obscurePreview: boolean,
   insufficientCredits: boolean,
-  thumbnail?: string,
+  claimThumbnail?: string,
   autoplay: boolean,
   hasCostInfo: boolean,
   costInfo: any,
@@ -45,7 +48,7 @@ export default function FileRenderInitiator(props: Props) {
     insufficientCredits,
     history,
     location,
-    thumbnail,
+    claimThumbnail,
     renderMode,
     hasCostInfo,
     costInfo,
@@ -68,6 +71,29 @@ export default function FileRenderInitiator(props: Props) {
   const fileStatus = fileInfo && fileInfo.status;
   const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
   const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
+  const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
+  const containerRef = React.useRef<any>();
+
+  React.useEffect(() => {
+    if (claimThumbnail) {
+      setTimeout(() => {
+        let newThumbnail = claimThumbnail;
+
+        // @if TARGET='web'
+        if (
+          containerRef.current &&
+          containerRef.current.parentElement &&
+          containerRef.current.parentElement.offsetWidth
+        ) {
+          const dimen = containerRef.current.parentElement.offsetWidth;
+          newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: dimen, height: dimen });
+        }
+        // @endif
+
+        setThumbnail(newThumbnail);
+      }, 200);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   function doAuthRedirect() {
     history.push(`/$/${PAGES.AUTH}?redirect=${encodeURIComponent(location.pathname)}`);
@@ -131,8 +157,9 @@ export default function FileRenderInitiator(props: Props) {
 
   return (
     <div
+      ref={containerRef}
       onClick={disabled ? undefined : shouldRedirect ? doAuthRedirect : viewFile}
-      style={thumbnail && !obscurePreview && !autoplay ? { backgroundImage: `url("${thumbnail}")` } : {}}
+      style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}}
       className={classnames('content__cover', {
         'content__cover--disabled': disabled,
         'content__cover--theater-mode': videoTheaterMode,
diff --git a/web/middleware/cache-control.js b/web/middleware/cache-control.js
index 7e3d76f33..9d22dbc14 100644
--- a/web/middleware/cache-control.js
+++ b/web/middleware/cache-control.js
@@ -10,6 +10,7 @@ const STATIC_ASSET_PATHS = [
   '/public/font/v1/700i.woff',
   '/public/favicon.png',
   '/public/img/busy.gif',
+  '/public/img/fileRenderPlaceholder.gif',
   '/public/img/gerbil-happy.png',
   '/public/img/gerbil-sad.png',
   '/public/img/placeholder.png',