Remove claim search long poll + introduce pending state that blocks render + avoid polling status for non-owned claim (#320)

This commit is contained in:
Dan Peterson 2021-11-18 13:43:39 -06:00 committed by GitHub
parent 4a2305dca1
commit 3269b84385
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 49 deletions

View file

@ -20,8 +20,9 @@ const ClaimPreviewReset = (props: Props) => {
const [isLivestreaming, setIsLivestreaming] = React.useState(false); const [isLivestreaming, setIsLivestreaming] = React.useState(false);
React.useEffect(() => { React.useEffect(() => {
if (!claimIsMine) return;
return watchLivestreamStatus(channelId, (state) => setIsLivestreaming(state)); return watchLivestreamStatus(channelId, (state) => setIsLivestreaming(state));
}, [channelId, setIsLivestreaming]); }, [channelId, setIsLivestreaming, claimIsMine]);
if (!claimIsMine || !isLivestreaming) return null; if (!claimIsMine || !isLivestreaming) return null;

View file

@ -4,7 +4,6 @@ import { lazyImport } from 'util/lazyImport';
import Page from 'component/page'; import Page from 'component/page';
import LivestreamLayout from 'component/livestreamLayout'; import LivestreamLayout from 'component/livestreamLayout';
import analytics from 'analytics'; import analytics from 'analytics';
import Lbry from 'lbry';
import watchLivestreamStatus from '$web/src/livestreaming/long-polling'; import watchLivestreamStatus from '$web/src/livestreaming/long-polling';
const LivestreamComments = lazyImport(() => import('component/livestreamComments' /* webpackChunkName: "comments" */)); const LivestreamComments = lazyImport(() => import('component/livestreamComments' /* webpackChunkName: "comments" */));
@ -21,43 +20,16 @@ type Props = {
export default function LivestreamPage(props: Props) { export default function LivestreamPage(props: Props) {
const { uri, claim, doSetPlayingUri, isAuthenticated, doUserSetReferrer, channelClaim, chatDisabled } = props; const { uri, claim, doSetPlayingUri, isAuthenticated, doUserSetReferrer, channelClaim, chatDisabled } = props;
const [isLive, setIsLive] = React.useState(true); const [isLive, setIsLive] = React.useState('pending');
const livestreamChannelId = channelClaim && channelClaim.signing_channel && channelClaim.signing_channel.claim_id; const livestreamChannelId = channelClaim && channelClaim.signing_channel && channelClaim.signing_channel.claim_id;
const [hasLivestreamClaim, setHasLivestreamClaim] = React.useState(false);
const LIVESTREAM_CLAIM_POLL_IN_MS = 60000;
React.useEffect(() => { React.useEffect(() => {
let checkClaimsInterval; if (!livestreamChannelId) {
function checkHasLivestreamClaim() { setIsLive(false);
Lbry.claim_search({ return;
channel_ids: [livestreamChannelId],
has_no_source: true,
claim_type: ['stream'],
})
.then((res) => {
if (res && res.items && res.items.length > 0) {
setHasLivestreamClaim(true);
}
})
.catch(() => {});
} }
if (livestreamChannelId && !isLive) {
if (!checkClaimsInterval) checkHasLivestreamClaim();
checkClaimsInterval = setInterval(checkHasLivestreamClaim, LIVESTREAM_CLAIM_POLL_IN_MS);
return () => {
if (checkClaimsInterval) {
clearInterval(checkClaimsInterval);
}
};
}
}, [livestreamChannelId, isLive]);
React.useEffect(() => {
if (!hasLivestreamClaim || !livestreamChannelId) return;
return watchLivestreamStatus(livestreamChannelId, (state) => setIsLive(state)); return watchLivestreamStatus(livestreamChannelId, (state) => setIsLive(state));
}, [livestreamChannelId, setIsLive, hasLivestreamClaim]); }, [livestreamChannelId, setIsLive]);
const stringifiedClaim = JSON.stringify(claim); const stringifiedClaim = JSON.stringify(claim);
React.useEffect(() => { React.useEffect(() => {
@ -87,20 +59,22 @@ export default function LivestreamPage(props: Props) {
}, [doSetPlayingUri]); }, [doSetPlayingUri]);
return ( return (
<Page isLive !== 'pending' && (
className="file-page" <Page
noFooter className="file-page"
livestream noFooter
chatDisabled={chatDisabled} livestream
rightSide={ chatDisabled={chatDisabled}
!chatDisabled && ( rightSide={
<React.Suspense fallback={null}> !chatDisabled && (
<LivestreamComments uri={uri} /> <React.Suspense fallback={null}>
</React.Suspense> <LivestreamComments uri={uri} />
) </React.Suspense>
} )
> }
<LivestreamLayout uri={uri} isLive={isLive} /> >
</Page> <LivestreamLayout uri={uri} isLive={isLive} />
</Page>
)
); );
} }