From 19599fc0aedabe5bc2e18614f7b39559c53dcd7f Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Thu, 27 May 2021 11:42:37 +0300 Subject: [PATCH] added short view in chache --- web/src/components/About.jsx | 33 +++--- .../DialogCacheInfo/SingleBlock.jsx | 6 +- web/src/components/DialogCacheInfo/index.jsx | 106 ++++++++++++++---- web/src/components/Settings.jsx | 8 +- 4 files changed, 103 insertions(+), 50 deletions(-) diff --git a/web/src/components/About.jsx b/web/src/components/About.jsx index bbcd699..a241eee 100644 --- a/web/src/components/About.jsx +++ b/web/src/components/About.jsx @@ -3,7 +3,6 @@ import Button from '@material-ui/core/Button' import Dialog from '@material-ui/core/Dialog' import DialogActions from '@material-ui/core/DialogActions' import DialogContent from '@material-ui/core/DialogContent' -import DialogContentText from '@material-ui/core/DialogContentText' import DialogTitle from '@material-ui/core/DialogTitle' import InfoIcon from '@material-ui/icons/Info' import ListItem from '@material-ui/core/ListItem' @@ -27,23 +26,21 @@ export default function AboutDialog() { - -
-

Thanks to everyone who tested and helped.

-
-
-

Special thanks:

- Anacrolix Matt Joiner github.com/anacrolix -
- tsynik nikk Никита github.com/tsynik -
- dancheskus github.com/dancheskus -
- Tw1cker Руслан Пахнев github.com/Nemiroff -
- SpAwN_LMG -
- +
+

Thanks to everyone who tested and helped.

+
+
+

Special thanks:

+ Anacrolix Matt Joiner github.com/anacrolix +
+ tsynik nikk Никита github.com/tsynik +
+ dancheskus github.com/dancheskus +
+ Tw1cker Руслан Пахнев github.com/Nemiroff +
+ SpAwN_LMG +
diff --git a/web/src/components/DialogCacheInfo/SingleBlock.jsx b/web/src/components/DialogCacheInfo/SingleBlock.jsx index ba8cb01..07c75b4 100644 --- a/web/src/components/DialogCacheInfo/SingleBlock.jsx +++ b/web/src/components/DialogCacheInfo/SingleBlock.jsx @@ -1,9 +1,5 @@ import { Rect } from 'react-konva' -export const boxHeight = 12 -export const strokeWidth = 2 -export const marginBetweenBlocks = 2 - export default function SingleBlock({ x, y, @@ -12,6 +8,8 @@ export default function SingleBlock({ inProgress = false, isReaderRange = false, isComplete = false, + boxHeight, + strokeWidth, }) { const strokeColor = isActive ? '#000' diff --git a/web/src/components/DialogCacheInfo/index.jsx b/web/src/components/DialogCacheInfo/index.jsx index 28946fd..a80a3c2 100644 --- a/web/src/components/DialogCacheInfo/index.jsx +++ b/web/src/components/DialogCacheInfo/index.jsx @@ -7,7 +7,7 @@ import { cacheHost } from 'utils/Hosts' import { Stage, Layer } from 'react-konva' import Measure from 'react-measure' -import SingleBlock, { boxHeight, strokeWidth, marginBetweenBlocks } from './SingleBlock' +import SingleBlock from './SingleBlock' export default function DialogCacheInfo({ hash }) { const [cache, setCache] = useState({}) @@ -15,14 +15,36 @@ export default function DialogCacheInfo({ hash }) { const timerID = useRef(null) const componentIsMounted = useRef(true) const [dimensions, setDimensions] = useState({ width: -1, height: -1 }) + const [stageSettings, setStageSettings] = useState({ + boxHeight: null, + strokeWidth: null, + marginBetweenBlocks: null, + stageOffset: null, + }) + const [isShortView, setIsShortView] = useState(true) + const [isLoading, setIsLoading] = useState(true) - useEffect( - // this function is required to notify "getCache" when NOT to make state update - () => () => { + const updateStageSettings = (boxHeight, strokeWidth) => { + setStageSettings({ + boxHeight, + strokeWidth, + marginBetweenBlocks: strokeWidth, + stageOffset: strokeWidth * 2, + }) + } + + const { boxHeight, strokeWidth, marginBetweenBlocks, stageOffset } = stageSettings + let activeId = null + + useEffect(() => { + // initializing stageSettings + updateStageSettings(24, 4) + + return () => { + // this function is required to notify "getCache" when NOT to make state update componentIsMounted.current = false - }, - [], - ) + } + }, []) useEffect(() => { if (hash) { @@ -52,16 +74,14 @@ export default function DialogCacheInfo({ hash }) { const currentPiece = Pieces[i] if (currentPiece) { if (currentPiece.Completed && currentPiece.Size === currentPiece.Length) newPiece.isComplete = true - else newPiece.inProgress = true - - newPiece.percentage = (currentPiece.Size / currentPiece.Length).toFixed(2) + else { + newPiece.inProgress = true + newPiece.percentage = (currentPiece.Size / currentPiece.Length).toFixed(2) + } } Readers.forEach(r => { - if (i === r.Reader) { - newPiece.isActive = true - return - } + if (i === r.Reader) newPiece.isActive = true if (i >= r.Start && i <= r.End) newPiece.isReaderRange = true }) @@ -69,11 +89,17 @@ export default function DialogCacheInfo({ hash }) { } setPMap(map) + setIsLoading(false) }, [cache]) + const preloadPiecesAmount = Math.round(cache.Capacity / cache.PiecesLength - 1) const blockSizeWithMargin = boxHeight + strokeWidth + marginBetweenBlocks const piecesInOneRow = Math.floor((dimensions.width * 0.9) / blockSizeWithMargin) - const amountOfRows = Math.ceil(pMap.length / piecesInOneRow) + 1 + const amountOfBlocksToRenderInShortView = + preloadPiecesAmount === piecesInOneRow + ? preloadPiecesAmount - 1 + : preloadPiecesAmount + piecesInOneRow - (preloadPiecesAmount % piecesInOneRow) - 1 + const amountOfRows = Math.ceil((isShortView ? amountOfBlocksToRenderInShortView : pMap.length) / piecesInOneRow) return ( setDimensions(contentRect.bounds)}> @@ -107,20 +133,56 @@ export default function DialogCacheInfo({ hash }) { - {!pMap.length ? ( + + {isLoading ? ( 'loading' ) : ( {pMap.map(({ id, percentage, isComplete, inProgress, isActive, isReaderRange }) => { - const currentRow = Math.floor(id / piecesInOneRow) + 1 + const currentRow = Math.floor((isShortView ? id - activeId : id) / piecesInOneRow) - return ( + // -------- related only for short view ------- + if (isActive) activeId = id + const shouldBeRendered = + isActive || (id - activeId <= amountOfBlocksToRenderInShortView && id - activeId >= 0) + // -------------------------------------------- + + return isShortView ? ( + shouldBeRendered && ( + + ) + ) : ( ) })} diff --git a/web/src/components/Settings.jsx b/web/src/components/Settings.jsx index ceb623a..2b94e66 100644 --- a/web/src/components/Settings.jsx +++ b/web/src/components/Settings.jsx @@ -135,13 +135,7 @@ export default function SettingsDialog() {

Retracker mode -