livestream related publish fixes

ui/component/publishFile/view.jsx

@@ -112,17 +112,17 @@ function PublishFile(props: Props) {
   );
 
   const fileSelectorModes = [
-    { label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
     { label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
+    { label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
     { label: __('None'), actionName: SOURCE_NONE },
   ];
 
   const livestreamDataStr = JSON.stringify(livestreamData);
   const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
-  const showSourceSelector = isLivestreamClaim;
+  const showSourceSelector = isLivestreamClaim || (hasLivestreamData && mode === PUBLISH_MODES.FILE);
 
   const [fileSelectSource, setFileSelectSource] = useState(
-    IS_WEB && showSourceSelector ? SOURCE_SELECT : SOURCE_UPLOAD
+    IS_WEB && showSourceSelector && name ? SOURCE_SELECT : SOURCE_UPLOAD
   );
   // const [showFileUpdate, setShowFileUpdate] = useState(false);
   const [selectedFileIndex, setSelectedFileIndex] = useState(null);
@@ -437,7 +437,7 @@ function PublishFile(props: Props) {
     updatePublishForm(publishFormParams);
   }
 
-  const showFileUpload = mode === PUBLISH_MODES.FILE || (mode === PUBLISH_MODES.LIVESTREAM && hasLivestreamData);
+  const showFileUpload = mode === PUBLISH_MODES.FILE;
   const isPublishPost = mode === PUBLISH_MODES.POST;
 
   return (
@@ -474,7 +474,7 @@ function PublishFile(props: Props) {
               <fieldset-section>
                 <div className="section__actions--between section__actions--align-bottom">
                   <div>
-                    <label>{__('Add replay video')}</label>
+                    <label>{__('Replay video available')}</label>
                     <div className="button-group">
                       {fileSelectorModes.map((fmode) => (
                         <Button

ui/component/publishForm/view.jsx

@@ -130,6 +130,7 @@ function PublishForm(props: Props) {
   const urlParams = new URLSearchParams(location.search);
   const TYPE_PARAM = 'type';
   const uploadType = urlParams.get(TYPE_PARAM);
+  const _uploadType = uploadType && uploadType.toLowerCase();
   const enableLivestream =
     ENABLE_NO_SOURCE_CLAIMS &&
     user &&
@@ -137,6 +138,7 @@ function PublishForm(props: Props) {
     (activeChannelStakedLevel >= CHANNEL_STAKED_LEVEL_LIVESTREAM || user.odysee_live_enabled);
   // $FlowFixMe
   const AVAILABLE_MODES = Object.values(PUBLISH_MODES).filter((mode) => {
+    // $FlowFixMe
     if (editingURI) {
       if (isPostClaim) {
         return mode === PUBLISH_MODES.POST;
@@ -145,11 +147,10 @@ function PublishForm(props: Props) {
       } else {
         return mode === PUBLISH_MODES.FILE;
       }
+    } else if (_uploadType) {
+      return mode === _uploadType && (mode !== PUBLISH_MODES.LIVESTREAM || enableLivestream);
     } else {
-      if (mode === PUBLISH_MODES.LIVESTREAM) {
+      return mode !== PUBLISH_MODES.LIVESTREAM || enableLivestream;
-        return enableLivestream;
-      }
-      return true;
     }
   });
 
@@ -159,7 +160,7 @@ function PublishForm(props: Props) {
     [PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
   };
 
-  const [mode, setMode] = React.useState(uploadType || PUBLISH_MODES.FILE);
+  const [mode, setMode] = React.useState(_uploadType || PUBLISH_MODES.FILE);
   const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false);
 
   let customSubtitle;
@@ -208,7 +209,9 @@ function PublishForm(props: Props) {
     myClaimForUri && myClaimForUri.value && myClaimForUri.value.source
       ? myClaimForUri.value.source.media_type
       : undefined;
-  const claimChannelId = myClaimForUri && myClaimForUri.signing_channel && myClaimForUri.signing_channel.claim_id;
+  const claimChannelId =
+    (myClaimForUri && myClaimForUri.signing_channel && myClaimForUri.signing_channel.claim_id) ||
+    (activeChannelClaim && activeChannelClaim.claim_id);
 
   const nameEdited = isStillEditing && name !== prevName;
 
@@ -283,10 +286,10 @@ function PublishForm(props: Props) {
 
   useEffect(() => {
     const signedMessage = JSON.parse(signedMessageStr);
-    if (claimChannelId && isLivestreamClaim && signedMessage.signature) {
+    if (claimChannelId && signedMessage.signature) {
       fetchLivestreams(claimChannelId, signedMessage.signature, signedMessage.signing_ts);
     }
-  }, [claimChannelId, isLivestreamClaim, signedMessageStr]);
+  }, [claimChannelId, signedMessageStr]);
 
   const isLivestreamMode = mode === PUBLISH_MODES.LIVESTREAM;
   let submitLabel;
@@ -395,8 +398,6 @@ function PublishForm(props: Props) {
 
   // set mode based on urlParams 'type'
   useEffect(() => {
-    const _uploadType = uploadType && uploadType.toLowerCase();
-
     // Default to standard file publish if none specified
     if (!_uploadType) {
       setMode(PUBLISH_MODES.FILE);
@@ -425,15 +426,15 @@ function PublishForm(props: Props) {
 
     // Default to standard file publish
     setMode(PUBLISH_MODES.FILE);
-  }, [uploadType, enableLivestream]);
+  }, [_uploadType, enableLivestream]);
 
   // if we have a type urlparam, update it? necessary?
   useEffect(() => {
-    if (!uploadType) return;
+    if (!_uploadType) return;
     const newParams = new URLSearchParams();
     newParams.set(TYPE_PARAM, mode.toLowerCase());
     replace({ search: newParams.toString() });
-  }, [mode, uploadType]);
+  }, [mode, _uploadType]);
 
   // @if TARGET='web'
   function createWebFile() {
@@ -575,7 +576,7 @@ function PublishForm(props: Props) {
 
       {!publishing && (
         <div className={classnames({ 'card--disabled': formDisabled })}>
-          {mode === PUBLISH_MODES.FILE && <PublishDescription disabled={formDisabled} />}
+          {mode !== PUBLISH_MODES.POST && <PublishDescription disabled={formDisabled} />}
           <Card actions={<SelectThumbnail livestreamdData={livestreamData} />} />
           <TagsSelect
             suggestMature={!SIMPLE_SITE}

ui/constants/publish_types.js

@@ -1,3 +1,3 @@
-export const FILE = 'File';
+export const FILE = 'file';
-export const POST = 'Post';
+export const POST = 'post';
-export const LIVESTREAM = 'Livestream';
+export const LIVESTREAM = 'livestream';

ui/page/home/view.jsx

@@ -81,7 +81,7 @@ function HomePage(props: Props) {
       )}
       {rowData.map(({ title, route, link, icon, help, options = {} }, index) => (
         <div key={title} className="claim-grid__wrapper">
-          {title && (
+          {index !== 0 && title && typeof title === 'string' && (
             <h1 className="claim-grid__header">
               <Button navigate={route || link} button="link">
                 {icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
@@ -92,7 +92,7 @@ function HomePage(props: Props) {
           )}
 
           <ClaimTilesDiscover {...options} />
-          {link && (
+          {(route || link) && (
             <Button
               className="claim-grid__title--secondary"
               button="link"

ui/page/livestreamSetup/index.js

@@ -1,7 +1,8 @@
 import { connect } from 'react-redux';
-import { selectMyChannelClaims, selectFetchingMyChannels, selectPendingClaims } from 'lbry-redux';
+import { selectMyChannelClaims, selectFetchingMyChannels, selectPendingClaims, doClearPublish } from 'lbry-redux';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import LivestreamSetupPage from './view';
+import { push } from 'connected-react-router';
 
 const select = (state) => ({
   channels: selectMyChannelClaims(state),
@@ -9,5 +10,10 @@ const select = (state) => ({
   activeChannelClaim: selectActiveChannelClaim(state),
   pendingClaims: selectPendingClaims(state),
 });
-
+const perform = (dispatch) => ({
-export default connect(select)(LivestreamSetupPage);
+  doNewLivestream: (path) => {
+    dispatch(doClearPublish());
+    dispatch(push(path));
+  },
+});
+export default connect(select, perform)(LivestreamSetupPage);

ui/page/livestreamSetup/view.jsx

@@ -2,6 +2,7 @@
 import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
 import * as PUBLISH_MODES from 'constants/publish_types';
+import I18nMessage from 'component/i18nMessage';
 import React from 'react';
 import Page from 'component/page';
 import Spinner from 'component/spinner';
@@ -15,17 +16,19 @@ import CopyableText from 'component/copyableText';
 import Card from 'component/common/card';
 import ClaimList from 'component/claimList';
 import usePersistedState from 'effects/use-persisted-state';
+import usePrevious from 'effects/use-previous';
 
 type Props = {
   channels: Array<ChannelClaim>,
   fetchingChannels: boolean,
   activeChannelClaim: ?ChannelClaim,
   pendingClaims: Array<Claim>,
+  doNewLivestream: (string) => void,
 };
 
 export default function LivestreamSetupPage(props: Props) {
   const LIVESTREAM_CLAIM_POLL_IN_MS = 60000;
-  const { channels, fetchingChannels, activeChannelClaim, pendingClaims } = props;
+  const { channels, fetchingChannels, activeChannelClaim, pendingClaims, doNewLivestream } = props;
 
   const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined });
   const [showHelpTest, setShowHelpTest] = usePersistedState('livestream-help-seen', true);
@@ -50,8 +53,18 @@ export default function LivestreamSetupPage(props: Props) {
           claim.value_type === 'stream' && !(claim.value && claim.value.source)
       )
     : [];
+  const [localPending, setLocalPending] = React.useState([]); //
+  const localPendingStr = JSON.stringify(localPending);
+  const pendingLivestreamClaimsStr = JSON.stringify(pendingLiveStreamClaims);
+  const prevPendingLiveStreamClaimStr = usePrevious(pendingLivestreamClaimsStr);
+  const liveStreamClaimsStr = JSON.stringify(livestreamClaims);
+  const prevLiveStreamClaimsStr = JSON.stringify(liveStreamClaimsStr);
   const pendingLength = pendingLiveStreamClaims.length;
   const totalLivestreamClaims = pendingLiveStreamClaims.concat(livestreamClaims);
+  const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
+  const localPendingForChannel = localPending.filter(
+    (claim) => claim.signing_channel && claim.signing_channel.claim_id === activeChannelId
+  );
   const helpText = (
     <div className="section__subtitle">
       <p>
@@ -110,16 +123,53 @@ export default function LivestreamSetupPage(props: Props) {
     }
   }, [activeChannelClaimStr, setSigData]);
 
+  // The following 2 effects handle the time between pending disappearing and claim_search being able to find it.
+  // We'll maintain our own pending list:
+  // add to it when there are new things in pending
+  // remove items only when our claim_search finds it
   React.useEffect(() => {
-    let checkClaimsInterval;
+    // add to localPending when pending changes
-    if (!activeChannelClaimStr) return;
+    const localPending = JSON.parse(localPendingStr);
-    const channelClaim = JSON.parse(activeChannelClaimStr);
+    const pendingLivestreamClaims = JSON.parse(pendingLivestreamClaimsStr);
+    if (
+      pendingLiveStreamClaims !== prevPendingLiveStreamClaimStr ||
+      (pendingLivestreamClaims.length && !localPending.length)
+    ) {
+      const prevPendingLivestreamClaims = prevPendingLiveStreamClaimStr
+        ? JSON.parse(prevPendingLiveStreamClaimStr)
+        : [];
+      const pendingClaimIds = pendingLivestreamClaims.map((claim) => claim.claim_id);
+      const prevPendingClaimIds = prevPendingLivestreamClaims.map((claim) => claim.claim_id);
+      const newLocalPending = [];
+      if (pendingClaimIds.length > prevPendingClaimIds.length) {
+        pendingLivestreamClaims.forEach((pendingClaim) => {
+          if (!localPending.some((lClaim) => lClaim.claim_id === pendingClaim.claim_id)) {
+            newLocalPending.push(pendingClaim);
+          }
+        });
+        setLocalPending(localPending.concat(newLocalPending));
+      }
+    }
+  }, [pendingLivestreamClaimsStr, prevPendingLiveStreamClaimStr, localPendingStr, setLocalPending]);
 
-    function checkLivestreamClaims() {
+  React.useEffect(() => {
+    // remove from localPending when livestreamClaims found
+    const localPending = JSON.parse(localPendingStr);
+    if (liveStreamClaimsStr !== prevLiveStreamClaimsStr && localPending.length) {
+      const livestreamClaims = JSON.parse(liveStreamClaimsStr);
+      setLocalPending(
+        localPending.filter((pending) => !livestreamClaims.some((claim) => claim.claim_id === pending.claim_id))
+      );
+    }
+  }, [liveStreamClaimsStr, prevLiveStreamClaimsStr, localPendingStr, setLocalPending]);
+
+  const checkLivestreams = React.useCallback(
+    function checkLivestreamClaims(channelClaimId, setLivestreamClaims, setSpin) {
       Lbry.claim_search({
-        channel_ids: [channelClaim.claim_id],
+        channel_ids: [channelClaimId],
         has_no_source: true,
         claim_type: ['stream'],
+        include_purchase_receipt: true,
       })
         .then((res) => {
           if (res && res.items && res.items.length > 0) {
@@ -133,17 +183,27 @@ export default function LivestreamSetupPage(props: Props) {
           setLivestreamClaims([]);
           setSpin(false);
         });
-    }
+    },
+    [activeChannelId]
+  );
+  React.useEffect(() => {
+    let checkClaimsInterval;
+    if (!activeChannelClaimStr) return;
+    const channelClaim = JSON.parse(activeChannelClaimStr);
+
     if (!checkClaimsInterval) {
-      checkLivestreamClaims();
+      checkLivestreams(channelClaim.claim_id, setLivestreamClaims, setSpin);
-      checkClaimsInterval = setInterval(checkLivestreamClaims, LIVESTREAM_CLAIM_POLL_IN_MS);
+      checkClaimsInterval = setInterval(
+        () => checkLivestreams(channelClaim.claim_id, setLivestreamClaims, setSpin),
+        LIVESTREAM_CLAIM_POLL_IN_MS
+      );
     }
     return () => {
       if (checkClaimsInterval) {
         clearInterval(checkClaimsInterval);
       }
     };
-  }, [activeChannelClaimStr, pendingLength, setSpin]);
+  }, [activeChannelClaimStr, pendingLength, setSpin, checkLivestreams]);
 
   return (
     <Page>
@@ -189,6 +249,7 @@ export default function LivestreamSetupPage(props: Props) {
             )}
             {streamKey && totalLivestreamClaims.length > 0 && (
               <Card
+                className="section"
                 title={__('Your stream key')}
                 actions={
                   <>
@@ -212,22 +273,65 @@ export default function LivestreamSetupPage(props: Props) {
             )}
 
             {totalLivestreamClaims.length > 0 ? (
-              <ClaimList
+              <>
-                header={__('Your livestream uploads')}
+                {Boolean(localPendingForChannel.length) && (
-                uris={totalLivestreamClaims.map((claim) => claim.permanent_url)}
+                  <div className="section">
-              />
+                    <ClaimList
+                      header={__('Your pending livestream uploads')}
+                      uris={localPendingForChannel.map((claim) => claim.permanent_url)}
+                    />
+                  </div>
+                )}
+                {Boolean(livestreamClaims.length) && (
+                  <div className="section">
+                    <ClaimList
+                      header={__('Your livestream uploads')}
+                      empty={
+                        <I18nMessage
+                          tokens={{
+                            check_again: (
+                              <Button
+                                button="link"
+                                onClick={() => checkLivestreams(activeChannelId, setLivestreamClaims, setSpin)}
+                                label={__('Check again')}
+                              />
+                            ),
+                          }}
+                        >
+                          Nothing here yet. %check_again%
+                        </I18nMessage>
+                      }
+                      uris={livestreamClaims
+                        .filter((c) => !pendingLiveStreamClaims.some((p) => p.permanent_url === c.permanent_url))
+                        .map((claim) => claim.permanent_url)}
+                    />
+                  </div>
+                )}
+              </>
             ) : (
               <Yrbl
                 className="livestream__publish-intro"
                 title={__('No livestream publishes found')}
-                subtitle={__('You need to upload your livestream details before you can go live.')}
+                subtitle={__(
+                  'You need to upload your livestream details before you can go live. If you already created one in this channel, it should appear soon.'
+                )}
                 actions={
                   <div className="section__actions">
                     <Button
                       button="primary"
-                      navigate={`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`}
+                      onClick={() =>
+                        doNewLivestream(`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`)
+                      }
                       label={__('Create A Livestream')}
                     />
+                    <Button
+                      button="alt"
+                      onClick={() => {
+                        setSpin(true);
+                        checkLivestreams(activeChannelId, setLivestreamClaims, setSpin);
+                      }}
+                      label={__('Check again...')}
+                    />
                   </div>
                 }
               />

ui/scss/component/_livestream.scss

@@ -257,7 +257,7 @@
   }
   &:nth-child(n) {
     &.livestream__data-row--selected {
-      background-color: var(--color-input-toggle-bg-hover);
+      background-color: var(--color-button-toggle-bg);
     }
   }
   td {