changed short snake counting blocks formula

web/src/components/DialogTorrentDetailsContent/TorrentCache/DefaultSnake.jsx

@@ -6,6 +6,7 @@ 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;
@@ -43,19 +44,18 @@ export default function DefaultSnake({ isMini, cacheMap, preloadPiecesAmount })
 
   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 shortCacheMap = isMini ? getShortCacheMap({ cacheMap, preloadPiecesAmount, piecesInOneRow }) : []
-  const extraEmptyBlocksForFillingLine =
+
-    cacheMapWithoutEmptyBlocks.length < amountOfBlocksToRenderInShortView
+  const amountOfRows = Math.ceil((isMini ? shortCacheMap.length : cacheMap.length) / piecesInOneRow)
-      ? new Array(amountOfBlocksToRenderInShortView - cacheMapWithoutEmptyBlocks.length + 1).fill({})
+
-      : []
+  const getItemCoordinates = blockOrder => {
-  const shortCacheMap = [...cacheMapWithoutEmptyBlocks, ...extraEmptyBlocksForFillingLine]
+    const currentRow = Math.floor(blockOrder / piecesInOneRow)
+    const x = (blockOrder % piecesInOneRow) * blockSizeWithMargin || 0
+    const y = currentRow * blockSizeWithMargin || 0
+
+    return { x, y }
+  }
 
   return (
     <Measure bounds onResize={({ bounds }) => setDimensions(bounds)}>
@@ -76,34 +76,31 @@ export default function DefaultSnake({ isMini, cacheMap, preloadPiecesAmount })
               <Layer>
                 {isMini
                   ? shortCacheMap.map(({ percentage, isComplete, inProgress, isActive, isReaderRange }, i) => {
-                      const currentRow = Math.floor(i / piecesInOneRow)
+                      const { x, y } = getItemCoordinates(i)
-                      const shouldBeRendered = inProgress || isComplete || i <= amountOfBlocksToRenderInShortView
-
-                      return (
-                        shouldBeRendered && (
-                          <SingleBlock
-                            key={uuidv4()}
-                            x={(i % piecesInOneRow) * blockSizeWithMargin}
-                            y={currentRow * blockSizeWithMargin}
-                            percentage={percentage}
-                            inProgress={inProgress}
-                            isComplete={isComplete}
-                            isReaderRange={isReaderRange}
-                            isActive={isActive}
-                            boxHeight={boxHeight}
-                            strokeWidth={strokeWidth}
-                          />
-                        )
-                      )
-                    })
-                  : cacheMap.map(({ id, percentage, isComplete, inProgress, isActive, isReaderRange }) => {
-                      const currentRow = Math.floor((isMini ? id - activeId : id) / piecesInOneRow)
 
                       return (
                         <SingleBlock
                           key={uuidv4()}
-                          x={(id % piecesInOneRow) * blockSizeWithMargin}
+                          x={x}
-                          y={currentRow * blockSizeWithMargin}
+                          y={y}
+                          percentage={percentage}
+                          inProgress={inProgress}
+                          isComplete={isComplete}
+                          isReaderRange={isReaderRange}
+                          isActive={isActive}
+                          boxHeight={boxHeight}
+                          strokeWidth={strokeWidth}
+                        />
+                      )
+                    })
+                  : cacheMap.map(({ id, percentage, isComplete, inProgress, isActive, isReaderRange }) => {
+                      const { x, y } = getItemCoordinates(id)
+
+                      return (
+                        <SingleBlock
+                          key={uuidv4()}
+                          x={x}
+                          y={y}
                           percentage={percentage}
                           inProgress={inProgress}
                           isComplete={isComplete}

web/src/components/DialogTorrentDetailsContent/TorrentCache/getShortCacheMap.js

@@ -0,0 +1,27 @@
+export default ({ cacheMap, preloadPiecesAmount, piecesInOneRow }) => {
+  const cacheMapWithoutEmptyBlocks = cacheMap.filter(({ isComplete, inProgress }) => inProgress || isComplete)
+
+  const getFullAmountOfBlocks = amountOfBlocks =>
+    // this function counts existed amount of blocks with extra "empty blocks" to fill the row till the end
+    amountOfBlocks % piecesInOneRow === 0
+      ? amountOfBlocks - 1
+      : amountOfBlocks + piecesInOneRow - (amountOfBlocks % piecesInOneRow) - 1 || 0
+
+  const amountOfBlocksToRenderInShortView = getFullAmountOfBlocks(preloadPiecesAmount)
+  // preloadPiecesAmount is counted from "cache.Capacity / cache.PiecesLength". We always show at least this amount of blocks
+  const scalableAmountOfBlocksToRenderInShortView = getFullAmountOfBlocks(cacheMapWithoutEmptyBlocks.length)
+  // cacheMap can become bigger than preloadPiecesAmount counted before. In that case we count blocks dynamically
+
+  const finalAmountOfBlocksToRenderInShortView = Math.max(
+    // this check is needed to decide which is the biggest amount of blocks and take it to render
+    scalableAmountOfBlocksToRenderInShortView,
+    amountOfBlocksToRenderInShortView,
+  )
+
+  const extraBlocksAmount = finalAmountOfBlocksToRenderInShortView - cacheMapWithoutEmptyBlocks.length + 1
+  // amount of blocks needed to fill the line till the end
+
+  const extraEmptyBlocksForFillingLine = extraBlocksAmount ? new Array(extraBlocksAmount).fill({}) : []
+
+  return [...cacheMapWithoutEmptyBlocks, ...extraEmptyBlocksForFillingLine]
+}