diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx
index 9e3cd1c..c674fde 100644
--- a/web/src/components/Add/AddDialog.jsx
+++ b/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(() => {
- if (originalHash) {
- setIsEditMode(true)
+ const updateTitleFromSource = useCallback(() => {
+ parseTorrentTitle(selectedFile || torrentSource, ({ parsedTitle, originalName }) => {
+ if (!originalName) return
- checkImageURL(posterUrl).then(correctImage => {
- correctImage ? setIsPosterUrlCorrect(true) : removePoster()
- })
- }
- // This is needed only on mount
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
+ setSkipDebounce(true)
+ setOriginalTorrentTitle(originalName)
+ setParsedTitle(parsedTitle)
+ })
+ }, [selectedFile, torrentSource])
+
+ const removePoster = () => {
+ setIsPosterUrlCorrect(false)
+ setPosterUrl('')
+ }
+
+ // 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) {
- parseTorrentTitle(selectedFile || torrentSource, ({ parsedTitle, originalName }) => {
- if (!parsedTitle) return
+ // if torrentSource is updated then we are getting title from the source
+ const torrentSourceChanged = torrentSource !== prevTorrentSourceState
+ if (!torrentSourceChanged) return
- setSkipDebounce(true)
- setTitle(originalName)
- setParsedTitle(parsedTitle)
- })
- }
- }, [prevTorrentSourceState, selectedFile, torrentSource])
+ updateTitleFromSource()
+ }, [prevTorrentSourceState, selectedFile, torrentSource, updateTitleFromSource])
+
+ const prevTitleState = usePreviousState(title)
useEffect(() => {
// if title exists and title was changed then search poster.
- const titleChanged = parsedTitle !== prevParsedTitleState
- if (!titleChanged) return
+ const titleChanged = title !== prevTitleState
+ if (!titleChanged && !parsedTitle) return
if (skipDebounce) {
- posterSearch(parsedTitle, posterSearchLanguage)
+ posterSearch(title || parsedTitle, posterSearchLanguage)
setSkipDebounce(false)
+ } else if (title === '') {
+ if (parsedTitle) {
+ posterSearch(parsedTitle, posterSearchLanguage)
+ } else {
+ removePoster()
+ }
} else {
- parsedTitle === '' ? removePoster() : delayedPosterSearch(parsedTitle, posterSearchLanguage)
+ delayedPosterSearch(title, posterSearchLanguage)
}
- }, [parsedTitle, prevParsedTitleState, delayedPosterSearch, posterSearch, posterSearchLanguage, skipDebounce])
-
- 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({
)}
diff --git a/web/src/components/Add/RightSideComponent.jsx b/web/src/components/Add/RightSideComponent.jsx
index 466a9dd..2a41287 100644
--- a/web/src/components/Add/RightSideComponent.jsx
+++ b/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 } }) => {
- setTitle(value)
- setParsedTitle(value)
- }
+ const handleTitleChange = ({ target: { value } }) => setTitle(value)
const handlePosterUrlChange = ({ target: { value } }) => {
setPosterUrl(value)
checkImageURL(value).then(setIsPosterUrlCorrect)
@@ -53,33 +54,44 @@ export default function RightSideComponent({
setIsUserInteractedWithPoster(true)
}
- const sourceIsHash = torrentSource.match(hashRegex) !== null
-
return (
+
setIsCustomTitleEnabled(true)}
+ onBlur={({ target: { value } }) => !value && setIsCustomTitleEnabled(false)}
value={title}
margin='dense'
- label={t(sourceIsHash ? 'AddDialogTorrentTitle' : 'Title')}
+ label='Использовать свое название (не обязательно)'
type='text'
fullWidth
InputProps={{
- endAdornment:
- title === '' ? null : (
-
- {
- setTitle('')
- setParsedTitle('')
- }}
- >
-
-
-
- ),
+ endAdornment: (
+
+ {
+ setTitle('')
+ setIsCustomTitleEnabled(!isCustomTitleEnabled)
+ updateTitleFromSource()
+ setIsUserInteractedWithPoster(false)
+ }}
+ >
+
+
+
+ ),
}}
/>
{
const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en'
setPosterSearchLanguage(newLanguage)
- posterSearch(parsedTitle, newLanguage, { shouldRefreshMainPoster: true })
+ posterSearch(isCustomTitleEnabled ? title : parsedTitle, newLanguage, { shouldRefreshMainPoster: true })
}}
showbutton={+isPosterUrlCorrect}
color='primary'
diff --git a/web/src/components/Add/style.js b/web/src/components/Add/style.js
index b286159..c1605f7 100644
--- a/web/src/components/Add/style.js
+++ b/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 {
diff --git a/web/src/locales/en/translation.json b/web/src/locales/en/translation.json
index fab7ad5..7bcc4f6 100644
--- a/web/src/locales/en/translation.json
+++ b/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",
diff --git a/web/src/locales/ru/translation.json b/web/src/locales/ru/translation.json
index ccfd7d0..d140e05 100644
--- a/web/src/locales/ru/translation.json
+++ b/web/src/locales/ru/translation.json
@@ -2,7 +2,6 @@
"About": "О сервере",
"Actions": "Действия",
"Add": "Добавить",
- "AddDialogTorrentTitle": "Название (оставьте пустым для имени из торрента)",
"AddFromLink": "Добавить",
"AddNewTorrent": "Добавить новый торрент",
"AddPosterLinkInput": "Ссылка на постер",