Update /$/live
to use latest API
1480
This commit is contained in:
parent
bf6a2e51c1
commit
c572891590
4 changed files with 36 additions and 59 deletions
|
@ -1,3 +1,15 @@
|
|||
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);
|
||||
|
|
|
@ -1,77 +1,41 @@
|
|||
// @flow
|
||||
import * as ICONS from 'constants/icons';
|
||||
import { NEW_LIVESTREAM_LIVE_API } from 'constants/livestream';
|
||||
import React from 'react';
|
||||
import Icon from 'component/common/icon';
|
||||
import ClaimList from 'component/claimList';
|
||||
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() {
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [livestreamMap, setLivestreamMap] = React.useState();
|
||||
export default function LivestreamList(props: Props) {
|
||||
const { activeLivestreams, fetchingActiveLivestreams, doFetchActiveLivestreams } = props;
|
||||
const livestreamUris = getLivestreamUris(activeLivestreams, null);
|
||||
|
||||
React.useEffect(() => {
|
||||
function checkCurrentLivestreams() {
|
||||
fetch(`${NEW_LIVESTREAM_LIVE_API}/all`)
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
setLoading(false);
|
||||
if (!res.data) {
|
||||
setLivestreamMap({});
|
||||
return;
|
||||
}
|
||||
doFetchActiveLivestreams();
|
||||
|
||||
const livestreamMap = res.data.reduce((acc, curr) => {
|
||||
return {
|
||||
...acc,
|
||||
[curr.ChannelClaimID]: curr,
|
||||
};
|
||||
}, {});
|
||||
|
||||
setLivestreamMap(livestreamMap);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
checkCurrentLivestreams();
|
||||
let fetchInterval = setInterval(checkCurrentLivestreams, LIVESTREAM_POLL_IN_MS);
|
||||
// doFetchActiveLivestreams is currently limited to 5 minutes per fetch as
|
||||
// a global default. If we want more frequent updates (say, to update the
|
||||
// view count), we can either change that limit, or add a 'force' parameter
|
||||
// to doFetchActiveLivestreams to override selectively.
|
||||
const fetchInterval = setInterval(doFetchActiveLivestreams, FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS + 50);
|
||||
return () => {
|
||||
if (fetchInterval) {
|
||||
clearInterval(fetchInterval);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading && (
|
||||
{fetchingActiveLivestreams && (
|
||||
<div className="main--empty">
|
||||
<Spinner delayed />
|
||||
</div>
|
||||
)}
|
||||
{livestreamMap && Object.keys(livestreamMap).length > 0 && (
|
||||
<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>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!fetchingActiveLivestreams && <ClaimList uris={livestreamUris} showNoSourceClaims tileLayout />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -14,3 +14,5 @@ export const LIVESTREAM_STATUS_CHECK_INTERVAL_SOON = 15 * 1000;
|
|||
export const LIVESTREAM_STARTS_SOON_BUFFER = 15;
|
||||
export const LIVESTREAM_STARTED_RECENTLY_BUFFER = 15;
|
||||
export const LIVESTREAM_UPCOMING_BUFFER = 35;
|
||||
|
||||
export const FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS = 5 * 60 * 1000;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
// @flow
|
||||
import * as ACTIONS from 'constants/action_types';
|
||||
import { FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS } from 'constants/livestream';
|
||||
import { doClaimSearch } from 'redux/actions/claims';
|
||||
import {
|
||||
LiveStatus,
|
||||
|
@ -14,8 +15,6 @@ import { isEmpty } from 'util/object';
|
|||
|
||||
const localStorageAvailable = isLocalStorageAvailable();
|
||||
|
||||
const FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS = 5 * 60 * 1000;
|
||||
|
||||
export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dispatch, getState: GetState) => {
|
||||
dispatch({
|
||||
type: ACTIONS.FETCH_NO_SOURCE_CLAIMS_STARTED,
|
||||
|
|
Loading…
Reference in a new issue