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);
React.useEffect(() => {
if (!claimIsMine) return;
return watchLivestreamStatus(channelId, (state) => setIsLivestreaming(state));
}, [channelId, setIsLivestreaming]);
}, [channelId, setIsLivestreaming, claimIsMine]);
if (!claimIsMine || !isLivestreaming) return null;

View file

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