lbry-desktop/ui/component/livestreamLink/view.jsx
2021-03-22 15:30:01 -07:00

68 lines
1.9 KiB
JavaScript

// @flow
import { LIVE_STREAM_TAG } from 'constants/livestream';
import React from 'react';
import Card from 'component/common/card';
import ClaimPreview from 'component/claimPreview';
import { Lbry } from 'lbry-redux';
type Props = {
channelClaim: ChannelClaim,
};
export default function LivestreamLink(props: Props) {
const { channelClaim } = props;
const [livestreamClaim, setLivestreamClaim] = React.useState(false);
const [isLivestreaming, setIsLivestreaming] = React.useState(false);
const livestreamChannelId = channelClaim.claim_id;
React.useEffect(() => {
Lbry.claim_search({
channel_ids: [livestreamChannelId],
any_tags: [LIVE_STREAM_TAG],
claim_type: ['stream'],
})
.then((res) => {
if (res && res.items && res.items.length > 0) {
const claim = res.items[0];
setLivestreamClaim(claim);
}
})
.catch(() => {});
}, [livestreamChannelId]);
React.useEffect(() => {
// function fetchIsStreaming() {
// // fetch(``)
// // .then((res) => res.json())
// // .then((res) => {
// // if (res && res.data && res.data.live) {
// // setIsLivestreaming(true);
// // } else {
// // setIsLivestreaming(false);
// // }
// // })
// // .catch((e) => {});
// }
// let interval;
// if (livestreamChannelId) {
// interval = setInterval(fetchIsStreaming, 5000);
// }
// return () => {
// if (interval) {
// clearInterval(interval);
// }
// };
}, [livestreamChannelId]);
if (!livestreamClaim || !isLivestreaming) {
return null;
}
return (
<Card
className="livestream__channel-link"
title="Live stream in progress"
actions={<ClaimPreview uri={livestreamClaim.canonical_url} livestream type="inline" />}
/>
);
}