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:
parent
d5e56d20b6
commit
251187de06
1 changed files with 13 additions and 2 deletions
|
@ -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]);
|
||||
|
|
Loading…
Reference in a new issue