LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Consolidate timeout thumbnail effect

Browse source
This commit is contained in:
Rafael 2022-03-17 07:53:18 -03:00 committed by Thomas Zarebczan
parent bc6ed5d483
commit ae56058384
3 changed files with 38 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ui/component/fileRenderInitiator/view.jsx
View file

@ -9,15 +9,13 @@ import classnames from 'classnames';
import * as PAGES from 'constants/pages';
import * as RENDER_MODES from 'constants/file_render_modes';
import Button from 'component/button';
import { getThumbnailCdnUrl } from 'util/thumbnail';
import Nag from 'component/common/nag';
// $FlowFixMe cannot resolve ...
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
import * as COLLECTIONS_CONSTS from 'constants/collections';
import { LayoutRenderContext } from 'page/livestream/view';
import { formatLbryUrlForWeb } from 'util/url';
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
import useFetchLiveStatus from 'effects/use-fetch-live';
import useThumbnail from 'effects/use-thumbnail';
type Props = {
channelClaimId: ?string,
@ -78,7 +76,6 @@ export default function FileRenderInitiator(props: Props) {
const isMobile = useIsMobile();
const containerRef = React.useRef<any>();
const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
const { search, href, state: locationState, pathname } = location;
const urlParams = search && new URLSearchParams(search);
@ -109,28 +106,7 @@ export default function FileRenderInitiator(props: Props) {
useFetchLiveStatus(channelClaimId, doFetchChannelLiveStatus);
React.useEffect(() => {
if (!claimThumbnail) return;
const timer = setTimeout(() => {
let newThumbnail = claimThumbnail;
if (
containerRef.current &&
containerRef.current.parentElement &&
containerRef.current.parentElement.offsetWidth
) {
const w = containerRef.current.parentElement.offsetWidth;
newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: w, height: w });
}
if (newThumbnail !== thumbnail) {
setThumbnail(newThumbnail);
}
}, 200);
return () => clearTimeout(timer);
}, [claimThumbnail, thumbnail]);
const thumbnail = useThumbnail(claimThumbnail, containerRef);
function handleClick() {
if (embedded && !isPlayable) {

34
ui/effects/use-thumbnail.js Normal file
View file

@ -0,0 +1,34 @@
// @flow
import { getThumbnailCdnUrl } from 'util/thumbnail';
import React from 'react';
// $FlowFixMe cannot resolve ...
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
export default function useThumbnail(claimThumbnail: ?string, containerRef: any) {
const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
React.useEffect(() => {
if (!claimThumbnail) return;
const timer = setTimeout(() => {
let newThumbnail = claimThumbnail;
if (
containerRef.current &&
containerRef.current.parentElement &&
containerRef.current.parentElement.offsetWidth
) {
const w = containerRef.current.parentElement.offsetWidth;
newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: w, height: w });
}
if (newThumbnail !== thumbnail) {
setThumbnail(newThumbnail);
}
}, 200);
return () => clearTimeout(timer);
}, [claimThumbnail, containerRef, thumbnail]);
return thumbnail;
}

25
ui/page/embedWrapper/view.jsx
View file

@ -9,11 +9,10 @@ import Button from 'component/button';
import Card from 'component/common/card';
import { formatLbryUrlForWeb, formatLbryChannelName } from 'util/url';
import { useHistory } from 'react-router';
import { getThumbnailCdnUrl } from 'util/thumbnail';
import Yrbl from 'component/yrbl';
// $FlowFixMe cannot resolve ...
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
import useFetchLiveStatus from 'effects/use-fetch-live';
import useThumbnail from 'effects/use-thumbnail';
type Props = {
uri: string,
@ -85,7 +84,6 @@ export default function EmbedWrapperPage(props: Props) {
} = useHistory();
const containerRef = React.useRef<any>();
const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
const [livestreamsFetched, setLivestreamsFetched] = React.useState(false);
const channelUrl = channelUri && formatLbryChannelName(channelUri);
@ -107,26 +105,7 @@ export default function EmbedWrapperPage(props: Props) {
(outpoint.txid === txid && outpoint.nout === nout)
);
React.useEffect(() => {
if (!claimThumbnail) return;
setTimeout(() => {
let newThumbnail = claimThumbnail;
if (
containerRef.current &&
containerRef.current.parentElement &&
containerRef.current.parentElement.offsetWidth
) {
const w = containerRef.current.parentElement.offsetWidth;
newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: w, height: w });
}
if (newThumbnail !== thumbnail) {
setThumbnail(newThumbnail);
}
}, 200);
}, [claimThumbnail, thumbnail]);
const thumbnail = useThumbnail(claimThumbnail, containerRef);
React.useEffect(() => {
if (doFetchActiveLivestreams && isLivestreamClaim) {