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

format selection enabled

Browse Source
This commit is contained in:
marcobaobao
2022-06-03 15:52:39 +02:00
parent 92158cc599
commit 368595c08f
16 changed files with 223 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@@ -237,8 +237,8 @@ function AppContent() {
>
<Toolbar />
<Routes>
<Route path="/" element={<Home socket={socket}></Home>}></Route>
<Route path="/settings" element={<Settings socket={socket}></Settings>}></Route>
<Route path="/" element={<Home></Home>}></Route>
<Route path="/settings" element={<Settings></Settings>}></Route>
<Route path="/downloaded" element={<ArchivedDownloads></ArchivedDownloads>}></Route>
</Routes>
</Box>

163
frontend/src/Home.tsx
View File

@@ -1,18 +1,16 @@
import { Backdrop, Button, CircularProgress, Container, Grid, Paper, Snackbar, TextField, } from "@mui/material";
import { Backdrop, Button, ButtonGroup, CircularProgress, Container, Grid, Paper, Skeleton, Snackbar, TextField, Typography, } from "@mui/material";
import React, { Fragment, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Socket } from "socket.io-client";
import { io, Socket } from "socket.io-client";
import { StackableResult } from "./components/StackableResult";
import { connected, disconnected, downloading, finished } from "./features/status/statusSlice";
import { IDLInfo, IDLInfoBase, IDownloadInfo, IMessage } from "./interfaces";
import { RootState } from "./stores/store";
import { updateInStateMap, } from "./utils";
import { toFormatArgs, updateInStateMap, } from "./utils";
type Props = {
socket: Socket
}
let socket: Socket;
export default function Home({ socket }: Props) {
export default function Home() {
// redux state
const settings = useSelector((state: RootState) => state.settings)
const status = useSelector((state: RootState) => state.status)
@@ -22,11 +20,23 @@ export default function Home({ socket }: Props) {
const [progressMap, setProgressMap] = useState(new Map<number, number>());
const [messageMap, setMessageMap] = useState(new Map<number, IMessage>());
const [downloadInfoMap, setDownloadInfoMap] = useState(new Map<number, IDLInfoBase>());
const [downloadFormats, setDownloadFormats] = useState<IDownloadInfo>();
const [pickedVideoFormat, setPickedVideoFormat] = useState('');
const [pickedAudioFormat, setPickedAudioFormat] = useState('');
const [pickedBestFormat, setPickedBestFormat] = useState('');
const [url, setUrl] = useState('');
const [workingUrl, setWorkingUrl] = useState('');
const [showBackdrop, setShowBackdrop] = useState(false);
/* -------------------- Effects -------------------- */
useEffect(() => {
socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`);
return () => {
socket.disconnect()
};
}, [])
/* WebSocket connect event handler*/
useEffect(() => {
socket.on('connect', () => {
@@ -53,6 +63,7 @@ export default function Home({ socket }: Props) {
socket.on('available-formats', (data: IDownloadInfo) => {
setShowBackdrop(false)
console.log(data)
setDownloadFormats(data);
})
}, [])
@@ -89,11 +100,37 @@ export default function Home({ socket }: Props) {
* Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
*/
const sendUrl = () => {
const codes = new Array<string>();
if (pickedVideoFormat !== '') codes.push(pickedVideoFormat);
if (pickedAudioFormat !== '') codes.push(pickedAudioFormat);
if (pickedBestFormat !== '') codes.push(pickedBestFormat);
socket.emit('send-url', {
url: url,
params: settings.cliArgs.toString(),
url: url || workingUrl,
params: settings.cliArgs.toString() + toFormatArgs(codes),
})
setUrl('')
setWorkingUrl('')
setTimeout(() => {
const input = document.getElementById('urlInput') as HTMLInputElement;
input.value = '';
setShowBackdrop(true);
setDownloadFormats(null);
}, 250);
}
/**
* Retrive url from input and display the formats selection view
*/
const sendUrlFormatSelection = () => {
socket.emit('send-url-format-selection', {
url: url,
})
setWorkingUrl(url)
setUrl('')
setPickedAudioFormat('');
setPickedVideoFormat('');
setPickedBestFormat('');
setTimeout(() => {
const input = document.getElementById('urlInput') as HTMLInputElement;
input.value = '';
@@ -120,6 +157,7 @@ export default function Home({ socket }: Props) {
socket.emit('abort', { pid: id })
return
}
setDownloadFormats(null)
socket.emit('abort-all')
}
@@ -145,13 +183,14 @@ export default function Home({ socket }: Props) {
label={settings.i18n.t('urlInput')}
variant="outlined"
onChange={handleUrlChange}
disabled={settings.formatSelection && downloadFormats != null}
/>
<Grid container spacing={1} pt={2}>
<Grid item>
<Button
variant="contained"
disabled={url === ''}
onClick={() => sendUrl()}
onClick={() => settings.formatSelection ? sendUrlFormatSelection() : sendUrl()}
>
{settings.i18n.t('startButton')}
</Button>
@@ -168,6 +207,110 @@ export default function Home({ socket }: Props) {
</Paper>
</Grid>
</Grid>
{/* Format Selection grid */}
{downloadFormats ? <Grid container spacing={2} mt={2}>
<Grid item xs={12}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
}}
>
<Grid container>
<Grid item xs={12}>
<Typography variant="h6" component="div" pb={1}>
{downloadFormats.title}
</Typography>
{/* <Skeleton variant="rectangular" height={180} /> */}
</Grid>
<Grid item xs={12} pb={1}>
<img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
</Grid>
{/* video only */}
<Grid item xs={12}>
<Typography variant="body1" component="div">
Best quality
</Typography>
</Grid>
<Grid item pr={2} py={1}>
<Button
variant="contained"
disabled={pickedBestFormat !== ''}
onClick={() => {
setPickedBestFormat(downloadFormats.best.format_id)
setPickedVideoFormat('')
setPickedAudioFormat('')
}}>
{downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
</Button>
</Grid>
{/* video only */}
<Grid item xs={12}>
<Typography variant="body1" component="div">
Video data
</Typography>
</Grid>
{downloadFormats.formats
.filter(format => format.acodec === 'none' && format.vcodec !== 'none')
.map((format, idx) => (
<Grid item pr={2} py={1} key={idx}>
<Button
variant="contained"
onClick={() => {
setPickedVideoFormat(format.format_id)
setPickedBestFormat('')
}}
disabled={pickedVideoFormat === format.format_id}
>
{format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
</Button>
</Grid>
))
}
<Grid item xs={12}>
<Typography variant="body1" component="div">
Audio data
</Typography>
</Grid>
{downloadFormats.formats
.filter(format => format.acodec !== 'none' && format.vcodec === 'none')
.map((format, idx) => (
<Grid item pr={2} py={1} key={idx}>
<Button
variant="contained"
onClick={() => {
setPickedAudioFormat(format.format_id)
setPickedBestFormat('')
}}
disabled={pickedAudioFormat === format.format_id}
>
{format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
</Button>
</Grid>
))
}
<Grid item xs={12} pt={2}>
<ButtonGroup disableElevation variant="contained">
<Button
onClick={() => sendUrl()}
disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
> Download
</Button>
<Button
onClick={() => {
setPickedAudioFormat('');
setPickedVideoFormat('');
setPickedBestFormat('');
}}
> Clear
</Button>
</ButtonGroup>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid> : null}
<Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
{ /*Super big brain flatMap moment*/
Array

19
frontend/src/Settings.tsx
View File

@@ -19,17 +19,15 @@ import {
} from "@mui/material";
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Socket } from "socket.io-client";
import { LanguageUnion, setCliArgs, setLanguage, setServerAddr, setTheme, ThemeUnion } from "./features/settings/settingsSlice";
import { io } from "socket.io-client";
import { LanguageUnion, setCliArgs, setFormatSelection, setLanguage, setServerAddr, setTheme, ThemeUnion } from "./features/settings/settingsSlice";
import { alreadyUpdated, updated } from "./features/status/statusSlice";
import { RootState } from "./stores/store";
import { validateDomain, validateIP } from "./utils";
type Props = {
socket: Socket
}
const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
export default function Settings({ socket }: Props) {
export default function Settings() {
const settings = useSelector((state: RootState) => state.settings)
const status = useSelector((state: RootState) => state.status)
const dispatch = useDispatch()
@@ -155,6 +153,15 @@ export default function Settings({ socket }: Props) {
}
label={settings.i18n.t('extractAudioCheckbox')}
/>
<FormControlLabel
control={
<Switch
defaultChecked={settings.formatSelection}
onChange={() => dispatch(setFormatSelection(!settings.formatSelection))}
/>
}
label={settings.i18n.t('formatSelectionEnabler')}
/>
<Grid>
<Stack direction="row">
<Button

1
frontend/src/assets/i18n.yaml
View File

@@ -16,6 +16,7 @@ languages:
bgReminder: Once you close this page the download will continue in the background.
toastConnected: 'Connected to '
toastUpdated: Updated yt-dlp binary!
formatSelectionEnabler: Enable video/audio formats selection
italian:
urlInput: URL di YouTube o di qualsiasi altro servizio supportato
statusTitle: Stato

2
frontend/src/components/StackableResult.tsx
View File

@@ -1,5 +1,5 @@
import { EightK, FourK, Hd, Sd } from "@mui/icons-material";
import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, Grid, LinearProgress, Skeleton, Stack, Typography } from "@mui/material";
import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, LinearProgress, Skeleton, Stack, Typography } from "@mui/material";
import { IMessage } from "../interfaces";
import { ellipsis } from "../utils";

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

@@ -10,7 +10,8 @@ export interface SettingsState {
language: LanguageUnion,
theme: ThemeUnion,
cliArgs: CliArguments,
i18n: I18nBuilder
i18n: I18nBuilder,
formatSelection: boolean
}
const initialState: SettingsState = {
@@ -19,6 +20,7 @@ const initialState: SettingsState = {
theme: (localStorage.getItem("theme") || "light") as ThemeUnion,
cliArgs: localStorage.getItem("cli-args") ? new CliArguments().fromString(localStorage.getItem("cli-args")) : new CliArguments(false, true),
i18n: new I18nBuilder((localStorage.getItem("language") || "english")),
formatSelection: localStorage.getItem("format-selection") === "true",
}
export const settingsSlice = createSlice({
@@ -42,9 +44,13 @@ export const settingsSlice = createSlice({
state.theme = action.payload
localStorage.setItem("theme", action.payload)
},
setFormatSelection: (state, action: PayloadAction<boolean>) => {
state.formatSelection = action.payload
localStorage.setItem("format-selection", action.payload.toString())
},
}
})
export const { setLanguage, setCliArgs, setTheme, setServerAddr } = settingsSlice.actions
export const { setLanguage, setCliArgs, setTheme, setServerAddr, setFormatSelection } = settingsSlice.actions
export default settingsSlice.reducer

1
frontend/src/interfaces.ts
View File

@@ -27,6 +27,7 @@ export interface IDownloadInfoSection {
fps: number,
resolution: string,
vcodec: string,
acodec: string,
}
export interface IDLInfo {

13
frontend/src/utils.ts
View File

@@ -67,6 +67,8 @@ export const updateInStateMap = (k: number, v: any, target: Map<number, any>, ca
callback(new Map(target.set(k, v)));
}
export function updateInStateArray<T>(v: T, target: Array<T>, callback: Function) { }
/**
* Pre like function
* @param data
@@ -75,3 +77,14 @@ export const updateInStateMap = (k: number, v: any, target: Map<number, any>, ca
export function buildMessage(data: IMessage) {
return `operation: ${data.status || '...'} \nprogress: ${data.progress || '?'} \nsize: ${data.size || '?'} \nspeed: ${data.dlSpeed || '?'}`;
}
export function toFormatArgs(codes: string[]): string {
if (codes.length > 1) {
return codes.reduce((v, a) => ` -f ${v}+${a}`)
}
if (codes.length === 1) {
return ` -f ${codes[0]}`;
}
return '';
}