support for original torrent name in add dialog

web/src/components/Add/AddDialog.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import { torrentsHost, torrentUploadHost } from 'utils/Hosts'
@@ -9,6 +9,8 @@ import useChangeLanguage from 'utils/useChangeLanguage'
 import { useMediaQuery } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import usePreviousState from 'utils/usePreviousState'
+import parseTorrent from 'parse-torrent'
+import ptt from 'parse-torrent-title'
 
 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'
@@ -25,6 +27,7 @@ export default function AddDialog({
   const { t } = useTranslation()
   const [torrentSource, setTorrentSource] = useState(originalHash || '')
   const [title, setTitle] = useState(originalTitle || '')
+  const [originalTorrentTitle, setOriginalTorrentTitle] = useState('')
   const [parsedTitle, setParsedTitle] = useState('')
   const [posterUrl, setPosterUrl] = useState(originalPoster || '')
   const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false)
@@ -37,20 +40,36 @@ export default function AddDialog({
   const [isLoadingButton, setIsLoadingButton] = useState(false)
   const [skipDebounce, setSkipDebounce] = useState(false)
   const [isEditMode, setIsEditMode] = useState(false)
+  const [isCustomTitleEnabled, setIsCustomTitleEnabled] = useState(false)
 
   const fullScreen = useMediaQuery('@media (max-width:930px)')
 
-  useEffect(() => {
+  const updateTitleFromSource = useCallback(() => {
-    if (originalHash) {
+    parseTorrentTitle(selectedFile || torrentSource, ({ parsedTitle, originalName }) => {
-      setIsEditMode(true)
+      if (!originalName) return
 
-      checkImageURL(posterUrl).then(correctImage => {
+      setSkipDebounce(true)
-        correctImage ? setIsPosterUrlCorrect(true) : removePoster()
+      setOriginalTorrentTitle(originalName)
+      setParsedTitle(parsedTitle)
     })
+  }, [selectedFile, torrentSource])
+
+  const removePoster = () => {
+    setIsPosterUrlCorrect(false)
+    setPosterUrl('')
   }
-    // This is needed only on mount
+
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  // useEffect(() => {
-  }, [])
+  //   if (originalHash) {
+  //     setIsEditMode(true)
+
+  //     checkImageURL(posterUrl).then(correctImage => {
+  //       correctImage ? setIsPosterUrlCorrect(true) : removePoster()
+  //     })
+  //   }
+  //   // This is needed only on mount
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [])
 
   const posterSearch = useMemo(
     () =>
@@ -86,51 +105,50 @@ export default function AddDialog({
 
   const delayedPosterSearch = useMemo(() => debounce(posterSearch, 700), [posterSearch])
 
-  const prevParsedTitleState = usePreviousState(parsedTitle)
   const prevTorrentSourceState = usePreviousState(torrentSource)
 
   useEffect(() => {
-    // if torrentSource is updated then we are checking that source is valid and getting title from the source
-    const torrentSourceChanged = torrentSource !== prevTorrentSourceState
-
     const isCorrectSource = chechTorrentSource(torrentSource)
     if (!isCorrectSource) return setIsTorrentSourceCorrect(false)
 
     setIsTorrentSourceCorrect(true)
 
-    if (torrentSourceChanged) {
+    // if torrentSource is updated then we are getting title from the source
-      parseTorrentTitle(selectedFile || torrentSource, ({ parsedTitle, originalName }) => {
+    const torrentSourceChanged = torrentSource !== prevTorrentSourceState
-        if (!parsedTitle) return
+    if (!torrentSourceChanged) return
 
-        setSkipDebounce(true)
+    updateTitleFromSource()
-        setTitle(originalName)
+  }, [prevTorrentSourceState, selectedFile, torrentSource, updateTitleFromSource])
-        setParsedTitle(parsedTitle)
+
-      })
+  const prevTitleState = usePreviousState(title)
-    }
-  }, [prevTorrentSourceState, selectedFile, torrentSource])
 
   useEffect(() => {
     // if title exists and title was changed then search poster.
-    const titleChanged = parsedTitle !== prevParsedTitleState
+    const titleChanged = title !== prevTitleState
-    if (!titleChanged) return
+    if (!titleChanged && !parsedTitle) return
 
     if (skipDebounce) {
-      posterSearch(parsedTitle, posterSearchLanguage)
+      posterSearch(title || parsedTitle, posterSearchLanguage)
       setSkipDebounce(false)
+    } else if (title === '') {
+      if (parsedTitle) {
+        posterSearch(parsedTitle, posterSearchLanguage)
       } else {
-      parsedTitle === '' ? removePoster() : delayedPosterSearch(parsedTitle, posterSearchLanguage)
+        removePoster()
       }
-  }, [parsedTitle, prevParsedTitleState, delayedPosterSearch, posterSearch, posterSearchLanguage, skipDebounce])
+    } else {
-
+      delayedPosterSearch(title, posterSearchLanguage)
-  const removePoster = () => {
-    setIsPosterUrlCorrect(false)
-    setPosterUrl('')
     }
+    // title === '' && !parsedTitle
+    //   ? removePoster()
+    //   : title === '' && parsedTitle
+    //   ? posterSearch(parsedTitle, posterSearchLanguage)
+    //   : delayedPosterSearch(title, posterSearchLanguage)
+  }, [title, parsedTitle, prevTitleState, delayedPosterSearch, posterSearch, posterSearchLanguage, skipDebounce])
 
   useEffect(() => {
     if (!selectedFile && !torrentSource) {
       setTitle('')
-      setParsedTitle('')
       setPosterList()
       removePoster()
       setIsUserInteractedWithPoster(false)
@@ -188,8 +206,8 @@ export default function AddDialog({
         )}
 
         <RightSideComponent
+          originalTorrentTitle={originalTorrentTitle}
           setTitle={setTitle}
-          setParsedTitle={setParsedTitle}
           setPosterUrl={setPosterUrl}
           setIsPosterUrlCorrect={setIsPosterUrlCorrect}
           setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
@@ -205,7 +223,10 @@ export default function AddDialog({
           setPosterSearchLanguage={setPosterSearchLanguage}
           posterSearch={posterSearch}
           removePoster={removePoster}
+          updateTitleFromSource={updateTitleFromSource}
           torrentSource={torrentSource}
+          isCustomTitleEnabled={isCustomTitleEnabled}
+          setIsCustomTitleEnabled={setIsCustomTitleEnabled}
         />
       </Content>
 

web/src/components/Add/RightSideComponent.jsx

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { NoImageIcon } from 'icons'
 import { IconButton, InputAdornment, TextField } from '@material-ui/core'
-import { HighlightOff as HighlightOffIcon } from '@material-ui/icons'
+import { CheckBox as CheckBoxIcon } from '@material-ui/icons'
+import { useState } from 'react'
 
 import {
   ClearPosterButton,
@@ -13,11 +14,10 @@ import {
   PosterWrapper,
   RightSideContainer,
 } from './style'
-import { checkImageURL, hashRegex } from './helpers'
+import { checkImageURL } from './helpers'
 
 export default function RightSideComponent({
   setTitle,
-  setParsedTitle,
   setPosterUrl,
   setIsPosterUrlCorrect,
   setIsUserInteractedWithPoster,
@@ -34,13 +34,14 @@ export default function RightSideComponent({
   posterSearch,
   removePoster,
   torrentSource,
+  originalTorrentTitle,
+  updateTitleFromSource,
+  isCustomTitleEnabled,
+  setIsCustomTitleEnabled,
 }) {
   const { t } = useTranslation()
 
-  const handleTitleChange = ({ target: { value } }) => {
+  const handleTitleChange = ({ target: { value } }) => setTitle(value)
-    setTitle(value)
-    setParsedTitle(value)
-  }
   const handlePosterUrlChange = ({ target: { value } }) => {
     setPosterUrl(value)
     checkImageURL(value).then(setIsPosterUrlCorrect)
@@ -53,30 +54,41 @@ export default function RightSideComponent({
     setIsUserInteractedWithPoster(true)
   }
 
-  const sourceIsHash = torrentSource.match(hashRegex) !== null
-
   return (
     <RightSide>
       <RightSideContainer isHidden={!isTorrentSourceCorrect}>
+        <TextField
+          value={originalTorrentTitle}
+          margin='dense'
+          // label={t('Title')}
+          label='Оригинальное название торрента'
+          type='text'
+          fullWidth
+          disabled={isCustomTitleEnabled}
+          InputProps={{ readOnly: true }}
+        />
         <TextField
           onChange={handleTitleChange}
+          onFocus={() => setIsCustomTitleEnabled(true)}
+          onBlur={({ target: { value } }) => !value && setIsCustomTitleEnabled(false)}
           value={title}
           margin='dense'
-          label={t(sourceIsHash ? 'AddDialogTorrentTitle' : 'Title')}
+          label='Использовать свое название (не обязательно)'
           type='text'
           fullWidth
           InputProps={{
-            endAdornment:
+            endAdornment: (
-              title === '' ? null : (
               <InputAdornment position='end'>
                 <IconButton
-                    aria-label='clear input'
+                  style={{ padding: '0 0 0 7px' }}
                   onClick={() => {
                     setTitle('')
-                      setParsedTitle('')
+                    setIsCustomTitleEnabled(!isCustomTitleEnabled)
+                    updateTitleFromSource()
+                    setIsUserInteractedWithPoster(false)
                   }}
                 >
-                    <HighlightOffIcon />
+                  <CheckBoxIcon style={{ color: isCustomTitleEnabled ? 'green' : 'gray' }} />
                 </IconButton>
               </InputAdornment>
             ),
@@ -112,7 +124,7 @@ export default function RightSideComponent({
               onClick={() => {
                 const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en'
                 setPosterSearchLanguage(newLanguage)
-                posterSearch(parsedTitle, newLanguage, { shouldRefreshMainPoster: true })
+                posterSearch(isCustomTitleEnabled ? title : parsedTitle, newLanguage, { shouldRefreshMainPoster: true })
               }}
               showbutton={+isPosterUrlCorrect}
               color='primary'

web/src/components/Add/style.js

@@ -14,6 +14,7 @@ export const Header = styled.div`
 
 export const Content = styled.div`
   ${({ isEditMode }) => css`
+    height: 550px;
     background: linear-gradient(145deg, #e4f6ed, #b5dec9);
     flex: 1;
     display: grid;
@@ -38,7 +39,7 @@ export const RightSide = styled.div`
 
 export const RightSideContainer = styled.div`
   ${({ isHidden, notificationMessage, isError }) => css`
-    height: 455px;
+    height: 530px;
 
     ${notificationMessage &&
     css`
@@ -54,7 +55,7 @@ export const RightSideContainer = styled.div`
         background: ${isError ? '#cda184' : '#84cda7'};
         padding: 10px 15px;
         position: absolute;
-        top: 50%;
+        top: 52%;
         left: 50%;
         transform: translate(-50%, -50%);
         border-radius: 5px;
@@ -88,7 +89,7 @@ export const LeftSideBottomSectionNoFile = styled.div`
   ${({ isDragActive }) => isDragActive && `border: 4px dashed green`};
 
   justify-items: center;
-  grid-template-rows: 100px 1fr;
+  grid-template-rows: 130px 1fr;
   cursor: pointer;
 
   :hover {

web/src/locales/en/translation.json

@@ -2,7 +2,6 @@
   "About": "About",
   "Actions": "Actions",
   "Add": "Add",
-  "AddDialogTorrentTitle": "Title (empty for default torrent name)",
   "AddFromLink": "Add from Link",
   "AddNewTorrent": "Add new torrent",
   "AddPosterLinkInput": "Poster link",

web/src/locales/ru/translation.json

@@ -2,7 +2,6 @@
   "About": "О сервере",
   "Actions": "Действия",
   "Add": "Добавить",
-  "AddDialogTorrentTitle": "Название (оставьте пустым для имени из торрента)",
   "AddFromLink": "Добавить",
   "AddNewTorrent": "Добавить новый торрент",
   "AddPosterLinkInput": "Ссылка на постер",