// @flow import * as PAGES from 'constants/pages'; import * as PUBLISH_MODES from 'constants/publish_types'; import React from 'react'; import Page from 'component/page'; import Spinner from 'component/spinner'; import Button from 'component/button'; import ChannelSelector from 'component/channelSelector'; import Yrbl from 'component/yrbl'; import { Lbry } from 'lbry-redux'; import { toHex } from 'util/hex'; import { FormField } from 'component/common/form'; import CopyableText from 'component/copyableText'; import Card from 'component/common/card'; import ClaimList from 'component/claimList'; type Props = { channels: Array, fetchingChannels: boolean, activeChannelClaim: ?ChannelClaim, pendingClaims: Array, }; export default function LivestreamSetupPage(props: Props) { const { channels, fetchingChannels, activeChannelClaim, pendingClaims } = props; const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined }); const hasChannels = channels && channels.length > 0; const activeChannelClaimStr = JSON.stringify(activeChannelClaim); const streamKey = createStreamKey(); React.useEffect(() => { if (activeChannelClaimStr) { const channelClaim = JSON.parse(activeChannelClaimStr); // ensure we have a channel if (channelClaim.claim_id) { Lbry.channel_sign({ channel_id: channelClaim.claim_id, hexdata: toHex(channelClaim.name), }) .then((data) => { setSigData(data); }) .catch((error) => { setSigData({ signature: null, signing_ts: null }); }); } } }, [activeChannelClaimStr, setSigData]); function createStreamKey() { if (!activeChannelClaim || !sigData.signature || !sigData.signing_ts) return null; return `${activeChannelClaim.claim_id}?d=${toHex(activeChannelClaim.name)}&s=${sigData.signature}&t=${ sigData.signing_ts }`; } const [livestreamClaims, setLivestreamClaims] = React.useState([]); // $FlowFixMe const pendingLiveStreamClaims = pendingClaims.filter((claim) => !(claim && claim.value && claim.value.source)); const totalLivestreamClaims = pendingLiveStreamClaims.concat(livestreamClaims); React.useEffect(() => { if (!activeChannelClaimStr) return; const channelClaim = JSON.parse(activeChannelClaimStr); Lbry.claim_search({ channel_ids: [channelClaim.claim_id], has_no_source: true, claim_type: ['stream'], }) .then((res) => { if (res && res.items && res.items.length > 0) { setLivestreamClaims(res.items.reverse()); } else { setLivestreamClaims([]); } }) .catch(() => { setLivestreamClaims([]); }); }, [activeChannelClaimStr, pendingClaims.length]); return ( {fetchingChannels && (
)} {!fetchingChannels && !hasChannels && (