Consolidate timeout thumbnail effect
This commit is contained in:
parent
bc6ed5d483
commit
ae56058384
3 changed files with 38 additions and 49 deletions
|
@ -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
34
ui/effects/use-thumbnail.js
Normal 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;
|
||||
}
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue