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

Finished Queue

Browse source
This commit is contained in:
Izuco 2022-03-22 16:21:11 +01:00
parent 9c5095f7a8
commit 169376e9d7
No known key found for this signature in database
GPG key ID: E9CBE9E4EF3A1BFA
4 changed files with 76 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
gui/electron/src/serviceHandler/crunchyroll.ts
View file

@ -11,6 +11,7 @@ class CrunchyHandler extends Base implements MessageHandler {
constructor(window: BrowserWindow) {
super(window);
this.crunchy = new Crunchy();
this.crunchy.refreshToken();
}
public async listEpisodes (id: string): Promise<EpisodeListResponse> {
@ -61,8 +62,10 @@ class CrunchyHandler extends Base implements MessageHandler {
await this.crunchy.refreshToken(true);
console.log(`[DEBUG] Got search options: ${JSON.stringify(data)}`);
const crunchySearch = await this.crunchy.doSearch(data);
if (!crunchySearch.isOk)
if (!crunchySearch.isOk) {
this.crunchy.refreshToken();
return crunchySearch;
}
return { isOk: true, value: crunchySearch.value };
}

7
gui/react/src/Layout.tsx
View file

@ -5,18 +5,21 @@ import MainFrame from "./components/MainFrame/MainFrame";
import LogoutButton from "./components/LogoutButton";
import AddToQueue from "./components/AddToQueue/AddToQueue";
import { messageChannelContext } from './provider/MessageChannel';
import { Folder } from "@mui/icons-material";
import { ClearAll, Folder } from "@mui/icons-material";
import useStore from "./hooks/useStore";
const Layout: React.FC = () => {
const messageHandler = React.useContext(messageChannelContext);
const [, dispatch] = useStore();
return <Box>
<Box sx={{ height: 50, mb: 4, display: 'flex', gap: 1 }}>
<LogoutButton />
<AuthButton />
<Box>
<Box sx={{ display: 'flex', gap: 1, height: 36 }}>
<Button variant="contained" startIcon={<Folder />} onClick={() => messageHandler?.openFolder('content')}>Open Output Directory</Button>
<Button variant="contained" startIcon={<ClearAll />} onClick={() => dispatch({ type: 'queue', payload: [], extraInfo: { force: true } })}>Clear Queue</Button>
</Box>
<AddToQueue />
</Box>

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

@ -1,4 +1,4 @@
import { Box, Skeleton, Typography } from "@mui/material";
import { Box, Button, Divider, LinearProgress, Skeleton, Typography } from "@mui/material";
import React from "react";
import useStore from "../../../hooks/useStore";
@ -7,53 +7,92 @@ import useDownloadManager from "../DownloadManager/DownloadManager";
const Queue: React.FC = () => {
const data = useDownloadManager();
const [{ queue }] = useStore();
const [{ queue }, 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>
<Box sx={{ display: 'flex', flexDirection: 'row' }}>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr fit-content' }}>
<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'>
{data.downloadInfo.language.name}
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}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>}
{queue.map((queueItem, index) => {
return <Box key={`queue_item_${index}`} sx={{ height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1, mb: 1, mt: 1 }}>
<img src={queueItem.image} height='200px' width='100%' />
<Box>
<Box sx={{ display: 'flex', flexDirection: 'row' }}>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr fit-content' }}>
<Typography variant='h5' color='text.primary'>
{queueItem.title}
</Typography>
<Typography variant='h5' color='text.primary'>
{queueItem.dubLang.join(', ')}
{queue.length && <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%' />
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 200px' }}>
<Typography variant='h5' color='text.primary'>
{queueItem.title}
</Typography>
<Typography variant='h5' color='text.primary'>
Languages: {queueItem.dubLang.join(', ')}
</Typography>
</Box>
<Typography variant='h6' color='text.primary'>
{queueItem.parent.title}
</Typography>
</Box>
<Typography variant='h6' color='text.primary'>
{queueItem.parent.title}
<Typography variant='body1' color='text.primary'>
S{queueItem.parent.season}E{queueItem.episode} <br />
Quality: {queueItem.q}
</Typography>
<Button onClick={() => {
const override = [...queue];
dispatch({
type: 'queue',
payload: override,
extraInfo: {
force: true
}
});
}} sx={{ position: 'relative', left: '50%', transform: 'translateX(-50%)', width: '60%' }} variant="outlined" color="warning">
Remove from Queue
</Button>
</Box>
</Box>
{index < length - 1 && <Divider variant="fullWidth" />}
</Box>;
})}
</> : <Box sx={{ height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1 }}>
<Skeleton variant='rectangular' height={'100%'}/>
<Box sx={{ display: 'grid', gridTemplateRows: '33% 1fr', gap: 1 }}>
<Skeleton variant='text' height={'100%'} />
<Skeleton variant='text' height={'100%'} />
</> : <Box>
<Typography color='text.primary' variant='h4'>
Selected episodes will be shown here
</Typography>
<Box sx={{ height: 200, display: 'grid', gridTemplateColumns: '20% 1fr', gap: 1 }}>
<Skeleton variant='rectangular' height={'100%'}/>
<Box sx={{ display: 'grid', gridTemplateRows: '33% 1fr', gap: 1 }}>
<Skeleton variant='text' height={'100%'} />
<Skeleton variant='text' height={'100%'} />
</Box>
</Box>
</Box>
}
const formatTime = (time: number) => {
time = Math.floor(time / 1000);
const minutes = Math.floor(time / 60);
time = time % 60;
return `${minutes.toFixed(0).length < 2 ? `0${minutes}` : minutes}m${time.toFixed(0).length < 2 ? `0${time}` : time}s`;
}
export default Queue;

7
gui/react/src/provider/Store.tsx
View file

@ -22,15 +22,16 @@ export type StoreState = {
finish?: undefined
}
export type StoreAction<T extends keyof StoreState> = {
export type StoreAction<T extends (keyof StoreState)> = {
type: T,
payload: StoreState[T]
payload: StoreState[T],
extraInfo?: Record<string, unknown>
}
const Reducer = <T extends keyof StoreState,>(state: StoreState, action: StoreAction<T>): StoreState => {
switch(action.type) {
case "queue":
state.queue = state.queue.concat(action.payload as QueueItem[]);
state.queue = action.extraInfo?.force ? action.payload as QueueItem[] : state.queue.concat(action.payload as QueueItem[]);
if (state.currentDownload === undefined && state.queue.length > 0) {
state.currentDownload = state.queue[0];
state.queue = state.queue.slice(1);