style cleanup

ui/component/copyableText/view.jsx

@@ -10,10 +10,11 @@ type Props = {
   doToast: ({ message: string }) => void,
   label?: string,
   primaryButton?: boolean,
+  name?: string,
 };
 
 export default function CopyableText(props: Props) {
-  const { copyable, doToast, snackMessage, label, primaryButton = false } = props;
+  const { copyable, doToast, snackMessage, label, primaryButton = false, name } = props;
 
   const input = useRef();
 
@@ -38,6 +39,7 @@ export default function CopyableText(props: Props) {
       type="text"
       className="form-field--copyable"
       readOnly
+      name={name}
       label={label}
       value={copyable || ''}
       ref={input}

ui/component/router/view.jsx

@@ -36,7 +36,7 @@ import PasswordResetPage from 'page/passwordReset';
 import PasswordSetPage from 'page/passwordSet';
 import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
-import LiveStreamPage from 'page/livestream';
+import LiveStreamSetupPage from 'page/livestreamSetup';
 import EmbedWrapperPage from 'page/embedWrapper';
 import TopPage from 'page/top';
 import Welcome from 'page/welcome';
@@ -276,7 +276,7 @@ function AppRouter(props: Props) {
       <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
-      <PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />

ui/page/livestreamSetup/view.jsx

@@ -1,5 +1,6 @@
 // @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';
@@ -10,7 +11,10 @@ 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';
+import CopyableText from 'component/copyableText';
+import Card from 'component/common/card';
+import ClaimList from 'component/claimList';
+import livestream from '../livestream';
 
 type Props = {
   channels: Array<ChannelClaim>,
@@ -62,7 +66,6 @@ export default function LivestreamSetupPage(props: Props) {
 
   const [isFetching, setIsFetching] = React.useState(true);
   const [isLive, setIsLive] = React.useState(false);
-  const [livestreamClaim, setLivestreamClaim] = React.useState(false);
   const [livestreamClaims, setLivestreamClaims] = React.useState([]);
 
   React.useEffect(() => {
@@ -78,7 +81,6 @@ export default function LivestreamSetupPage(props: Props) {
       .then((res) => {
         if (res && res.items && res.items.length > 0) {
           const claim = res.items[res.items.length - 1];
-          setLivestreamClaim(claim);
           setLivestreamClaims(res.items.reverse());
         } else {
           setIsFetching(false);
@@ -109,58 +111,55 @@ export default function LivestreamSetupPage(props: Props) {
         />
       )}
 
+      <div className="card-stack">
         {!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
+            {streamKey && livestreamClaims.length > 0 && (
+              <Card
+                title={__('Your stream key')}
+                actions={
+                  <>
+                    <CopyableText
+                      primaryButton
+                      name="stream-server"
+                      label={__('Stream server')}
+                      copyable="rtmp://stream.odysee.com/live"
+                      snackMessage={__('Copied')}
+                    />
+                    <CopyableText
+                      primaryButton
+                      name="livestream-key"
+                      label={__('Stream key')}
+                      copyable={streamKey}
+                      snackMessage={__('Copied')}
+                    />
+                  </>
+                }
               />
-
-              {/* 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 && livestreamClaims ? (
-            <div style={{ marginTop: 'var(--spacing-l)' }}>
-              <h3>Your LiveStream Claims</h3>
-
-              {livestreamClaims.map((claim) => (
-                <ClaimPreview key={claim.uri} uri={claim.permanent_url} />
-              ))}
-
-              {/*<h3>Your LiveStream Claims</h3>
-              <ClaimPreview
-                uri={livestreamClaim.permanent_url}
-              />*/}
-            </div>
+            {livestreamClaims.length > 0 ? (
+              <ClaimList
+                header={__('Your livestream uploads')}
+                uris={livestreamClaims.map((claim) => claim.permanent_url)}
+              />
             ) : (
-            <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 */}
+              <Yrbl
+                className="livestream__publish-intro"
+                title={__('No livestream publishes found')}
+                subtitle={__('You need to upload your livestream details before you can go live.')}
+                actions={
+                  <div className="section__actions">
                     <Button
                       button="primary"
                       navigate={`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`}
-                label={__('Create A LiveStream')}
+                      label={__('Create A Livestream')}
                     />
                   </div>
+                }
+              />
             )}
 
             {/* Debug Stuff */}
@@ -214,8 +213,9 @@ export default function LivestreamSetupPage(props: Props) {
                 />
               </div>
             )}
-        </React.Fragment>
+          </>
         )}
+      </div>
     </Page>
   );
 }

ui/scss/component/_livestream.scss

@@ -196,3 +196,7 @@
     display: inline-block;
   }
 }
+
+.livestream__publish-intro {
+  margin-top: var(--spacing-l);
+}