lbry-desktop/ui/component/livestreamLink/view.jsx

87 lines
2.5 KiB
React
Raw Normal View History

// @flow
2021-07-27 22:35:22 +02:00
import { LIVESTREAM_LIVE_API } from 'constants/livestream';
import * as CS from 'constants/claim_search';
import React from 'react';
import Card from 'component/common/card';
import ClaimPreview from 'component/claimPreview';
import { Lbry } from 'lbry-redux';
2021-04-23 21:59:48 +02:00
import { useHistory } from 'react-router';
import { formatLbryUrlForWeb } from 'util/url';
type Props = {
channelClaim: ChannelClaim,
};
export default function LivestreamLink(props: Props) {
const { channelClaim } = props;
2021-04-23 21:59:48 +02:00
const { push } = useHistory();
const [livestreamClaim, setLivestreamClaim] = React.useState(false);
const [isLivestreaming, setIsLivestreaming] = React.useState(false);
2021-07-20 03:45:51 +02:00
const livestreamChannelId = (channelClaim && channelClaim.claim_id) || ''; // TODO: fail in a safer way, probably
React.useEffect(() => {
2021-03-25 21:26:33 +01:00
if (livestreamChannelId) {
Lbry.claim_search({
channel_ids: [livestreamChannelId],
has_no_source: true,
claim_type: ['stream'],
order_by: CS.ORDER_BY_NEW_VALUE,
})
2021-03-25 21:26:33 +01:00
.then((res) => {
if (res && res.items && res.items.length > 0) {
2021-07-20 03:45:51 +02:00
const claim = res.items[0];
2021-03-25 21:26:33 +01:00
setLivestreamClaim(claim);
}
})
.catch(() => {});
}
}, [livestreamChannelId]);
React.useEffect(() => {
2021-03-19 21:14:31 +01:00
function fetchIsStreaming() {
2021-07-27 22:35:22 +02:00
// $FlowFixMe livestream API can handle garbage
fetch(`${LIVESTREAM_LIVE_API}/${livestreamChannelId}`)
2021-03-19 21:14:31 +01:00
.then((res) => res.json())
.then((res) => {
if (res && res.success && res.data && res.data.live) {
2021-03-19 21:14:31 +01:00
setIsLivestreaming(true);
} else {
setIsLivestreaming(false);
}
})
.catch((e) => {});
}
2021-03-19 21:14:31 +01:00
let interval;
if (livestreamChannelId) {
if (!interval) fetchIsStreaming();
interval = setInterval(fetchIsStreaming, 10 * 1000);
2021-03-19 21:14:31 +01:00
}
2021-03-19 21:14:31 +01:00
return () => {
if (interval) {
clearInterval(interval);
}
};
}, [livestreamChannelId]);
if (!livestreamClaim || !isLivestreaming) {
return null;
}
2021-03-30 01:05:18 +02:00
// gonna pass the wrapper in so I don't have to rewrite the dmca/blocking logic in claimPreview.
const element = (props: { children: any }) => (
2021-04-23 21:59:48 +02:00
<Card
className="livestream__channel-link"
title={__('Live stream in progress')}
onClick={() => {
push(formatLbryUrlForWeb(livestreamClaim.canonical_url));
}}
>
2021-03-30 01:05:18 +02:00
{props.children}
</Card>
);
2021-03-30 01:05:18 +02:00
return <ClaimPreview uri={livestreamClaim.canonical_url} wrapperElement={element} type="inline" />;
}