autopopulate name from title

ui/component/publishFile/view.jsx

@@ -32,6 +32,7 @@ type Props = {
   size: number,
   duration: number,
   isVid: boolean,
+  autoPopulateName: boolean,
   setPublishMode: string => void,
   setPrevFileText: string => void,
 };
@@ -58,6 +59,7 @@ function PublishFile(props: Props) {
     isVid,
     setPublishMode,
     setPrevFileText,
+    autoPopulateName,
   } = props;
 
   const ffmpegAvail = ffmpegStatus.available;
@@ -82,7 +84,7 @@ function PublishFile(props: Props) {
   useEffect(() => {
     if (mode === PUBLISH_MODES.POST) {
       if (currentFileType !== 'text/markdown' && !isStillEditing) {
-        updatePublishForm({ filePath: '', name: '' });
+        updatePublishForm({ filePath: '' });
       }
     }
   }, [currentFileType, mode, isStillEditing, updatePublishForm]);
@@ -210,6 +212,23 @@ function PublishFile(props: Props) {
     // @endif
   }
 
+  function parseName(newName) {
+    let INVALID_URI_CHARS = new RegExp(regexInvalidURI, 'gu');
+    return newName.replace(INVALID_URI_CHARS, '-');
+  }
+
+  function handleTitleChange(e) {
+    const newTitle = e.target.value;
+    const noName = !name || name.trim() === '';
+    const hasTitle = newTitle && newTitle.trim() !== '';
+    // Update title
+    updatePublishForm({ title: newTitle });
+    // Auto-populate name from title
+    if (hasTitle && (noName || autoPopulateName)) {
+      updatePublishForm({ name: parseName(newTitle) });
+    }
+  }
+
   function handleFileChange(file: WebFile) {
     const { showToast } = props;
     window.URL = window.URL || window.webkitURL;
@@ -290,10 +309,9 @@ function PublishFile(props: Props) {
     };
     // Strip off extention and replace invalid characters
     let fileName = name || file.name.substr(0, file.name.lastIndexOf('.')) || file.name;
-    let INVALID_URI_CHARS = new RegExp(regexInvalidURI, 'gu');
-    let parsedFileName = fileName.replace(INVALID_URI_CHARS, '-');
+
     if (!isStillEditing) {
-      publishFormParams.name = parsedFileName;
+      publishFormParams.name = parseName(fileName);
     }
     // File path is not supported on web for security reasons so we use the name instead.
     setCurrentFile(file.path || file.name);
@@ -335,7 +353,7 @@ function PublishFile(props: Props) {
             placeholder={__('Descriptive titles work best')}
             disabled={disabled}
             value={title}
-            onChange={e => updatePublishForm({ title: e.target.value })}
+            onChange={handleTitleChange}
           />
           {isPublishFile && (
             <FileSelector disabled={disabled} currentPath={currentFile} onFileChosen={handleFileChange} />

ui/component/publishForm/view.jsx

@@ -10,7 +10,7 @@
 
 import { SITE_NAME } from 'config';
 import { CHANNEL_NEW, CHANNEL_ANONYMOUS } from 'constants/claim';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { buildURI, isURIValid, isNameValid, THUMBNAIL_STATUSES } from 'lbry-redux';
 import Button from 'component/button';
 import SelectChannel from 'component/selectChannel';
@@ -116,6 +116,9 @@ function PublishForm(props: Props) {
     ytSignupPending,
   } = props;
 
+  // Used to check if name should be auto-populated from title
+  const [autoPopulateNameFromTitle, setAutoPopulateNameFromTitle] = useState(!isStillEditing);
+
   const TAGS_LIMIT = 5;
   const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath;
   const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === '');
@@ -302,6 +305,7 @@ function PublishForm(props: Props) {
         inProgress={isInProgress}
         setPublishMode={setMode}
         setPrevFileText={setPrevFileText}
+        autoPopulateName={autoPopulateNameFromTitle}
       />
       {!publishing && (
         <div className={classnames({ 'card--disabled': formDisabled })}>
@@ -346,7 +350,11 @@ function PublishForm(props: Props) {
             }
           />
 
-          <PublishName disabled={formDisabled} />
+          <PublishName
+            disabled={formDisabled}
+            autoPopulateName={autoPopulateNameFromTitle}
+            setAutoPopulateName={setAutoPopulateNameFromTitle}
+          />
           <PublishPrice disabled={formDisabled} />
           <PublishAdditionalOptions disabled={formDisabled} />
         </div>

ui/component/publishName/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { isNameValid } from 'lbry-redux';
 import { FormField } from 'component/common/form';
 import NameHelpText from './name-help-text';
@@ -19,6 +19,8 @@ type Props = {
   amountNeededForTakeover: number,
   prepareEdit: ({}, string) => void,
   updatePublishForm: ({}) => void,
+  autoPopulateName: boolean,
+  setAutoPopulateName: boolean => void,
 };
 
 function PublishName(props: Props) {
@@ -34,6 +36,8 @@ function PublishName(props: Props) {
     prepareEdit,
     updatePublishForm,
     balance,
+    autoPopulateName,
+    setAutoPopulateName,
   } = props;
   const [nameError, setNameError] = useState(undefined);
   const [bidError, setBidError] = useState(undefined);
@@ -44,6 +48,23 @@ function PublishName(props: Props) {
       prepareEdit(myClaimForUri, uri);
     }
   }
+  const handleNameChange = useCallback(
+    event => {
+      const newName = event.target.value;
+      const hasName = newName && newName.trim() !== '';
+      updatePublishForm({ name: newName });
+
+      // Don't autoPopulate name from title if user sets a custom name
+      if (hasName && autoPopulateName) {
+        setAutoPopulateName(false);
+      }
+      // Enable name autopopulation from title
+      if (!hasName && !autoPopulateName) {
+        setAutoPopulateName(true);
+      }
+    },
+    [autoPopulateName, setAutoPopulateName]
+  );
 
   useEffect(() => {
     let nameError;
@@ -85,13 +106,7 @@ function PublishName(props: Props) {
                 !channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/`
               }`}</div>
             </fieldset-section>
-            <FormField
-              type="text"
-              name="content_name"
-              value={name}
-              error={nameError}
-              onChange={event => updatePublishForm({ name: event.target.value })}
-            />
+            <FormField type="text" name="content_name" value={name} error={nameError} onChange={handleNameChange} />
           </fieldset-group>
           <div className="form-field__help">
             <NameHelpText