teble added for file list

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -3,6 +3,7 @@ import { getPeerString, humanizeSize } from 'utils/Utils'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { useEffect, useState } from 'react'
 import { Button, ButtonGroup, Typography } from '@material-ui/core'
+import ptt from 'parse-torrent-title'
 import {
   ArrowDownward as ArrowDownwardIcon,
   ArrowUpward as ArrowUpwardIcon,
@@ -26,17 +27,18 @@ import {
   SectionTitle,
   SectionSubName,
   StatisticsWrapper,
-  ButtonSection,
   LoadingProgress,
   SectionHeader,
   CacheSection,
-  ButtonSectionButton,
   TorrentFilesSection,
   Divider,
   SmallLabel,
+  Table,
 } from './style'
 import StatisticsField from './StatisticsField'
 
+ptt.addHandler('part', /Part[. ]([0-9])/i, { type: 'integer' })
+
 const shortenText = (text, count) => text.slice(0, count) + (text.length > count ? '...' : '')
 
 export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
@@ -45,6 +47,11 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
   const [viewedFileList, setViewedFileList] = useState()
   const [playableFileList, setPlayableFileList] = useState()
 
+  const isOnlyOnePlayableFile = playableFileList?.length === 1
+  const latestViewedFileId = viewedFileList?.[viewedFileList?.length - 1]
+  const latestViewedFile = playableFileList?.find(({ id }) => id === latestViewedFileId)?.path
+  const latestViewedFileData = latestViewedFile && ptt.parse(latestViewedFile)
+
   const {
     poster,
     hash,
@@ -87,7 +94,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
     // getting viewed file list
     axios.post(viewedHost(), { action: 'list', hash }).then(({ data }) => {
       if (data) {
-        const lst = data.map(itm => itm.file_index)
+        const lst = data.map(itm => itm.file_index).sort((a, b) => a - b)
         setViewedFileList(lst)
       } else setViewedFileList()
     })
@@ -148,43 +155,70 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                 <StatisticsField
                   title='Peers'
                   value={getPeerString(torrent)}
-                  iconBg='#0146ad'
-                  valueBg='#0058db'
+                  iconBg='#cdc118'
+                  valueBg='#d8cb18'
                   icon={SwapVerticalCircleIcon}
                 />
 
                 <StatisticsField
                   title='Torrent size'
                   value={humanizeSize(torrentSize)}
-                  iconBg='#0146ad'
-                  valueBg='#0058db'
+                  iconBg='#9b01ad'
+                  valueBg='#ac03bf'
                   icon={ViewAgendaIcon}
                 />
               </StatisticsWrapper>
 
               <Divider />
 
-              <SmallLabel>Download Playlist</SmallLabel>
+              {!isOnlyOnePlayableFile && !!viewedFileList?.length && (
+                <>
+                  <SmallLabel>Download Playlist</SmallLabel>
+                  <SectionSubName mb={10}>
+                    <strong>Latest file played:</strong> {latestViewedFileData.title}.
+                    {latestViewedFileData.season && (
+                      <>
+                        {' '}
+                        Season: {latestViewedFileData.season}. Episode: {latestViewedFileData.episode}.
+                      </>
+                    )}
+                  </SectionSubName>
+
+                  <MainSectionButtonGroup>
+                    <Button variant='contained' color='primary' size='large'>
+                      full
+                    </Button>
+                    <Button variant='contained' color='primary' size='large'>
+                      from latest file
+                    </Button>
+                  </MainSectionButtonGroup>
+                </>
+              )}
+
+              <SmallLabel mb={10}>Torrent State</SmallLabel>
+
               <MainSectionButtonGroup>
-                <Button variant='contained' color='primary' size='large'>
-                  full
+                <Button onClick={() => removeTorrentViews()} variant='contained' color='primary' size='large'>
+                  remove views
                 </Button>
-                <Button variant='contained' color='primary' size='large'>
-                  latest
+                <Button onClick={() => dropTorrent()} variant='contained' color='primary' size='large'>
+                  drop torrent
                 </Button>
               </MainSectionButtonGroup>
 
-              <SmallLabel>More</SmallLabel>
+              <SmallLabel mb={10}>Info</SmallLabel>
+
               <MainSectionButtonGroup>
-                <Button variant='contained' color='primary' size='large'>
-                  copy hash
-                </Button>
-                <Button variant='contained' color='primary' size='large'>
-                  remove views
-                </Button>
-                <Button variant='contained' color='primary' size='large'>
-                  drop torrent
-                </Button>
+                {(isOnlyOnePlayableFile || !viewedFileList?.length) && (
+                  <Button variant='contained' color='primary' size='large'>
+                    download playlist
+                  </Button>
+                )}
+                <CopyToClipboard text={hash}>
+                  <Button variant='contained' color='primary' size='large'>
+                    copy hash
+                  </Button>
+                </CopyToClipboard>
               </MainSectionButtonGroup>
 
               {/* <MainSectionButtonGroup>
@@ -232,47 +266,116 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
             </Button>
           </CacheSection>
 
-          <ButtonSection>
-            <CopyToClipboard text={hash}>
-              <ButtonSectionButton>
-                <div className='hash-group'>
-                  <div>copy hash</div>
-                  <div className='hash-text'>{hash}</div>
-                </div>
-              </ButtonSectionButton>
-            </CopyToClipboard>
-
-            <ButtonSectionButton onClick={() => removeTorrentViews()}>remove views</ButtonSectionButton>
-
-            <ButtonSectionButton onClick={() => dropTorrent()}>drop torrent</ButtonSectionButton>
-
-            <ButtonSectionButton>download full playlist</ButtonSectionButton>
-
-            <ButtonSectionButton>download playlist after last view</ButtonSectionButton>
-          </ButtonSection>
-
           <TorrentFilesSection>
             <SectionTitle mb={20}>Torrent Content</SectionTitle>
 
+            <Table>
+              <thead>
+                <tr>
+                  <th style={{ width: '0' }}>viewed</th>
+                  <th>name</th>
+                  <th style={{ width: '0' }}>season</th>
+                  <th style={{ width: '0' }}>episode</th>
+                  <th style={{ width: '0' }}>resolution</th>
+                  <th style={{ width: '100px' }}>size</th>
+                  <th style={{ width: '400px' }}>actions</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr className='viewed-file-row'>
+                  <td className='viewed-file-indicator' />
+                  <td>Jupiters Legacy</td>
+                  <td>3</td>
+                  <td>1</td>
+                  <td>1080p</td>
+                  <td>945,41 MB</td>
+                  <td className='button-cell'>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Preload
+                    </Button>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Open link
+                    </Button>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Copy link
+                    </Button>
+                  </td>
+                </tr>
+
+                <tr className='viewed-file-row'>
+                  <td className='viewed-file-indicator' />
+                  <td>Jupiters Legacy</td>
+                  <td>3</td>
+                  <td>2</td>
+                  <td>1080p</td>
+                  <td>712,47 MB</td>
+                  <td className='button-cell'>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Preload
+                    </Button>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Open link
+                    </Button>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Copy link
+                    </Button>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td />
+                  <td>Jupiters Legacy</td>
+                  <td>3</td>
+                  <td>3</td>
+                  <td>1080p</td>
+                  <td>687,44 MB</td>
+                  <td className='button-cell'>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Preload
+                    </Button>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Open link
+                    </Button>
+                    <Button variant='outlined' color='primary' size='small'>
+                      Copy link
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </Table>
+
             {!playableFileList?.length
               ? 'No playable files in this torrent'
-              : playableFileList.map(({ id, path, length }) => (
-                  <ButtonGroup key={id} disableElevation variant='contained' color='primary'>
-                    <Button>
-                      <a href={getFileLink(path, id)}>
-                        <Typography>
-                          {path.split('\\').pop().split('/').pop()} | {humanizeSize(length)}{' '}
-                          {viewedFileList && viewedFileList?.indexOf(id) !== -1 && '| ✓'}
-                        </Typography>
-                      </a>
-                    </Button>
+              : playableFileList.map(({ id, path, length }) => {
+                  {
+                    /* console.log(ptt.parse(path)) */
+                  }
+                  {
+                    /* console.log({ title: ptt.parse(path).title })
+                  console.log({ resolution: ptt.parse(path).resolution })
+                  console.log({ episode: ptt.parse(path).episode })
+                  console.log({ season: ptt.parse(path).season }) */
+                  }
 
-                    <Button onClick={() => preloadBuffer(id)}>
-                      <CachedIcon />
-                      <Typography>Preload</Typography>
-                    </Button>
-                  </ButtonGroup>
-                ))}
+                  return (
+                    <ButtonGroup key={id} disableElevation variant='contained' color='primary'>
+                      <Button>
+                        <a href={getFileLink(path, id)}>
+                          <Typography>
+                            {path.split('\\').pop().split('/').pop()} | {humanizeSize(length)}{' '}
+                            {viewedFileList && viewedFileList?.indexOf(id) !== -1 && '| ✓'}
+                          </Typography>
+                        </a>
+                      </Button>
+
+                      <Button onClick={() => preloadBuffer(id)}>
+                        <CachedIcon />
+                        <Typography>Preload</Typography>
+                      </Button>
+                    </ButtonGroup>
+                  )
+                })}
           </TorrentFilesSection>
         </DialogContentGrid>
       )}

web/src/components/DialogTorrentDetailsContent/style.js

@@ -3,10 +3,9 @@ import styled, { css } from 'styled-components'
 export const DialogContentGrid = styled.div`
   display: grid;
   grid-template-columns: 70% 1fr;
-  grid-template-rows: min-content 80px min-content;
+  grid-template-rows: repeat(2, min-content);
   grid-template-areas:
     'main cache'
-    'buttons buttons'
     'file-list file-list';
 `
 export const Poster = styled.div`
@@ -60,48 +59,13 @@ export const CacheSection = styled.section`
   display: grid;
   align-content: start;
   grid-template-rows: min-content 1fr min-content;
+  background: #88cdaa;
 `
 
-export const ButtonSection = styled.section`
-  grid-area: buttons;
-  box-shadow: 0px 4px 4px -1px rgb(0 0 0 / 30%);
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  text-transform: uppercase;
-`
-
-export const ButtonSectionButton = styled.div`
-  background: lightblue;
-  height: 100%;
-  flex: 1;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  font-size: 15px;
-
-  :not(:last-child) {
-    border-right: 1px solid blue;
-  }
-
-  :hover {
-    background: red;
-  }
-
-  .hash-group {
-    display: grid;
-    place-items: center;
-  }
-
-  .hash-text {
-    font-size: 10px;
-    color: #7c7b7c;
-  }
-`
-
-export const TorrentFilesSection = styled.div`
+export const TorrentFilesSection = styled.section`
   grid-area: file-list;
   padding: 40px;
+  box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
 `
 
 export const SectionSubName = styled.div`
@@ -208,8 +172,72 @@ export const Divider = styled.div`
 `
 
 export const SmallLabel = styled.div`
-  font-size: 20px;
-  margin-bottom: 10px;
-  font-weight: 300;
-  line-height: 1;
+  ${({ mb }) => css`
+    ${mb && `margin-bottom: ${mb}px`};
+    font-size: 20px;
+    font-weight: 300;
+    line-height: 1;
+  `}
+`
+
+export const Table = styled.table`
+  border-collapse: collapse;
+  margin: 25px 0;
+  font-size: 0.9em;
+  width: 100%;
+  border-radius: 5px 5px 0 0;
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+
+  thead tr {
+    background: #009879;
+    color: #fff;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  th,
+  td {
+    padding: 12px 15px;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid #ddd;
+
+    /* :nth-of-type(even) {
+      background: #f3f3f3;
+    } */
+
+    :last-of-type {
+      border-bottom: 2px solid #009879;
+    }
+
+    &.viewed-file-row {
+      color: lightgray;
+      background: #f3f3f3;
+    }
+  }
+
+  td {
+    &.viewed-file-indicator {
+      position: relative;
+      :before {
+        content: '';
+        width: 10px;
+        height: 10px;
+        background: #15d5af;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    &.button-cell {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+    }
+  }
 `