251187de06
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).
47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { MISSING_THUMB_DEFAULT } from 'config';
|
|
|
|
export default function useGetThumbnail(
|
|
uri: string,
|
|
claim: ?Claim,
|
|
streamingUrl: ?string,
|
|
getFile: (string) => void,
|
|
shouldHide: boolean
|
|
) {
|
|
let thumbnailToUse;
|
|
|
|
// $FlowFixMe
|
|
const isImage = claim && claim.value && claim.value.stream_type === 'image';
|
|
// $FlowFixMe
|
|
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) {
|
|
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]);
|
|
|
|
return thumbnail;
|
|
}
|