Merge branch 'snake-priority'

web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx

@@ -1,4 +1,6 @@
 import { useTranslation } from 'react-i18next'
+import { Checkbox, FormControlLabel } from '@material-ui/core'
+import { useState } from 'react'
 
 import { SectionTitle, WidgetWrapper } from '../style'
 import { DetailedViewCacheSection, DetailedViewWidgetSection } from './style'
@@ -24,6 +26,9 @@ export default function DetailedView({
   cache,
 }) {
   const { t } = useTranslation()
+  const [isSnakeDebugMode, setIsSnakeDebugMode] = useState(
+    JSON.parse(localStorage.getItem('isSnakeDebugMode')) || false,
+  )
 
   return (
     <>
@@ -43,9 +48,25 @@ export default function DetailedView({
 
       <DetailedViewCacheSection>
         <SectionTitle color='#000' mb={20}>
-          {t('Cache')}
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <span>{t('Cache')}</span>
+
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={isSnakeDebugMode}
+                  onChange={({ target: { checked } }) => {
+                    setIsSnakeDebugMode(checked)
+                    localStorage.setItem('isSnakeDebugMode', checked)
+                  }}
+                />
+              }
+              label={t('DebugMode')}
+            />
+          </div>
         </SectionTitle>
-        <TorrentCache cache={cache} />
+
+        <TorrentCache cache={cache} isSnakeDebugMode={isSnakeDebugMode} />
       </DetailedViewCacheSection>
     </>
   )

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

@@ -10,7 +10,7 @@ import getShortCacheMap from './getShortCacheMap'
 import { SnakeWrapper, ScrollNotification } from './style'
 import { createGradient, snakeSettings } from './snakeSettings'
 
-const TorrentCache = ({ cache, isMini }) => {
+const TorrentCache = ({ cache, isMini, isSnakeDebugMode }) => {
   const { t } = useTranslation()
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
   const { width } = dimensions
@@ -91,16 +91,16 @@ const TorrentCache = ({ cache, isMini }) => {
       ctx.strokeRect(0, 0, pieceSize, pieceSize)
       ctx.setTransform(1, 0, 0, 1, 0, 0)
 
-      if (priority > 0) {
+      if (!isMini && isSnakeDebugMode && priority > 0) {
         let info = ''
         if (priority === 1) info = '*'
         else if (priority === 2) info = 'H'
         else if (priority === 3) info = 'R'
         else if (priority === 4) info = 'N'
         else if (priority === 5) info = 'A'
-        ctx.font = isMini ? '12px monospace' : '10px monospace'
+        ctx.font = '10px monospace'
-        const xpad = isMini ? pieceSize * 0.34 : pieceSize * 0.28
+        const xpad = pieceSize * 0.28
-        const ypad = isMini ? pieceSize * 0.69 : pieceSize * 0.78
+        const ypad = pieceSize * 0.78
         ctx.fillStyle = 'black'
         ctx.fillText(info, x + xpad, y + ypad)
       }
@@ -123,6 +123,7 @@ const TorrentCache = ({ cache, isMini }) => {
     rangeColor,
     isMini,
     theme,
+    isSnakeDebugMode,
   ])
 
   return (

web/src/components/TorrentCard/style.js

@@ -38,6 +38,12 @@ export const TorrentCardPoster = styled.div`
   overflow: hidden;
   text-align: center;
   cursor: pointer;
+  transition: 0.2s;
+  position: relative;
+
+  :hover {
+    filter: brightness(0.7);
+  }
 
   ${({
     isPoster,

web/src/locales/en/translation.json

@@ -33,6 +33,7 @@
   "CopyHash": "Copy Hash",
   "CopyLink": "Copy link",
   "Data": "Data",
+  "DebugMode": "Debug mode",
   "Delete": "Delete",
   "DeleteTorrent?": "Delete Torrent?",
   "DeleteTorrents?": "Delete All Torrents?",

web/src/locales/ru/translation.json

@@ -33,6 +33,7 @@
   "CopyHash": "Скопировать хеш",
   "CopyLink": "Копировать",
   "Data": "Данные",
+  "DebugMode": "Режим отладки",
   "Delete": "Удалить",
   "DeleteTorrent?": "Удалить торрент?",
   "DeleteTorrents?": "Удалить все торренты?",