From 251187de06e7534f42e6f1842b3be4c2a254f00c Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 13 May 2022 16:55:28 +0800
Subject: [PATCH] useGetThumbnail: fetch `streaming_url` instead of generating
 it.

In the first attempt (PR 1497, 4d44d81f), the `generateStreamUrl` was tweaked to fetch a `Lbry.get`, which returns a promise.  On top of a few async issues on its own, we also can't just simply `await` here since render functions need to be pure.

Fortunately, there is already redux structure for `get`, and Sean happened to already be passing all the required stuff here (sight beyond sight!), so it's just a matter of calling it.

Again, render functions need to be pure, so the fetch has be in an effect, so the component might take several renders to get the image painted. But oddly this seems to avoid the occurrence of showing the fallback spaceman image (just an observation, no proof of correlation).
---
 ui/effects/use-get-thumbnail.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/effects/use-get-thumbnail.js b/ui/effects/use-get-thumbnail.js
index b9cf22d66..83e59334c 100644
--- a/ui/effects/use-get-thumbnail.js
+++ b/ui/effects/use-get-thumbnail.js
@@ -1,6 +1,5 @@
 // @flow
 import React from 'react';
-import { generateStreamUrl } from 'util/web';
 import { MISSING_THUMB_DEFAULT } from 'config';
 
 export default function useGetThumbnail(
@@ -18,16 +17,28 @@ export default function useGetThumbnail(
   const isFree = claim && claim.value && (!claim.value.fee || Number(claim.value.fee.amount) <= 0);
   const isCollection = claim && claim.value_type === 'collection';
   const thumbnailInClaim = claim && claim.value && claim.value.thumbnail && claim.value.thumbnail.url;
+  let shouldFetchFileInfo = false;
 
   if (thumbnailInClaim) {
     thumbnailToUse = thumbnailInClaim;
   } else if (claim && isImage && isFree) {
-    thumbnailToUse = generateStreamUrl(claim.name, claim.claim_id);
+    if (streamingUrl) {
+      thumbnailToUse = streamingUrl;
+    } else if (!shouldHide) {
+      shouldFetchFileInfo = true;
+    }
   } else if (isCollection) {
     thumbnailToUse = MISSING_THUMB_DEFAULT;
   }
 
   const [thumbnail, setThumbnail] = React.useState(thumbnailToUse);
+
+  React.useEffect(() => {
+    if (shouldFetchFileInfo) {
+      getFile(uri);
+    }
+  }, [shouldFetchFileInfo, uri]);
+
   React.useEffect(() => {
     setThumbnail(thumbnailToUse);
   }, [thumbnailToUse]);