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).
This commit is contained in:
infinite-persistence 2022-05-13 16:55:28 +08:00
parent d5e56d20b6
commit 251187de06
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0

View file

@ -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]);