From 23f185c87722585f8335477960656d4c5e2b8da2 Mon Sep 17 00:00:00 2001
From: AnimeDL <multidownloadernx@gmail.com>
Date: Sat, 6 Apr 2024 09:10:48 -0700
Subject: [PATCH] eslint fixes

---
 .eslintignore                                 |   5 -
 .eslintrc.json                                |  56 --
 eslint.config.mjs                             |  24 +-
 gui/react/src/Layout.tsx                      |   6 +-
 gui/react/src/Style.tsx                       |   4 +-
 .../DownloadSelector/DownloadSelector.tsx     | 410 ++++++-------
 .../Listing/EpisodeListing.tsx                |  24 +-
 .../AddToQueue/SearchBox/SearchBox.tsx        |   4 +-
 .../src/components/MainFrame/Queue/Queue.tsx  | 562 +++++++++---------
 gui/react/src/components/MenuBar/MenuBar.tsx  |  26 +-
 gui/react/src/index.tsx                       |   2 +-
 gui/react/src/provider/MessageChannel.tsx     |  12 +-
 package.json                                  |   4 +-
 13 files changed, 542 insertions(+), 597 deletions(-)
 delete mode 100644 .eslintignore
 delete mode 100644 .eslintrc.json

diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index dd20ec6..0000000
--- a/.eslintignore
+++ /dev/null
@@ -1,5 +0,0 @@
-lib
-/videos/*.ts
-build
-dev.js
-tsc.ts
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 175b10a..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "es2021": true,
-        "node": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "@typescript-eslint"
-    ],
-    "overrides": [
-        {
-            "files": ["gui/react/**/*"],
-            "rules": {
-                "no-console": 0
-            }
-        }
-    ],
-    "rules": {
-        "no-console": 2,
-        "react/prop-types": 0,
-        "react-hooks/exhaustive-deps": 0,
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-unsafe-declaration-merging": "warn",
-        "@typescript-eslint/no-unused-vars" : "warn",
-        "indent": [
-            "error",
-            2
-        ],
-        "linebreak-style": [
-            "warn",
-            "windows"
-        ],
-        "quotes": [
-            "error",
-            "single"
-        ],
-        "semi": [
-            "error",
-            "always"
-        ]
-    }
-}
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 68875de..0770387 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -7,15 +7,6 @@ import react from 'eslint-plugin-react';
 export default tseslint.config(
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
-  {
-    ignores: [
-      'lib',
-      '/videos/*.ts',
-      'build',
-      'dev.js',
-      'tsc.ts'
-    ]
-  },
   {
     rules: {
       'no-console': 2,
@@ -54,5 +45,20 @@ export default tseslint.config(
       },
       parser: tseslint.parser
     }
+  },
+  {
+    ignores: [
+      '**/lib',
+      '**/videos/*.ts',
+      '**/build',
+      'dev.js',
+      'tsc.ts'
+    ]
+  },
+  {
+    files: ['gui/react/**/*'],
+    rules: {
+      'no-console': 0
+    }
   }
 );
\ No newline at end of file
diff --git a/gui/react/src/Layout.tsx b/gui/react/src/Layout.tsx
index 54bc212..478ae91 100644
--- a/gui/react/src/Layout.tsx
+++ b/gui/react/src/Layout.tsx
@@ -23,11 +23,11 @@ const Layout: React.FC = () => {
       maxWidth: '93rem',
       maxHeight: '3rem'
       //backgroundColor: '#ffffff',
-      }}>
+    }}>
       <LogoutButton />
       <AuthButton />
-        <Button variant="contained" startIcon={<Folder />} onClick={() => messageHandler?.openFolder('content')} sx={{ height: '37px' }}>Open Output Directory</Button>
-        <Button variant="contained" startIcon={<ClearAll />} onClick={() => messageHandler?.clearQueue() } sx={{ height: '37px' }}>Clear Queue</Button>
+      <Button variant="contained" startIcon={<Folder />} onClick={() => messageHandler?.openFolder('content')} sx={{ height: '37px' }}>Open Output Directory</Button>
+      <Button variant="contained" startIcon={<ClearAll />} onClick={() => messageHandler?.clearQueue() } sx={{ height: '37px' }}>Clear Queue</Button>
       <AddToQueue />
       <StartQueueButton />
     </Box>
diff --git a/gui/react/src/Style.tsx b/gui/react/src/Style.tsx
index 8ac45f8..1195472 100644
--- a/gui/react/src/Style.tsx
+++ b/gui/react/src/Style.tsx
@@ -11,8 +11,8 @@ const makeTheme = (mode: 'dark'|'light') : Partial<Theme> => {
 
 const Style: FCWithChildren = ({children}) => {
   return <ThemeProvider theme={makeTheme('dark')}>
-      <Box sx={{   }}/>
-      {children}
+    <Box sx={{   }}/>
+    {children}
   </ThemeProvider>;
 };
 
diff --git a/gui/react/src/components/AddToQueue/DownloadSelector/DownloadSelector.tsx b/gui/react/src/components/AddToQueue/DownloadSelector/DownloadSelector.tsx
index 9707dc6..586518b 100644
--- a/gui/react/src/components/AddToQueue/DownloadSelector/DownloadSelector.tsx
+++ b/gui/react/src/components/AddToQueue/DownloadSelector/DownloadSelector.tsx
@@ -86,240 +86,240 @@ const DownloadSelector: React.FC<DownloadSelectorProps> = ({ onFinish }) => {
       flexDirection: 'column',
       alignItems: 'center',
       margin: '5px',
-      }}>
-        <Box sx={{
-          width: '50rem',
-          height: '21rem',
-          margin: '10px',
-          display: 'flex',
-          justifyContent: 'space-between',
-          //backgroundColor: '#ffffff30',
-          }}>
-        <Box sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: '0.7rem',
-      //backgroundColor: '#ff000030'
     }}>
-      <Typography sx={{fontSize: '1.4rem'}}>
-        General Options
-      </Typography>
-      <TextField value={store.downloadOptions.id} required onChange={e => {
-        dispatch({
-          type: 'downloadOptions',
-          payload: { ...store.downloadOptions, id: e.target.value }
-        });
-      }} label='Show ID'/>
-      <TextField type='number' value={store.downloadOptions.q} required onChange={e => {
-        const parsed = parseInt(e.target.value);
-        if (isNaN(parsed) || parsed < 0 || parsed > 10)
-          return;
-        dispatch({
-          type: 'downloadOptions',
-          payload: { ...store.downloadOptions, q: parsed }
-        });
-      }} label='Quality Level (0 for max)'/>
-      <Box sx={{ display: 'flex', gap: '5px' }}>
-      <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, noaudio: !store.downloadOptions.noaudio } })} variant={store.downloadOptions.noaudio ? 'contained' : 'outlined'}>Skip Audio</Button>
-      <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, novids: !store.downloadOptions.novids } })} variant={store.downloadOptions.novids ? 'contained' : 'outlined'}>Skip Video</Button>
-      </Box>
-      <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, dlVideoOnce: !store.downloadOptions.dlVideoOnce } })} variant={store.downloadOptions.dlVideoOnce ? 'contained' : 'outlined'}>Skip Unnecessary</Button>
-      <Tooltip title={store.service == 'hidive' ? '' :
-      <Typography>
-      Simulcast is only supported on Hidive
-      </Typography>}
-      arrow placement='top'
-      >
-      <Box>
-      <Button sx={{ textTransform: 'none'}} disabled={store.service != 'hidive'} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, simul: !store.downloadOptions.simul } })} variant={store.downloadOptions.simul ? 'contained' : 'outlined'}>Download Simulcast ver.</Button>
-      </Box>
-      </Tooltip>
-      </Box>
-    <Box sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '0.7rem',
-        //backgroundColor: '#00000020'
-      }}>
-        <Typography sx={{fontSize: '1.4rem'}}>
-        Episode Options
-      </Typography>
       <Box sx={{
+        width: '50rem',
+        height: '21rem',
+        margin: '10px',
         display: 'flex',
-        flexDirection: 'column',
-        gap: '1px'
+        justifyContent: 'space-between',
+        //backgroundColor: '#ffffff30',
       }}>
         <Box sx={{
-          borderColor: '#595959',
-          borderStyle: 'solid',
-          borderWidth: '1px',
-          borderRadius: '5px',
-          //backgroundColor: '#ff4567',
-          width: '15rem',
-          height: '3.5rem',
           display: 'flex',
-          '&:hover' : {
-            borderColor: '#ffffff',
-          },
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '0.7rem',
+          //backgroundColor: '#ff000030'
         }}>
-          <InputBase sx={{
-            ml: 2,
-            flex: 1,
-          }}
-          disabled={store.downloadOptions.all} value={store.downloadOptions.e} required onChange={e => {
+          <Typography sx={{fontSize: '1.4rem'}}>
+        General Options
+          </Typography>
+          <TextField value={store.downloadOptions.id} required onChange={e => {
             dispatch({
               type: 'downloadOptions',
-              payload: { ...store.downloadOptions, e: e.target.value }
+              payload: { ...store.downloadOptions, id: e.target.value }
             });
-          }} placeholder='Episode Select'/>
-          <Divider orientation='vertical'/>
-          <LoadingButton loading={loading} disableElevation disableFocusRipple disableRipple disableTouchRipple onClick={listEpisodes} variant='text' sx={{ textTransform: 'none'}}><Typography>List<br/>Episodes</Typography></LoadingButton>
+          }} label='Show ID'/>
+          <TextField type='number' value={store.downloadOptions.q} required onChange={e => {
+            const parsed = parseInt(e.target.value);
+            if (isNaN(parsed) || parsed < 0 || parsed > 10)
+              return;
+            dispatch({
+              type: 'downloadOptions',
+              payload: { ...store.downloadOptions, q: parsed }
+            });
+          }} label='Quality Level (0 for max)'/>
+          <Box sx={{ display: 'flex', gap: '5px' }}>
+            <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, noaudio: !store.downloadOptions.noaudio } })} variant={store.downloadOptions.noaudio ? 'contained' : 'outlined'}>Skip Audio</Button>
+            <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, novids: !store.downloadOptions.novids } })} variant={store.downloadOptions.novids ? 'contained' : 'outlined'}>Skip Video</Button>
+          </Box>
+          <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, dlVideoOnce: !store.downloadOptions.dlVideoOnce } })} variant={store.downloadOptions.dlVideoOnce ? 'contained' : 'outlined'}>Skip Unnecessary</Button>
+          <Tooltip title={store.service == 'hidive' ? '' :
+            <Typography>
+      Simulcast is only supported on Hidive
+            </Typography>}
+          arrow placement='top'
+          >
+            <Box>
+              <Button sx={{ textTransform: 'none'}} disabled={store.service != 'hidive'} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, simul: !store.downloadOptions.simul } })} variant={store.downloadOptions.simul ? 'contained' : 'outlined'}>Download Simulcast ver.</Button>
+            </Box>
+          </Tooltip>
         </Box>
-      </Box>
-      <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, all: !store.downloadOptions.all } })} variant={store.downloadOptions.all ? 'contained' : 'outlined'}>Download All</Button>
-      <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, but: !store.downloadOptions.but } })} variant={store.downloadOptions.but ? 'contained' : 'outlined'}>Download All but</Button>
-      </Box>
-      <Box sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '0.7rem',
+        <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '0.7rem',
+        //backgroundColor: '#00000020'
+        }}>
+          <Typography sx={{fontSize: '1.4rem'}}>
+        Episode Options
+          </Typography>
+          <Box sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1px'
+          }}>
+            <Box sx={{
+              borderColor: '#595959',
+              borderStyle: 'solid',
+              borderWidth: '1px',
+              borderRadius: '5px',
+              //backgroundColor: '#ff4567',
+              width: '15rem',
+              height: '3.5rem',
+              display: 'flex',
+              '&:hover' : {
+                borderColor: '#ffffff',
+              },
+            }}>
+              <InputBase sx={{
+                ml: 2,
+                flex: 1,
+              }}
+              disabled={store.downloadOptions.all} value={store.downloadOptions.e} required onChange={e => {
+                dispatch({
+                  type: 'downloadOptions',
+                  payload: { ...store.downloadOptions, e: e.target.value }
+                });
+              }} placeholder='Episode Select'/>
+              <Divider orientation='vertical'/>
+              <LoadingButton loading={loading} disableElevation disableFocusRipple disableRipple disableTouchRipple onClick={listEpisodes} variant='text' sx={{ textTransform: 'none'}}><Typography>List<br/>Episodes</Typography></LoadingButton>
+            </Box>
+          </Box>
+          <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, all: !store.downloadOptions.all } })} variant={store.downloadOptions.all ? 'contained' : 'outlined'}>Download All</Button>
+          <Button sx={{ textTransform: 'none'}} onClick={() => dispatch({ type: 'downloadOptions', payload: { ...store.downloadOptions, but: !store.downloadOptions.but } })} variant={store.downloadOptions.but ? 'contained' : 'outlined'}>Download All but</Button>
+        </Box>
+        <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '0.7rem',
         //backgroundColor: '#00ff0020'
-      }}>
-      <Typography sx={{fontSize: '1.4rem'}}>
+        }}>
+          <Typography sx={{fontSize: '1.4rem'}}>
         Language Options
-      </Typography>
-      <MultiSelect
-        title='Dub Languages'
-        values={availableDubs}
-        selected={store.downloadOptions.dubLang}
-        onChange={(e) => {
-          dispatch({
-            type: 'downloadOptions',
-            payload: { ...store.downloadOptions, dubLang: e }
-          });
-        }}
-        allOption
-      />
+          </Typography>
+          <MultiSelect
+            title='Dub Languages'
+            values={availableDubs}
+            selected={store.downloadOptions.dubLang}
+            onChange={(e) => {
+              dispatch({
+                type: 'downloadOptions',
+                payload: { ...store.downloadOptions, dubLang: e }
+              });
+            }}
+            allOption
+          />
       
-      <MultiSelect
-        title='Sub Languages'
-        values={availableSubs}
-        selected={store.downloadOptions.dlsubs}
-        onChange={(e) => {
-          dispatch({
-            type: 'downloadOptions',
-            payload: { ...store.downloadOptions, dlsubs: e }
-          });
-        }}
-      />
-      <Tooltip title={store.service == 'crunchy' ? '' :
+          <MultiSelect
+            title='Sub Languages'
+            values={availableSubs}
+            selected={store.downloadOptions.dlsubs}
+            onChange={(e) => {
+              dispatch({
+                type: 'downloadOptions',
+                payload: { ...store.downloadOptions, dlsubs: e }
+              });
+            }}
+          />
+          <Tooltip title={store.service == 'crunchy' ? '' :
             <Typography>
               Hardsubs are only supported on Crunchyroll
             </Typography>
-      }
+          }
           arrow placement='top'>
-      <Box sx={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '100%',
-      gap: '1rem'
-    }}>
+            <Box sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '100%',
+              gap: '1rem'
+            }}>
       
-      <Box sx={{
-          borderRadius: '5px',
-          //backgroundColor: '#ff4567',
-          width: '15rem',
-          height: '3.5rem',
-          display: 'flex',
-        }}>
-          <FormControl fullWidth>
-            <InputLabel id='hsLabel'>Hardsub Language</InputLabel>
-          <Select
-          MenuProps={{
-            PaperProps: {
-              style: {
-                maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-                width: 250
-              }
-            }
-          }}
-          labelId='hsLabel'
-          label='Hardsub Language'
-          disabled={store.service != 'crunchy'}
-          value={store.downloadOptions.hslang}
-          onChange={(e) => {
-            dispatch({
-              type: 'downloadOptions',
-              payload: { ...store.downloadOptions, hslang: (e.target.value as string) === '' ? undefined : e.target.value as string }
-            });
-          }}
-          >
-            <MenuItem value=''>No Hardsub</MenuItem>
-            {availableSubs.map((lang) => {
-              if(lang === 'all' || lang === 'none')
-                return undefined
-              return <MenuItem value={lang}>{lang}</MenuItem>
-            })}
-            </Select>
-            </FormControl>
-            </Box>
+              <Box sx={{
+                borderRadius: '5px',
+                //backgroundColor: '#ff4567',
+                width: '15rem',
+                height: '3.5rem',
+                display: 'flex',
+              }}>
+                <FormControl fullWidth>
+                  <InputLabel id='hsLabel'>Hardsub Language</InputLabel>
+                  <Select
+                    MenuProps={{
+                      PaperProps: {
+                        style: {
+                          maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+                          width: 250
+                        }
+                      }
+                    }}
+                    labelId='hsLabel'
+                    label='Hardsub Language'
+                    disabled={store.service != 'crunchy'}
+                    value={store.downloadOptions.hslang}
+                    onChange={(e) => {
+                      dispatch({
+                        type: 'downloadOptions',
+                        payload: { ...store.downloadOptions, hslang: (e.target.value as string) === '' ? undefined : e.target.value as string }
+                      });
+                    }}
+                  >
+                    <MenuItem value=''>No Hardsub</MenuItem>
+                    {availableSubs.map((lang) => {
+                      if(lang === 'all' || lang === 'none')
+                        return undefined;
+                      return <MenuItem value={lang}>{lang}</MenuItem>;
+                    })}
+                  </Select>
+                </FormControl>
+              </Box>
             
         
-        <Tooltip title={
-        <Typography>
+              <Tooltip title={
+                <Typography>
            Downloads the hardsub version of the selected subtitle.<br/>Subtitles are displayed <b>PERMANENTLY!</b><br/>You can choose only <b>1</b> subtitle per video!
-           </Typography>
-      } arrow placement='top'>
-        <InfoOutlinedIcon sx={{
-          transition: '100ms',
-          ml: '0.35rem',
-          mr: '0.65rem',
-          '&:hover' : {
-            color: '#ffffff30',
-          }
-        }} />
-      </Tooltip>
+                </Typography>
+              } arrow placement='top'>
+                <InfoOutlinedIcon sx={{
+                  transition: '100ms',
+                  ml: '0.35rem',
+                  mr: '0.65rem',
+                  '&:hover' : {
+                    color: '#ffffff30',
+                  }
+                }} />
+              </Tooltip>
+            </Box>
+          </Tooltip>
         </Box>
-        </Tooltip>
       </Box>
-    </Box>
-    <Box sx={{width: '95%', height: '0.3rem', backgroundColor: '#ffffff50', borderRadius: '10px', marginBottom: '20px'}}/>
-    <Box sx={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '100%',
-      gap: '15px'
-    }}>
-    <TextField value={store.downloadOptions.fileName} onChange={e => {
-        dispatch({
-          type: 'downloadOptions',
-          payload: { ...store.downloadOptions, fileName: e.target.value }
-        });
-      }} sx={{ width: '87%' }} label='Filename Overwrite' />
-      <Tooltip title={
-        <Typography>
+      <Box sx={{width: '95%', height: '0.3rem', backgroundColor: '#ffffff50', borderRadius: '10px', marginBottom: '20px'}}/>
+      <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        gap: '15px'
+      }}>
+        <TextField value={store.downloadOptions.fileName} onChange={e => {
+          dispatch({
+            type: 'downloadOptions',
+            payload: { ...store.downloadOptions, fileName: e.target.value }
+          });
+        }} sx={{ width: '87%' }} label='Filename Overwrite' />
+        <Tooltip title={
+          <Typography>
            Click here to see the documentation
-           </Typography>
-      } arrow placement='top'>
-        <Link href='https://github.com/anidl/multi-downloader-nx/blob/master/docs/DOCUMENTATION.md#filename-template' rel="noopener noreferrer" target="_blank">
-        <InfoOutlinedIcon sx={{
-          transition: '100ms',
-          '&:hover' : {
-            color: '#ffffff30',
-          }
-        }} />
-        </Link>
-      </Tooltip>
+          </Typography>
+        } arrow placement='top'>
+          <Link href='https://github.com/anidl/multi-downloader-nx/blob/master/docs/DOCUMENTATION.md#filename-template' rel="noopener noreferrer" target="_blank">
+            <InfoOutlinedIcon sx={{
+              transition: '100ms',
+              '&:hover' : {
+                color: '#ffffff30',
+              }
+            }} />
+          </Link>
+        </Tooltip>
       </Box>
     </Box>
     <Box sx={{width: '95%', height: '0.3rem', backgroundColor: '#ffffff50', borderRadius: '10px', marginTop: '10px'}}/>
     
-      <LoadingButton sx={{ margin: '15px', textTransform: 'none' }}  loading={loading} onClick={addToQueue} variant='contained'>Add to Queue</LoadingButton>
+    <LoadingButton sx={{ margin: '15px', textTransform: 'none' }}  loading={loading} onClick={addToQueue} variant='contained'>Add to Queue</LoadingButton>
      
   </Box>; 
 };
diff --git a/gui/react/src/components/AddToQueue/DownloadSelector/Listing/EpisodeListing.tsx b/gui/react/src/components/AddToQueue/DownloadSelector/Listing/EpisodeListing.tsx
index d3668a2..0d34d96 100644
--- a/gui/react/src/components/AddToQueue/DownloadSelector/Listing/EpisodeListing.tsx
+++ b/gui/react/src/components/AddToQueue/DownloadSelector/Listing/EpisodeListing.tsx
@@ -75,21 +75,21 @@ const EpisodeListing: React.FC = () => {
       </ListItem>
       {store.episodeListing.filter((a) => season === 'all' ? true : a.season === season).map((item, index, { length }) => {
         const e = isNaN(parseInt(item.e)) ? item.e : parseInt(item.e);
-        const idStr = `S${item.season}E${e}`
+        const idStr = `S${item.season}E${e}`;
         const isSelected = selected.includes(e.toString());
         const imageRef = React.createRef<HTMLImageElement>();
         const summaryRef = React.createRef<HTMLParagraphElement>();
         return <Box {...{ mouseData: isSelected }} key={`Episode_List_Item_${index}`}>
           <ListItem sx={{backdropFilter: isSelected ? 'brightness(1.5)' : '', '&:hover': {backdropFilter: 'brightness(1.5)'}, display: 'grid', gridTemplateColumns: '25px 50px 1fr 5fr' }} 
-          onClick={() => {
-            let arr: string[] = [];
-            if (isSelected) {
-              arr = [...selected.filter(a => a !== e.toString())];
-            } else {
-              arr = [...selected, e.toString()];
-            }
-            setSelected(arr.filter(a => a.length > 0));
-          }}>
+            onClick={() => {
+              let arr: string[] = [];
+              if (isSelected) {
+                arr = [...selected.filter(a => a !== e.toString())];
+              } else {
+                arr = [...selected, e.toString()];
+              }
+              setSelected(arr.filter(a => a.length > 0));
+            }}>
             { isSelected ? <CheckBox /> : <CheckBoxOutlineBlank /> }
             <Typography color='text.primary' sx={{ textAlign: 'center' }}>
               {idStr}
@@ -133,9 +133,9 @@ const EpisodeListing: React.FC = () => {
                 await navigator.clipboard.writeText(item.description!);
                 enqueueSnackbar('Copied summary to clipboard', {
                   variant: 'info'
-                })
+                });
               },
-              text: "Copy summary to clipboard"
+              text: 'Copy summary to clipboard'
             }
           ]} popupItem={summaryRef} />
           {index < length - 1 && <Divider />}
diff --git a/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx b/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx
index 6e6e56c..855f26d 100644
--- a/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx
+++ b/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx
@@ -100,9 +100,9 @@ const SearchBox: React.FC = () => {
                         await navigator.clipboard.writeText(a.desc!);
                         enqueueSnackbar('Copied summary to clipboard', {
                           variant: 'info'
-                        })
+                        });
                       },
-                      text: "Copy summary to clipboard"
+                      text: 'Copy summary to clipboard'
                     }
                   ]} popupItem={summaryRef} />
                 }
diff --git a/gui/react/src/components/MainFrame/Queue/Queue.tsx b/gui/react/src/components/MainFrame/Queue/Queue.tsx
index 315354a..7707f74 100644
--- a/gui/react/src/components/MainFrame/Queue/Queue.tsx
+++ b/gui/react/src/components/MainFrame/Queue/Queue.tsx
@@ -17,113 +17,9 @@ const Queue: React.FC = () => {
 
   return data || queue.length > 0 ? <>
     {data && <>
-    <Box sx={{
-      display: 'flex',
-      width: '100%',
-      flexDirection: 'column',
-      alignItems: 'center',
-    }}>
-      <Box sx={{
-          marginTop: '2rem',
-          marginBottom: '1rem',
-          height: '12rem',
-          width: '93vw',
-          maxWidth: '93rem',
-          backgroundColor: '#282828',
-          boxShadow: '0px 0px 50px #00000090',
-          borderRadius: '10px',
-          display: 'flex',
-          transition: '250ms'
-          }}>
-        <img style={{
-            borderRadius: '5px',
-            margin: '5px',
-            boxShadow: '0px 0px 10px #00000090',
-            userSelect: 'none',
-          }}
-        src={data.downloadInfo.image} height='auto' width='auto' alt="Thumbnail" />
-        <Box
-          sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%',
-          justifyContent: 'center'
-        }}>
-        <Box sx={{
-          display: 'flex',
-        }}>
-        <Box sx={{
-          //backgroundColor: '#ff0000',
-          width: '70%',
-          marginLeft: '10px'
-        }}>
-          <Box sx={{
-            flexDirection: 'column',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}>
-            <Typography color='text.primary' sx={{
-              fontSize: '1.8rem',
-            }}>
-              {data.downloadInfo.parent.title}
-            </Typography>
-            <Typography color='text.primary' sx={{
-              fontSize: '1.2rem',
-            }}>
-              {data.downloadInfo.title}
-            </Typography>
-          </Box>
-        </Box>
-        <Box sx={{
-          //backgroundColor: '#00ff00',
-          width: '30%',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-          <Typography color='text.primary' sx={{
-            fontSize: '1.8rem',
-          }}>
-            Downloading: {data.downloadInfo.language.name}
-          </Typography>
-        </Box>
-        </Box>
-        <Box sx={{
-          height: '50%',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          //backgroundColor: '#0000ff',
-        }}>
-          <LinearProgress variant='determinate'
-          sx={{
-            height: '20px',
-            width: '97.53%',
-            margin: '10px',
-            boxShadow: '0px 0px 10px #00000090',
-            borderRadius: '10px',
-          }} value={(typeof data.progress.percent === 'string' ? parseInt(data.progress.percent) : data.progress.percent)}
-           />
-          <Box> 
-            <Typography color='text.primary' 
-            sx={{
-              fontSize: '1.3rem',
-            }}>
-              {data.progress.cur} / {(data.progress.total)} parts ({data.progress.percent}% | {formatTime(data.progress.time)} | {(data.progress.downloadSpeed / 1024 / 1024).toFixed(2)} MB/s | {(data.progress.bytes / 1024 / 1024).toFixed(2)}MB)
-            </Typography>
-          </Box>
-        </Box>
-        </Box>
-      </Box>
-      </Box>
-    </>
-    }
-    {
-      current && !data && <>
       <Box sx={{
         display: 'flex',
+        width: '100%',
         flexDirection: 'column',
         alignItems: 'center',
       }}>
@@ -137,104 +33,208 @@ const Queue: React.FC = () => {
           boxShadow: '0px 0px 50px #00000090',
           borderRadius: '10px',
           display: 'flex',
-          overflow: 'hidden',
           transition: '250ms'
-          }}>
-        <img style={{
+        }}>
+          <img style={{
             borderRadius: '5px',
             margin: '5px',
             boxShadow: '0px 0px 10px #00000090',
             userSelect: 'none',
-            maxWidth: '20.5rem',
           }}
-        src={current.image} height='auto' width='auto' alt="Thumbnail" />
-        <Box
-          sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%',
-          justifyContent: 'center',
-          //backgroundColor: '#ffffff0f'
-        }}>
-        <Box sx={{
-          display: 'flex',
-          
-        }}>
-        <Box sx={{
-          width: '70%',
-          marginLeft: '10px'
-        }}>
-          <Box sx={{
-            flexDirection: 'column',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}>
-            <Typography color='text.primary' sx={{
-              fontSize: '1.8rem',
-            }}>
-              {current.parent.title}
-            </Typography>
-            <Typography color='text.primary' sx={{
-              fontSize: '1.2rem',
-            }}>
-              {current.title}
-            </Typography>
-          </Box>
-        </Box>
-        <Box sx={{
-          //backgroundColor: '#00ff00',
-          width: '30%',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-          <Box sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            position: 'relative',
-          }}>
-          <Typography color='text.primary' sx={{
-            fontSize: '1.8rem',
-          }}>
-            Downloading:
-          </Typography>
-          <CircularProgress variant="indeterminate" sx={{
-            marginLeft: '2rem',
-          }}/>
-          </Box>
-        </Box>
-        </Box>
-        <Box sx={{
-          height: '50%',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          //backgroundColor: '#0000ff',
-        }}>
-          <LinearProgress variant='indeterminate'
-          sx={{
-            height: '20px',
-            width: '97.53%',
-            margin: '10px',
-            boxShadow: '0px 0px 10px #00000090',
-            borderRadius: '10px',
-          }}
-           />
-          <Box> 
-            <Typography color='text.primary' 
+          src={data.downloadInfo.image} height='auto' width='auto' alt="Thumbnail" />
+          <Box
             sx={{
-              fontSize: '1.3rem',
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              justifyContent: 'center'
             }}>
-              0 / ? parts (0% | XX:XX | 0 MB/s | 0MB)
-            </Typography>
+            <Box sx={{
+              display: 'flex',
+            }}>
+              <Box sx={{
+                //backgroundColor: '#ff0000',
+                width: '70%',
+                marginLeft: '10px'
+              }}>
+                <Box sx={{
+                  flexDirection: 'column',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                }}>
+                  <Typography color='text.primary' sx={{
+                    fontSize: '1.8rem',
+                  }}>
+                    {data.downloadInfo.parent.title}
+                  </Typography>
+                  <Typography color='text.primary' sx={{
+                    fontSize: '1.2rem',
+                  }}>
+                    {data.downloadInfo.title}
+                  </Typography>
+                </Box>
+              </Box>
+              <Box sx={{
+                //backgroundColor: '#00ff00',
+                width: '30%',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
+                <Typography color='text.primary' sx={{
+                  fontSize: '1.8rem',
+                }}>
+            Downloading: {data.downloadInfo.language.name}
+                </Typography>
+              </Box>
+            </Box>
+            <Box sx={{
+              height: '50%',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              //backgroundColor: '#0000ff',
+            }}>
+              <LinearProgress variant='determinate'
+                sx={{
+                  height: '20px',
+                  width: '97.53%',
+                  margin: '10px',
+                  boxShadow: '0px 0px 10px #00000090',
+                  borderRadius: '10px',
+                }} value={(typeof data.progress.percent === 'string' ? parseInt(data.progress.percent) : data.progress.percent)}
+              />
+              <Box> 
+                <Typography color='text.primary' 
+                  sx={{
+                    fontSize: '1.3rem',
+                  }}>
+                  {data.progress.cur} / {(data.progress.total)} parts ({data.progress.percent}% | {formatTime(data.progress.time)} | {(data.progress.downloadSpeed / 1024 / 1024).toFixed(2)} MB/s | {(data.progress.bytes / 1024 / 1024).toFixed(2)}MB)
+                </Typography>
+              </Box>
+            </Box>
           </Box>
         </Box>
+      </Box>
+    </>
+    }
+    {
+      current && !data && <>
+        <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}>
+          <Box sx={{
+            marginTop: '2rem',
+            marginBottom: '1rem',
+            height: '12rem',
+            width: '93vw',
+            maxWidth: '93rem',
+            backgroundColor: '#282828',
+            boxShadow: '0px 0px 50px #00000090',
+            borderRadius: '10px',
+            display: 'flex',
+            overflow: 'hidden',
+            transition: '250ms'
+          }}>
+            <img style={{
+              borderRadius: '5px',
+              margin: '5px',
+              boxShadow: '0px 0px 10px #00000090',
+              userSelect: 'none',
+              maxWidth: '20.5rem',
+            }}
+            src={current.image} height='auto' width='auto' alt="Thumbnail" />
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                justifyContent: 'center',
+                //backgroundColor: '#ffffff0f'
+              }}>
+              <Box sx={{
+                display: 'flex',
+          
+              }}>
+                <Box sx={{
+                  width: '70%',
+                  marginLeft: '10px'
+                }}>
+                  <Box sx={{
+                    flexDirection: 'column',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                  }}>
+                    <Typography color='text.primary' sx={{
+                      fontSize: '1.8rem',
+                    }}>
+                      {current.parent.title}
+                    </Typography>
+                    <Typography color='text.primary' sx={{
+                      fontSize: '1.2rem',
+                    }}>
+                      {current.title}
+                    </Typography>
+                  </Box>
+                </Box>
+                <Box sx={{
+                  //backgroundColor: '#00ff00',
+                  width: '30%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}>
+                  <Box sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    position: 'relative',
+                  }}>
+                    <Typography color='text.primary' sx={{
+                      fontSize: '1.8rem',
+                    }}>
+            Downloading:
+                    </Typography>
+                    <CircularProgress variant="indeterminate" sx={{
+                      marginLeft: '2rem',
+                    }}/>
+                  </Box>
+                </Box>
+              </Box>
+              <Box sx={{
+                height: '50%',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                //backgroundColor: '#0000ff',
+              }}>
+                <LinearProgress variant='indeterminate'
+                  sx={{
+                    height: '20px',
+                    width: '97.53%',
+                    margin: '10px',
+                    boxShadow: '0px 0px 10px #00000090',
+                    borderRadius: '10px',
+                  }}
+                />
+                <Box> 
+                  <Typography color='text.primary' 
+                    sx={{
+                      fontSize: '1.3rem',
+                    }}>
+              0 / ? parts (0% | XX:XX | 0 MB/s | 0MB)
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
         </Box>
-      </Box>
-      </Box>
       </>
     }
     {queue.map((queueItem, index, { length }) => {
@@ -255,7 +255,7 @@ const Queue: React.FC = () => {
           borderRadius: '10px',
           display: 'flex',
           overflow: 'hidden',
-          }}>
+        }}>
           <img style={{
             borderRadius: '5px',
             margin: '5px',
@@ -269,102 +269,102 @@ const Queue: React.FC = () => {
             display: 'flex',
             width: '100%',
             justifyContent: 'space-between',
+          }}>
+            <Box sx={{
+              width: '30%',
+              marginRight: '5px',
+              marginLeft: '5px',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
             }}>
-              <Box sx={{
-                width: '30%',
-                marginRight: '5px',
-                marginLeft: '5px',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}>
-                <Typography color='text.primary' sx={{
-                  fontSize: '1.8rem',
-                  overflow: 'hidden',
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
-                }}>
-                  {queueItem.parent.title}
-                </Typography>
-                <Typography color='text.primary' sx={{
-                  fontSize: '1.6rem',
-                  marginTop: '-0.4rem',
-                  marginBottom: '0.4rem',
-                }}>
-              S{queueItem.parent.season}E{queueItem.episode}
-              </Typography>
-                <Typography color='text.primary' sx={{
-                  fontSize: '1.2rem',
-                  marginTop: '-0.4rem',
-                  marginBottom: '0.4rem',
-                  textOverflow: 'ellipsis',
-                }}>
-                {queueItem.title}
-              </Typography>
-              </Box>
-              <Box sx={{
-                width: '40%',
-                marginRight: '5px',
-                marginLeft: '5px',
-                display: 'flex',
-                flexDirection: 'column',
+              <Typography color='text.primary' sx={{
+                fontSize: '1.8rem',
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',
-                justifyContent: 'space-between',
+                textOverflow: 'ellipsis',
+              }}>
+                {queueItem.parent.title}
+              </Typography>
+              <Typography color='text.primary' sx={{
+                fontSize: '1.6rem',
+                marginTop: '-0.4rem',
+                marginBottom: '0.4rem',
+              }}>
+              S{queueItem.parent.season}E{queueItem.episode}
+              </Typography>
+              <Typography color='text.primary' sx={{
+                fontSize: '1.2rem',
+                marginTop: '-0.4rem',
+                marginBottom: '0.4rem',
+                textOverflow: 'ellipsis',
+              }}>
+                {queueItem.title}
+              </Typography>
+            </Box>
+            <Box sx={{
+              width: '40%',
+              marginRight: '5px',
+              marginLeft: '5px',
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              justifyContent: 'space-between',
+            }}>
+              <Typography color='text.primary' sx={{
+                fontSize: '1.8rem',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
               }}>
-                <Typography color='text.primary' sx={{
-                  fontSize: '1.8rem',
-                  overflow: 'hidden',
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
-                }}>
                   Dub(s): {queueItem.dubLang.join(', ')}
-                </Typography>
-                <Typography color='text.primary' sx={{
-                  fontSize: '1.8rem',
-                  overflow: 'hidden',
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
-                }}>
-                  Sub(s): {queueItem.dlsubs.join(', ')}
-                </Typography>
-                <Typography color='text.primary' sx={{
-                  fontSize: '1.8rem',
-                  
-                }}>
-                Quality: {queueItem.q}
-                </Typography>
-              </Box>
-              <Box sx={{
-                marginRight: '5px',
-                marginLeft: '5px',
-                width: '30%',
-                justifyContent: 'center',
-                alignItems: 'center',
-                display: 'flex'
+              </Typography>
+              <Typography color='text.primary' sx={{
+                fontSize: '1.8rem',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
               }}>
+                  Sub(s): {queueItem.dlsubs.join(', ')}
+              </Typography>
+              <Typography color='text.primary' sx={{
+                fontSize: '1.8rem',
+                  
+              }}>
+                Quality: {queueItem.q}
+              </Typography>
+            </Box>
+            <Box sx={{
+              marginRight: '5px',
+              marginLeft: '5px',
+              width: '30%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              display: 'flex'
+            }}>
               <Tooltip title="Delete from queue" arrow placement='top'>
                 <IconButton
-                onClick={() => {
-              msg.removeFromQueue(index);
-            }}
-            sx={{
-              backgroundColor: '#ff573a25',
-              height: '40px',
-              transition: '250ms',
-              '&:hover' : {
-                backgroundColor: '#ff573a',
-              } 
-            }}>
+                  onClick={() => {
+                    msg.removeFromQueue(index);
+                  }}
+                  sx={{
+                    backgroundColor: '#ff573a25',
+                    height: '40px',
+                    transition: '250ms',
+                    '&:hover' : {
+                      backgroundColor: '#ff573a',
+                    } 
+                  }}>
                   <DeleteIcon />
                 </IconButton>
-                </Tooltip>
-                </Box>
-              </Box>
+              </Tooltip>
+            </Box>
           </Box>
         </Box>
+      </Box>
       ;
     })}
   </> : <Box sx={{
@@ -383,12 +383,12 @@ const Queue: React.FC = () => {
     <Box sx={{
       display: 'flex',
       margin: '10px'    
-      }}>
+    }}>
       <Skeleton variant='rectangular' height={'10rem'} width={'20rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
       <Box sx={{
         display: 'flex',
         flexDirection: 'column',
-        }}>
+      }}>
         <Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
         <Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
       </Box>
@@ -396,12 +396,12 @@ const Queue: React.FC = () => {
     <Box sx={{
       display: 'flex',
       margin: '10px'   
-      }}>
+    }}>
       <Skeleton variant='rectangular' height={'10rem'} width={'20rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
       <Box sx={{
         display: 'flex',
         flexDirection: 'column',
-        }}>
+      }}>
         <Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
         <Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
       </Box>
diff --git a/gui/react/src/components/MenuBar/MenuBar.tsx b/gui/react/src/components/MenuBar/MenuBar.tsx
index 9efae16..23f5bb6 100644
--- a/gui/react/src/components/MenuBar/MenuBar.tsx
+++ b/gui/react/src/components/MenuBar/MenuBar.tsx
@@ -2,7 +2,7 @@ import { Box, Button, Menu, MenuItem, Typography } from '@mui/material';
 import React from 'react';
 import { messageChannelContext } from '../../provider/MessageChannel';
 import useStore from '../../hooks/useStore';
-import { StoreState } from '../../provider/Store'
+import { StoreState } from '../../provider/Store';
 
 const MenuBar: React.FC = () => {
   const [ openMenu, setMenuOpen ] = React.useState<'settings'|'help'|undefined>(); 
@@ -15,20 +15,20 @@ const MenuBar: React.FC = () => {
       type: 'version',
       payload: await messageChannel?.version()
     });  
-  }
+  };
 
   getVersion();
   
   const transformService = (service: StoreState['service']) => {
     switch(service) {
-      case 'crunchy': 
-        return "Crunchyroll"
-      case 'funi':
-        return "Funimation"
-      case "hidive":
-        return "Hidive"
+    case 'crunchy': 
+      return 'Crunchyroll';
+    case 'funi':
+      return 'Funimation';
+    case 'hidive':
+      return 'Hidive';
     }
-  }
+  };
 
   const msg = React.useContext(messageChannelContext);
 
@@ -46,12 +46,12 @@ const MenuBar: React.FC = () => {
 
   return <Box sx={{ display: 'flex', marginBottom: '1rem', width: '100%', alignItems: 'center' }}>
     <Box sx={{ position: 'relative', left: '0%', width: '50%'}}>
-    <Button onClick={(e) => handleClick(e, 'settings')}>
+      <Button onClick={(e) => handleClick(e, 'settings')}>
       Settings
-    </Button>
-    <Button onClick={(e) => handleClick(e, 'help')}>
+      </Button>
+      <Button onClick={(e) => handleClick(e, 'help')}>
       Help
-    </Button>
+      </Button>
     </Box>
     <Menu open={openMenu === 'settings'} anchorEl={anchorEl} onClose={handleClose}>
       <MenuItem onClick={() => {
diff --git a/gui/react/src/index.tsx b/gui/react/src/index.tsx
index 7f4bf6d..42f0a07 100644
--- a/gui/react/src/index.tsx
+++ b/gui/react/src/index.tsx
@@ -11,7 +11,7 @@ import Store from './provider/Store';
 import ErrorHandler from './provider/ErrorHandler';
 import QueueProvider from './provider/QueueProvider';
 
-document.body.style.backgroundColor = "rgb(0, 30, 60)";
+document.body.style.backgroundColor = 'rgb(0, 30, 60)';
 document.body.style.display = 'flex';
 document.body.style.justifyContent = 'center';
 
diff --git a/gui/react/src/provider/MessageChannel.tsx b/gui/react/src/provider/MessageChannel.tsx
index 0341b7d..60e8b9a 100644
--- a/gui/react/src/provider/MessageChannel.tsx
+++ b/gui/react/src/provider/MessageChannel.tsx
@@ -15,11 +15,11 @@ export class RandomEventHandler {
   private handler: {
     [eventName in keyof RandomEvents]: Handler<eventName>[]
   } = {
-    progress: [],
-    finish: [],
-    queueChange: [],
-    current: []
-  };
+      progress: [],
+      finish: [],
+      queueChange: [],
+      current: []
+    };
 
   public on<T extends keyof RandomEvents>(name: T, listener: Handler<T>) {
     if (Object.prototype.hasOwnProperty.call(this.handler, name)) {
@@ -212,7 +212,7 @@ const MessageChannelProvider: FCWithChildren = ({ children }) => {
   }
 
   const messageHandler: FrontEndMessages = {
-    name: "default",
+    name: 'default',
     auth: async (data) => (await messageAndResponse(socket, { name: 'auth', data })).data,
     version: async () => (await messageAndResponse(socket, { name: 'version', data: undefined })).data,
     checkToken: async () =>  (await messageAndResponse(socket, { name: 'checkToken', data: undefined })).data,
diff --git a/package.json b/package.json
index da4ae32..d93fddd 100644
--- a/package.json
+++ b/package.json
@@ -113,8 +113,8 @@
     "build-macos-gui": "pnpm run prebuild-gui && cd lib && node modules/build macos-x64 true",
     "build-alpine-gui": "pnpm run prebuild-gui && cd lib && node modules/build alpine-x64 true",
     "build-android-gui": "pnpm run prebuild-gui && cd lib && node modules/build linuxstatic-armv7 true",
-    "eslint": "npx eslint *.ts modules",
-    "eslint-fix": "npx eslint *.ts modules --fix",
+    "eslint": "npx eslint .",
+    "eslint-fix": "npx eslint . --fix",
     "pretest": "pnpm run tsc",
     "test": "pnpm run pretest && cd lib && node modules/build windows-x64 && node modules/build linuxstatic-x64 && node modules/build macos-x64"
   }