From abdecd3cbdeeab832a10c549fee10b739f9bcf14 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 17 Jun 2021 00:35:46 +0300 Subject: [PATCH] support for original torrent name in add dialog --- web/src/components/Add/AddDialog.jsx | 93 ++++++++++++------- web/src/components/Add/RightSideComponent.jsx | 62 ++++++++----- web/src/components/Add/style.js | 7 +- web/src/locales/en/translation.json | 1 - web/src/locales/ru/translation.json | 1 - 5 files changed, 98 insertions(+), 66 deletions(-) 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": "Ссылка на постер",