add help to livestream setup

ui/page/livestreamSetup/view.jsx

@@ -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')}