added support of original title in add dialog

web/src/components/Add/AddDialog.jsx

@@ -25,6 +25,7 @@ export default function AddDialog({
   const { t } = useTranslation()
   const [torrentSource, setTorrentSource] = useState(originalHash || '')
   const [title, setTitle] = useState(originalTitle || '')
+  const [parsedTitle, setParsedTitle] = useState('')
   const [posterUrl, setPosterUrl] = useState(originalPoster || '')
   const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false)
   const [isTorrentSourceCorrect, setIsTorrentSourceCorrect] = useState(false)
@@ -85,7 +86,7 @@ export default function AddDialog({
 
   const delayedPosterSearch = useMemo(() => debounce(posterSearch, 700), [posterSearch])
 
-  const prevTitleState = usePreviousState(title)
+  const prevParsedTitleState = usePreviousState(parsedTitle)
   const prevTorrentSourceState = usePreviousState(torrentSource)
 
   useEffect(() => {
@@ -98,27 +99,28 @@ export default function AddDialog({
     setIsTorrentSourceCorrect(true)
 
     if (torrentSourceChanged) {
-      parseTorrentTitle(selectedFile || torrentSource, newTitle => {
-        if (!newTitle) return
+      parseTorrentTitle(selectedFile || torrentSource, ({ parsedTitle, originalName }) => {
+        if (!parsedTitle) return
 
         setSkipDebounce(true)
-        setTitle(newTitle)
+        setTitle(originalName)
+        setParsedTitle(parsedTitle)
       })
     }
   }, [prevTorrentSourceState, selectedFile, torrentSource])
 
   useEffect(() => {
     // if title exists and title was changed then search poster.
-    const titleChanged = title !== prevTitleState
+    const titleChanged = parsedTitle !== prevParsedTitleState
     if (!titleChanged) return
 
     if (skipDebounce) {
-      posterSearch(title, posterSearchLanguage)
+      posterSearch(parsedTitle, posterSearchLanguage)
       setSkipDebounce(false)
     } else {
-      title === '' ? removePoster() : delayedPosterSearch(title, posterSearchLanguage)
+      parsedTitle === '' ? removePoster() : delayedPosterSearch(parsedTitle, posterSearchLanguage)
     }
-  }, [title, prevTitleState, delayedPosterSearch, posterSearch, posterSearchLanguage, skipDebounce])
+  }, [parsedTitle, prevParsedTitleState, delayedPosterSearch, posterSearch, posterSearchLanguage, skipDebounce])
 
   const removePoster = () => {
     setIsPosterUrlCorrect(false)
@@ -128,6 +130,7 @@ export default function AddDialog({
   useEffect(() => {
     if (!selectedFile && !torrentSource) {
       setTitle('')
+      setParsedTitle('')
       setPosterList()
       removePoster()
       setIsUserInteractedWithPoster(false)
@@ -186,12 +189,14 @@ export default function AddDialog({
 
         <RightSideComponent
           setTitle={setTitle}
+          setParsedTitle={setParsedTitle}
           setPosterUrl={setPosterUrl}
           setIsPosterUrlCorrect={setIsPosterUrlCorrect}
           setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
           setPosterList={setPosterList}
           isTorrentSourceCorrect={isTorrentSourceCorrect}
           title={title}
+          parsedTitle={parsedTitle}
           posterUrl={posterUrl}
           isPosterUrlCorrect={isPosterUrlCorrect}
           posterList={posterList}

web/src/components/Add/RightSideComponent.jsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { NoImageIcon } from 'icons'
-import { TextField } from '@material-ui/core'
+import { IconButton, InputAdornment, TextField } from '@material-ui/core'
+import { HighlightOff as HighlightOffIcon } from '@material-ui/icons'
 
 import {
   ClearPosterButton,
@@ -12,16 +13,18 @@ import {
   PosterWrapper,
   RightSideContainer,
 } from './style'
-import { checkImageURL } from './helpers'
+import { checkImageURL, hashRegex } from './helpers'
 
 export default function RightSideComponent({
   setTitle,
+  setParsedTitle,
   setPosterUrl,
   setIsPosterUrlCorrect,
   setIsUserInteractedWithPoster,
   setPosterList,
   isTorrentSourceCorrect,
   title,
+  parsedTitle,
   posterUrl,
   isPosterUrlCorrect,
   posterList,
@@ -34,7 +37,10 @@ export default function RightSideComponent({
 }) {
   const { t } = useTranslation()
 
-  const handleTitleChange = ({ target: { value } }) => setTitle(value)
+  const handleTitleChange = ({ target: { value } }) => {
+    setTitle(value)
+    setParsedTitle(value)
+  }
   const handlePosterUrlChange = ({ target: { value } }) => {
     setPosterUrl(value)
     checkImageURL(value).then(setIsPosterUrlCorrect)
@@ -47,10 +53,35 @@ export default function RightSideComponent({
     setIsUserInteractedWithPoster(true)
   }
 
+  const sourceIsHash = torrentSource.match(hashRegex) !== null
+
   return (
     <RightSide>
       <RightSideContainer isHidden={!isTorrentSourceCorrect}>
-        <TextField onChange={handleTitleChange} value={title} margin='dense' label={t('Title')} type='text' fullWidth />
+        <TextField
+          onChange={handleTitleChange}
+          value={title}
+          margin='dense'
+          label={t(sourceIsHash ? 'AddDialogTorrentTitle' : 'Title')}
+          type='text'
+          fullWidth
+          InputProps={{
+            endAdornment:
+              title === '' ? null : (
+                <InputAdornment position='end'>
+                  <IconButton
+                    aria-label='clear input'
+                    onClick={() => {
+                      setTitle('')
+                      setParsedTitle('')
+                    }}
+                  >
+                    <HighlightOffIcon />
+                  </IconButton>
+                </InputAdornment>
+              ),
+          }}
+        />
         <TextField
           onChange={handlePosterUrlChange}
           value={posterUrl}
@@ -81,7 +112,7 @@ export default function RightSideComponent({
               onClick={() => {
                 const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en'
                 setPosterSearchLanguage(newLanguage)
-                posterSearch(title, newLanguage, { shouldRefreshMainPoster: true })
+                posterSearch(parsedTitle, newLanguage, { shouldRefreshMainPoster: true })
               }}
               showbutton={+isPosterUrlCorrect}
               color='primary'

web/src/components/Add/helpers.js

@@ -32,14 +32,14 @@ export const checkImageURL = async url => {
 }
 
 const magnetRegex = /^magnet:\?xt=urn:[a-z0-9].*/i
-const hashRegex = /^\b[0-9a-f]{32}\b$|^\b[0-9a-f]{40}\b$|^\b[0-9a-f]{64}\b$/i
+export const hashRegex = /^\b[0-9a-f]{32}\b$|^\b[0-9a-f]{40}\b$|^\b[0-9a-f]{64}\b$/i
 const torrentRegex = /^.*\.(torrent)$/i
 export const chechTorrentSource = source =>
   source.match(hashRegex) !== null || source.match(magnetRegex) !== null || source.match(torrentRegex) !== null
 
 export const parseTorrentTitle = (parsingSource, callback) => {
   parseTorrent.remote(parsingSource, (err, { name, files } = {}) => {
-    if (!name || err) return callback(null)
+    if (!name || err) return callback({ parsedTitle: null, originalName: null })
 
     const torrentName = ptt.parse(name).title
     const nameOfFileInsideTorrent = files ? ptt.parse(files[0].name).title : null
@@ -50,6 +50,6 @@ export const parseTorrentTitle = (parsingSource, callback) => {
       newTitle = torrentName.length < nameOfFileInsideTorrent.length ? torrentName : nameOfFileInsideTorrent
     }
 
-    callback(newTitle)
+    callback({ parsedTitle: newTitle, originalName: name })
   })
 }