diff --git a/@types/randomEvents.d.ts b/@types/randomEvents.d.ts index bd6b9a3..41ea519 100644 --- a/@types/randomEvents.d.ts +++ b/@types/randomEvents.d.ts @@ -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 { diff --git a/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx b/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx index a4e7155..cd08fae 100644 --- a/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx +++ b/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx @@ -58,7 +58,7 @@ const SearchBox: React.FC = () => { }}> - thumbnail + thumbnail diff --git a/gui/react/src/components/MainFrame/DownloadManager/DownloadManager.tsx b/gui/react/src/components/MainFrame/DownloadManager/DownloadManager.tsx index b99277f..11baefc 100644 --- a/gui/react/src/components/MainFrame/DownloadManager/DownloadManager.tsx +++ b/gui/react/src/components/MainFrame/DownloadManager/DownloadManager.tsx @@ -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(); + const [current, setCurrent] = React.useState(); 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; \ No newline at end of file diff --git a/gui/react/src/components/MainFrame/Queue/Queue.tsx b/gui/react/src/components/MainFrame/Queue/Queue.tsx index 6011919..7803b88 100644 --- a/gui/react/src/components/MainFrame/Queue/Queue.tsx +++ b/gui/react/src/components/MainFrame/Queue/Queue.tsx @@ -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 && <> - Thumbnail + Thumbnail @@ -41,11 +42,39 @@ const Queue: React.FC = () => { } + { + current && !data && <> + + Thumbnail + + + + + {current.title} + + + Language: + + + + {current.parent.title} + + + + + + 0 / ? parts (0% | X:XX | 0 MB/s | 0MB) + + + + + + } {queue.length && data && } {queue.map((queueItem, index, { length }) => { return - Thumbnail + Thumbnail diff --git a/gui/react/src/provider/MessageChannel.tsx b/gui/react/src/provider/MessageChannel.tsx index ab0bd3a..9c3db08 100644 --- a/gui/react/src/provider/MessageChannel.tsx +++ b/gui/react/src/provider/MessageChannel.tsx @@ -17,7 +17,8 @@ export class RandomEventHandler { } = { progress: [], finish: [], - queueChange: [] + queueChange: [], + current: [] }; public on(name: T, listener: Handler) { diff --git a/gui/server/services/base.ts b/gui/server/services/base.ts index e05b30c..98f011a 100644 --- a/gui/server/services/base.ts +++ b/gui/server/services/base.ts @@ -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(); }