Merge branch 'master' into old-good-engine

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

@@ -65,7 +65,6 @@ const TorrentCache = ({ cache, isMini }) => {
     source.forEach(({ percentage, priority, isReader, isReaderRange }, i) => {
       const inProgress = percentage > 0 && percentage < 100
       const isCompleted = percentage === 100
-      const peacePriority = priority
       const currentRow = i % piecesInOneRow
       const currentColumn = Math.floor(i / piecesInOneRow)
       const fixBlurStroke = borderWidth % 2 === 0 ? 0 : 0.5
@@ -92,13 +91,13 @@ const TorrentCache = ({ cache, isMini }) => {
       ctx.strokeRect(0, 0, pieceSize, pieceSize)
       ctx.setTransform(1, 0, 0, 1, 0, 0)
 
-      if (peacePriority > 0) {
+      if (priority > 0) {
         let info = ''
-        if (peacePriority === 1) info = '*'
-        else if (peacePriority === 2) info = 'H'
-        else if (peacePriority === 3) info = 'R'
-        else if (peacePriority === 4) info = 'N'
-        else if (peacePriority === 5) info = 'A'
+        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'
         const xpad = isMini ? pieceSize * 0.34 : pieceSize * 0.28
         const ypad = isMini ? pieceSize * 0.69 : pieceSize * 0.78

web/src/components/TorrentCard/index.jsx

@@ -1,12 +1,12 @@
 import { forwardRef, memo, useState } from 'react'
 import {
   UnfoldMore as UnfoldMoreIcon,
-  Edit as EditIcon,
+  PlayArrow as PlayArrowIcon,
   Close as CloseIcon,
   Delete as DeleteIcon,
 } from '@material-ui/icons'
 import { getPeerString, humanizeSize, humanizeSpeed, removeRedundantCharacters } from 'utils/Utils'
-import { torrentsHost } from 'utils/Hosts'
+import { playlistTorrHost, torrentsHost } from 'utils/Hosts'
 import { NoImageIcon } from 'icons'
 import DialogTorrentDetailsContent from 'components/DialogTorrentDetailsContent'
 import Dialog from '@material-ui/core/Dialog'
@@ -59,10 +59,12 @@ const Torrent = ({ torrent }) => {
   const handleClickOpenEditDialog = () => setIsEditDialogOpen(true)
   const handleCloseEditDialog = () => setIsEditDialogOpen(false)
 
+  const fullPlaylistLink = `${playlistTorrHost()}/${encodeURIComponent(parsedTitle || 'file')}.m3u?link=${hash}&m3u`
+
   return (
     <>
       <TorrentCard>
-        <TorrentCardPoster isPoster={poster}>
+        <TorrentCardPoster isPoster={poster} onClick={handleClickOpenEditDialog}>
           {poster ? <img src={poster} alt='poster' /> : <NoImageIcon />}
         </TorrentCardPoster>
 
@@ -72,9 +74,13 @@ const Torrent = ({ torrent }) => {
             <span>{t('Details')}</span>
           </StyledButton>
 
-          <StyledButton onClick={handleClickOpenEditDialog}>
-            <EditIcon />
-            <span>{t('Edit')}</span>
+          <StyledButton
+            onClick={() => {
+              window.open(fullPlaylistLink, '_blank')
+            }}
+          >
+            <PlayArrowIcon />
+            <span>{t('Playlist')}</span>
           </StyledButton>
 
           <StyledButton onClick={() => dropTorrent(torrent)}>

web/src/components/TorrentCard/style.js

@@ -37,6 +37,7 @@ export const TorrentCardPoster = styled.div`
   border-radius: 5px;
   overflow: hidden;
   text-align: center;
+  cursor: pointer;
 
   ${({
     isPoster,