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(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}>
))}
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