Update /$/live to use latest API

1480
This commit is contained in:
infinite-persistence 2022-05-11 16:04:12 +08:00 committed by Thomas Zarebczan
parent bf6a2e51c1
commit c572891590
4 changed files with 36 additions and 59 deletions

View file

@ -1,3 +1,15 @@
import LivestreamList from './view'; import LivestreamList from './view';
import { connect } from 'react-redux';
import { doFetchActiveLivestreams } from 'redux/actions/livestream';
import { selectActiveLivestreams, selectFetchingActiveLivestreams } from 'redux/selectors/livestream';
export default LivestreamList; const select = (state) => ({
activeLivestreams: selectActiveLivestreams(state),
fetchingActiveLivestreams: selectFetchingActiveLivestreams(state),
});
const perform = {
doFetchActiveLivestreams,
};
export default connect(select, perform)(LivestreamList);

View file

@ -1,77 +1,41 @@
// @flow // @flow
import * as ICONS from 'constants/icons';
import { NEW_LIVESTREAM_LIVE_API } from 'constants/livestream';
import React from 'react'; import React from 'react';
import Icon from 'component/common/icon'; import ClaimList from 'component/claimList';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
import ClaimTilesDiscover from 'component/claimTilesDiscover'; import { FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS } from 'constants/livestream';
import { getLivestreamUris } from 'util/livestream';
const LIVESTREAM_POLL_IN_MS = 10 * 1000; type Props = {
activeLivestreams: ?LivestreamInfo,
fetchingActiveLivestreams: boolean,
doFetchActiveLivestreams: () => void,
};
export default function LivestreamList() { export default function LivestreamList(props: Props) {
const [loading, setLoading] = React.useState(true); const { activeLivestreams, fetchingActiveLivestreams, doFetchActiveLivestreams } = props;
const [livestreamMap, setLivestreamMap] = React.useState(); const livestreamUris = getLivestreamUris(activeLivestreams, null);
React.useEffect(() => { React.useEffect(() => {
function checkCurrentLivestreams() { doFetchActiveLivestreams();
fetch(`${NEW_LIVESTREAM_LIVE_API}/all`)
.then((res) => res.json())
.then((res) => {
setLoading(false);
if (!res.data) {
setLivestreamMap({});
return;
}
const livestreamMap = res.data.reduce((acc, curr) => { // doFetchActiveLivestreams is currently limited to 5 minutes per fetch as
return { // a global default. If we want more frequent updates (say, to update the
...acc, // view count), we can either change that limit, or add a 'force' parameter
[curr.ChannelClaimID]: curr, // to doFetchActiveLivestreams to override selectively.
}; const fetchInterval = setInterval(doFetchActiveLivestreams, FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS + 50);
}, {});
setLivestreamMap(livestreamMap);
})
.catch((err) => {
setLoading(false);
});
}
checkCurrentLivestreams();
let fetchInterval = setInterval(checkCurrentLivestreams, LIVESTREAM_POLL_IN_MS);
return () => { return () => {
if (fetchInterval) {
clearInterval(fetchInterval); clearInterval(fetchInterval);
}
}; };
}, []); }, []);
return ( return (
<> <>
{loading && ( {fetchingActiveLivestreams && (
<div className="main--empty"> <div className="main--empty">
<Spinner delayed /> <Spinner delayed />
</div> </div>
)} )}
{livestreamMap && Object.keys(livestreamMap).length > 0 && ( {!fetchingActiveLivestreams && <ClaimList uris={livestreamUris} showNoSourceClaims tileLayout />}
<ClaimTilesDiscover
showNoSourceClaims
hasNoSource
streamTypes={null}
channelIds={Object.keys(livestreamMap)}
limitClaimsPerChannel={1}
pageSize={50}
renderProperties={(claim) => {
const livestream = livestreamMap[claim.signing_channel.claim_id];
return (
<span className="livestream__viewer-count">
{livestream.ViewerCount} <Icon icon={ICONS.EYE} />
</span>
);
}}
/>
)}
</> </>
); );
} }

View file

@ -14,3 +14,5 @@ export const LIVESTREAM_STATUS_CHECK_INTERVAL_SOON = 15 * 1000;
export const LIVESTREAM_STARTS_SOON_BUFFER = 15; export const LIVESTREAM_STARTS_SOON_BUFFER = 15;
export const LIVESTREAM_STARTED_RECENTLY_BUFFER = 15; export const LIVESTREAM_STARTED_RECENTLY_BUFFER = 15;
export const LIVESTREAM_UPCOMING_BUFFER = 35; export const LIVESTREAM_UPCOMING_BUFFER = 35;
export const FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS = 5 * 60 * 1000;

View file

@ -1,5 +1,6 @@
// @flow // @flow
import * as ACTIONS from 'constants/action_types'; import * as ACTIONS from 'constants/action_types';
import { FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS } from 'constants/livestream';
import { doClaimSearch } from 'redux/actions/claims'; import { doClaimSearch } from 'redux/actions/claims';
import { import {
LiveStatus, LiveStatus,
@ -14,8 +15,6 @@ import { isEmpty } from 'util/object';
const localStorageAvailable = isLocalStorageAvailable(); const localStorageAvailable = isLocalStorageAvailable();
const FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS = 5 * 60 * 1000;
export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dispatch, getState: GetState) => { export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dispatch, getState: GetState) => {
dispatch({ dispatch({
type: ACTIONS.FETCH_NO_SOURCE_CLAIMS_STARTED, type: ACTIONS.FETCH_NO_SOURCE_CLAIMS_STARTED,