mirror of
https://github.com/Ernous/TorrServerJellyfin.git
synced 2025-12-20 14:06:09 +05:00
refactor
This commit is contained in:
Daniel Shleifman
132
web/src/components/TorrentCard/index.jsx
Normal file
132
web/src/components/TorrentCard/index.jsx
Normal file
@@ -0,0 +1,132 @@
|
||||
/* eslint-disable camelcase */
|
||||
import 'fontsource-roboto'
|
||||
import { forwardRef, useState } from 'react'
|
||||
import HeightIcon from '@material-ui/icons/Height'
|
||||
import CloseIcon from '@material-ui/icons/Close'
|
||||
import DeleteIcon from '@material-ui/icons/Delete'
|
||||
import { getPeerString, humanizeSize } from 'utils/Utils'
|
||||
import { torrentsHost } from 'utils/Hosts'
|
||||
import { NoImageIcon } from 'icons'
|
||||
import DialogTorrentDetailsContent from 'components/DialogTorrentDetailsContent'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import Slide from '@material-ui/core/Slide'
|
||||
import { Button, DialogActions, DialogTitle, useMediaQuery, useTheme } from '@material-ui/core'
|
||||
import axios from 'axios'
|
||||
|
||||
import {
|
||||
StyledButton,
|
||||
TorrentCard,
|
||||
TorrentCardButtons,
|
||||
TorrentCardDescription,
|
||||
TorrentCardDescriptionContent,
|
||||
TorrentCardDescriptionLabel,
|
||||
TorrentCardPoster,
|
||||
TorrentCardDetails,
|
||||
} from './style'
|
||||
|
||||
const Transition = forwardRef((props, ref) => <Slide direction='up' ref={ref} {...props} />)
|
||||
|
||||
export default function Torrent({ torrent }) {
|
||||
const [isDetailedInfoOpened, setIsDetailedInfoOpened] = useState(false)
|
||||
const [isDeleteTorrentOpened, setIsDeleteTorrentOpened] = useState(false)
|
||||
|
||||
const theme = useTheme()
|
||||
const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
|
||||
|
||||
const openDetailedInfo = () => setIsDetailedInfoOpened(true)
|
||||
const closeDetailedInfo = () => setIsDetailedInfoOpened(false)
|
||||
const openDeleteTorrentAlert = () => setIsDeleteTorrentOpened(true)
|
||||
const closeDeleteTorrentAlert = () => setIsDeleteTorrentOpened(false)
|
||||
|
||||
const { title, name, poster, torrent_size, download_speed, hash } = torrent
|
||||
|
||||
const dropTorrent = () => axios.post(torrentsHost(), { action: 'drop', hash })
|
||||
const deleteTorrent = () => axios.post(torrentsHost(), { action: 'rem', hash })
|
||||
|
||||
return (
|
||||
<>
|
||||
<TorrentCard>
|
||||
<TorrentCardPoster isPoster={poster}>
|
||||
{poster ? <img src={poster} alt='poster' /> : <NoImageIcon />}
|
||||
</TorrentCardPoster>
|
||||
|
||||
<TorrentCardButtons>
|
||||
<StyledButton onClick={openDetailedInfo}>
|
||||
<HeightIcon />
|
||||
<span>Details</span>
|
||||
</StyledButton>
|
||||
|
||||
<StyledButton onClick={() => dropTorrent(torrent)}>
|
||||
<CloseIcon />
|
||||
<span>Drop</span>
|
||||
</StyledButton>
|
||||
|
||||
<StyledButton onClick={openDeleteTorrentAlert}>
|
||||
<DeleteIcon />
|
||||
<span>Delete</span>
|
||||
</StyledButton>
|
||||
</TorrentCardButtons>
|
||||
|
||||
<TorrentCardDescription>
|
||||
<span>
|
||||
<TorrentCardDescriptionLabel>Name</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent isTitle>{title || name}</TorrentCardDescriptionContent>
|
||||
</span>
|
||||
|
||||
<TorrentCardDetails>
|
||||
<span>
|
||||
<TorrentCardDescriptionLabel>Size</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>
|
||||
{torrent_size > 0 && humanizeSize(torrent_size)}
|
||||
</TorrentCardDescriptionContent>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<TorrentCardDescriptionLabel>Speed</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>
|
||||
{download_speed > 0 ? humanizeSize(download_speed) : '---'}
|
||||
</TorrentCardDescriptionContent>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<TorrentCardDescriptionLabel>Peers</TorrentCardDescriptionLabel>
|
||||
<TorrentCardDescriptionContent>{getPeerString(torrent) || '---'}</TorrentCardDescriptionContent>
|
||||
</span>
|
||||
</TorrentCardDetails>
|
||||
</TorrentCardDescription>
|
||||
</TorrentCard>
|
||||
|
||||
<Dialog
|
||||
open={isDetailedInfoOpened}
|
||||
onClose={closeDetailedInfo}
|
||||
fullScreen={fullScreen}
|
||||
fullWidth
|
||||
maxWidth='xl'
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<DialogTorrentDetailsContent closeDialog={closeDetailedInfo} torrent={torrent} />
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={isDeleteTorrentOpened} onClose={closeDeleteTorrentAlert}>
|
||||
<DialogTitle>Delete Torrent?</DialogTitle>
|
||||
<DialogActions>
|
||||
<Button variant='outlined' onClick={closeDeleteTorrentAlert} color='primary'>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant='contained'
|
||||
onClick={() => {
|
||||
deleteTorrent(torrent)
|
||||
closeDeleteTorrentAlert()
|
||||
}}
|
||||
color='primary'
|
||||
autoFocus
|
||||
>
|
||||
Ok
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
161
web/src/components/TorrentCard/style.js
Normal file
161
web/src/components/TorrentCard/style.js
Normal file
@@ -0,0 +1,161 @@
|
||||
import styled, { css } from 'styled-components'
|
||||
|
||||
export const TorrentCard = styled.div`
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 175px minmax(min-content, 1fr);
|
||||
grid-template-areas:
|
||||
'poster buttons'
|
||||
'description description';
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: #3fb57a;
|
||||
box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
||||
|
||||
@media (max-width: 600px), (max-height: 500px) {
|
||||
grid-template-areas:
|
||||
'poster description'
|
||||
'buttons buttons';
|
||||
grid-template-columns: 25% 1fr;
|
||||
grid-template-rows: 100px min-content;
|
||||
}
|
||||
`
|
||||
|
||||
export const TorrentCardPoster = styled.div`
|
||||
grid-area: poster;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
${({ isPoster }) =>
|
||||
isPoster
|
||||
? css`
|
||||
img {
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
`
|
||||
: css`
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #74c39c;
|
||||
border: 1px solid;
|
||||
|
||||
svg {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
`};
|
||||
|
||||
@media (max-width: 600px), (max-height: 500px) {
|
||||
svg {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
`
|
||||
export const TorrentCardButtons = styled.div`
|
||||
grid-area: buttons;
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
|
||||
@media (max-width: 600px), (max-height: 500px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
`
|
||||
export const TorrentCardDescription = styled.div`
|
||||
grid-area: description;
|
||||
background: #74c39c;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
word-break: break-word;
|
||||
|
||||
@media (max-width: 600px), (max-height: 500px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`
|
||||
|
||||
export const TorrentCardDescriptionLabel = styled.div`
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4px;
|
||||
color: #216e47;
|
||||
`
|
||||
|
||||
export const TorrentCardDescriptionContent = styled.div`
|
||||
margin-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
word-break: break-all;
|
||||
|
||||
@media (max-width: 600px), (max-height: 500px) {
|
||||
font-size: 11px;
|
||||
margin-bottom: 3px;
|
||||
margin-left: 0;
|
||||
|
||||
${({ isTitle }) =>
|
||||
isTitle &&
|
||||
css`
|
||||
overflow: auto;
|
||||
height: 45px;
|
||||
`}
|
||||
}
|
||||
|
||||
@media (max-width: 410px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
`
|
||||
|
||||
export const StyledButton = styled.button`
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
background: #216e47;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
letter-spacing: 0.009em;
|
||||
|
||||
> :first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px), (max-height: 500px) {
|
||||
padding: 5px 0;
|
||||
font-size: 0.8rem;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
:hover {
|
||||
background: #2a7e54;
|
||||
}
|
||||
`
|
||||
|
||||
export const TorrentCardDetails = styled.div`
|
||||
@media (max-width: 600px), (max-height: 500px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
`
|
||||
Reference in New Issue
Block a user