diff --git a/ui/page/embedWrapper/index.js b/ui/page/embedWrapper/index.js index 3e37b2da7..2a22fb9b1 100644 --- a/ui/page/embedWrapper/index.js +++ b/ui/page/embedWrapper/index.js @@ -9,7 +9,7 @@ import { selectShouldObscurePreviewForUri } from 'redux/selectors/content'; import { selectCostInfoForUri, doFetchCostInfoForUri, selectBlackListedOutpoints } from 'lbryinc'; import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket'; import { doFetchActiveLivestreams, doFetchChannelLiveStatus } from 'redux/actions/livestream'; -import { selectIsActiveLivestreamForUri, selectActiveLivestreams } from 'redux/selectors/livestream'; +import { selectIsActiveLivestreamForUri } from 'redux/selectors/livestream'; import { getThumbnailFromClaim, isStreamPlaceholderClaim } from 'util/claim'; const select = (state, props) => { @@ -30,7 +30,6 @@ const select = (state, props) => { blackListedOutpoints: selectBlackListedOutpoints(state), isCurrentClaimLive: canonicalUrl && selectIsActiveLivestreamForUri(state, canonicalUrl), isLivestreamClaim: isStreamPlaceholderClaim(claim), - activeLivestreams: selectActiveLivestreams(state), obscurePreview: selectShouldObscurePreviewForUri(state, uri), claimThumbnail: getThumbnailFromClaim(claim), }; diff --git a/ui/page/embedWrapper/view.jsx b/ui/page/embedWrapper/view.jsx index ebca50e96..ff0378c6c 100644 --- a/ui/page/embedWrapper/view.jsx +++ b/ui/page/embedWrapper/view.jsx @@ -24,7 +24,6 @@ type Props = { blackListedOutpoints: Array<{ txid: string, nout: number }>, isCurrentClaimLive: boolean, isLivestreamClaim: boolean, - activeLivestreams: ?any, claimThumbnail?: string, obscurePreview: boolean, doResolveUri: (uri: string) => void, @@ -48,7 +47,6 @@ const EmbedWrapperPage = (props: Props) => { blackListedOutpoints, isCurrentClaimLive, isLivestreamClaim: liveClaim, - activeLivestreams, claimThumbnail, obscurePreview, doResolveUri, @@ -69,6 +67,7 @@ const EmbedWrapperPage = (props: Props) => { const containerRef = React.useRef(); const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder); + const [livestreamsFetched, setLivestreamsFetched] = React.useState(false); const channelUrl = channelClaim && formatLbryChannelName(channelClaim.canonical_url); const urlParams = new URLSearchParams(search); @@ -112,7 +111,10 @@ const EmbedWrapperPage = (props: Props) => { }, [claimThumbnail, thumbnail]); React.useEffect(() => { - if (doFetchActiveLivestreams) doFetchActiveLivestreams(); + if (doFetchActiveLivestreams) { + doFetchActiveLivestreams(); + setLivestreamsFetched(true); + } }, [doFetchActiveLivestreams]); // Establish web socket connection for viewer count. @@ -147,7 +149,7 @@ const EmbedWrapperPage = (props: Props) => { // Find out current channels status + active live claim every 30 seconds React.useEffect(() => { - if (!channelClaim || !activeLivestreams) return; + if (!channelClaim || !livestreamsFetched) return; const { claim_id: channelClaimId } = channelClaim || {}; @@ -156,8 +158,7 @@ const EmbedWrapperPage = (props: Props) => { const intervalId = setInterval(() => doFetchChannelLiveStatus(channelClaimId), LIVESTREAM_STATUS_CHECK_INTERVAL); return () => clearInterval(intervalId); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [channelClaim, doFetchChannelLiveStatus]); + }, [livestreamsFetched, channelClaim, doFetchChannelLiveStatus]); if (isClaimBlackListed) { return (