LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

add help to livestream setup

Browse source
This commit is contained in:
zeppi 2021-03-26 01:57:41 -04:00 committed by jessopb
parent f091da3c54
commit 76a5fe0d83
1 changed files with 51 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
ui/page/livestreamSetup/view.jsx
View file

@ -1,5 +1,6 @@
// @flow
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import * as PUBLISH_MODES from 'constants/publish_types';
import React from 'react';
import Page from 'component/page';
@ -13,6 +14,7 @@ import { FormField } from 'component/common/form';
import CopyableText from 'component/copyableText';
import Card from 'component/common/card';
import ClaimList from 'component/claimList';
import usePersistedState from 'effects/use-persisted-state';
type Props = {
channels: Array<ChannelClaim>,
@ -25,11 +27,47 @@ export default function LivestreamSetupPage(props: Props) {
const { channels, fetchingChannels, activeChannelClaim, pendingClaims } = props;
const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined });
const [showHelpTest, setShowHelpTest] = usePersistedState('livestream-help-seen', true);
const hasChannels = channels && channels.length > 0;
const activeChannelClaimStr = JSON.stringify(activeChannelClaim);
const streamKey = createStreamKey();
const helpText = (
<div className="section__subtitle">
<p>
{__(
`The Go Live process begins by first submitting your Livestream details and waiting for approval confirmation.`
)}{' '}
{__(
`The livestream will not be visible on your channel until you are live, but you can share the URL in advance.`
)}{' '}
{__(
`Once the your livestream is confirmed, configure your streaming software (OBS, Restream, etc) at the server URL above along with the stream key.`
)}
</p>
<p>{__(`To ensure the best streaming experience with OBS, open settings -> output`)}</p>
<p>{__(`Select advanced mode from the dropdown at the top.`)}</p>
<p>{__(`Ensure the following settings are selected under the streaming tab:`)}</p>
<ul>
<li>{__(`Bitrate: 1000 to 2500 kbps`)}</li>
<li>{__(`Keyframes: 1`)}</li>
<li>{__(`Profile: High`)}</li>
<li>{__(`Tune: Zerolatency`)}</li>
</ul>
<p>{__(`If not using OBS, make sure the bitrate is below 5Mbps or the stream will not work.`)}</p>
<p>
{__(
`You'll need to record your own stream through your software if you plan to share it afterward. You can also delete it if you prefer not to upload the copy. In the near future, we'll support a more streamlined process that will let you upload the replay.`
)}
</p>
<p>
{__(`After your livestream:
Click the Upload Stream button. This will allow you to edit any final details before uploading and select the saved mp4 file you recorded.`)}
</p>
<p>{__(`Click save once you are done.`)}</p>
</div>
);
React.useEffect(() => {
if (activeChannelClaimStr) {
const channelClaim = JSON.parse(activeChannelClaimStr);
@ -84,7 +122,7 @@ export default function LivestreamSetupPage(props: Props) {
.catch(() => {
setLivestreamClaims([]);
});
}, [activeChannelClaimStr, pendingLength]);
}, [activeChannelClaimStr, pendingLength, setShowHelpTest]);
return (
<Page>
@ -109,8 +147,18 @@ export default function LivestreamSetupPage(props: Props) {
<div className="card-stack">
{!fetchingChannels && activeChannelClaim && (
<>
<ChannelSelector hideAnon />
<div className="section__actions--between">
<ChannelSelector hideAnon />
<Button button="link" onClick={() => setShowHelpTest(!showHelpTest)} label={__('How does this work?')} />
</div>
{showHelpTest && (
<Card
titleActions={<Button button="close" icon={ICONS.REMOVE} onClick={() => setShowHelpTest(false)} />}
title={__('Livestreaming Beta')}
subtitle={__(`You're invited to try our live streaming beta. Bear with us as we iron it out!`)}
actions={helpText}
/>
)}
{streamKey && totalLivestreamClaims.length > 0 && (
<Card
title={__('Your stream key')}