sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-20 05:56:10 +05:00
Code Issues Packages Projects Releases Wiki Activity

notification fixed

Browse Source
This commit is contained in:
Daniel Shleifman
2021-06-15 17:24:36 +03:00
parent d1c25a92b4
commit 31d4311dd3
1 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/components/DialogTorrentDetailsContent/TorrentCache/LargeSnake.jsx
View File

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components'
import Measure from 'react-measure' import Measure from 'react-measure'
import { useState } from 'react' import { useState } from 'react'
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'
import { useTranslation } from 'react-i18next'
import { import {
defaultBackgroundColor, defaultBackgroundColor,
@@ -17,6 +18,14 @@ const borderWidth = 1
const defaultPieceSize = 14 const defaultPieceSize = 14
const pieceSizeForMiniMap = 23 const pieceSizeForMiniMap = 23
const gapBetweenPieces = 3 const gapBetweenPieces = 3
const miniCacheMaxHeight = 340
const ScrollNotification = styled.div`
margin-top: 10px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
align-self: center;
`
const SnakeWrapper = styled.div` const SnakeWrapper = styled.div`
${({ pieceSize, piecesInOneRow }) => css` ${({ pieceSize, piecesInOneRow }) => css`
@@ -26,6 +35,12 @@ const SnakeWrapper = styled.div`
grid-auto-rows: max-content; grid-auto-rows: max-content;
justify-content: center; justify-content: center;
${piecesInOneRow &&
css`
max-height: ${miniCacheMaxHeight}px;
overflow: auto;
`}
.piece { .piece {
width: ${pieceSize}px; width: ${pieceSize}px;
height: ${pieceSize}px; height: ${pieceSize}px;
@@ -59,28 +74,32 @@ const PercentagePiece = styled.div`
` `
export default function LargeSnake({ cacheMap, isMini, preloadPiecesAmount }) { export default function LargeSnake({ cacheMap, isMini, preloadPiecesAmount }) {
const { t } = useTranslation()
const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
const pieceSize = isMini ? pieceSizeForMiniMap : defaultPieceSize const pieceSize = isMini ? pieceSizeForMiniMap : defaultPieceSize
let piecesInOneRow let piecesInOneRow
let shotCacheMap let shotCacheMap
if (isMini) { if (isMini) {
const pieceSizeWithGap = pieceSize + gapBetweenPieces const pieceSizeWithGap = pieceSize + gapBetweenPieces
piecesInOneRow = Math.floor(dimensions.width / pieceSizeWithGap) piecesInOneRow = Math.floor((dimensions.width * 0.95) / pieceSizeWithGap)
shotCacheMap = isMini && getShortCacheMap({ cacheMap, preloadPiecesAmount, piecesInOneRow }) shotCacheMap = isMini && getShortCacheMap({ cacheMap, preloadPiecesAmount, piecesInOneRow })
} }
return isMini ? ( return isMini ? (
<Measure bounds onResize={({ bounds }) => setDimensions(bounds)}> <Measure bounds onResize={({ bounds }) => setDimensions(bounds)}>
{({ measureRef }) => ( {({ measureRef }) => (
<SnakeWrapper ref={measureRef} pieceSize={pieceSize} piecesInOneRow={piecesInOneRow}> <div style={{ display: 'flex', flexDirection: 'column' }}>
{shotCacheMap.map(({ className, id, percentage }) => ( <SnakeWrapper ref={measureRef} pieceSize={pieceSize} piecesInOneRow={piecesInOneRow}>
<span key={id || uuidv4()} className={className}> {shotCacheMap.map(({ className, id, percentage }) => (
{percentage > 0 && percentage <= 100 && <PercentagePiece percentage={percentage} />} <span key={id || uuidv4()} className={className}>
</span> {percentage > 0 && percentage <= 100 && <PercentagePiece percentage={percentage} />}
))} </span>
</SnakeWrapper> ))}
</SnakeWrapper>
{dimensions.height >= miniCacheMaxHeight && <ScrollNotification>{t('ScrollDown')}</ScrollNotification>}
</div>
)} )}
</Measure> </Measure>
) : ( ) : (