From 34ff7c5d53d6197d3ed58dd4240ebe35030b4b8b Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Mon, 31 May 2021 17:03:57 +0300 Subject: [PATCH] added more widgets --- .../DialogCacheInfo/SingleBlock.jsx | 53 ------ web/src/components/DialogCacheInfo/index.jsx | 175 ------------------ .../DialogTorrentDetailsContent/index.jsx | 63 ++++++- .../DialogTorrentDetailsContent/style.js | 6 +- web/src/components/TorrentCard/index.jsx | 7 +- 5 files changed, 66 insertions(+), 238 deletions(-) delete mode 100644 web/src/components/DialogCacheInfo/SingleBlock.jsx delete mode 100644 web/src/components/DialogCacheInfo/index.jsx diff --git a/web/src/components/DialogCacheInfo/SingleBlock.jsx b/web/src/components/DialogCacheInfo/SingleBlock.jsx deleted file mode 100644 index 96268f6..0000000 --- a/web/src/components/DialogCacheInfo/SingleBlock.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import { Rect } from 'react-konva' - -export default function SingleBlock({ - x, - y, - percentage, - isActive = false, - inProgress = false, - isReaderRange = false, - isComplete = false, - boxHeight, - strokeWidth, -}) { - const strokeColor = isActive - ? '#000' - : isComplete - ? '#3fb57a' - : inProgress - ? '#00d0d0' - : isReaderRange - ? '#9a9aff' - : '#eef2f4' - const backgroundColor = inProgress ? '#00d0d0' : '#eef2f4' - const percentageProgressColor = '#3fb57a' - const processCompletedColor = '#3fb57a' - - return ( - - ) -} diff --git a/web/src/components/DialogCacheInfo/index.jsx b/web/src/components/DialogCacheInfo/index.jsx deleted file mode 100644 index 1e6b5b3..0000000 --- a/web/src/components/DialogCacheInfo/index.jsx +++ /dev/null @@ -1,175 +0,0 @@ -import { useEffect, useState } from 'react' -import Typography from '@material-ui/core/Typography' -import DialogTitle from '@material-ui/core/DialogTitle' -import DialogContent from '@material-ui/core/DialogContent' -import { getPeerString, humanizeSize } from 'utils/Utils' -import { Stage, Layer } from 'react-konva' -import Measure from 'react-measure' -import { useUpdateCache, useCreateCacheMap } from 'components/DialogTorrentDetailsContent/customHooks' - -import SingleBlock from './SingleBlock' - -export default function DialogCacheInfo({ hash }) { - const [dimensions, setDimensions] = useState({ width: -1, height: -1 }) - const [isShortView, setIsShortView] = useState(true) - const [isLoading, setIsLoading] = useState(true) - const [stageSettings, setStageSettings] = useState({ - boxHeight: null, - strokeWidth: null, - marginBetweenBlocks: null, - stageOffset: null, - }) - - const cache = useUpdateCache(hash) - const cacheMap = useCreateCacheMap(cache, () => setIsLoading(false)) - - const updateStageSettings = (boxHeight, strokeWidth) => { - setStageSettings({ - boxHeight, - strokeWidth, - marginBetweenBlocks: strokeWidth, - stageOffset: strokeWidth * 2, - }) - } - - useEffect(() => { - // initializing stageSettings - updateStageSettings(24, 4) - }, []) - - const { boxHeight, strokeWidth, marginBetweenBlocks, stageOffset } = stageSettings - - const preloadPiecesAmount = Math.round(cache.Capacity / cache.PiecesLength - 1) - const blockSizeWithMargin = boxHeight + strokeWidth + marginBetweenBlocks - const piecesInOneRow = Math.floor((dimensions.width * 0.9) / blockSizeWithMargin) - const amountOfBlocksToRenderInShortView = - preloadPiecesAmount === piecesInOneRow - ? preloadPiecesAmount - 1 - : preloadPiecesAmount + piecesInOneRow - (preloadPiecesAmount % piecesInOneRow) - 1 - const amountOfRows = Math.ceil((isShortView ? amountOfBlocksToRenderInShortView : cacheMap.length) / piecesInOneRow) - let activeId = null - - return ( - setDimensions(contentRect.bounds)}> - {({ measureRef }) => ( -
- - - Hash {cache.Hash} -
- Capacity {humanizeSize(cache.Capacity)} -
- Filled {humanizeSize(cache.Filled)} -
- Torrent size {' '} - {cache.Torrent && cache.Torrent.torrent_size && humanizeSize(cache.Torrent.torrent_size)} -
- Pieces length {humanizeSize(cache.PiecesLength)} -
- Pieces count {cache.PiecesCount} -
- Peers: {getPeerString(cache.Torrent)} -
- Download speed {' '} - {cache.Torrent && cache.Torrent.download_speed ? `${humanizeSize(cache.Torrent.download_speed)}/sec` : ''} -
- Upload speed {' '} - {cache.Torrent && cache.Torrent.upload_speed ? `${humanizeSize(cache.Torrent.upload_speed)}/sec` : ''} -
- Status {cache.Torrent && cache.Torrent.stat_string && cache.Torrent.stat_string} - - - - - - {isLoading ? ( - 'loading' - ) : ( - - - {cacheMap.map(({ id, percentage, isComplete, inProgress, isActive, isReaderRange }) => { - const currentRow = Math.floor((isShortView ? id - activeId : id) / piecesInOneRow) - - // -------- related only for short view ------- - if (isActive) activeId = id - const shouldBeRendered = - isActive || (id - activeId <= amountOfBlocksToRenderInShortView && id - activeId >= 0) - // -------------------------------------------- - - return isShortView ? ( - shouldBeRendered && ( - - ) - ) : ( - - ) - })} - - - )} - -
- )} - - ) -} - -/* -{ - "Hash": "41e36c8de915d80db83fc134bee4e7e2d292657e", - "Capacity": 209715200, - "Filled": 2914808, - "PiecesLength": 4194304, - "PiecesCount": 2065, - "DownloadSpeed": 32770.860273455524, - "Pieces": { - "2064": { - "Id": 2064, - "Length": 2914808, - "Size": 162296, - "Completed": false - } - } -} - */ diff --git a/web/src/components/DialogTorrentDetailsContent/index.jsx b/web/src/components/DialogTorrentDetailsContent/index.jsx index fc47754..93bb969 100644 --- a/web/src/components/DialogTorrentDetailsContent/index.jsx +++ b/web/src/components/DialogTorrentDetailsContent/index.jsx @@ -9,6 +9,9 @@ import { ArrowUpward as ArrowUpwardIcon, SwapVerticalCircle as SwapVerticalCircleIcon, ViewAgenda as ViewAgendaIcon, + Widgets as WidgetsIcon, + PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon, + Build as BuildIcon, } from '@material-ui/icons' import axios from 'axios' import { playlistTorrHost, streamHost, torrentsHost, viewedHost } from 'utils/Hosts' @@ -117,9 +120,63 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) { 'loading' ) : isDetailedCacheView ? ( -
PiecesCount: {PiecesCount}
-
PiecesLength: {humanizeSize(PiecesLength)}
-
status: {statString}
+ + + + + + + + + + + + + + + ) : ( diff --git a/web/src/components/DialogTorrentDetailsContent/style.js b/web/src/components/DialogTorrentDetailsContent/style.js index c524315..3ae704f 100644 --- a/web/src/components/DialogTorrentDetailsContent/style.js +++ b/web/src/components/DialogTorrentDetailsContent/style.js @@ -91,20 +91,20 @@ export const SectionHeader = styled.div` ` export const DetailedTorrentCacheViewWrapper = styled.div` - padding-top: 50px; + padding: 40px; overflow: auto; min-height: 80vh; ` export const StatisticsWrapper = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(210px, min-content)); + grid-template-columns: repeat(auto-fit, minmax(max-content, 220px)); gap: 20px; ` export const StatisticsFieldWrapper = styled.div` display: grid; - grid-template-columns: 40px max-content; + grid-template-columns: 40px 1fr; grid-template-rows: min-content 50px; grid-template-areas: 'title title' diff --git a/web/src/components/TorrentCard/index.jsx b/web/src/components/TorrentCard/index.jsx index 30f7947..331a87f 100644 --- a/web/src/components/TorrentCard/index.jsx +++ b/web/src/components/TorrentCard/index.jsx @@ -1,4 +1,3 @@ -/* eslint-disable camelcase */ import 'fontsource-roboto' import { forwardRef, useState } from 'react' import HeightIcon from '@material-ui/icons/Height' @@ -38,7 +37,7 @@ export default function Torrent({ torrent }) { const openDeleteTorrentAlert = () => setIsDeleteTorrentOpened(true) const closeDeleteTorrentAlert = () => setIsDeleteTorrentOpened(false) - const { title, name, poster, torrent_size, download_speed, hash } = torrent + const { title, name, poster, torrent_size: torrentSize, download_speed: downloadSpeed, hash } = torrent const dropTorrent = () => axios.post(torrentsHost(), { action: 'drop', hash }) const deleteTorrent = () => axios.post(torrentsHost(), { action: 'rem', hash }) @@ -77,14 +76,14 @@ export default function Torrent({ torrent }) { Size - {torrent_size > 0 && humanizeSize(torrent_size)} + {torrentSize > 0 && humanizeSize(torrentSize)} Speed - {download_speed > 0 ? humanizeSize(download_speed) : '---'} + {downloadSpeed > 0 ? humanizeSize(downloadSpeed) : '---'}