Remove claim search long poll + introduce pending state that blocks render + avoid polling status for non-owned claim (#320)
This commit is contained in:
parent
4a2305dca1
commit
3269b84385
2 changed files with 24 additions and 49 deletions
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue