marco/yt-dlp-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix issue #14 and bump react to v18

Browse Source
This commit is contained in:
marcobaobao
2022-10-14 13:44:19 +02:00
parent 8ee9710fe2
commit de32fbd5ce
11 changed files with 1454 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/index.tsx
View File

@@ -1,5 +1,10 @@
import ReactDOM from 'react-dom' import React from 'react'
import ReactDOM from 'react-dom/client'
import { App } from './src/App' import { App } from './src/App'
const root = document.getElementById('root') const root = ReactDOM.createRoot(document.getElementById('root')!)
ReactDOM.render(<App />, root) root.render(
<React.StrictMode>
<App></App>
</React.StrictMode>
)

6
frontend/src/App.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } from "react" import { useEffect, useMemo, useState } from "react"
import { ThemeProvider } from "@emotion/react"; import { ThemeProvider } from "@emotion/react";
import { import {
Box, Box,
@@ -36,7 +36,9 @@ import ArchivedDownloads from "./Archived";
const drawerWidth: number = 240; const drawerWidth: number = 240;
const socket = io(`http://${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}`) const socket = io(
`http://${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}`
)
interface AppBarProps extends MuiAppBarProps { interface AppBarProps extends MuiAppBarProps {
open?: boolean; open?: boolean;

20
frontend/src/Home.tsx
View File

@@ -18,12 +18,14 @@ import {
Typography Typography
} from "@mui/material"; } from "@mui/material";
import { Buffer } from 'buffer'; import { Buffer } from 'buffer';
import React, { Fragment, useEffect, useState } from "react"; import { Fragment, useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Socket } from "socket.io-client"; import { Socket } from "socket.io-client";
import { CliArguments } from "./classes";
import { StackableResult } from "./components/StackableResult"; import { StackableResult } from "./components/StackableResult";
import { serverStates } from "./events"; import { serverStates } from "./events";
import { connected, downloading, finished } from "./features/status/statusSlice"; import { connected, downloading, finished } from "./features/status/statusSlice";
import { I18nBuilder } from "./i18n";
import { IDLMetadata, IDLMetadataAndPID, IMessage } from "./interfaces"; import { IDLMetadata, IDLMetadataAndPID, IMessage } from "./interfaces";
import { RootState } from "./stores/store"; import { RootState } from "./stores/store";
import { isValidURL, toFormatArgs, updateInStateMap } from "./utils"; import { isValidURL, toFormatArgs, updateInStateMap } from "./utils";
@@ -55,6 +57,10 @@ export default function Home({ socket }: Props) {
const [showBackdrop, setShowBackdrop] = useState(false); const [showBackdrop, setShowBackdrop] = useState(false);
const [showToast, setShowToast] = useState(true); const [showToast, setShowToast] = useState(true);
// memos
const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
/* -------------------- Effects -------------------- */ /* -------------------- Effects -------------------- */
/* WebSocket connect event handler*/ /* WebSocket connect event handler*/
useEffect(() => { useEffect(() => {
@@ -134,7 +140,7 @@ export default function Home({ socket }: Props) {
socket.emit('send-url', { socket.emit('send-url', {
url: immediate || url || workingUrl, url: immediate || url || workingUrl,
path: availableDownloadPaths[downloadPath], path: availableDownloadPaths[downloadPath],
params: settings.cliArgs.toString() + toFormatArgs(codes), params: cliArgs.toString() + toFormatArgs(codes),
}) })
setUrl('') setUrl('')
setWorkingUrl('') setWorkingUrl('')
@@ -231,7 +237,7 @@ export default function Home({ socket }: Props) {
<TextField <TextField
fullWidth fullWidth
id="urlInput" id="urlInput"
label={settings.i18n.t('urlInput')} label={i18n.t('urlInput')}
variant="outlined" variant="outlined"
onChange={handleUrlChange} onChange={handleUrlChange}
disabled={!status.connected || (settings.formatSelection && downloadFormats != null)} disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
@@ -253,8 +259,8 @@ export default function Home({ socket }: Props) {
<FormControl fullWidth> <FormControl fullWidth>
<Select <Select
defaultValue={0} defaultValue={0}
value={availableDownloadPaths[downloadPath]} value={downloadPath}
onChange={(e) => setDownloadPath(e.target.value)} onChange={(e) => setDownloadPath(Number(e.target.value))}
> >
{availableDownloadPaths.map((val: string, idx: number) => ( {availableDownloadPaths.map((val: string, idx: number) => (
@@ -271,7 +277,7 @@ export default function Home({ socket }: Props) {
disabled={url === ''} disabled={url === ''}
onClick={() => settings.formatSelection ? sendUrlFormatSelection() : sendUrl()} onClick={() => settings.formatSelection ? sendUrlFormatSelection() : sendUrl()}
> >
{settings.i18n.t('startButton')} {i18n.t('startButton')}
</Button> </Button>
</Grid> </Grid>
<Grid item> <Grid item>
@@ -279,7 +285,7 @@ export default function Home({ socket }: Props) {
variant="contained" variant="contained"
onClick={() => abort()} onClick={() => abort()}
> >
{settings.i18n.t('abortAllButton')} {i18n.t('abortAllButton')}
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>

56
frontend/src/Settings.tsx
View File

@@ -17,12 +17,23 @@ import {
TextField, TextField,
Typography Typography
} from "@mui/material"; } from "@mui/material";
import React, { useState } from "react"; import { useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { debounceTime, distinctUntilChanged, map, of, takeWhile } from "rxjs"; import { debounceTime, distinctUntilChanged, map, of, takeWhile } from "rxjs";
import { Socket } from "socket.io-client"; import { Socket } from "socket.io-client";
import { LanguageUnion, setCliArgs, setFormatSelection, setLanguage, setServerAddr, setServerPort, setTheme, ThemeUnion } from "./features/settings/settingsSlice"; import { CliArguments } from "./classes";
import {
LanguageUnion,
setCliArgs,
setFormatSelection,
setLanguage,
setServerAddr,
setServerPort,
setTheme,
ThemeUnion
} from "./features/settings/settingsSlice";
import { alreadyUpdated, updated } from "./features/status/statusSlice"; import { alreadyUpdated, updated } from "./features/status/statusSlice";
import { I18nBuilder } from "./i18n";
import { RootState } from "./stores/store"; import { RootState } from "./stores/store";
import { validateDomain, validateIP } from "./utils"; import { validateDomain, validateIP } from "./utils";
@@ -37,6 +48,8 @@ export default function Settings({ socket }: Props) {
const [invalidIP, setInvalidIP] = useState(false); const [invalidIP, setInvalidIP] = useState(false);
const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
/** /**
* Update the server ip address state and localstorage whenever the input value changes. * Update the server ip address state and localstorage whenever the input value changes.
* Validate the ip-addr then set.s * Validate the ip-addr then set.s
@@ -114,14 +127,14 @@ export default function Settings({ socket }: Props) {
}} }}
> >
<Typography pb={2} variant="h6" color="primary"> <Typography pb={2} variant="h6" color="primary">
{settings.i18n.t('settingsAnchor')} {i18n.t('settingsAnchor')}
</Typography> </Typography>
<FormGroup> <FormGroup>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} md={11}> <Grid item xs={12} md={11}>
<TextField <TextField
fullWidth fullWidth
label={settings.i18n.t('serverAddressTitle')} label={i18n.t('serverAddressTitle')}
defaultValue={settings.serverAddr} defaultValue={settings.serverAddr}
error={invalidIP} error={invalidIP}
onChange={handleAddrChange} onChange={handleAddrChange}
@@ -134,7 +147,7 @@ export default function Settings({ socket }: Props) {
<Grid item xs={12} md={1}> <Grid item xs={12} md={1}>
<TextField <TextField
fullWidth fullWidth
label={settings.i18n.t('serverPortTitle')} label={i18n.t('serverPortTitle')}
defaultValue={settings.serverPort} defaultValue={settings.serverPort}
onChange={handlePortChange} onChange={handlePortChange}
error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535} error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
@@ -173,35 +186,48 @@ export default function Settings({ socket }: Props) {
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} md={6}>
<TextField
fullWidth
label={'Max download speed' || i18n.t('serverPortTitle')}
defaultValue={settings.serverPort}
onChange={handlePortChange}
error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
sx={{ mb: 2 }}
/>
</Grid>
</Grid> </Grid>
<FormControlLabel <FormControlLabel
control={ control={
<Switch <Switch
defaultChecked={settings.cliArgs.noMTime} defaultChecked={cliArgs.noMTime}
onChange={() => dispatch(setCliArgs(settings.cliArgs.toggleNoMTime()))} onChange={() => dispatch(setCliArgs(cliArgs.toggleNoMTime().toString()))}
/> />
} }
label={settings.i18n.t('noMTimeCheckbox')} label={i18n.t('noMTimeCheckbox')}
sx={{ mt: 3 }} sx={{ mt: 3 }}
/> />
<FormControlLabel <FormControlLabel
control={ control={
<Switch <Switch
defaultChecked={settings.cliArgs.extractAudio} defaultChecked={cliArgs.extractAudio}
onChange={() => dispatch(setCliArgs(settings.cliArgs.toggleExtractAudio()))} onChange={() => dispatch(setCliArgs(cliArgs.toggleExtractAudio().toString()))}
disabled={settings.formatSelection} disabled={settings.formatSelection}
/> />
} }
label={settings.i18n.t('extractAudioCheckbox')} label={i18n.t('extractAudioCheckbox')}
/> />
<FormControlLabel <FormControlLabel
control={ control={
<Switch <Switch
defaultChecked={settings.formatSelection} defaultChecked={settings.formatSelection}
onChange={() => dispatch(setFormatSelection(!settings.formatSelection))} onChange={() => {
dispatch(setCliArgs(cliArgs.disableExtractAudio().toString()))
dispatch(setFormatSelection(!settings.formatSelection))
}}
/> />
} }
label={settings.i18n.t('formatSelectionEnabler')} label={i18n.t('formatSelectionEnabler')}
/> />
<Grid> <Grid>
<Stack direction="row"> <Stack direction="row">
@@ -210,7 +236,7 @@ export default function Settings({ socket }: Props) {
variant="contained" variant="contained"
onClick={() => dispatch(updated())} onClick={() => dispatch(updated())}
> >
{settings.i18n.t('updateBinButton')} {i18n.t('updateBinButton')}
</Button> </Button>
{/* <Button sx={{ mr: 1, mt: 1 }} variant="outlined">Primary</Button> */} {/* <Button sx={{ mr: 1, mt: 1 }} variant="outlined">Primary</Button> */}
</Stack> </Stack>
@@ -222,7 +248,7 @@ export default function Settings({ socket }: Props) {
<Snackbar <Snackbar
open={status.updated} open={status.updated}
autoHideDuration={1500} autoHideDuration={1500}
message={settings.i18n.t('toastUpdated')} message={i18n.t('toastUpdated')}
onClose={updateBinary} onClose={updateBinary}
/> />
</Container> </Container>

21
frontend/src/features/settings/settingsSlice.ts
View File

@@ -10,9 +10,9 @@ export interface SettingsState {
serverPort: string, serverPort: string,
language: LanguageUnion, language: LanguageUnion,
theme: ThemeUnion, theme: ThemeUnion,
cliArgs: CliArguments, cliArgs: string,
i18n: I18nBuilder, formatSelection: boolean,
formatSelection: boolean ratelimit: string,
} }
const initialState: SettingsState = { const initialState: SettingsState = {
@@ -20,9 +20,9 @@ const initialState: SettingsState = {
serverPort: localStorage.getItem("server-port") || window.location.port, serverPort: localStorage.getItem("server-port") || window.location.port,
language: (localStorage.getItem("language") || "english") as LanguageUnion, language: (localStorage.getItem("language") || "english") as LanguageUnion,
theme: (localStorage.getItem("theme") || "light") as ThemeUnion, theme: (localStorage.getItem("theme") || "light") as ThemeUnion,
cliArgs: localStorage.getItem("cli-args") ? new CliArguments().fromString(localStorage.getItem("cli-args") ?? "") : new CliArguments(false, true), cliArgs: localStorage.getItem("cli-args") ?? "",
i18n: new I18nBuilder((localStorage.getItem("language") || "english")),
formatSelection: localStorage.getItem("format-selection") === "true", formatSelection: localStorage.getItem("format-selection") === "true",
ratelimit: localStorage.getItem("rate-limit") ?? "",
} }
export const settingsSlice = createSlice({ export const settingsSlice = createSlice({
@@ -39,12 +39,11 @@ export const settingsSlice = createSlice({
}, },
setLanguage: (state, action: PayloadAction<LanguageUnion>) => { setLanguage: (state, action: PayloadAction<LanguageUnion>) => {
state.language = action.payload state.language = action.payload
state.i18n.setLanguage(action.payload)
localStorage.setItem("language", action.payload) localStorage.setItem("language", action.payload)
}, },
setCliArgs: (state, action: PayloadAction<CliArguments>) => { setCliArgs: (state, action: PayloadAction<string>) => {
state.cliArgs = action.payload state.cliArgs = action.payload
localStorage.setItem("cli-args", action.payload.toString()) localStorage.setItem("cli-args", action.payload)
}, },
setTheme: (state, action: PayloadAction<ThemeUnion>) => { setTheme: (state, action: PayloadAction<ThemeUnion>) => {
state.theme = action.payload state.theme = action.payload
@@ -54,9 +53,13 @@ export const settingsSlice = createSlice({
state.formatSelection = action.payload state.formatSelection = action.payload
localStorage.setItem("format-selection", action.payload.toString()) localStorage.setItem("format-selection", action.payload.toString())
}, },
setRateLimit: (state, action: PayloadAction<string>) => {
state.ratelimit = action.payload
localStorage.setItem("rate-limit", action.payload)
},
} }
}) })
export const { setLanguage, setCliArgs, setTheme, setServerAddr, setServerPort, setFormatSelection } = settingsSlice.actions export const { setLanguage, setCliArgs, setTheme, setServerAddr, setServerPort, setFormatSelection, setRateLimit } = settingsSlice.actions
export default settingsSlice.reducer export default settingsSlice.reducer

30
frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,30 @@
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"./index.ts",
"./src/**/*"
],
"exclude": [
"node_modules"
]
}

6
package.json
View File

@@ -28,8 +28,8 @@
"koa-router": "^10.1.1", "koa-router": "^10.1.1",
"koa-static": "^5.0.0", "koa-static": "^5.0.0",
"mime-types": "^2.1.35", "mime-types": "^2.1.35",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-redux": "^8.0.1", "react-redux": "^8.0.1",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
"rxjs": "^7.4.0", "rxjs": "^7.4.0",
@@ -43,6 +43,8 @@
"@types/koa-router": "^7.4.4", "@types/koa-router": "^7.4.4",
"@types/mime-types": "^2.1.1", "@types/mime-types": "^2.1.1",
"@types/node": "^17.0.31", "@types/node": "^17.0.31",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@types/react-router-dom": "^5.3.3", "@types/react-router-dom": "^5.3.3",
"@types/uuid": "^8.3.4", "@types/uuid": "^8.3.4",
"@vitejs/plugin-react": "^1.3.2", "@vitejs/plugin-react": "^1.3.2",

1904
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
server/src/main.ts
View File

@@ -93,7 +93,7 @@ io.on('connection', socket => {
retrieveDownload(socket) retrieveDownload(socket)
}) })
socket.on('disk-space', () => { socket.on('disk-space', () => {
getFreeDiskSpace(socket) getFreeDiskSpace(socket, settings.download_path || 'downloads/')
}) })
}) })

18
server/src/utils/procUtils.ts
View File

@@ -1,7 +1,6 @@
import { exec, spawn } from 'child_process'; import { exec, spawn } from 'child_process';
import { statSync } from 'fs'; import { statSync } from 'fs';
import Logger from './BetterLogger'; import Logger from './BetterLogger';
// import net = require('net');
const log = Logger.instance; const log = Logger.instance;
@@ -18,19 +17,6 @@ export function existsInProc(pid: number): any {
} }
} }
/*
function retriveStdoutFromProcFd(pid) {
if (existsInProc(pid)) {
const unixSocket = fs.readlinkSync(`/proc/${pid}/fd/1`).replace('socket:[', '127.0.0.1:').replace(']', '')
if (unixSocket) {
console.log(unixSocket)
logger('proc', `found pending job on pid: ${pid} attached to UNIX socket: ${unixSocket}`)
return net.createConnection(unixSocket)
}
}
}
*/
/** /**
* Kills a process with a sys-call * Kills a process with a sys-call
* @param {number} pid the killed process pid * @param {number} pid the killed process pid
@@ -42,9 +28,9 @@ export async function killProcess(pid: number) {
}) })
} }
export function getFreeDiskSpace(socket: any) { export function getFreeDiskSpace(socket: any, path: string) {
const message: string = 'free-space'; const message: string = 'free-space';
exec("df -P -h | tail -1 | awk '{print $4}'", (_, stdout) => { exec(`df -h ${path} | tail -1 | awk '{print $4}'`, (_, stdout) => {
socket.emit(message, stdout) socket.emit(message, stdout)
}) })
} }

4
tsconfig.json
View File

@@ -1,12 +1,12 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "./dist", "outDir": "./dist",
"target": "ES2018", "target": "ES2020",
"strict": false, "strict": false,
"noEmit": false, "noEmit": false,
"moduleResolution": "node", "moduleResolution": "node",
"module": "commonjs", "module": "commonjs",
"skipLibCheck": true "skipLibCheck": true,
}, },
"include": [ "include": [
"./server/src/**/*" "./server/src/**/*"