Creepso/multi-downloader-nx
1
0
Fork 0
Code Issues 38 Pull requests 10 Projects Releases 70 Packages Wiki Activity Actions

Loading display for current download if it hasn't started

Browse source
This commit is contained in:
AnidlSupport 2023-03-02 22:20:04 +01:00
parent bba20bb255
commit 8f9a21c773
6 changed files with 52 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
@types/randomEvents.d.ts vendored
View file

@ -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> {

2
gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx
View file

@ -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={{ }}>

16
gui/react/src/components/MainFrame/DownloadManager/DownloadManager.tsx
View file

@ -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;

37
gui/react/src/components/MainFrame/Queue/Queue.tsx
View file

@ -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' }}>

3
gui/react/src/provider/MessageChannel.tsx
View file

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

2
gui/server/services/base.ts
View file

@ -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();
}