diff --git a/web/package.json b/web/package.json
index 70e37dd..ba42718 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,6 +23,8 @@
"react-konva": "^17.0.2-4",
"react-measure": "^2.5.2",
"react-scripts": "4.0.3",
+ "react-virtualized-auto-sizer": "^1.0.5",
+ "react-window": "^1.8.6",
"styled-components": "^5.3.0",
"uuid": "^8.3.2"
},
diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache.jsx b/web/src/components/DialogTorrentDetailsContent/TorrentCache.jsx
deleted file mode 100644
index db29707..0000000
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache.jsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { memo, useEffect, useState } from 'react'
-import DialogContent from '@material-ui/core/DialogContent'
-import { Stage, Layer } from 'react-konva'
-import Measure from 'react-measure'
-import isEqual from 'lodash/isEqual'
-import styled from 'styled-components'
-import { v4 as uuidv4 } from 'uuid'
-
-import SingleBlock from './SingleBlock'
-import { useCreateCacheMap } from './customHooks'
-
-const ScrollNotification = styled.div`
- margin-top: 10px;
- text-transform: uppercase;
- color: rgba(0, 0, 0, 0.5);
- align-self: center;
-`
-
-const TorrentCache = memo(
- ({ cache, isMini }) => {
- const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
- const [stageSettings, setStageSettings] = useState({
- boxHeight: null,
- strokeWidth: null,
- marginBetweenBlocks: null,
- stageOffset: null,
- })
-
- const cacheMap = useCreateCacheMap(cache)
-
- const updateStageSettings = (boxHeight, strokeWidth) => {
- setStageSettings({
- boxHeight,
- strokeWidth,
- marginBetweenBlocks: strokeWidth,
- stageOffset: strokeWidth * 2,
- })
- }
-
- useEffect(() => {
- // initializing stageSettings
- if (isMini) return dimensions.width < 500 ? updateStageSettings(20, 3) : updateStageSettings(24, 4)
- updateStageSettings(12, 2)
- }, [isMini, dimensions.width])
-
- const miniCacheMaxHeight = 340
-
- 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 || 0
- const amountOfRows = Math.ceil((isMini ? amountOfBlocksToRenderInShortView : cacheMap.length) / piecesInOneRow)
- const activeId = null
-
- const cacheMapWithoutEmptyBlocks = cacheMap.filter(({ isComplete, inProgress }) => inProgress || isComplete)
- const extraEmptyBlocksForFillingLine =
- cacheMapWithoutEmptyBlocks.length < amountOfBlocksToRenderInShortView
- ? new Array(amountOfBlocksToRenderInShortView - cacheMapWithoutEmptyBlocks.length + 1).fill({})
- : []
- const shortCacheMap = [...cacheMapWithoutEmptyBlocks, ...extraEmptyBlocksForFillingLine]
-
- return (
- setDimensions(bounds)}>
- {({ measureRef }) => (
-
-
-
-
- {isMini
- ? shortCacheMap.map(({ percentage, isComplete, inProgress, isActive, isReaderRange }, i) => {
- const currentRow = Math.floor(i / piecesInOneRow)
- const shouldBeRendered = inProgress || isComplete || i <= amountOfBlocksToRenderInShortView
-
- return (
- shouldBeRendered && (
-
- )
- )
- })
- : cacheMap.map(({ id, percentage, isComplete, inProgress, isActive, isReaderRange }) => {
- const currentRow = Math.floor((isMini ? id - activeId : id) / piecesInOneRow)
-
- return (
-
- )
- })}
-
-
-
-
- {isMini &&
- (stageOffset + blockSizeWithMargin * amountOfRows || 0) >= miniCacheMaxHeight &&
- dimensions.height >= miniCacheMaxHeight && scroll down}
-
- )}
-
- )
- },
- (prev, next) => isEqual(prev.cache.Pieces, next.cache.Pieces) && isEqual(prev.cache.Readers, next.cache.Readers),
-)
-
-export default TorrentCache
diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/DefaultSnake.jsx b/web/src/components/DialogTorrentDetailsContent/TorrentCache/DefaultSnake.jsx
new file mode 100644
index 0000000..0937ff2
--- /dev/null
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/DefaultSnake.jsx
@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react'
+import DialogContent from '@material-ui/core/DialogContent'
+import { Stage, Layer } from 'react-konva'
+import Measure from 'react-measure'
+import { v4 as uuidv4 } from 'uuid'
+import styled from 'styled-components'
+
+import SingleBlock from './SingleBlock'
+import getShortCacheMap from './getShortCacheMap'
+
+const ScrollNotification = styled.div`
+ margin-top: 10px;
+ text-transform: uppercase;
+ color: rgba(0, 0, 0, 0.5);
+ align-self: center;
+`
+
+export default function DefaultSnake({ isMini, cacheMap, preloadPiecesAmount }) {
+ const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+ const [stageSettings, setStageSettings] = useState({
+ boxHeight: null,
+ strokeWidth: null,
+ marginBetweenBlocks: null,
+ stageOffset: null,
+ })
+ const updateStageSettings = (boxHeight, strokeWidth) => {
+ setStageSettings({
+ boxHeight,
+ strokeWidth,
+ marginBetweenBlocks: strokeWidth,
+ stageOffset: strokeWidth * 2,
+ })
+ }
+
+ useEffect(() => {
+ // initializing stageSettings
+ if (isMini) return dimensions.width < 500 ? updateStageSettings(20, 3) : updateStageSettings(24, 4)
+ updateStageSettings(12, 2)
+ }, [isMini, dimensions.width])
+
+ const miniCacheMaxHeight = 340
+
+ const { boxHeight, strokeWidth, marginBetweenBlocks, stageOffset } = stageSettings
+
+ const blockSizeWithMargin = boxHeight + strokeWidth + marginBetweenBlocks
+ const piecesInOneRow = Math.floor((dimensions.width * 0.9) / blockSizeWithMargin)
+
+ const shortCacheMap = isMini ? getShortCacheMap({ cacheMap, preloadPiecesAmount, piecesInOneRow }) : []
+
+ const amountOfRows = Math.ceil((isMini ? shortCacheMap.length : cacheMap.length) / piecesInOneRow)
+
+ const getItemCoordinates = blockOrder => {
+ const currentRow = Math.floor(blockOrder / piecesInOneRow)
+ const x = (blockOrder % piecesInOneRow) * blockSizeWithMargin || 0
+ const y = currentRow * blockSizeWithMargin || 0
+
+ return { x, y }
+ }
+
+ return (
+ setDimensions(bounds)}>
+ {({ measureRef }) => (
+
+
+
+
+ {isMini
+ ? shortCacheMap.map(({ percentage, isComplete, inProgress, isActive, isReaderRange }, i) => {
+ const { x, y } = getItemCoordinates(i)
+
+ return (
+
+ )
+ })
+ : cacheMap.map(({ id, percentage, isComplete, inProgress, isActive, isReaderRange }) => {
+ const { x, y } = getItemCoordinates(id)
+
+ return (
+
+ )
+ })}
+
+
+
+
+ {isMini &&
+ (stageOffset + blockSizeWithMargin * amountOfRows || 0) >= miniCacheMaxHeight &&
+ dimensions.height >= miniCacheMaxHeight && scroll down}
+
+ )}
+
+ )
+}
diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/LargeSnake.jsx b/web/src/components/DialogTorrentDetailsContent/TorrentCache/LargeSnake.jsx
new file mode 100644
index 0000000..e2d8dbe
--- /dev/null
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/LargeSnake.jsx
@@ -0,0 +1,58 @@
+import { FixedSizeGrid as Grid } from 'react-window'
+import AutoSizer from 'react-virtualized-auto-sizer'
+
+import { getLargeSnakeColors } from './colors'
+
+const Cell = ({ columnIndex, rowIndex, style, data }) => {
+ const { columnCount, cacheMap, gutterSize, borderSize, pieces } = data
+ const itemIndex = rowIndex * columnCount + columnIndex
+
+ const { borderColor, backgroundColor } = getLargeSnakeColors(cacheMap[itemIndex] || {})
+
+ const newStyle = {
+ ...style,
+ left: style.left + gutterSize,
+ top: style.top + gutterSize,
+ width: style.width - gutterSize,
+ height: style.height - gutterSize,
+ border: `${borderSize}px solid ${borderColor}`,
+ display: itemIndex >= pieces ? 'none' : null,
+ background: backgroundColor,
+ }
+
+ return
+}
+
+const gutterSize = 2
+const borderSize = 1
+const pieceSize = 12
+const pieceSizeWithSpacing = pieceSize + gutterSize
+
+export default function LargeSnake({ cacheMap }) {
+ const pieces = cacheMap.length
+
+ return (
+
+
+ {({ height, width }) => {
+ const columnCount = Math.floor(width / (gutterSize + pieceSize)) - 1
+ const rowCount = pieces / columnCount + 1
+
+ return (
+
+ {Cell}
+
+ )
+ }}
+
+