use pending livestreams on dash, filter modes

ui/component/publishForm/view.jsx

@@ -8,7 +8,7 @@
   File upload is carried out in the background by that function.
  */
 
-import { SITE_NAME } from 'config';
+import { SITE_NAME, ENABLE_NO_SOURCE_CLAIMS } from 'config';
 import React, { useEffect } from 'react';
 import { buildURI, isURIValid, isNameValid, THUMBNAIL_STATUSES } from 'lbry-redux';
 import Button from 'component/button';
@@ -32,14 +32,6 @@ import fs from 'fs';
 import tempy from 'tempy';
 // @endif
 
-const MODES = Object.values(PUBLISH_MODES);
-
-const MODE_TO_I18N_STR = {
-  [PUBLISH_MODES.FILE]: 'File',
-  [PUBLISH_MODES.POST]: 'Post --[noun, markdown post tab button]--',
-  [PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
-};
-
 type Props = {
   disabled: boolean,
   tags: Array<Tag>,
@@ -92,21 +84,6 @@ type Props = {
 
 function PublishForm(props: Props) {
   // Detect upload type from query in URL
-  const { push, location } = useHistory();
-  const urlParams = new URLSearchParams(location.search);
-  const uploadType = urlParams.get('type');
-
-  // Component state
-  const [mode, setMode] = React.useState(uploadType || PUBLISH_MODES.FILE);
-  const [autoSwitchMode, setAutoSwitchMode] = React.useState(true);
-
-  // Used to check if the url name has changed:
-  // A new file needs to be provided
-  const [prevName, setPrevName] = React.useState(false);
-  // Used to check if the file has been modified by user
-  const [fileEdited, setFileEdited] = React.useState(false);
-  const [prevFileText, setPrevFileText] = React.useState('');
-
   const {
     thumbnail,
     name,
@@ -136,6 +113,31 @@ function PublishForm(props: Props) {
     user,
   } = props;
 
+  const { push, location } = useHistory();
+  const urlParams = new URLSearchParams(location.search);
+  const uploadType = urlParams.get('type');
+  // $FlowFixMe
+  const MODES =
+    ENABLE_NO_SOURCE_CLAIMS && user && user.experimental_ui
+      ? Object.values(PUBLISH_MODES)
+      : Object.values(PUBLISH_MODES).filter((mode) => mode !== PUBLISH_MODES.LIVESTREAM);
+
+  const MODE_TO_I18N_STR = {
+    [PUBLISH_MODES.FILE]: 'File',
+    [PUBLISH_MODES.POST]: 'Post --[noun, markdown post tab button]--',
+    [PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
+  };
+  // Component state
+  const [mode, setMode] = React.useState(uploadType || PUBLISH_MODES.FILE);
+  const [autoSwitchMode, setAutoSwitchMode] = React.useState(true);
+
+  // Used to check if the url name has changed:
+  // A new file needs to be provided
+  const [prevName, setPrevName] = React.useState(false);
+  // Used to check if the file has been modified by user
+  const [fileEdited, setFileEdited] = React.useState(false);
+  const [prevFileText, setPrevFileText] = React.useState('');
+
   const TAGS_LIMIT = 5;
   const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath;
   const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === '');
@@ -396,9 +398,9 @@ function PublishForm(props: Props) {
         setPrevFileText={setPrevFileText}
         header={
           <>
-            {MODES.map((modeName, index) => !((index === 2) && user && user.experimental_ui) && (
+            {MODES.map((modeName) => (
               <Button
-                key={index}
+                key={String(modeName)}
                 icon={modeName}
                 label={__(MODE_TO_I18N_STR[String(modeName)] || '---')}
                 button="alt"

ui/page/embedWrapper/view.jsx

@@ -11,20 +11,20 @@ import { useHistory } from 'react-router';
 
 type Props = {
   uri: string,
-  resolveUri: string => void,
+  resolveUri: (string) => void,
   claim: Claim,
-  doPlayUri: string => void,
+  doPlayUri: (string) => void,
   costInfo: any,
   streamingUrl: string,
-  doFetchCostInfoForUri: string => void,
+  doFetchCostInfoForUri: (string) => void,
   isResolvingUri: boolean,
   blackListedOutpoints: Array<{
     txid: string,
     nout: number,
   }>,
 };
-// $FlowFixMe apparently flow thinks this is wrong.
+
-export const EmbedContext = React.createContext();
+export const EmbedContext = React.createContext<any>();
 const EmbedWrapperPage = (props: Props) => {
   const {
     resolveUri,
@@ -54,7 +54,7 @@ const EmbedWrapperPage = (props: Props) => {
     claim &&
     blackListedOutpoints &&
     blackListedOutpoints.some(
-      outpoint =>
+      (outpoint) =>
         (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
         (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
     );

ui/page/livestreamSetup/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux';
+import { selectMyChannelClaims, selectFetchingMyChannels, selectPendingClaims } from 'lbry-redux';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import LivestreamSetupPage from './view';
 
@@ -7,6 +7,7 @@ const select = (state) => ({
   channels: selectMyChannelClaims(state),
   fetchingChannels: selectFetchingMyChannels(state),
   activeChannelClaim: selectActiveChannelClaim(state),
+  pendingClaims: selectPendingClaims(state),
 });
 
 export default connect(select)(LivestreamSetupPage);

ui/page/livestreamSetup/view.jsx

@@ -18,10 +18,11 @@ type Props = {
   channels: Array<ChannelClaim>,
   fetchingChannels: boolean,
   activeChannelClaim: ?ChannelClaim,
+  pendingClaims: Array<Claim>,
 };
 
 export default function LivestreamSetupPage(props: Props) {
-  const { channels, fetchingChannels, activeChannelClaim } = props;
+  const { channels, fetchingChannels, activeChannelClaim, pendingClaims } = props;
 
   const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined });
 
@@ -57,6 +58,9 @@ export default function LivestreamSetupPage(props: Props) {
   }
 
   const [livestreamClaims, setLivestreamClaims] = React.useState([]);
+  // $FlowFixMe
+  const pendingLiveStreamClaims = pendingClaims.filter((claim) => !(claim && claim.value && claim.value.source));
+  const totalLivestreamClaims = pendingLiveStreamClaims.concat(livestreamClaims);
 
   React.useEffect(() => {
     if (!activeChannelClaimStr) return;
@@ -105,7 +109,7 @@ export default function LivestreamSetupPage(props: Props) {
           <>
             <ChannelSelector hideAnon />
 
-            {streamKey && livestreamClaims.length > 0 && (
+            {streamKey && totalLivestreamClaims.length > 0 && (
               <Card
                 title={__('Your stream key')}
                 actions={
@@ -129,10 +133,10 @@ export default function LivestreamSetupPage(props: Props) {
               />
             )}
 
-            {livestreamClaims.length > 0 ? (
+            {totalLivestreamClaims.length > 0 ? (
               <ClaimList
                 header={__('Your livestream uploads')}
-                uris={livestreamClaims.map((claim) => claim.permanent_url)}
+                uris={totalLivestreamClaims.map((claim) => claim.permanent_url)}
               />
             ) : (
               <Yrbl