lbry-desktop/ui/page/livestream/view.jsx
2021-03-13 15:05:50 -08:00

229 lines
6.7 KiB
JavaScript

// @flow
import * as PAGES from 'constants/pages';
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 ClaimPreview from '../../component/claimPreview';
import { FormField } from '../../component/common/form';
import * as PUBLISH_MODES from '../../constants/publish_types';
type Props = {
channels: Array<ChannelClaim>,
fetchingChannels: boolean,
activeChannelClaim: ?ChannelClaim,
};
export default function CreatorDashboardPage(props: Props) {
const { channels, fetchingChannels, activeChannelClaim } = 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) => {
console.log(data);
setSigData(data);
})
.catch((error) => {
setSigData({ signature: null, signing_ts: null });
console.error(error);
});
}
}
}, [ 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 LIVE_STREAM_TAG = 'odysee-livestream';
const [isFetching, setIsFetching] = React.useState(true);
const [isLive, setIsLive] = React.useState(false);
const [livestreamClaim, setLivestreamClaim] = React.useState(false);
React.useEffect(() => {
if (!activeChannelClaimStr) return;
const channelClaim = JSON.parse(activeChannelClaimStr);
Lbry.claim_search({
channel_ids: [channelClaim.claim_id],
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);
} else {
setIsFetching(false);
}
})
.catch(() => {
setIsFetching(false);
});
}, [activeChannelClaimStr]);
return (
<Page>
{fetchingChannels && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!fetchingChannels && !hasChannels && (
<Yrbl
type="happy"
title={__("You haven't created a channel yet, let's fix that!")}
actions={
<div className="section__actions">
<Button
button="primary"
navigate={`/$/${PAGES.CHANNEL_NEW}`}
label={__('Create A Channel')}
/>
</div>
}
/>
)}
{!fetchingChannels && activeChannelClaim && (
<React.Fragment>
{/* Channel Selector */}
<ChannelSelector hideAnon />
{/* Display StreamKey */}
{ streamKey
? (<div>
{/* Stream Server Address */}
<FormField
name={'livestreamServer'}
label={'Stream Server'}
type={'text'}
defaultValue={'rtmp://stream.odysee.com/live'}
readOnly
/>
{/* Stream Key */}
<FormField
name={'livestreamKey'}
label={'Stream Key'}
type={'text'}
defaultValue={streamKey}
readOnly
/>
</div>)
: (
<div>
<div style={{marginBottom: 'var(--spacing-l)'}}>
{JSON.stringify(activeChannelClaim)}
</div>
{ sigData &&
<div>
{JSON.stringify(sigData)}
</div>
}
</div>
)
}
{/* Stream Claim(s) */}
{ livestreamClaim ? (
<div style={{marginTop: 'var(--spacing-l)'}}>
<h3>Your LiveStream Claims</h3>
<ClaimPreview
uri={livestreamClaim.permanent_url}
/>
</div>
) : (
<div style={{marginTop: 'var(--spacing-l)'}}>
<div>You must first publish a livestream claim before your stream will be visible!</div>
{/* Relies on https://github.com/lbryio/lbry-desktop/pull/5669 */}
<Button
button="primary"
navigate={`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`}
label={__('Create A LiveStream')}
/>
</div>
)}
{/* Debug Stuff */}
{ streamKey && (
<div style={{marginTop: 'var(--spacing-l)'}}>
<h3>Debug Info</h3>
{/* Channel ID */}
<FormField
name={'channelId'}
label={'Channel ID'}
type={'text'}
defaultValue={activeChannelClaim.claim_id}
readOnly
/>
{/* Signature */}
<FormField
name={'signature'}
label={'Signature'}
type={'text'}
defaultValue={sigData.signature}
readOnly
/>
{/* Signature TS */}
<FormField
name={'signaturets'}
label={'Signature Timestamp'}
type={'text'}
defaultValue={sigData.signing_ts}
readOnly
/>
{/* Hex Data */}
<FormField
name={'datahex'}
label={'Hex Data'}
type={'text'}
defaultValue={toHex(activeChannelClaim.name)}
readOnly
/>
{/* Channel Public Key */}
<FormField
name={'channelpublickey'}
label={'Public Key'}
type={'text'}
defaultValue={activeChannelClaim.value.public_key}
readOnly
/>
</div>
)}
</React.Fragment>
)}
</Page>
);
}