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 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
|
// @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>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue