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
-