Update gui

This commit is contained in:
AnidlSupport 2023-02-25 14:32:42 +01:00
parent c7a330a255
commit be8d6a5b6c
12 changed files with 74 additions and 52 deletions

View file

@ -119,7 +119,8 @@ export type ProgressData = {
cur: number,
percent: number|string,
time: number,
downloadSpeed: number
downloadSpeed: number,
bytes: number
};
export type PossibleMessanges = keyof ServiceHandler;

2
dev.js
View file

@ -12,7 +12,7 @@ const waitForProcess = async (proc) => {
};
(async () => {
await waitForProcess(exec('npm run tsc test false'));
await waitForProcess(exec('pnpm run tsc test false'));
for (let command of toRun) {
await waitForProcess(exec(`node index.js --service crunchy ${command}`, {
cwd: path.join(__dirname, 'lib')

View file

@ -67,17 +67,15 @@ export { mainWindow };
const icon = path.join(__dirname, 'images', `Logo_Inverted.${isWindows ? 'ico' : 'png'}`);
if (!process.env.TEST) {
// eslint-disable-next-line no-global-assign
console = (() => {
const logFolder = path.join(getDataDirectory(), 'logs');
if (!fs.existsSync(logFolder))
fs.mkdirSync(logFolder);
if (fs.existsSync(path.join(logFolder, 'latest.log')))
fs.renameSync(path.join(logFolder, 'latest.log'), path.join(logFolder, `${Date.now()}.log`));
return new Console(fs.createWriteStream(path.join(logFolder, 'latest.log')));
})();
}
console = (() => {
const logFolder = path.join(getDataDirectory(), 'logs');
if (!fs.existsSync(logFolder))
fs.mkdirSync(logFolder);
if (fs.existsSync(path.join(logFolder, 'latest.log')))
fs.renameSync(path.join(logFolder, 'latest.log'), path.join(logFolder, `${Date.now()}.log`));
return new Console(fs.createWriteStream(path.join(logFolder, 'latest.log')));
})();
const createWindow = async () => {
(await import('../../../modules/module.cfg-loader')).ensureConfig();

View file

@ -2,7 +2,6 @@ import React from "react";
import { Container, Box, ThemeProvider, createTheme, Theme } from "@mui/material";
const makeTheme = (mode: 'dark'|'light') : Partial<Theme> => {
console.log(mode);
return createTheme({
palette: {
mode,

View file

@ -74,7 +74,6 @@ const DownloadSelector: React.FC<DownloadSelectorProps> = ({ onFinish }) => {
setLoading(true);
const res = await messageHandler?.listEpisodes(store.downloadOptions.id);
if (!res || !res.isOk) {
console.log(res);
setLoading(false);
return enqueueSnackbar('The request failed. Please check if the ID is correct.', {
variant: 'error'

View file

@ -20,7 +20,6 @@ const SearchBox: React.FC = () => {
const { enqueueSnackbar } = useSnackbar();
const selectItem = (id: string) => {
console.log(id);
dispatch({
type: 'downloadOptions',
payload: {

View file

@ -1,6 +1,5 @@
import { Avatar, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, List, ListItem, ListItemAvatar, TextField } from "@mui/material";
import { grey } from '@mui/material/colors'
import { Check, Close, CloseOutlined, PortraitOutlined } from '@mui/icons-material'
import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from "@mui/material";
import { Check, Close } from '@mui/icons-material'
import React from "react";
import { messageChannelContext } from "../provider/MessageChannel";
import Require from "./Require";
@ -24,7 +23,6 @@ const AuthButton: React.FC = () => {
const [authed, setAuthed] = React.useState(false);
const checkAuth = async () => {
console.log(await messageChannel?.checkToken());
setAuthed((await messageChannel?.checkToken())?.isOk ?? false);
}

View file

@ -8,8 +8,6 @@ const useDownloadManager = () => {
const [ { currentDownload }, dispatch ] = useStore();
const messageHandler = React.useContext(messageChannelContext);
console.log(currentDownload);
const [progressData, setProgressData] = React.useState<ExtendedProgress|undefined>();
React.useEffect(() => {
@ -32,15 +30,16 @@ const useDownloadManager = () => {
messageHandler?.randomEvents.removeListener('progress', handler);
messageHandler?.randomEvents.removeListener('finish', finishHandler)
};
}, [messageHandler]);
}, [messageHandler, dispatch]);
React.useEffect(() => {
if (!currentDownload)
return;
if (messageHandler?.isDownloading())
return;
console.log('start download');
messageHandler?.downloadItem(currentDownload);
}, [currentDownload]);
}, [currentDownload, messageHandler]);
return progressData;

View file

@ -6,39 +6,68 @@ import useDownloadManager from "../DownloadManager/DownloadManager";
const Queue: React.FC = () => {
const data = useDownloadManager();
console.log("data", data)
const [{ queue }, dispatch] = useStore();
const [{ queue, currentDownload }, dispatch] = useStore();
return data || queue.length > 0 ? <>
{data && <Box sx={{ mb: 1, height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1 }}>
<img src={data.downloadInfo.image} height='200px' width='100%' />
<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'>
{data.downloadInfo.title}
</Typography>
<Typography variant='h5' color='text.primary'>
Language: {data.downloadInfo.language.name}
{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" />
<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'>
{data.downloadInfo.title}
</Typography>
<Typography variant='h5' color='text.primary'>
Language: {data.downloadInfo.language.name}
</Typography>
</Box>
<Typography variant='h6' color='text.primary'>
{data.downloadInfo.parent.title}
</Typography>
</Box>
<LinearProgress variant='determinate' sx={{ height: '10px' }} value={(typeof data.progress.percent === 'string' ? parseInt(data.progress.percent) : data.progress.percent)} />
<Box>
<Typography variant="body1" color='text.primary'>
{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>
<Typography variant='h6' color='text.primary'>
{data.downloadInfo.parent.title}
</Typography>
</Box>
<LinearProgress variant='determinate' sx={{ height: '10px' }} value={(typeof data.progress.percent === 'string' ? parseInt(data.progress.percent) : data.progress.percent)} />
<Box>
<Typography variant="body1" color='text.primary'>
{data.progress.cur}MB / {(data.progress.total)}MB ({data.progress.percent}% | {formatTime(data.progress.time)} | {(data.progress.downloadSpeed / 1024 / 1024).toFixed(2)} MB/s)
</Typography>
</Box>
</Box>
</Box>}
</>
}
{
!data && currentDownload && <>
<Box sx={{ height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1, mb: 1, mt: 1 }}>
<img src={currentDownload.image} height='200px' 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'>
{currentDownload.title}
</Typography>
<Typography variant='h5' color='text.primary'>
Languages: {currentDownload.dubLang}
</Typography>
</Box>
<Typography variant='h6' color='text.primary'>
{currentDownload.parent.title}
</Typography>
</Box>
<LinearProgress variant='indeterminate' sx={{ height: '10px' }} />
<Box>
<Typography variant="body1" color='text.primary'>
Waiting for download to start
</Typography>
</Box>
</Box>
</Box>
</>
}
{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%' />
<img src={queueItem.image} height='200px' 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' }}>

View file

@ -52,7 +52,7 @@ const Reducer = <T extends keyof StoreState,>(state: StoreState, action: StoreAc
case 'downloadQueue':
state.downloadQueue = action.payload as boolean;
if (state.queue.length > 0 && state.downloadQueue && state.currentDownload === undefined) {
state.currentDownload = state.queue[1];
state.currentDownload = state.queue[0];
state.queue = state.queue.slice(1);
}
return {...state}

View file

@ -87,19 +87,19 @@
"start": "pnpm prestart && cd lib && npx electron .",
"docs": "ts-node modules/build-docs.ts",
"tsc": "ts-node tsc.ts",
"prebuild-cli": "npm run tsc false false",
"prebuild-cli": "pnpm 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",
"prebuild-gui": "pnpm 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",
"pretest": "pnpm run tsc",
"test": "pnpm run pretest && cd lib && node modules/build windows64 && node modules/build ubuntu64 && node modules/build macos64"
},
"build": {

2
tsc.ts
View file

@ -103,7 +103,7 @@ export { ignore };
alterJSON();
}
if (!isTest) {
const dependencies = exec(`npm install ${isGUI ? '' : '--production'}`, {
const dependencies = exec(`pnpm install ${isGUI ? '' : '-P'}`, {
cwd: path.join(__dirname, 'lib')
});
await waitForProcess(dependencies);