pnpm & GUI update

.github/workflows/auto-documentation.yml

@@ -14,13 +14,16 @@ jobs:
     - uses: actions/checkout@v2
       with:
         ref: ${{ github.head_ref }}
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 6.0.2
     - name: Use Node.js 16
       uses: actions/setup-node@v2
       with:
         node-version: 16
         cache: 'npm'
-    - run: npm i 
-    - run: npm run docs
+    - run: pnpm i 
+    - run: pnpm run docs
     - uses: stefanzweifel/git-auto-commit-action@v4
       with:
         commit_message: ${{ github.event.head_commit.message }} + Documentation

.github/workflows/docker.yml

@@ -12,7 +12,6 @@ jobs:
   build-node:
 
     runs-on: ubuntu-latest
-    
     steps:
     - uses: actions/checkout@v2
     - name: Set up Docker Buildx

.github/workflows/release-matrix.yml

@@ -20,10 +20,13 @@ jobs:
         with:
           node-version: 16
           check-latest: true
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 6.0.2
 
       - name: Install Node modules
         run: |
-          npm install
+          pnpm install
 
       - name: Get name and version from package.json
         run: |
@@ -32,7 +35,7 @@ jobs:
           echo PACKAGE_NAME=$(node -p -e "require('./package.json').name") >> $GITHUB_ENV &&
           echo PACKAGE_VERSION=$(node -p -e "require('./package.json').version") >> $GITHUB_ENV || exit 1
       - name: Make build
-        run: npm run build-${{ matrix.build_type }}-${{ matrix.gui }}
+        run: pnpm run build-${{ matrix.build_type }}-${{ matrix.gui }}
 
       - name: Upload release
         uses: actions/upload-release-asset@v1

.github/workflows/test.yml

@@ -16,8 +16,11 @@ jobs:
       with:
         node-version: 14
         cache: 'npm'
-    - run: npm i 
-    - run: npx eslint .
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 6.0.2
+    - run: pnpm i 
+    - run: pnpm dlx eslint .
   test: 
     needs: eslint
     runs-on: ubuntu-latest
@@ -28,6 +31,9 @@ jobs:
       with:
         node-version: 14
         cache: 'npm'
-    - run: npm i 
-    - run: npm run test
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 6.0.2
+    - run: pnpm i 
+    - run: pnpm run test
 

Dockerfile

@@ -13,8 +13,9 @@ RUN echo 'ffmpeg: "./bin/ffmpeg/ffmpeg"\nmkvmerge: "./bin/mkvtoolnix/mkvmerge"'
 
 #Build AniDL
 
-RUN npm i
-RUN npm run build-ubuntu-cli
+RUN npm install -g pnpm
+RUN pnpm i
+RUN pnpm run build-ubuntu-cli
 
 # Move build to new Clean Image
 

gui/react/package.json

@@ -3,24 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.3.1",
-    "@mui/lab": "^5.0.0-alpha.66",
-    "@mui/material": "^5.3.1",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.0",
-    "@types/node": "^16.11.21",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "notistack": "^2.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
-    "typescript": "^4.5.5",
-    "web-vitals": "^2.1.4"
+    "@babel/core": ">=7.0.0-0 <8.0.0",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.9",
+    "@mui/lab": "^5.0.0-alpha.120",
+    "@mui/material": "^5.11.9",
+    "@types/node": "^18.14.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.11",
+    "notistack": "^2.0.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "react-scripts start",

gui/react/src/@types/FC.d.ts

@@ -0,0 +1,3 @@
+type FCWithChildren<T = {}> = React.FC<{
+  children?: React.ReactNode[]|React.ReactNode
+}>

gui/react/src/Layout.tsx

@@ -7,6 +7,7 @@ import AddToQueue from "./components/AddToQueue/AddToQueue";
 import { messageChannelContext } from './provider/MessageChannel';
 import { ClearAll, Folder } from "@mui/icons-material";
 import useStore from "./hooks/useStore";
+import StartQueueButton from "./components/StartQueue";
 
 const Layout: React.FC = () => {
 
@@ -22,6 +23,7 @@ const Layout: React.FC = () => {
         <Button variant="contained" startIcon={<ClearAll />} onClick={() => dispatch({ type: 'queue', payload: [], extraInfo: { force: true } })}>Clear Queue</Button>
       </Box>
       <AddToQueue />
+      <StartQueueButton />
     </Box>
     <MainFrame />
   </Box>;

gui/react/src/Style.tsx

@@ -10,7 +10,7 @@ const makeTheme = (mode: 'dark'|'light') : Partial<Theme> => {
   });
 };
 
-const Style: React.FC = ({children}) => {
+const Style: FCWithChildren = ({children}) => {
   return <ThemeProvider theme={makeTheme('dark')}>
     <Container sx={{ mt: 3 }} maxWidth='xl'>
       <Box sx={{ position: 'fixed', height: '100%', width: '100%', zIndex: -500, backgroundColor: 'rgb(0, 30, 60)', top: 0, left: 0 }}/>

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

@@ -1,5 +1,5 @@
 import { Add } from "@mui/icons-material";
-import { Box, Button, Container, Dialog, Divider } from "@mui/material";
+import { Box, Button, Dialog, Divider } from "@mui/material";
 import React from "react";
 import DownloadSelector from "./DownloadSelector/DownloadSelector";
 import EpisodeListing from "./DownloadSelector/Listing/EpisodeListing";
@@ -17,8 +17,9 @@ const AddToQueue: React.FC = () => {
         <DownloadSelector onFinish={() => setOpen(false)} />
       </Box>
     </Dialog>
-    <Button variant='contained' onClick={() => setOpen(true)}>
+    <Button  variant='contained' onClick={() => setOpen(true)}>
       <Add />
+      Add to Queue
     </Button>
   </Box>
 }

gui/react/src/components/AddToQueue/DownloadSelector/Listing/EpisodeListing.tsx

@@ -106,6 +106,12 @@ const EpisodeListing: React.FC = () => {
                 <Typography color='text.primary'>
                   {item.description}
                 </Typography>
+                <Box sx={{ display: 'grid', gridTemplateColumns: 'fit-content 1fr' }}>
+                  <Typography>
+                    <br />
+                    Available audio languages: {item.lang.join(', ')}
+                  </Typography>
+                </Box>
               </Box>
             </ListItem>
             {index < length - 1 && <Divider />}

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

@@ -8,6 +8,8 @@ const useDownloadManager = () => {
   const [ { currentDownload }, dispatch ] = useStore();
   const messageHandler = React.useContext(messageChannelContext);
 
+  console.log(currentDownload);
+
   const [progressData, setProgressData] = React.useState<ExtendedProgress|undefined>();
   
   React.useEffect(() => {

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

@@ -6,7 +6,7 @@ import useDownloadManager from "../DownloadManager/DownloadManager";
 
 const Queue: React.FC = () => {
   const data = useDownloadManager();
-
+  console.log("data", data)
   const [{ queue }, dispatch] = useStore();
   return data || queue.length > 0 ? <>
     {data && <Box sx={{ mb: 1, height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1 }}>
@@ -33,8 +33,9 @@ const Queue: React.FC = () => {
         </Box>
       </Box>
     </Box>}
-    {queue.length && <Divider variant="fullWidth" />}
+    {queue.length && data && <Divider variant="fullWidth" />}
     {queue.map((queueItem, index, { length }) => {
+      console.log(queueItem);
       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%' />
@@ -58,6 +59,7 @@ const Queue: React.FC = () => {
             </Typography>
             <Button onClick={() => {
               const override = [...queue];
+              override.splice(index, 1);
               dispatch({
                 type: 'queue',
                 payload: override,

gui/react/src/components/StartQueue.tsx

@@ -0,0 +1,35 @@
+import { ExitToApp, PauseCircleFilled, PlayCircleFilled } from "@mui/icons-material";
+import { Button } from "@mui/material";
+import React from "react";
+import useStore from "../hooks/useStore";
+import { messageChannelContext } from "../provider/MessageChannel";
+import Require from "./Require";
+
+const StartQueueButton: React.FC = () => {
+  const messageChannel = React.useContext(messageChannelContext);
+  const [store, dispatch] = useStore();
+
+  const change = () => {
+    if (messageChannel?.isDownloading() && store.downloadQueue)
+      alert("The current download will be finished before the queue stops")
+    dispatch({
+      type: 'downloadQueue',
+      payload: !store.downloadQueue
+    })
+  }
+
+  return <Require value={messageChannel}>
+    <Button
+      startIcon={store.downloadQueue ? <PauseCircleFilled /> : <PlayCircleFilled /> }
+      variant='contained'
+      onClick={change}
+    >
+      {
+        store.downloadQueue ? 'Stop Queue' : 'Start Queue'
+      }
+    </Button>
+  </Require>
+
+}
+
+export default StartQueueButton;

gui/react/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import ServiceProvider from './provider/ServiceProvider';
 import Style from './Style';
@@ -16,7 +16,9 @@ const onClickDismiss = (key: SnackbarKey | undefined) => () => {
     notistackRef.current.closeSnackbar(key);
 };
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
   <React.StrictMode>
     <ErrorHandler>
       <Store>
@@ -38,6 +40,5 @@ ReactDOM.render(
         </SnackbarProvider>
       </Store>
     </ErrorHandler>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );

gui/react/src/provider/ErrorHandler.tsx

@@ -1,14 +1,18 @@
 import { Backdrop, Box, Typography } from "@mui/material";
 import React from "react";
 
-export default class ErrorHandler extends React.Component<{}, {
+export default class ErrorHandler extends React.Component<{
+  children: React.ReactNode|React.ReactNode[]
+}, {
   error?: {
     er: Error,
     stack: React.ErrorInfo
   }
 }> {
   
-  constructor(props: React.PropsWithChildren<{}>) {
+  constructor(props: {
+    children: React.ReactNode|React.ReactNode[]
+  }) {
     super(props);
     this.state = { error: undefined }
   }

gui/react/src/provider/MessageChannel.tsx

@@ -36,7 +36,7 @@ export class RandomEventHandler {
 
 export const messageChannelContext = React.createContext<FrontEndMessanges|undefined>(undefined);
 
-const MessageChannelProvider: React.FC = ({ children }) => {
+const MessageChannelProvider: FCWithChildren = ({ children }) => {
 
   const [store, dispatch] = useStore();
 

gui/react/src/provider/ServiceProvider.tsx

@@ -7,7 +7,7 @@ type Services = 'funi'|'crunchy';
 
 export const serviceContext = React.createContext<Services|undefined>(undefined);
 
-const ServiceProvider: React.FC = ({ children }) => {
+const ServiceProvider: FCWithChildren = ({ children }) => {
   const [ { service }, dispatch ] = useStore();
 
   const setService = (s: StoreState['service']) => {

gui/react/src/provider/Store.tsx

@@ -17,6 +17,7 @@ export type DownloadOptions = {
 }
 
 export type StoreState = {
+  downloadQueue: boolean,
   queue: QueueItem[],
   episodeListing: Episode[];
   downloadOptions: DownloadOptions,
@@ -35,25 +36,33 @@ const Reducer = <T extends keyof StoreState,>(state: StoreState, action: StoreAc
   switch(action.type) {
     case "queue":
       state.queue = action.extraInfo?.force ? action.payload as QueueItem[] : state.queue.concat(action.payload as QueueItem[]);
-      if (state.currentDownload === undefined && state.queue.length > 0) {
+      if (state.currentDownload === undefined && state.queue.length > 0 && state.downloadQueue) {
         state.currentDownload = state.queue[0];
         state.queue = state.queue.slice(1);
       }
       return { ...state };
     case "finish":
-      if (state.queue.length > 0) {
+      if (state.queue.length > 0 && state.downloadQueue) {
         state.currentDownload = state.queue[0];
         state.queue = state.queue.slice(1);
       } else {
         state.currentDownload = undefined;
       }
       return { ...state }
+    case 'downloadQueue':
+      state.downloadQueue = action.payload as boolean;
+      if (state.queue.length > 0 && state.downloadQueue && state.currentDownload === undefined) {
+        state.currentDownload = state.queue[1];
+        state.queue = state.queue.slice(1);
+      }
+      return {...state}
     default:
       return { ...state, [action.type]: action.payload }
   }
 };
 
 const initialState: StoreState = {
+  downloadQueue: false,
   queue: [],
   downloadOptions: {
     id: '',
@@ -72,7 +81,7 @@ const initialState: StoreState = {
   episodeListing: [],
 };
 
-const Store: React.FC = ({children}) => {
+const Store: FCWithChildren = ({children}) => {
   const [state, dispatch] = React.useReducer(Reducer, initialState);
   /*React.useEffect(() => {
     if (!state.unsavedChanges.has)

package.json

@@ -21,7 +21,7 @@
     },
     {
       "name": "AniDL <AniDL@users.noreply.github.com>"
-    }, 
+    },
     {
       "name": "AnidlSupport <AnidlSupport@users.noreply.github.com>"
     }
@@ -37,73 +37,70 @@
   "license": "MIT",
   "main": "gui/electron/src/index.js",
   "dependencies": {
-    "cheerio": "^1.0.0-rc.10",
-    "dotenv": "^16.0.2",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
+    "cheerio": "^1.0.0-rc.12",
+    "dotenv": "^16.0.3",
     "electron-squirrel-startup": "^1.0.0",
-    "eslint-plugin-import": "^2.25.4",
-    "express": "^4.17.2",
+    "eslint-plugin-import": "^2.27.5",
+    "express": "^4.18.2",
     "form-data": "^4.0.0",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^11.1.0",
     "got": "^11.8.6",
-    "hls-download": "^2.6.9",
+    "hls-download": "^2.6.10",
     "iso-639": "^0.2.2",
-    "lookpath": "^1.1.0",
+    "lookpath": "^1.2.2",
     "m3u8-parsed": "^1.3.0",
     "sei-helper": "^3.3.0",
     "typescript-eslint": "^0.0.1-alpha.0",
-    "yaml": "^1.10.0",
-    "yargs": "^17.2.1"
+    "webpack": "^5.75.0",
+    "yaml": "^2.2.1",
+    "yargs": "^17.7.0"
   },
   "devDependencies": {
-    "@types/express": "^4.17.13",
-    "@types/fs-extra": "^9.0.13",
-    "@types/json5": "^2.2.0",
-    "@types/node": "^16.11.9",
-    "@types/yargs": "^17.0.12",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
-    "@vercel/webpack-asset-relocator-loader": "^1.7.0",
-    "css-loader": "^6.5.1",
-    "electron": "16.2.6",
+    "@types/express": "^4.17.17",
+    "@types/fs-extra": "^11.0.1",
+    "@types/node": "^18.14.0",
+    "@types/yargs": "^17.0.22",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.52.0",
+    "@vercel/webpack-asset-relocator-loader": "^1.7.3",
+    "css-loader": "^6.7.3",
+    "electron": "23.1.0",
     "electron-builder": "^23.6.0",
-    "eslint": "^8.23.0",
-    "eslint-config-react-app": "^7.0.0",
+    "eslint": "^8.34.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-react": "^7.28.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "eslint-plugin-react": "^7.32.2",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
     "node-loader": "^2.0.0",
-    "pkg": "^5.4.1",
-    "removeNPMAbsolutePaths": "^3.0.0",
+    "pkg": "^5.8.0",
+    "removeNPMAbsolutePaths": "^3.0.1",
     "style-loader": "^3.3.1",
-    "ts-loader": "^9.2.6",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.5.5"
+    "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.5"
   },
   "scripts": {
-    "prestart": "npm run tsc test",
-    "start": "cd lib && npx electron .",
+    "prestart": "pnpm run tsc test",
+    "start": "pnpm prestart && cd lib && npx electron .",
     "docs": "ts-node modules/build-docs.ts",
     "tsc": "ts-node tsc.ts",
-    "prebuild-windows-cli": "npm run tsc false false",
-    "prebuild-ubuntu-cli": "npm run tsc false false",
-    "prebuild-arm-cli": "npm run tsc false false",
-    "prebuild-macos-cli": "npm run tsc false false",
-    "build-windows-cli": "cd lib && node modules/build windows64",
-    "build-ubuntu-cli": "cd lib && node modules/build ubuntu64",
-    "build-arm-cli": "cd lib && node modules/build arm64",
-    "build-macos-cli": "cd lib && node modules/build macos64",
-    "prebuild-windows-gui": "npm run tsc",
-    "prebuild-ubuntu-gui": "npm run tsc",
-    "prebuild-arm-gui": "npm run tsc",
-    "prebuild-macos-gui": "npm run tsc",
-    "build-windows-gui": "cd lib && node modules/build windows64 true",
-    "build-ubuntu-gui": "cd lib && node modules/build ubuntu64 true",
-    "build-arm-gui": "cd lib && node modules/build arm64 true",
-    "build-macos-gui": "cd lib && node modules/build macos64 true",
+    "prebuild-cli": "npm run tsc false false",
+    "build-windows-cli": "pnpm run prebuild-cli && cd lib && node modules/build windows64",
+    "build-ubuntu-cli": "pnpm run prebuild-cli && cd lib && node modules/build ubuntu64",
+    "build-arm-cli": "pnpm run prebuild-cli && cd lib && node modules/build arm64",
+    "build-macos-cli": "pnpm run prebuild-cli && cd lib && node modules/build macos64",
+    "prebuild-gui": "npm run tsc",
+    "build-windows-gui": "pnpm run prebuild-gui && cd lib && node modules/build windows64 true",
+    "build-ubuntu-gui": "pnpm run prebuild-gui && cd lib && node modules/build ubuntu64 true",
+    "build-arm-gui": "pnpm run prebuild-gui && cd lib && node modules/build arm64 true",
+    "build-macos-gui": "pnpm run prebuild-gui && cd lib && node modules/build macos64 true",
     "eslint": "eslint *.js modules",
     "eslint-fix": "eslint *.js modules --fix",
     "pretest": "npm run tsc",
-    "test": "cd lib && node modules/build windows64 && node modules/build ubuntu64 && node modules/build macos64"
+    "test": "pnpm run pretest && cd lib && node modules/build windows64 && node modules/build ubuntu64 && node modules/build macos64"
   },
   "build": {
     "appId": "github.com/anidl",

tsc.ts

@@ -13,7 +13,6 @@ const isGUI = !(argv.length > 1 && argv[1] === 'false');
 if (!isTest)
   buildIgnore = [
     '*/\\.env',
-    '*/node_modules/*'
   ];
 
 if (!isGUI)
@@ -38,7 +37,8 @@ const ignore = [
   '*/*\\.tsx?$',
   './fonts*',
   './gui/react*',
-  './dev.js$'
+  './dev.js$',
+  '*/node_modules/*'
 ].map(a => a.replace(/\*/g, '[^]*').replace(/\.\//g, escapeRegExp(__dirname) + '/').replace(/\//g, path.sep === '\\' ? '\\\\' : '/')).map(a => new RegExp(a, 'i'));
 
 export { ignore };
@@ -69,13 +69,13 @@ export { ignore };
   if (!isTest && isGUI) {
     process.stdout.write('✓\nBuilding react... ');
 
-    const installReactDependencies = exec('npm install', {
+    const installReactDependencies = exec('pnpm install', {
       cwd: path.join(__dirname, 'gui', 'react'),
     });
 
     await waitForProcess(installReactDependencies);
   
-    const react = exec('npm run build', {
+    const react = exec('pnpm run build', {
       cwd: path.join(__dirname, 'gui', 'react'),
     });