diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 6e5bdbf..4c8d5b5 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -15,11 +15,11 @@ import { ButtonWrapper, Content, Header } from './style' import RightSideComponent from './RightSideComponent' import LeftSideComponent from './LeftSideComponent' -export default function AddDialog({ handleClose }) { +export default function AddDialog({ handleClose, hash: originalHash, title: originalTitle, poster: originalPoster }) { const { t } = useTranslation() - const [torrentSource, setTorrentSource] = useState('') - const [title, setTitle] = useState('') - const [posterUrl, setPosterUrl] = useState('') + const [torrentSource, setTorrentSource] = useState(originalHash || '') + const [title, setTitle] = useState(originalTitle || '') + const [posterUrl, setPosterUrl] = useState(originalPoster || '') const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false) const [isTorrentSourceCorrect, setIsTorrentSourceCorrect] = useState(false) const [posterList, setPosterList] = useState() @@ -29,9 +29,22 @@ export default function AddDialog({ handleClose }) { const [posterSearchLanguage, setPosterSearchLanguage] = useState(currentLang === 'ru' ? 'ru' : 'en') const [isLoadingButton, setIsLoadingButton] = useState(false) const [skipDebounce, setSkipDebounce] = useState(false) + const [isEditMode, setIsEditMode] = useState(false) const fullScreen = useMediaQuery('@media (max-width:930px)') + 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( () => (movieName, language, { shouldRefreshMainPoster = false } = {}) => { @@ -118,7 +131,9 @@ export default function AddDialog({ handleClose }) { const handleSave = () => { setIsLoadingButton(true) - if (selectedFile) { + if (isEditMode) { + axios.post(torrentsHost(), { action: 'set', hash: originalHash, title, poster: posterUrl }).finally(handleClose) + } else if (selectedFile) { // file save const data = new FormData() data.append('save', 'true') @@ -143,16 +158,18 @@ export default function AddDialog({ handleClose }) { fullWidth maxWidth='md' > -
{t('AddNewTorrent')}
+
{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}
- - + + {!isEditMode && ( + + )} - {isLoadingButton ? : t('Add')} + {isLoadingButton ? : t(isEditMode ? 'Save' : 'Add')} diff --git a/web/src/components/Add/RightSideComponent.jsx b/web/src/components/Add/RightSideComponent.jsx index b76e917..75da6f0 100644 --- a/web/src/components/Add/RightSideComponent.jsx +++ b/web/src/components/Add/RightSideComponent.jsx @@ -1,5 +1,4 @@ import { useTranslation } from 'react-i18next' -import { v4 as uuidv4 } from 'uuid' import { NoImageIcon } from 'icons' import { TextField } from '@material-ui/core' @@ -71,7 +70,7 @@ export default function RightSideComponent({ ?.filter(url => url !== posterUrl) .slice(0, 12) .map(url => ( - userChangesPosterUrl(url)} key={uuidv4()}> + userChangesPosterUrl(url)} key={url}> poster ))} diff --git a/web/src/components/Add/style.js b/web/src/components/Add/style.js index 5374a5f..b286159 100644 --- a/web/src/components/Add/style.js +++ b/web/src/components/Add/style.js @@ -13,16 +13,23 @@ export const Header = styled.div` ` export const Content = styled.div` - background: linear-gradient(145deg, #e4f6ed, #b5dec9); - flex: 1; - display: grid; - grid-template-columns: repeat(2, 1fr); - border-bottom: 1px solid rgba(0, 0, 0, 0.12); - overflow: auto; + ${({ isEditMode }) => css` + background: linear-gradient(145deg, #e4f6ed, #b5dec9); + flex: 1; + display: grid; + grid-template-columns: repeat(${isEditMode ? '1' : '2'}, 1fr); + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + overflow: auto; - @media (max-width: 930px) { - grid-template-columns: 1fr; - } + @media (max-width: 540px) { + ${'' /* Just for bug fixing on small screens */} + overflow: scroll; + } + + @media (max-width: 930px) { + grid-template-columns: 1fr; + } + `} ` export const RightSide = styled.div` diff --git a/web/src/components/TorrentCard/index.jsx b/web/src/components/TorrentCard/index.jsx index a1be75a..9dbab62 100644 --- a/web/src/components/TorrentCard/index.jsx +++ b/web/src/components/TorrentCard/index.jsx @@ -1,6 +1,11 @@ import 'fontsource-roboto' import { forwardRef, memo, useState } from 'react' -import { UnfoldMore as UnfoldMoreIcon, Close as CloseIcon, Delete as DeleteIcon } from '@material-ui/icons' +import { + UnfoldMore as UnfoldMoreIcon, + Edit as EditIcon, + Close as CloseIcon, + Delete as DeleteIcon, +} from '@material-ui/icons' import { getPeerString, humanizeSize, shortenText } from 'utils/Utils' import { torrentsHost } from 'utils/Hosts' import { NoImageIcon } from 'icons' @@ -11,6 +16,7 @@ import { Button, DialogActions, DialogTitle, useMediaQuery, useTheme } from '@ma import axios from 'axios' import ptt from 'parse-torrent-title' import { useTranslation } from 'react-i18next' +import AddDialog from 'components/Add/AddDialog' import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription, TorrentCardPoster } from './style' @@ -36,6 +42,10 @@ const Torrent = ({ torrent }) => { const parsedTitle = (title || name) && ptt.parse(title || name).title + const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) + const handleClickOpenEditDialog = () => setIsEditDialogOpen(true) + const handleCloseEditDialog = () => setIsEditDialogOpen(false) + return ( <> @@ -49,6 +59,11 @@ const Torrent = ({ torrent }) => { {t('Details')} + + + {t('Edit')} + + dropTorrent(torrent)}> {t('Drop')} @@ -118,6 +133,8 @@ const Torrent = ({ torrent }) => { + + {isEditDialogOpen && } ) } diff --git a/web/src/components/TorrentCard/style.js b/web/src/components/TorrentCard/style.js index 7695aba..eb696bb 100644 --- a/web/src/components/TorrentCard/style.js +++ b/web/src/components/TorrentCard/style.js @@ -66,7 +66,11 @@ export const TorrentCardButtons = styled.div` gap: 10px; @media (max-width: 1260px), (max-height: 500px) { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); + } + + @media (max-width: 340px) { + gap: 5px; } ` export const TorrentCardDescription = styled.div` @@ -165,10 +169,13 @@ export const StyledButton = styled.button` text-transform: uppercase; background: #268757; color: #fff; - font-size: 1rem; + font-size: 0.9rem; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; letter-spacing: 0.009em; - padding: 10px 20px; + padding: 0 12px; + svg { + width: 20px; + } :hover { background: #2a7e54; @@ -179,28 +186,21 @@ export const StyledButton = styled.button` } @media (max-width: 1260px), (max-height: 500px) { - padding: 5px 10px; - font-size: 0.8rem; - - svg { - width: 20px; - } - } - - @media (max-width: 770px) { - font-size: 0.7rem; - - svg { - width: 15px; - } - } - - @media (max-width: 420px) { padding: 7px 10px; justify-content: center; + font-size: 0.8rem; svg { display: none; } } + + @media (max-width: 770px) { + font-size: 0.7rem; + } + + @media (max-width: 420px) { + font-size: 0.6rem; + padding: 7px 5px; + } ` diff --git a/web/src/locales/en/translation.json b/web/src/locales/en/translation.json index 98a1532..6e0b6d3 100644 --- a/web/src/locales/en/translation.json +++ b/web/src/locales/en/translation.json @@ -4,6 +4,7 @@ "Add": "Add", "AddFromLink": "Add from Link", "AddNewTorrent": "Add new torrent", + "EditTorrent": "Edit torrent", "AddRetrackers": "Add retrackers", "Buffer": "Preload Buffer / Cache", "BufferNote": "Enable “Preload Buffer” in settings to see cache loading progress", @@ -110,5 +111,6 @@ "WrongTorrentSource": "Wrong torrent source", "ScrollDown": "scroll down", "Cache": "Cache", - "Data": "Data" + "Data": "Data", + "Edit": "Edit" } \ No newline at end of file diff --git a/web/src/locales/ru/translation.json b/web/src/locales/ru/translation.json index 8b92b28..2fce006 100644 --- a/web/src/locales/ru/translation.json +++ b/web/src/locales/ru/translation.json @@ -4,6 +4,7 @@ "Add": "Добавить", "AddFromLink": "Добавить", "AddNewTorrent": "Добавить новый торрент", + "EditTorrent": "Изменить торрент", "AddRetrackers": "Добавлять", "Buffer": "Предзагрузка / Кеш", "BufferNote": "Включите «Наполнять кеш перед началом воспроизведения» в настройках для показа заполнения кеша", @@ -110,5 +111,6 @@ "WrongTorrentSource": "Неправильный torrent источник", "ScrollDown": "прокрутить вниз", "Cache": "Кеш", - "Data": "Данные" + "Data": "Данные", + "Edit": "Изменить" } \ No newline at end of file