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

cache styles moved to component from html

Browse Source
This commit is contained in:
Daniel Shleifman
2021-05-26 14:48:24 +03:00
parent 0e753c56da
commit e3983fddf7
2 changed files with 54 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/public/index.html
View File

@@ -10,44 +10,6 @@
<title>TorrServer</title> <title>TorrServer</title>
</head> </head>
<body> <body>
<style>
.cache {
padding-left:6px;
padding-right:2px;
line-height:11px
}
.piece {
width:12px;
height:12px;
background-color:#eef2f4;
border:1px solid #eef2f4;
display:inline-block;
margin-right:1px
}
.piece-complete{
background-color:#3fb57a;
border-color:#3fb57a;
}
.piece-loading{
background-color:#00d0d0;
border-color:#00d0d0;
}
.reader-range{
border-color: #9a9aff !important;
}
.piece-reader{
border-color: #000000 !important;
}
.piece-progress{
position: relative;
z-index: 1;
background-color:#3fb57a;
top: -1px;
left: -1px;
width: 12px;
}
</style>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>

62
web/src/components/DialogCacheInfo.jsx
View File

@@ -4,6 +4,51 @@ import DialogTitle from '@material-ui/core/DialogTitle'
import DialogContent from '@material-ui/core/DialogContent' import DialogContent from '@material-ui/core/DialogContent'
import { getPeerString, humanizeSize } from 'utils/Utils' import { getPeerString, humanizeSize } from 'utils/Utils'
import { cacheHost } from 'utils/Hosts' import { cacheHost } from 'utils/Hosts'
import styled, { css } from 'styled-components'
const boxHeight = 12
const CacheWrapper = styled.div`
padding-left: 6px;
padding-right: 2px;
line-height: 11px;
.piece {
width: ${boxHeight}px;
height: ${boxHeight}px;
background-color: #eef2f4;
border: 1px solid #eef2f4;
display: inline-block;
margin-right: 1px;
}
.piece-complete {
background-color: #3fb57a;
border-color: #3fb57a;
}
.piece-loading {
background-color: #00d0d0;
border-color: #00d0d0;
}
.reader-range {
border-color: #9a9aff;
}
.piece-reader {
border-color: #000000;
}
`
const PieceInProgress = styled.div`
${({ prc }) => css`
position: relative;
z-index: 1;
background-color: #3fb57a;
top: -1px;
left: -1px;
width: 12px;
height: ${prc * boxHeight}px;
`}
`
export default function DialogCacheInfo({ hash }) { export default function DialogCacheInfo({ hash }) {
const [cache, setCache] = useState({}) const [cache, setCache] = useState({})
@@ -12,6 +57,7 @@ export default function DialogCacheInfo({ hash }) {
const componentIsMounted = useRef(true) const componentIsMounted = useRef(true)
useEffect( useEffect(
// this function is required to notify "getCache" when NOT to make state update
() => () => { () => () => {
componentIsMounted.current = false componentIsMounted.current = false
}, },
@@ -22,7 +68,7 @@ export default function DialogCacheInfo({ hash }) {
if (hash) { if (hash) {
timerID.current = setInterval(() => { timerID.current = setInterval(() => {
getCache(hash, value => { getCache(hash, value => {
// this is needed to avoid memory leak // this is required to avoid memory leak
if (componentIsMounted.current) setCache(value) if (componentIsMounted.current) setCache(value)
}) })
}, 100) }, 100)
@@ -92,17 +138,13 @@ export default function DialogCacheInfo({ hash }) {
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<div className='cache'> <CacheWrapper>
{pMap.map(({ prc, className: currentPieceCalss, id }) => { {pMap.map(({ prc, className: currentPieceCalss, id }) => (
const boxHeight = 12
return (
<span key={id} className={currentPieceCalss}> <span key={id} className={currentPieceCalss}>
{prc > 0 && prc < 1 && <div className='piece-progress' style={{ height: `${prc * boxHeight}px` }} />} {prc > 0 && prc < 1 && <PieceInProgress prc={prc} />}
</span> </span>
) ))}
})} </CacheWrapper>
</div>
</DialogContent> </DialogContent>
</div> </div>
) )