more Download Queue info (#138)

* Download Queue info

add Imanga type definition to IDownloadChapter

add source name to queue
add manga name to queue

* more like tachi

* add back state and % data

* yup forgot to remove after

src/screens/DownloadQueue.tsx

@@ -23,9 +23,12 @@ import List from '@mui/material/List';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import ListItem from '@mui/material/ListItem';
 import { ListItemIcon } from '@mui/material';
-import ListItemText from '@mui/material/ListItemText';
 import EmptyView from 'components/util/EmptyView';
 
+import { Box } from '@mui/system';
+import Typography from '@mui/material/Typography';
+import { useHistory } from 'react-router-dom';
+
 const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
 
 const getItemStyle = (isDragging: boolean,
@@ -48,6 +51,8 @@ export default function DownloadQueue() {
     const [queueState, setQueueState] = useState<IQueue>(initialQueue);
     const { queue, status } = queueState;
 
+    const history = useHistory();
+
     const theme = useTheme();
 
     const { setTitle, setAction } = useContext(NavbarContext);
@@ -111,6 +116,22 @@ export default function DownloadQueue() {
                                     {(provided, snapshot) => (
                                         <ListItem
                                             ContainerProps={{ ref: provided.innerRef } as any}
+                                            sx={{
+                                                display: 'flex',
+                                                justifyContent: 'flex-start',
+                                                alignItems: 'flex-start',
+                                                padding: 2,
+                                                margin: '10px',
+                                                '&:hover': {
+                                                    backgroundColor: 'action.hover',
+                                                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                                                },
+                                                '&:active': {
+                                                    backgroundColor: 'action.selected',
+                                                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                                                },
+                                            }}
+                                            onClick={() => history.push(`/manga/${item.chapter.mangaId}`)}
                                             {...provided.draggableProps}
                                             {...provided.dragHandleProps}
                                             style={getItemStyle(
@@ -120,19 +141,27 @@ export default function DownloadQueue() {
                                             )}
                                             ref={provided.innerRef}
                                         >
-                                            <ListItemIcon>
+                                            <ListItemIcon sx={{ margin: 'auto 0' }}>
                                                 <DragHandleIcon />
                                             </ListItemIcon>
-                                            <ListItemText
-                                                primary={
-                                                    `${item.chapter.name} | `
-                                                + ` (${(item.progress * 100).toFixed(2)}%)`
-                                                + ` => state: ${item.state}`
-                                                }
-                                            />
+                                            <Box sx={{ display: 'flex' }}>
+                                                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                                                    <Typography variant="h5" component="h2">
+                                                        {item.manga.title}
+                                                    </Typography>
+                                                    <Typography variant="caption" display="block" gutterBottom>
+                                                        {`${item.chapter.name} `
+                                                        + `(${(item.progress * 100).toFixed(2)}%)`
+                                                        + ` => state: ${item.state}`}
+                                                    </Typography>
+                                                </Box>
+                                            </Box>
                                             <IconButton
-                                                onClick={() => {
-                                                // deleteCategory(index);
+                                                sx={{ marginLeft: 'auto' }}
+                                                onClick={(e) => {
+                                                    // deleteCategory(index);
+                                                    // prevent parent tags from getting the event
+                                                    e.stopPropagation();
                                                 }}
                                                 size="large"
                                             >
@@ -141,6 +170,7 @@ export default function DownloadQueue() {
                                         </ListItem>
                                     )}
                                 </Draggable>
+
                             ))}
                             {provided.placeholder}
                         </List>

src/typings.d.ts

@@ -155,6 +155,7 @@ interface IDownloadChapter{
     state: 'Queued' | 'Downloading' | 'Finished' | 'Error'
     progress: number
     chapter: IChapter
+    manga: IManga
 }
 
 interface IQueue {