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

monthly update

Browse Source
This commit is contained in:
marcobaobao
2022-01-04 12:55:36 +01:00
parent 29d23144e7
commit aa79d8a0d0
18 changed files with 491 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
frontend/src/App.tsx
View File

@@ -28,17 +28,27 @@ export function App() {
const [updatedBin, setUpdatedBin] = useState(false)
const [showSettings, setShowSettings] = useState(false)
const [darkMode, setDarkMode] = useState(localStorage.getItem('theme') === 'dark')
const [extractAudio, setExtractAudio] = useState(localStorage.getItem('-x') === 'true')
const [downloadInfo, setDownloadInfo] = useState<IDLInfo>()
useEffect(() => {
socket.on('connect', () => {
setShowToast(true)
socket.emit('fetch-jobs')
})
return () => {
socket.disconnect()
}
}, [])
useEffect(() => {
socket.on('pending-jobs', (jobs: Array<any>) => {
if (jobs.length > 0) {
socket.emit('retrieve-jobs')
}
})
}, [])
useEffect(() => {
darkMode ?
document.body.classList.add('dark') :
@@ -54,15 +64,19 @@ export function App() {
useEffect(() => {
socket.on('progress', (data: IMessage) => {
setMessage(`operation: ${data.status || '...'} \nprogress: ${data.progress || '?'} \nsize: ${data.size || '?'} \nspeed: ${data.dlSpeed || '?'}`)
if (data.status === 'Done!') {
if (data.status === 'Done!' || data.status === 'Aborted') {
setHalt(false)
setMessage('Done!')
setProgress(0)
return
}
setProgress(
Math.ceil(Number(data.progress.replace('%', '')))
)
if (data.progress) {
setProgress(Math.ceil(Number(data.progress.replace('%', ''))))
}
// if (data.dlSpeed) {
// const event = new CustomEvent<number>("dlSpeed", { "detail": detectSpeed(data.dlSpeed) });
// document.dispatchEvent(event);
// }
})
}, [])
@@ -75,7 +89,12 @@ export function App() {
const sendUrl = () => {
setHalt(true)
socket.emit('send-url', url)
socket.emit('send-url', {
url: url,
params: {
xa: extractAudio
},
})
}
const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -119,111 +138,135 @@ export function App() {
}
}
const toggleExtractAudio = () => {
if (extractAudio) {
localStorage.setItem('-x', 'false')
setExtractAudio(false)
} else {
localStorage.setItem('-x', 'true')
setExtractAudio(true)
}
}
return (
<Container>
<Row>
<Col lg={7} xs={12}>
<div className="mt-5" />
<h1 className="fw-bold">yt-dlp WebUI</h1>
<div className="mt-5" />
<React.Fragment>
<Container className="pb-5">
<Row>
<Col lg={7} xs={12}>
<div className="mt-5" />
<h1 className="fw-bold">yt-dlp WebUI</h1>
<div className="mt-5" />
<div className="p-3 stack-box shadow">
<InputGroup>
<FormControl
className="url-input"
placeholder="YouTube or other supported service video url"
onChange={handleUrlChange}
/>
</InputGroup>
<div className="p-3 stack-box shadow">
<InputGroup>
<FormControl
className="url-input"
placeholder="YouTube or other supported service video url"
onChange={handleUrlChange}
/>
</InputGroup>
<div className="mt-2 status-box">
<Row>
{downloadInfo ? <p>{downloadInfo.title}</p> : null}
<Col sm={9}>
<h6>Status</h6>
{!message ? <pre>Ready</pre> : null}
<pre id='status'>{message}</pre>
</Col>
<Col sm={3}>
<br />
<img className="img-fluid rounded" src={downloadInfo?.thumbnail} />
</Col>
</Row>
<div className="mt-2 status-box">
<Row>
{downloadInfo ? <p>{downloadInfo.title}</p> : null}
<Col sm={9}>
<h6>Status</h6>
{!message ? <pre>Ready</pre> : null}
<pre id='status'>{message}</pre>
</Col>
<Col sm={3}>
<br />
<img className="img-fluid rounded" src={downloadInfo?.thumbnail} />
</Col>
</Row>
{/* <Col>
<Statistics></Statistics>
</Col> */}
</div>
<ButtonGroup className="mt-2">
<Button onClick={() => sendUrl()} disabled={halt}>Start</Button>
<Button active onClick={() => abort()}>Abort</Button>
</ButtonGroup>
{progress ? <ProgressBar className="container-padding mt-2" now={progress} variant="primary" /> : null}
</div>
<ButtonGroup className="mt-2">
<Button onClick={() => sendUrl()} disabled={halt}>Start</Button>
<Button active onClick={() => abort()}>Abort</Button>
</ButtonGroup>
{progress ? <ProgressBar className="container-padding mt-2" now={progress} variant="primary" /> : null}
</div>
<div className="my-4">
<span className="settings" onClick={() => setShowSettings(!showSettings)}>Settings</span>
</div>
<div className="my-4">
<span className="settings" onClick={() => setShowSettings(!showSettings)}>Settings</span>
</div>
{showSettings ?
<div className="p-3 stack-box shadow">
<h6>Server address</h6>
<InputGroup className="mb-3 url-input" hasValidation>
<InputGroup.Text>ws://</InputGroup.Text>
<FormControl
defaultValue={localStorage.getItem('server-addr') || 'localhost'}
placeholder="Server address"
aria-label="Server address"
onChange={handleAddrChange}
isInvalid={invalidIP}
isValid={!invalidIP}
/>
<InputGroup.Text>:3022</InputGroup.Text>
</InputGroup>
<Button onClick={() => updateBinary()} disabled={halt}>
Update yt-dlp binary
</Button>{' '}
<Button
variant={darkMode ? 'light' : 'dark'}
onClick={() => toggleTheme()}>
{darkMode ? 'Light theme' : 'Dark theme'}
</Button>
</div> :
null
}
<div className="mt-5" />
<div>Once you close this page the download will continue in the background.</div>
<div>It won't be possible retriving the progress though.</div>
<div className="mt-5" />
<small>Made with ❤️ by Marcobaobao</small>
</Col>
<Col>
<Toast
show={showToast}
onClose={() => setShowToast(false)}
bg={'primary'}
delay={1500}
autohide
className="mt-5"
>
<Toast.Body className="text-light">
{`Connected to ${localStorage.getItem('server-addr') || 'localhost'}`}
</Toast.Body>
</Toast>
<Toast
show={updatedBin}
onClose={() => setUpdatedBin(false)}
bg={'primary'}
delay={1500}
autohide
className="mt-5"
>
<Toast.Body className="text-light">
Updated yt-dlp binary!
</Toast.Body>
</Toast>
</Col>
</Row>
</Container>
{showSettings ?
<div className="p-3 stack-box shadow">
<h6>Server address</h6>
<InputGroup className="mb-3 url-input" hasValidation>
<InputGroup.Text>ws://</InputGroup.Text>
<FormControl
defaultValue={localStorage.getItem('server-addr') || 'localhost'}
placeholder="Server address"
aria-label="Server address"
onChange={handleAddrChange}
isInvalid={invalidIP}
isValid={!invalidIP}
/>
<InputGroup.Text>:3022</InputGroup.Text>
</InputGroup>
<Button onClick={() => updateBinary()} disabled={halt}>
Update yt-dlp binary
</Button>{' '}
<Button
variant={darkMode ? 'light' : 'dark'}
onClick={() => toggleTheme()}
>
{darkMode ? 'Light theme' : 'Dark theme'}
</Button>
<div className="pt-2">
<input type="checkbox" name="-x" id="-x"
onClick={() => toggleExtractAudio()} checked={extractAudio} />
<label htmlFor="-x">&nbsp;Extract audio</label>
</div>
</div> :
null
}
<div className="mt-5" />
<div>
<small>
Once you close this page the download will continue in the background.
</small>
</div>
</Col>
<Col>
<Toast
show={showToast}
onClose={() => setShowToast(false)}
bg={'primary'}
delay={1500}
autohide
className="mt-5"
>
<Toast.Body className="text-light">
{`Connected to ${localStorage.getItem('server-addr') || 'localhost'}`}
</Toast.Body>
</Toast>
<Toast
show={updatedBin}
onClose={() => setUpdatedBin(false)}
bg={'primary'}
delay={1500}
autohide
className="mt-5"
>
<Toast.Body className="text-light">
Updated yt-dlp binary!
</Toast.Body>
</Toast>
</Col>
</Row>
</Container>
<div className="container pb-5">
<small>Made with ❤️ by Marcobaobao</small>
</div>
</React.Fragment>
)
}

34
frontend/src/components/StackableInput.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React from "react";
import {
InputGroup,
FormControl,
Button,
ProgressBar
} from "react-bootstrap";
export function StackableInput(props: any) {
return (
<React.Fragment>
<InputGroup className="mt-5">
<FormControl
className="url-input"
placeholder="YouTube or other supported service video url"
onChange={props.handleUrlChange}
/>
</InputGroup>
<div className="mt-2 status-box">
<h6>Status</h6>
<pre id='status'>{props.message}</pre>
</div>
{props.progress ?
<ProgressBar className="container-padding" now={props.progress} variant="danger" /> :
null
}
{/* <Button className="my-5" variant="danger" onClick={() => sendUrl()} disabled={props.halt}>Go!</Button>{' '} */}
{/* <Button variant="danger" active onClick={() => abort()}>Abort</Button>{' '} */}
</React.Fragment>
)
}

50
frontend/src/components/Statistics.tsx
View File

@@ -1,12 +1,52 @@
import React, { useState } from "react";
import { IDLSpeed } from "../interfaces";
import React, { useEffect, useRef, useState } from "react";
import { Line } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { on } from "../events";
export function Statistics(props: any) {
const [dataset, setDataset] = useState<Array<IDLSpeed>>()
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
export function Statistics() {
const dataset = new Array<number>();
const chartRef = useRef(null)
useEffect(() => {
on('dlSpeed', (data: CustomEvent<any>) => {
dataset.push(data.detail)
chartRef.current.update()
})
}, [])
const data = {
labels: dataset.map(() => ''),
datasets: [
{
data: dataset,
label: 'download speed',
borderColor: 'rgb(53, 162, 235)',
}
]
}
return (
<div className="chart">
<Line data={data} ref={chartRef} />
</div>
)
}

3
frontend/src/events.ts Normal file
View File

@@ -0,0 +1,3 @@
export function on(eventType: string, listener: any) {
document.addEventListener(eventType, listener)
}

4
frontend/src/interfaces.tsx → frontend/src/interfaces.ts
View File

@@ -2,7 +2,7 @@ export interface IMessage {
status: string,
progress?: string,
size?: string,
dlSpeed?: string | IDLSpeed
dlSpeed?: string
}
export interface IDLInfo {
@@ -15,4 +15,4 @@ export interface IDLInfo {
export interface IDLSpeed {
effective: number,
unit: string,
}
}

13
frontend/src/utils.ts
View File

@@ -13,4 +13,17 @@ export function ellipsis(str: string, lim: number): string {
return str.length > lim ? `${str.substr(0, lim)}...` : str
}
return ''
}
export function detectSpeed(str: string): number {
let effective = str.match(/[\d,]+(\.\d+)?/)[0]
const unit = str.replace(effective, '')
switch (unit) {
case 'MiB/s':
return Number(effective) * 1000
case 'KiB/s':
return Number(effective)
default:
return 0
}
}