Prevent concurrent uploads with same lbry name

## Ticket
426

## Issue
Currently, we check if we have any existing claims with the same name when uploading, i.e. "lbry://<name>". It does not include claims that you are still uploading, so you might end up with duplicate claims.

In the ticket, there is also the issue of 2 uploads sharing the same slot, causing the progress indicator to jumpy between the uploads. That has been fixed by using a guid instead of using `name`.

## Aside
I think there is another request to allow the same name but on different channel ... next time, next time ....

static/app-strings.json

@@ -1206,6 +1206,7 @@
   "YB": "YB",
   "Edit existing claim instead": "Edit existing claim instead",
   "You already have a claim at %existing_uri%. Publishing will update (overwrite) your existing claim.": "You already have a claim at %existing_uri%. Publishing will update (overwrite) your existing claim.",
+  "You already have a pending upload at %existing_uri%.": "You already have a pending upload at %existing_uri%.",
   "Save": "Save",
   "Saved": "Saved",
   "Saving...": "Saving...",

ui/component/publishName/index.js

@@ -5,6 +5,7 @@ import {
   selectIsStillEditing,
   selectMyClaimForUri,
   selectTakeOverAmount,
+  selectCurrentUploads,
 } from 'redux/selectors/publish';
 import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
 import { doSetActiveChannel } from 'redux/actions/app';
@@ -15,6 +16,7 @@ const select = (state) => ({
   uri: makeSelectPublishFormValue('uri')(state),
   isStillEditing: selectIsStillEditing(state),
   myClaimForUri: selectMyClaimForUri(state),
+  currentUploads: selectCurrentUploads(state),
   activeChannelClaim: selectActiveChannelClaim(state),
   incognito: selectIncognito(state),
   amountNeededForTakeover: selectTakeOverAmount(state),

ui/component/publishName/name-help-text.jsx

@@ -4,19 +4,41 @@ import Button from 'component/button';
 import { buildURI } from 'util/lbryURI';
 import I18nMessage from 'component/i18nMessage';
 
+function isUriPendingUpload(uri: ?string, currentUploadNames: Array<string>) {
+  const protocol = 'lbry://';
+  const uriName = uri && uri.startsWith(protocol) ? uri.substring(protocol.length) : uri;
+  return currentUploadNames.includes(uriName);
+}
+
 type Props = {
   uri: ?string,
   myClaimForUri: ?StreamClaim,
+  currentUploads: { [key: string]: FileUploadItem },
   isStillEditing: boolean,
   onEditMyClaim: (any, string) => void,
 };
 
 function NameHelpText(props: Props) {
-  const { uri, myClaimForUri, onEditMyClaim, isStillEditing } = props;
+  const { uri, myClaimForUri, currentUploads, onEditMyClaim, isStillEditing } = props;
+
+  const currentUploadNames: Array<string> = React.useMemo(() => {
+    // $FlowFixMe - unable to resolve mixed
+    return Object.values(currentUploads).map((x) => (x.params ? x.params.name : ''));
+  }, [currentUploads]);
+
   let nameHelpText;
 
   if (isStillEditing) {
     nameHelpText = __('You are currently editing this claim.');
+  } else if (isUriPendingUpload(uri, currentUploadNames)) {
+    nameHelpText = (
+      <div className="error__text">
+        {/* prettier-ignore */}
+        <I18nMessage tokens={{ existing_uri: (<u><em>{uri}</em></u>) }}>
+          You already have a pending upload at %existing_uri%.
+        </I18nMessage>
+      </div>
+    );
   } else if (uri && myClaimForUri) {
     const editUri = buildURI({
       streamName: myClaimForUri.name,

ui/component/publishName/view.jsx

@@ -16,6 +16,7 @@ type Props = {
   updatePublishForm: ({}) => void,
   activeChannelClaim: ?ChannelClaim,
   incognito: boolean,
+  currentUploads: { [key: string]: FileUploadItem },
 };
 
 function PublishName(props: Props) {
@@ -28,6 +29,7 @@ function PublishName(props: Props) {
     updatePublishForm,
     activeChannelClaim,
     incognito,
+    currentUploads,
   } = props;
   const [nameError, setNameError] = useState(undefined);
   const [blurred, setBlurred] = React.useState(false);
@@ -84,6 +86,7 @@ function PublishName(props: Props) {
           uri={uri}
           isStillEditing={isStillEditing}
           myClaimForUri={myClaimForUri}
+          currentUploads={currentUploads}
           onEditMyClaim={editExistingClaim}
         />
       </div>