MWP

@types/messageHandler.d.ts

@@ -16,6 +16,7 @@ export interface MessageHandler {
 
 export type QueueItem = {
   title: string,
+  episode: string,
   ids: string[],
   fileName: string,
   parent: {

gui/electron/src/.env

@@ -1 +1,2 @@
-USE_BROWSER=true
+USE_BROWSER=true
+TEST=true

gui/electron/src/images/credits.md

@@ -0,0 +1 @@
+All credits go to KX-DAREKON#0420

gui/electron/src/index.ts

@@ -1,10 +1,10 @@
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, dialog } from 'electron';
 import path from 'path/posix';
-import json from '../../../package.json';
 import registerMessageHandler from './messageHandler';
 import fs from 'fs';
 import dotenv from 'dotenv';
 import express from "express";
+import { Console } from 'console';
 
 if (fs.existsSync(path.join(__dirname, '.env')))
   dotenv.config({ path: path.join(__dirname, '.env'), debug: true });
@@ -13,21 +13,78 @@ if (require('electron-squirrel-startup')) {
   app.quit();
 }
 
+const isWindows = __dirname.indexOf('\\') !== -1;
+
 let mainWindow: BrowserWindow|undefined = undefined;
 export { mainWindow };
 
+const icon = path.join(__dirname, 'images', `Logo_Inverted.${isWindows ? 'ico' : 'png'}`);
+
+if (!process.env.TEST) {
+  console = ((oldConsole: Console) => {
+    const logFolder = path.join(__dirname, 'logs');
+    if (!fs.existsSync(logFolder))
+      fs.mkdirSync(logFolder);
+    return new Console(fs.createWriteStream(path.join(logFolder, `${Date.now()}.log`)));
+    
+    const writeLogFile = (type: 'log'|'info'|'warn'|'error', args: any[]) => {
+      const file = path.join(logFolder, `${type}.log`);
+
+      args = args.map(a => {
+        const type = typeof a;
+        if (type === 'function' || type === 'symbol')
+          return '';
+        if (type === 'object') 
+          return JSON.stringify(a);
+        if (type === 'undefined')
+          return 'undefined';
+        return a;
+      });
+
+      fs.appendFileSync(file, args.join(' ') + '\n');
+    } 
+    
+    return {
+      ...oldConsole,
+      log: (...data: any[]) => writeLogFile('log', data),
+      info: (...data: any[]) => writeLogFile('info', data),
+      warn: (...data: any[]) => writeLogFile('warn', data),
+      error: (...data: any[]) => writeLogFile('error', data),
+    } as Console;
+  })(console);
+}
+
 const createWindow = async () => {
+  
   // Create the browser window.
   mainWindow = new BrowserWindow({
     height: 600,
     width: 800,
-    title: json.name,
+    title: 'AniDL GUI BETA',
     webPreferences: {
       nodeIntegration: true,
       preload: path.join(__dirname, 'preload.js')
     },
+    icon,
   });
 
+  if (!process.env.TEST) {
+    const response = dialog.showMessageBoxSync(mainWindow, {
+      title: 'Test Version Information',
+      message: 'I understand that this is a test version that is subject to changes and most certainly contains errors.' 
+        + '\nI understand that I am using this tool at my own risk.'
+        + '\nI know that bugs or suggestions should be made to Izuco on Discord or under github@izuco.dev'
+        + '\nI understand that I should thank Darekon for the art works and the concept art if I see him',
+      buttons: [
+        'Cancel',
+        'I understand'
+      ],
+      type: 'info'
+    });
+    if (response !== 1)
+      app.quit();
+  }
+
   registerMessageHandler(mainWindow);
   
   if (!process.env.USE_BROWSER) {
@@ -35,7 +92,7 @@ const createWindow = async () => {
 
     // Path.sep seems to return / on windows with electron 
     // \\ in Filename on Linux is possible but I don't see another way rn
-    const sep = __dirname.indexOf('\\') == -1 ? '/' : '\\';
+    const sep = isWindows ? '\\' : '/';
 
     const p = __dirname.split(sep);
     p.pop();

gui/electron/src/serviceHandler/crunchyroll.ts

@@ -40,7 +40,8 @@ class CrunchyHandler extends Base implements MessageHandler {
           title: a.seasonTitle,
           season: a.season.toString()
         },
-        e: a.e
+        e: a.e,
+        episode: a.episodeNumber
       };
     }) };
   }

gui/electron/src/serviceHandler/funimation.ts

@@ -52,7 +52,8 @@ class FunimationHandler extends Base implements MessageHandler {
           title: a.seasonTitle,
           season: a.seasonNumber
         },
-        e: a.episodeID
+        e: a.episodeID,
+        episode: a.seasonNumber
       };
     }) };
   }

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

@@ -1,3 +1,4 @@
+import Queue from "./Queue/Queue";
 import { Box } from "@mui/material";
 import React from "react";
 import EpisodeListing from "./Listing/EpisodeListing";
@@ -5,6 +6,7 @@ import EpisodeListing from "./Listing/EpisodeListing";
 const Bottom: React.FC = () => {
   return <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
     <EpisodeListing />
+    <Queue />
   </Box>
 }
 

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

@@ -0,0 +1,20 @@
+import { Box, Divider, Typography } from "@mui/material";
+import React from "react";
+import useStore from "../../../../hooks/useStore";
+
+const Queue: React.FC = () => {
+  const [ { queue } ] = useStore();
+
+  return <Box>
+    {queue.map((item, index) => {
+      return <Box key={`QueueItem_${index}`} sx={{ gap: 1, display: 'flex', flexDirection: 'column' }}>
+        <Typography color='text.primary'>
+          {`[${item.q}] S${item.parent.season}E${item.episode} - ${item.title} (${item.dubLang.join(', ')})`}
+        </Typography>
+        <Divider />
+      </Box>
+    })}
+  </Box>
+}
+
+export default Queue;

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

@@ -116,7 +116,7 @@ const DownloadSelector: React.FC = () => {
       <Button onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, but: !store.downloadOptions.but } })} variant={store.downloadOptions.but ? 'contained' : 'outlined'}>Download all but</Button>
     </Box>
     <Box sx={{ gap: 2, flex: 0, m: 1, mb: 3, display: 'flex', justifyContent: 'center' }}>
-      <LoadingButton loading={loading} onClick={listEpisodes} variant='contained'>Search for episodes</LoadingButton>
+      <LoadingButton loading={loading} onClick={listEpisodes} variant='contained'>List episodes</LoadingButton>
       <LoadingButton loading={loading} onClick={addToQueue} variant='contained'>Add to Queue</LoadingButton>
     </Box>
   </Box> 

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

@@ -1,5 +1,5 @@
 import { Close } from "@mui/icons-material";
-import { Box, Typography } from "@mui/material";
+import { Box, Skeleton, Typography } from "@mui/material";
 import React from "react";
 import { messageChannelContext } from "../../../provider/MessageChannel";
 import LinearProgressWithLabel from "../../reusable/LinearProgressWithLabel";
@@ -73,8 +73,11 @@ const Progress: React.FC = () => {
         </Box>
       </Box>
     </Box>
-  </Box> : <Box sx={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-    <Close color='primary' fontSize="large"/>
+  </Box> : <Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 1 }}>
+    <Skeleton animation={false} variant="rectangular" sx={{ width: '100%', height: '60%', maxHeight: 200 }}/>
+    <Skeleton animation={false} variant="text"/>
+    <Skeleton animation={false} variant="text" />
+    <Skeleton animation={false} variant="text" />
   </Box>
 }