diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx index 487420414..001479b04 100644 --- a/ui/component/publishFile/view.jsx +++ b/ui/component/publishFile/view.jsx @@ -35,6 +35,7 @@ type Props = { autoPopulateName: boolean, setPublishMode: string => void, setPrevFileText: string => void, + setAutoPopulateName: boolean => void, }; function PublishFile(props: Props) { @@ -60,6 +61,7 @@ function PublishFile(props: Props) { setPublishMode, setPrevFileText, autoPopulateName, + setAutoPopulateName, } = props; const ffmpegAvail = ffmpegStatus.available; @@ -217,15 +219,13 @@ function PublishFile(props: Props) { return newName.replace(INVALID_URI_CHARS, '-'); } - function handleTitleChange(e) { - const newTitle = e.target.value; - const noName = !name || name.trim() === ''; - const hasTitle = newTitle && newTitle.trim() !== ''; + function handleTitleChange(event) { + const title = event.target.value; // Update title - updatePublishForm({ title: newTitle }); - // Auto-populate name from title - if (hasTitle && (noName || autoPopulateName)) { - updatePublishForm({ name: parseName(newTitle) }); + updatePublishForm({ title }); + // Auto populate name from title + if (autoPopulateName) { + updatePublishForm({ name: parseName(title) }); } } @@ -313,6 +313,12 @@ function PublishFile(props: Props) { if (!isStillEditing) { publishFormParams.name = parseName(fileName); } + + // Prevent name autopopulation from title + if (autoPopulateName) { + setAutoPopulateName(false); + } + // File path is not supported on web for security reasons so we use the name instead. setCurrentFile(file.path || file.name); updatePublishForm(publishFormParams); diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx index f5b79a866..5da4b5e60 100644 --- a/ui/component/publishForm/view.jsx +++ b/ui/component/publishForm/view.jsx @@ -64,7 +64,6 @@ type Props = { licenseType: string, otherLicenseDescription: ?string, licenseUrl: ?string, - uri: ?string, useLBRYUploader: ?boolean, publishing: boolean, balance: number, @@ -86,6 +85,9 @@ function PublishForm(props: Props) { const [mode, setMode] = React.useState(PUBLISH_MODES.FILE); const [autoSwitchMode, setAutoSwitchMode] = React.useState(true); + // Used to checl if the url name has changed: + // A new file needs to be provided + const [prevName, setPrevName] = React.useState(false); // Used to checl if the file has been modified by user const [fileEdited, setFileEdited] = React.useState(false); const [prevFileText, setPrevFileText] = React.useState(''); @@ -124,9 +126,11 @@ function PublishForm(props: Props) { const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === ''); const formDisabled = (fileFormDisabled && !editingURI) || emptyPostError || publishing; const isInProgress = filePath || editingURI || name || title; + // Editing content info const uri = myClaimForUri ? myClaimForUri.permanent_url : undefined; const fileMimeType = myClaimForUri ? myClaimForUri.value.source.media_type : undefined; + const nameEdited = isStillEditing && name !== prevName; // If they are editing, they don't need a new file chosen const formValidLessFile = @@ -159,6 +163,15 @@ function PublishForm(props: Props) { } }, [thumbnail, resetThumbnailStatus]); + // Save current name of the editing claim + useEffect(() => { + if (isStillEditing && (!prevName || !prevName.trim() === '')) { + if (name !== prevName) { + setPrevName(name); + } + } + }, [name, prevName, setPrevName, isStillEditing]); + // Check for content changes on the text editor useEffect(() => { if (!fileEdited && fileText !== prevFileText && fileText !== '') { @@ -238,9 +251,9 @@ function PublishForm(props: Props) { if (mode === PUBLISH_MODES.POST) { let outputFile = filePath; - // If user modified content on the text editor: + // If user modified content on the text editor or editing name has changed: // Save changes and updat file path - if (fileEdited) { + if (fileEdited || nameEdited) { // @if TARGET='app' outputFile = await saveFileChanges(); // @endif @@ -306,6 +319,7 @@ function PublishForm(props: Props) { setPublishMode={setMode} setPrevFileText={setPrevFileText} autoPopulateName={autoPopulateNameFromTitle} + setAutoPopulateName={setAutoPopulateNameFromTitle} /> {!publishing && (