diff --git a/web/src/components/TorrentCard/index.jsx b/web/src/components/TorrentCard/index.jsx
index 8d53e9f..f4dad28 100644
--- a/web/src/components/TorrentCard/index.jsx
+++ b/web/src/components/TorrentCard/index.jsx
@@ -18,8 +18,16 @@ import { useTranslation } from 'react-i18next'
import AddDialog from 'components/Add/AddDialog'
import { StyledDialog } from 'style/CustomMaterialUiStyles'
import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
+import { GETTING_INFO, IN_DB, CLOSED, PRELOAD, WORKING } from 'torrentStates'
-import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription, TorrentCardPoster } from './style'
+import {
+ StatusIndicators,
+ StyledButton,
+ TorrentCard,
+ TorrentCardButtons,
+ TorrentCardDescription,
+ TorrentCardPoster,
+} from './style'
const Transition = forwardRef((props, ref) => )
@@ -36,7 +44,7 @@ const Torrent = ({ torrent }) => {
const openDeleteTorrentAlert = () => setIsDeleteTorrentOpened(true)
const closeDeleteTorrentAlert = () => setIsDeleteTorrentOpened(false)
- const { title, name, poster, torrent_size: torrentSize, download_speed: downloadSpeed, hash } = torrent
+ const { title, name, 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 })
@@ -105,6 +113,8 @@ const Torrent = ({ torrent }) => {
+
+
{t('Size')}
{torrentSize > 0 && humanizeSize(torrentSize)}
@@ -165,4 +175,30 @@ const Torrent = ({ torrent }) => {
)
}
+export const StatusIndicator = ({ stat }) => {
+ const { t } = useTranslation()
+
+ const values = {
+ [GETTING_INFO]: t('TorrentGettingInfo'),
+ [PRELOAD]: t('TorrentPreload'),
+ [WORKING]: t('TorrentWorking'),
+ [CLOSED]: t('TorrentClosed'),
+ [IN_DB]: t('TorrentInDb'),
+ }
+
+ const colors = {
+ [GETTING_INFO]: '#2196F3',
+ [PRELOAD]: '#FFC107',
+ [WORKING]: '#CDDC39',
+ [CLOSED]: '#E57373',
+ [IN_DB]: '#9E9E9E',
+ }
+
+ return (
+
+
+
+ )
+}
+
export default memo(Torrent)
diff --git a/web/src/components/TorrentCard/style.js b/web/src/components/TorrentCard/style.js
index 142d05b..1f2d2a1 100644
--- a/web/src/components/TorrentCard/style.js
+++ b/web/src/components/TorrentCard/style.js
@@ -134,20 +134,20 @@ export const TorrentCardDescription = styled.div`
.description-statistics-wrapper {
display: grid;
- grid-template-columns: 80px 80px 1fr;
+ grid-template-columns: 24px 80px 80px 1fr;
align-self: end;
@media (max-width: 1260px), (max-height: 500px) {
- grid-template-columns: 70px 70px 1fr;
+ grid-template-columns: 24px 70px 70px 1fr;
}
@media (max-width: 770px) {
- grid-template-columns: 65px 65px 1fr;
+ grid-template-columns: 24px 65px 65px 1fr;
}
@media (max-width: 700px) {
display: grid;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: 24px repeat(3, 1fr);
}
}
@@ -155,7 +155,7 @@ export const TorrentCardDescription = styled.div`
}
.description-statistics-element-value {
- margin-left: 5px;
+ margin-left: 0px;
margin-bottom: 10px;
word-break: break-all;
@@ -229,3 +229,17 @@ export const StyledButton = styled.button`
}
`}
`
+
+export const StatusIndicators = styled.div`
+ ${({ color }) => css`
+ height: 8px;
+ width: 8px;
+ background-color: ${color};
+ border-radius: 50%;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+ `}
+`