diff --git a/web/package.json b/web/package.json index 51d7989..03f30eb 100644 --- a/web/package.json +++ b/web/package.json @@ -18,6 +18,7 @@ "react-copy-to-clipboard": "^5.0.3", "react-div-100vh": "^0.6.0", "react-dom": "^17.0.2", + "react-dropzone": "^11.3.2", "react-i18next": "^11.10.0", "react-konva": "^17.0.2-4", "react-measure": "^2.5.2", diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index d703256..fc36c53 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from 'react' +import { useCallback, useMemo, useState } from 'react' import Button from '@material-ui/core/Button' import TextField from '@material-ui/core/TextField' import Dialog from '@material-ui/core/Dialog' @@ -11,6 +11,7 @@ import debounce from 'lodash/debounce' import { v4 as uuidv4 } from 'uuid' import useChangeLanguage from 'utils/useChangeLanguage' import { Cancel as CancelIcon } from '@material-ui/icons' +import { useDropzone } from 'react-dropzone' const Header = styled.div` background: #00a572; @@ -46,7 +47,7 @@ const RightSide = styled.div` ` const RightSideBottomSectionBasicStyles = css` - transition: all 0.3s; + transition: transform 0.3s; padding: 20px; height: 100%; display: grid; @@ -54,6 +55,9 @@ const RightSideBottomSectionBasicStyles = css` const RightSideBottomSectionNoFile = styled.div` ${RightSideBottomSectionBasicStyles} + border: 4px dashed transparent; + + ${({ isDragActive }) => isDragActive && `border: 4px dashed green`}; justify-items: center; grid-template-rows: 100px 1fr; @@ -103,11 +107,6 @@ const IconWrapper = styled.div` } ` -const FileUploadLabel = styled.label` - transition: all 0.3s; - flex: 1; -` - const RightSideTopSection = styled.div` background: #fff; padding: 0 20px 20px 20px; @@ -115,7 +114,7 @@ const RightSideTopSection = styled.div` ${({ active }) => active && css` - + ${FileUploadLabel} { + + ${RightSideBottomSectionNoFile} { box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5); } `}; @@ -238,6 +237,16 @@ export default function AddDialog({ handleClose }) { const [currentLang] = useChangeLanguage() const [selectedFile, setSelectedFile] = useState() + const handleCapture = useCallback(files => { + const [file] = files + if (!file) return + + setSelectedFile(file) + setTorrentSource(file.name) + }, []) + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: handleCapture, accept: '.torrent' }) + const removePoster = () => { setIsPosterUrlCorrect(false) setPosterUrl('') @@ -296,14 +305,6 @@ export default function AddDialog({ handleClose }) { } } - const handleCapture = ({ target: { files } }) => { - const [file] = files - if (!file) return - - setSelectedFile(file) - setTorrentSource(file.name) - } - const clearSelectedFile = () => { setSelectedFile() setTorrentSource('') @@ -396,24 +397,15 @@ export default function AddDialog({ handleClose }) { ) : ( - - + + + {t('AppendFile.Or')} - - {t('AppendFile.Or')} - - - - {t('AppendFile.ClickOrDrag')} - - - + + + {t('AppendFile.ClickOrDrag')} + + )} diff --git a/web/src/components/DialogTorrentDetailsContent/Table/[kinozal.tv]id1846470.torrent b/web/src/components/DialogTorrentDetailsContent/Table/[kinozal.tv]id1846470.torrent new file mode 100644 index 0000000..099c998 Binary files /dev/null and b/web/src/components/DialogTorrentDetailsContent/Table/[kinozal.tv]id1846470.torrent differ diff --git a/web/src/locales/en/translation.json b/web/src/locales/en/translation.json index 45c37e4..bbe4607 100644 --- a/web/src/locales/en/translation.json +++ b/web/src/locales/en/translation.json @@ -99,7 +99,7 @@ "Viewed": "Viewed", "AppendFile": { "Or": "OR", - "ClickOrDrag": "CLICK / DRAG & DROP" + "ClickOrDrag": "CLICK / DRAG & DROP (.torrent)" }, "TorrentSourceOptions": "magnet / hash / .torrent file link", "Clear": "Clear" diff --git a/web/src/locales/ru/translation.json b/web/src/locales/ru/translation.json index db4d8df..cf96793 100644 --- a/web/src/locales/ru/translation.json +++ b/web/src/locales/ru/translation.json @@ -99,7 +99,7 @@ "Viewed": "Просм.", "AppendFile": { "Or": "ИЛИ", - "ClickOrDrag": "НАЖМИТЕ / ПЕРЕТАЩИТЕ ФАЙЛ" + "ClickOrDrag": "НАЖМИТЕ / ПЕРЕТАЩИТЕ ФАЙЛ (.torrent)" }, "TorrentSourceOptions": "магнитная ссылка / хэш / ссылка на .torrent файл", "Clear": "Очистить" diff --git a/web/yarn.lock b/web/yarn.lock index ab99e80..d9a913d 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -2730,6 +2730,11 @@ atob@^2.1.2: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== +attr-accept@^2.2.1: + version "2.2.2" + resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b" + integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg== + autoprefixer@^9.6.1: version "9.8.6" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f" @@ -5591,6 +5596,13 @@ file-loader@6.1.1: loader-utils "^2.0.0" schema-utils "^3.0.0" +file-selector@^0.2.2: + version "0.2.4" + resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80" + integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA== + dependencies: + tslib "^2.0.3" + file-uri-to-path@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd" @@ -10322,6 +10334,15 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-dropzone@^11.3.2: + version "11.3.2" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.3.2.tgz#2efb6af800a4779a9daa1e7ba1f8d51d0ab862d7" + integrity sha512-Z0l/YHcrNK1r85o6RT77Z5XgTARmlZZGfEKBl3tqTXL9fZNQDuIdRx/J0QjvR60X+yYu26dnHeaG2pWU+1HHvw== + dependencies: + attr-accept "^2.2.1" + file-selector "^0.2.2" + prop-types "^15.7.2" + react-error-overlay@^6.0.9: version "6.0.9" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"