Loading display for current download if it hasn't started

@types/randomEvents.d.ts

@@ -3,7 +3,8 @@ import { ExtendedProgress, QueueItem } from './messageHandler';
 export type RandomEvents = {
   progress: ExtendedProgress,
   finish: undefined,
-  queueChange: QueueItem[]
+  queueChange: QueueItem[],
+  current: QueueItem|undefined
 }
 
 export interface RandomEvent<T extends keyof RandomEvents> {

gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx

@@ -58,7 +58,7 @@ const SearchBox: React.FC = () => {
                 }}>
                   <Box sx={{ display: 'flex' }}>
                     <Box sx={{ width: '20%', height: '100%', pr: 2 }}>
-                      <img ref={imageRef} src={a.image} style={{ width: '100%', height: '100%' }} alt="thumbnail"/>
+                      <img ref={imageRef} src={a.image} style={{ width: '100%', height: 'auto' }} alt="thumbnail"/>
                     </Box>
                     <Box sx={{ display: 'flex', flexDirection: 'column', maxWidth: '70%' }}>
                       <Typography variant='h6' component='h6' color='text.primary' sx={{  }}>

gui/react/src/components/MainFrame/DownloadManager/DownloadManager.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ExtendedProgress } from "../../../../../../@types/messageHandler";
+import { ExtendedProgress, QueueItem } from "../../../../../../@types/messageHandler";
 import { RandomEvent } from "../../../../../../@types/randomEvents";
 import { messageChannelContext } from "../../../provider/MessageChannel";
 
@@ -7,26 +7,34 @@ const useDownloadManager = () => {
   const messageHandler = React.useContext(messageChannelContext);
 
   const [progressData, setProgressData] = React.useState<ExtendedProgress|undefined>();
+  const [current, setCurrent] = React.useState<undefined|QueueItem>();
   
   React.useEffect(() => {
     const handler = (ev: RandomEvent<'progress'>) => {
       console.log(ev.data);
       setProgressData(ev.data);
     }
-    messageHandler?.randomEvents.on('progress', handler);
+
+    const currentHandler = (ev: RandomEvent<'current'>) => {
+      setCurrent(ev.data);
+    }
     
     const finishHandler = () => {
       setProgressData(undefined);
     }
 
+    messageHandler?.randomEvents.on('progress', handler);
+    messageHandler?.randomEvents.on('current', currentHandler);
     messageHandler?.randomEvents.on('finish', finishHandler);
+
     return () => {
       messageHandler?.randomEvents.removeListener('progress', handler);
-      messageHandler?.randomEvents.removeListener('finish', finishHandler)
+      messageHandler?.randomEvents.removeListener('finish', finishHandler);
+      messageHandler?.randomEvents.removeListener('current', currentHandler);
     };
   }, [messageHandler]);
   
-  return progressData;
+  return { data: progressData, current};
 }
 
 export default useDownloadManager;

gui/react/src/components/MainFrame/Queue/Queue.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Divider, LinearProgress, Skeleton, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Divider, LinearProgress, Skeleton, Typography } from "@mui/material";
 import React from "react";
 import { messageChannelContext } from "../../../provider/MessageChannel";
 import { queueContext } from "../../../provider/QueueProvider";
@@ -6,17 +6,18 @@ import { queueContext } from "../../../provider/QueueProvider";
 import useDownloadManager from "../DownloadManager/DownloadManager";
 
 const Queue: React.FC = () => {
-  const data = useDownloadManager();
+  const { data, current } = useDownloadManager();
   const queue = React.useContext(queueContext);
   const msg = React.useContext(messageChannelContext);
 
+
   if (!msg)
     return <>Never</>
 
   return data || queue.length > 0 ? <>
     {data && <>
       <Box sx={{ height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1, mb: 1, mt: 1 }}>
-        <img src={data.downloadInfo.image} height='200px' width='100%' alt="Thumbnail" />
+        <img src={data.downloadInfo.image} height='auto' width='100%' alt="Thumbnail" />
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
             <Box sx={{ display: 'grid', gridTemplateColumns: '1fr max-content' }}>
@@ -41,11 +42,39 @@ const Queue: React.FC = () => {
       </Box>
     </>
     }
+    {
+      current && !data && <>
+        <Box sx={{ height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1, mb: 1, mt: 1 }}>
+          <img src={current.image} height='auto' width='100%' alt="Thumbnail" />
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+              <Box sx={{ display: 'grid', gridTemplateColumns: '1fr max-content' }}>
+                <Typography variant='h5' color='text.primary'>
+                  {current.title}
+                </Typography>
+                <Typography variant='h5' color='text.primary'>
+                  Language: <CircularProgress variant="indeterminate" />
+                </Typography>
+              </Box>
+              <Typography variant='h6' color='text.primary'>
+                {current.parent.title}
+              </Typography>
+            </Box>
+            <LinearProgress variant='indeterminate' sx={{ height: '10px' }} />
+            <Box> 
+              <Typography variant="body1" color='text.primary'>
+                0 / ? parts (0% | X:XX | 0 MB/s | 0MB)
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </>
+    }
     {queue.length && data && <Divider variant="fullWidth" />}
     {queue.map((queueItem, index, { length }) => {
       return <Box key={`queue_item_${index}`}>
         <Box sx={{ height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1, mb: 1, mt: 1 }}>
-          <img src={queueItem.image} height='200px' width='100%' alt="Thumbnail" />
+          <img src={queueItem.image} height='auto' width='100%' alt="Thumbnail" />
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
               <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 200px' }}>

gui/react/src/provider/MessageChannel.tsx

@@ -17,7 +17,8 @@ export class RandomEventHandler {
   } = {
     progress: [],
     finish: [],
-    queueChange: []
+    queueChange: [],
+    current: []
   };
 
   public on<T extends keyof RandomEvents>(name: T, listener: Handler<T>) {

gui/server/services/base.ts

@@ -109,6 +109,7 @@ export default class Base {
     this.sendMessage({ name: 'queueChange', data: this.queue });
     if (this.workOnQueue && this.queue.length > 0 && !await this.isDownloading()) {
       this.setDownloading(true);
+      this.sendMessage({ name: 'current', data: this.queue[0] });
       this.downloadItem(this.queue[0]);
       this.queue = this.queue.slice(1);
       this.queueChange();
@@ -116,6 +117,7 @@ export default class Base {
   }
 
   public async onFinish() {
+    this.sendMessage({ name: 'current', data: undefined });
     this.queueChange();
   }