Add category associated to each torrent

2025-12-19 13:36:09 +05:00 · 2023-11-22 14:08:10 +01:00
parent 286609acec
commit 8c92856595
22 changed files with 171 additions and 70 deletions
--- a/web/src/components/Add/AddDialog.jsx
+++ b/web/src/components/Add/AddDialog.jsx
@@ -31,6 +31,7 @@ export default function AddDialog({
  const isEditMode = !!originalHash
  const [torrentSource, setTorrentSource] = useState(originalHash || '')
  const [title, setTitle] = useState(originalTitle || '')
+  const [category, setCategory] = useState('Unknown')
  const [originalTorrentTitle, setOriginalTorrentTitle] = useState('')
  const [parsedTitle, setParsedTitle] = useState('')
  const [posterUrl, setPosterUrl] = useState(originalPoster || '')
@@ -207,6 +208,7 @@ export default function AddDialog({
          hash: originalHash,
          title: title || originalName,
          poster: posterUrl,
+          category,
        })
        .finally(handleClose)
    } else if (selectedFile) {
@@ -220,7 +222,14 @@ export default function AddDialog({
    } else {
      // link save
      axios
-        .post(torrentsHost(), { action: 'add', link: torrentSource, title, poster: posterUrl, save_to_db: true })
+        .post(torrentsHost(), {
+          action: 'add',
+          link: torrentSource,
+          title,
+          category,
+          poster: posterUrl,
+          save_to_db: true,
+        })
        .catch(handleClose)
    }
  }
@@ -243,6 +252,7 @@ export default function AddDialog({
        <RightSideComponent
          originalTorrentTitle={originalTorrentTitle}
          setTitle={setTitle}
+          setCategory={setCategory}
          setPosterUrl={setPosterUrl}
          setIsPosterUrlCorrect={setIsPosterUrlCorrect}
          setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
@@ -250,6 +260,7 @@ export default function AddDialog({
          isTorrentSourceCorrect={isTorrentSourceCorrect}
          isHashAlreadyExists={isHashAlreadyExists}
          title={title}
+          category={category}
          parsedTitle={parsedTitle}
          posterUrl={posterUrl}
          isPosterUrlCorrect={isPosterUrlCorrect}
--- a/web/src/components/Add/RightSideComponent.jsx
+++ b/web/src/components/Add/RightSideComponent.jsx
@@ -1,7 +1,16 @@
 import { useTranslation } from 'react-i18next'
 import { rgba } from 'polished'
 import { NoImageIcon } from 'icons'
-import { IconButton, InputAdornment, TextField, useTheme } from '@material-ui/core'
+import {
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  useTheme,
+} from '@material-ui/core'
 import { HighlightOff as HighlightOffIcon } from '@material-ui/icons'

 import {
@@ -18,6 +27,7 @@ import { checkImageURL } from './helpers'

 export default function RightSideComponent({
  setTitle,
+  setCategory,
  setPosterUrl,
  setIsPosterUrlCorrect,
  setIsUserInteractedWithPoster,
@@ -25,6 +35,7 @@ export default function RightSideComponent({
  isTorrentSourceCorrect,
  isHashAlreadyExists,
  title,
+  category,
  parsedTitle,
  posterUrl,
  isPosterUrlCorrect,
@@ -45,6 +56,7 @@ export default function RightSideComponent({
  const primary = useTheme().palette.primary.main

  const handleTitleChange = ({ target: { value } }) => setTitle(value)
+  const handleCategoryChange = ({ target: { value } }) => setCategory(value)
  const handlePosterUrlChange = ({ target: { value } }) => {
    setPosterUrl(value)
    checkImageURL(value).then(setIsPosterUrlCorrect)
@@ -101,6 +113,26 @@ export default function RightSideComponent({
                ),
              }}
            />
+
+            <FormControl fullWidth>
+              <InputLabel id='torrent-category-select-label'>Torrent category</InputLabel>
+              <Select
+                labelId='torrent-category-select-label'
+                id='torrent-category-select'
+                value={category}
+                label='Torrent category'
+                margin='dense'
+                onChange={handleCategoryChange}
+                variant='outlined'
+                fullWidth
+              >
+                <MenuItem value='Films'>Films</MenuItem>
+                <MenuItem value='Series'>Series</MenuItem>
+                <MenuItem value='Music'>Music</MenuItem>
+                <MenuItem value='Other'>Other</MenuItem>
+                <MenuItem value='Unknown'>Unknown</MenuItem>
+              </Select>
+            </FormControl>
          </>
        ) : (
          <TextField
--- a/web/src/components/DialogTorrentDetailsContent/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/index.jsx
@@ -27,7 +27,7 @@ import {
  TorrentFilesSection,
  Divider,
 } from './style'
-import { DownlodSpeedWidget, UploadSpeedWidget, PeersWidget, SizeWidget, StatusWidget } from './widgets'
+import { DownlodSpeedWidget, UploadSpeedWidget, PeersWidget, SizeWidget, StatusWidget, CategoryWidget } from './widgets'
 import TorrentFunctions from './TorrentFunctions'
 import { isFilePlayable } from './helpers'

@@ -51,6 +51,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
    poster,
    hash,
    title,
+    category,
    name,
    stat,
    download_speed: downloadSpeed,
@@ -184,6 +185,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                  <PeersWidget data={torrent} />
                  <SizeWidget data={torrentSize} />
                  <StatusWidget stat={stat} />
+                  <CategoryWidget data={category} />
                </WidgetWrapper>

                <Divider />
--- a/web/src/components/DialogTorrentDetailsContent/widgets/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/widgets/index.jsx
@@ -6,6 +6,7 @@ import {
  Widgets as WidgetsIcon,
  PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon,
  Build as BuildIcon,
+  Category as CategoryIcon,
 } from '@material-ui/icons'
 import { getPeerString, humanizeSize, humanizeSpeed } from 'utils/Utils'
 import { useTranslation } from 'react-i18next'
@@ -126,3 +127,18 @@ export const SizeWidget = ({ data }) => {
    />
  )
 }
+
+export const CategoryWidget = ({ data }) => {
+  const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('category')
+
+  return (
+    <StatisticsField
+      title={t('Category')}
+      value={data}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={CategoryIcon}
+    />
+  )
+}
--- a/web/src/components/DialogTorrentDetailsContent/widgets/useGetWidgetColors.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/widgets/useGetWidgetColors.jsx
@@ -13,6 +13,7 @@ const colors = {
    piecesLength: { iconBGColor: '#0982c8', valueBGColor: '#098cd7' },
    status: { iconBGColor: '#aea25b', valueBGColor: '#b4aa6e' },
    size: { iconBGColor: '#9b01ad', valueBGColor: '#ac03bf' },
+    category: { iconBGColor: '#914820', valueBGColor: '#c9632c' },
  },
  dark: {
    downloadSpeed: { iconBGColor: '#0c6600', valueBGColor: '#0d7000' },
@@ -22,6 +23,7 @@ const colors = {
    piecesLength: { iconBGColor: '#07659c', valueBGColor: '#0872af' },
    status: { iconBGColor: '#938948', valueBGColor: '#9f9450' },
    size: { iconBGColor: '#81008f', valueBGColor: '#9102a1' },
+    category: { iconBGColor: '#914820', valueBGColor: '#c9632c' },
  },
 }

--- a/web/src/components/TorrentCard/index.jsx
+++ b/web/src/components/TorrentCard/index.jsx
@@ -44,7 +44,16 @@ const Torrent = ({ torrent }) => {
  const openDeleteTorrentAlert = () => setIsDeleteTorrentOpened(true)
  const closeDeleteTorrentAlert = () => setIsDeleteTorrentOpened(false)

-  const { title, name, poster, torrent_size: torrentSize, download_speed: downloadSpeed, hash, stat } = torrent
+  const {
+    title,
+    name,
+    category,
+    poster,
+    torrent_size: torrentSize,
+    download_speed: downloadSpeed,
+    hash,
+    stat,
+  } = torrent

  const dropTorrent = () => axios.post(torrentsHost(), { action: 'drop', hash })
  const deleteTorrent = () => axios.post(torrentsHost(), { action: 'rem', hash })
@@ -107,9 +116,15 @@ const Torrent = ({ torrent }) => {
        </TorrentCardButtons>

        <TorrentCardDescription>
-          <div className='description-title-wrapper'>
-            <div className='description-section-name'>{t('Name')}</div>
-            <div className='description-torrent-title'>{parsedTitle}</div>
+          <div className='description-wrapper'>
+            <div className='description-title-wrapper'>
+              <div className='description-section-name'>{t('Name')}</div>
+              <div className='description-torrent-title'>{parsedTitle}</div>
+            </div>
+            <div className='description-category-wrapper'>
+              <div className='description-section-name'>{t('Category')}</div>
+              <div className='description-torrent-title'>{category}</div>
+            </div>
          </div>

          <div className='description-statistics-wrapper'>
--- a/web/src/components/TorrentCard/style.js
+++ b/web/src/components/TorrentCard/style.js
@@ -110,6 +110,15 @@ export const TorrentCardDescription = styled.div`
      gap: 3px;
    }

+    .description-wrapper {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .description-wrapper > * {
+      flex: 1;
+    }
+
    .description-title-wrapper {
      display: flex;
      flex-direction: column;
@@ -128,6 +137,12 @@ export const TorrentCardDescription = styled.div`
      }
    }

+    .description-category-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+    }
+
    .description-status-wrapper {
      display: inline-block;
      height: 8px;