refactor

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

@@ -0,0 +1,45 @@
+import { SectionTitle, WidgetWrapper } from '../style'
+import { DetailedViewCacheSection, DetailedViewWidgetSection } from './style'
+import TorrentCache from '../TorrentCache'
+import {
+  SizeWidget,
+  PiecesLengthWidget,
+  StatusWidget,
+  PiecesCountWidget,
+  PeersWidget,
+  UploadSpeedWidget,
+  DownlodSpeedWidget,
+} from '../widgets'
+
+export default function Test({
+  downloadSpeed,
+  uploadSpeed,
+  torrent,
+  torrentSize,
+  PiecesCount,
+  PiecesLength,
+  statString,
+  cache,
+}) {
+  return (
+    <>
+      <DetailedViewWidgetSection>
+        <SectionTitle mb={20}>Data</SectionTitle>
+        <WidgetWrapper detailedView>
+          <DownlodSpeedWidget data={downloadSpeed} />
+          <UploadSpeedWidget data={uploadSpeed} />
+          <PeersWidget data={torrent} />
+          <SizeWidget data={torrentSize} />
+          <PiecesCountWidget data={PiecesCount} />
+          <PiecesLengthWidget data={PiecesLength} />
+          <StatusWidget data={statString} />
+        </WidgetWrapper>
+      </DetailedViewWidgetSection>
+
+      <DetailedViewCacheSection>
+        <SectionTitle mb={20}>Cache</SectionTitle>
+        <TorrentCache cache={cache} />
+      </DetailedViewCacheSection>
+    </>
+  )
+}

web/src/components/DialogTorrentDetailsContent/DetailedView/style.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const DetailedViewWidgetSection = styled.section`
+  padding: 40px;
+  background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+
+  @media (max-width: 800px) {
+    padding: 20px;
+  }
+`
+
+export const DetailedViewCacheSection = styled.section`
+  padding: 40px;
+  box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+
+  @media (max-width: 800px) {
+    padding: 20px;
+  }
+`

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

@@ -73,6 +73,7 @@ const Table = memo(
             })}
           </tbody>
         </TableStyle>
+
         <ShortTableWrapper>
           {playableFileList.map(({ id, path, length }) => {
             const { title, resolution, episode, season } = ptt.parse(path)
@@ -84,12 +85,14 @@ const Table = memo(
                 <ShortTable key={id} isViewed={isViewed}>
                   <div className='short-table-name'>{title}</div>
                   <div className='short-table-data'>
-                    <div className='short-table-field'>
+                    {isViewed && (
-                      <div className='short-table-field-name'>viewed</div>
+                      <div className='short-table-field'>
-                      <div className='short-table-field-value'>
+                        <div className='short-table-field-name'>viewed</div>
-                        <div className='short-table-viewed-indicator' />
+                        <div className='short-table-field-value'>
+                          <div className='short-table-viewed-indicator' />
+                        </div>
                       </div>
-                    </div>
+                    )}
                     {fileHasSeasonText && seasonAmount?.length === 1 && (
                       <div className='short-table-field'>
                         <div className='short-table-field-name'>season</div>

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -12,9 +12,8 @@ import { useUpdateCache, useGetSettings } from './customHooks'
 import DialogHeader from './DialogHeader'
 import TorrentCache from './TorrentCache'
 import Table from './Table'
+import DetailedView from './DetailedView'
 import {
-  DetailedViewWidgetSection,
-  DetailedViewCacheSection,
   DialogContentGrid,
   MainSection,
   Poster,
@@ -27,20 +26,18 @@ import {
   TorrentFilesSection,
   Divider,
 } from './style'
-import {
+import { DownlodSpeedWidget, UploadSpeedWidget, PeersWidget, SizeWidget } from './widgets'
-  DownlodSpeedWidget,
-  UploadSpeedWidget,
-  PeersWidget,
-  SizeWidget,
-  PiecesCountWidget,
-  PiecesLengthWidget,
-  StatusWidget,
-} from './widgets'
 import TorrentFunctions from './TorrentFunctions'
 import { isFilePlayable } from './helpers'
 
 const shortenText = (text, count) => text.slice(0, count) + (text.length > count ? '...' : '')
 
+const Loader = () => (
+  <div style={{ minHeight: '80vh', display: 'grid', placeItems: 'center' }}>
+    <CircularProgress />
+  </div>
+)
+
 export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
   const [isLoading, setIsLoading] = useState(true)
   const [isDetailedCacheView, setIsDetailedCacheView] = useState(false)
@@ -115,29 +112,18 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
 
       <div style={{ minHeight: '80vh', overflow: 'auto' }}>
         {isLoading ? (
-          <div style={{ minHeight: '80vh', display: 'grid', placeItems: 'center' }}>
+          <Loader />
-            <CircularProgress />
-          </div>
         ) : isDetailedCacheView ? (
-          <>
+          <DetailedView
-            <DetailedViewWidgetSection>
+            downloadSpeed={downloadSpeed}
-              <SectionTitle mb={20}>Data</SectionTitle>
+            uploadSpeed={uploadSpeed}
-              <WidgetWrapper detailedView>
+            torrent={torrent}
-                <DownlodSpeedWidget data={downloadSpeed} />
+            torrentSize={torrentSize}
-                <UploadSpeedWidget data={uploadSpeed} />
+            PiecesCount={PiecesCount}
-                <PeersWidget data={torrent} />
+            PiecesLength={PiecesLength}
-                <SizeWidget data={torrentSize} />
+            statString={statString}
-                <PiecesCountWidget data={PiecesCount} />
+            cache={cache}
-                <PiecesLengthWidget data={PiecesLength} />
+          />
-                <StatusWidget data={statString} />
-              </WidgetWrapper>
-            </DetailedViewWidgetSection>
-
-            <DetailedViewCacheSection>
-              <SectionTitle mb={20}>Cache</SectionTitle>
-              <TorrentCache cache={cache} />
-            </DetailedViewCacheSection>
-          </>
         ) : (
           <DialogContentGrid>
             <MainSection>

web/src/components/DialogTorrentDetailsContent/style.js

@@ -251,21 +251,3 @@ export const Divider = styled.div`
   background-color: rgba(0, 0, 0, 0.12);
   margin: 30px 0;
 `
-
-export const DetailedViewWidgetSection = styled.section`
-  padding: 40px;
-  background: linear-gradient(145deg, #e4f6ed, #b5dec9);
-
-  @media (max-width: 800px) {
-    padding: 20px;
-  }
-`
-
-export const DetailedViewCacheSection = styled.section`
-  padding: 40px;
-  box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
-
-  @media (max-width: 800px) {
-    padding: 20px;
-  }
-`