update web

web/src/components/About/index.jsx

@@ -21,7 +21,7 @@ export default function AboutDialog() {
   useEffect(() => {
     axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
   }, [])
-  
+
   return (
     <>
       <ListItem button key='Settings' onClick={() => setOpen(true)}>

web/src/components/About/style.js

@@ -15,7 +15,7 @@ export const HeaderSection = styled.section`
   padding: 20px;
 
   img {
-    width: 80px;
+    width: 64px;
   }
 
   @media (max-width: 930px) {

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -99,7 +99,9 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
     })
   }, [hash])
 
-  const bufferSize = settings?.PreloadBuffer ? Capacity : 33554432 // Default is 32mb if PreloadBuffer is false
+  const preloadPerc = settings?.PreloadCache
+  const preloadSize = (Capacity / 100) * preloadPerc
+  const bufferSize = preloadSize > 33554432 ? preloadSize : 33554432 // Not less than 32MB
 
   const getParsedTitle = () => {
     const newNameStringArr = []
@@ -199,7 +201,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
             <CacheSection>
               <SectionHeader>
                 <SectionTitle mb={20}>{t('Buffer')}</SectionTitle>
-                {!settings?.PreloadBuffer && <SectionSubName>{t('BufferNote')}</SectionSubName>}
+                {bufferSize <= 33554432 && <SectionSubName>{t('BufferNote')}</SectionSubName>}
                 <LoadingProgress
                   value={Filled}
                   fullAmount={bufferSize}

web/src/components/Settings/PrimarySettingsComponent.jsx

@@ -4,7 +4,6 @@ import { FormControlLabel, Switch } from '@material-ui/core'
 import TextField from '@material-ui/core/TextField'
 
 import {
-  Divider,
   PreloadCacheValue,
   MainSettingsContent,
   StorageButton,
@@ -41,7 +40,8 @@ export default function PrimarySettingsComponent({
   updateSettings,
 }) {
   const { t } = useTranslation()
-  const { PreloadBuffer, UseDisk, TorrentsSavePath, RemoveCacheOnDrop } = settings || {}
+  const { UseDisk, TorrentsSavePath, RemoveCacheOnDrop } = settings || {}
+  const preloadCacheSize = Math.round((cacheSize / 100) * preloadCachePercentage)
 
   return (
     <MainSettingsContent>
@@ -51,7 +51,7 @@ export default function PrimarySettingsComponent({
         <PreloadCachePercentage
           value={100 - cachePercentage}
           label={`${t('Cache')} ${cacheSize} MB`}
-          isPreloadEnabled={PreloadBuffer}
+          preloadCachePercentage={preloadCachePercentage}
         />
 
         <PreloadCacheValue color={cacheBeforeReaderColor}>
@@ -70,7 +70,7 @@ export default function PrimarySettingsComponent({
           <div>{t('SettingsDialog.CacheAfterReaderDesc')}</div>
         </PreloadCacheValue>
 
-        <Divider />
+        <br />
 
         <SliderInput
           isProMode={isProMode}
@@ -97,16 +97,15 @@ export default function PrimarySettingsComponent({
         />
 
         <SliderInput
-            isProMode={isProMode}
-            title={t('SettingsDialog.PreloadCache')}
-            value={preloadCachePercentage}
-            setValue={setPreloadCachePercentage}
-            sliderMin={0}
-            sliderMax={100}
-            inputMin={0}
-            inputMax={100}
+          isProMode={isProMode}
+          title={`${t('SettingsDialog.PreloadCache')} - ${preloadCachePercentage}% (${preloadCacheSize} MB)`}
+          value={preloadCachePercentage}
+          setValue={setPreloadCachePercentage}
+          sliderMin={0}
+          sliderMax={100}
+          inputMin={0}
+          inputMax={100}
         />
-
       </div>
 
       {UseDisk ? (

web/src/components/Settings/SettingsDialog.jsx

@@ -70,7 +70,7 @@ export default function SettingsDialog({ handleClose }) {
   const { CacheSize, ReaderReadAHead, PreloadCache } = settings || {}
 
   useEffect(() => {
-    if (!CacheSize || !ReaderReadAHead || !PreloadCache) return
+    if (!CacheSize || !ReaderReadAHead) return
 
     setCacheSize(CacheSize)
     setCachePercentage(ReaderReadAHead)

web/src/components/Settings/defaultSettings.js

@@ -17,7 +17,7 @@ export default {
   EnableIPv6: false,
   ForceEncrypt: false,
   PeersListenPort: 0,
-  PreloadBuffer: false,
+  PreloadCache: 0,
   RemoveCacheOnDrop: false,
   RetrackersMode: 1,
   Strategy: 0,

web/src/components/Settings/style.js

@@ -175,7 +175,7 @@ export const PreloadCachePercentage = styled.div.attrs(({ value }) => ({
     background: `linear-gradient(to right, ${cacheBeforeReaderColor} 0%, ${cacheBeforeReaderColor} ${value}%, ${cacheAfterReaderColor} ${value}%, ${cacheAfterReaderColor} 100%)`,
   },
 }))`
-  ${({ label, isPreloadEnabled }) => css`
+  ${({ label, preloadCachePercentage }) => css`
     border: 1px solid #323637;
     padding: 10px 20px;
     border-radius: 5px;
@@ -190,17 +190,16 @@ export const PreloadCachePercentage = styled.div.attrs(({ value }) => ({
       font-size: 20px;
     }
 
-    ${isPreloadEnabled &&
-    css`
-      :after {
-        content: '';
-        width: 100%;
-        height: 2px;
-        background: #323637;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-      }
-    `}
+    :after {
+      content: '';
+      width: ${preloadCachePercentage}%;
+      height: 100%;
+      background: #323637;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      border-radius: 4px;
+      filter: opacity(0.15);
+    }
   `}
 `