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

first release

Browse Source
This commit is contained in:
genio
2021-11-18 21:46:38 +01:00
parent 9ea28f281a
commit f0034c57d8
14 changed files with 182 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.dockerignore Normal file
View File

@@ -0,0 +1,4 @@
node_modules
dist
package-lock.json
.parcel-cache

2
.gitignore vendored
View File

@@ -2,3 +2,5 @@
dist dist
package-lock.json package-lock.json
node_modules node_modules
lib/*.exe
.env

9
Dockerfile Normal file
View File

@@ -0,0 +1,9 @@
FROM node:14
VOLUME /downloads
WORKDIR /usr/src/yt-dlp-webui
COPY package*.json ./
RUN npm install
RUN npm run build
COPY . .
EXPOSE 3022
CMD [ "node" , "./server.js" ]

35
README.md Normal file
View File

@@ -0,0 +1,35 @@
## yt-dlp Web UI
A terrible web ui for yt-dlp.
Created for the only purpose of *cough cough* k-pop videos from my server/nas.
<img src="https://i.ibb.co/s9pcXP8/yt.png" alt="yt">
### Docker install
```
// download the yt-dl build and put it in the lib folder
mkdir downloads
docker build -t yt-dlp-webui .
docker run -d -p 3022:3022 yt-dlp-webui
```
### Manual install
```
// download the yt-dl build and put it in the lib folder
npm i
npm run build
// edit the settings.json specifying the download path or
// it will use the following folder
mkdir downloads
node server.js
```
### Todo list
- retrieve background task
- better ui/ux

2
frontend/index.css
View File

@@ -1,5 +1,5 @@
body{ body{
height: 100vh; height: 80vh;
background-color: #202124; background-color: #202124;
color: #f1f1f1; color: #f1f1f1;
} }

2
frontend/index.html
View File

@@ -8,7 +8,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<title>Frontend</title> <title>yt-dlp Web UI</title>
</head> </head>
<body> <body>

5
frontend/src/App.css
View File

@@ -0,0 +1,5 @@
.status-box{
background-color: #2b2c31;
padding: 8px;
border-radius: 5px;
}

102
frontend/src/App.jsx
View File

@@ -1,11 +1,34 @@
import { io } from "socket.io-client"; import { io } from "socket.io-client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Container, ProgressBar, InputGroup, FormControl, Button } from "react-bootstrap"; import {
Container,
Row,
Col,
ProgressBar,
InputGroup,
FormControl,
Button,
Toast
} from "react-bootstrap";
import './App.css' import './App.css'
const socket = io('http://localhost:3000') const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
export function App() { export function App() {
const [progress, setProgress] = useState(0)
const [message, setMessage] = useState('')
const [halt, setHalt] = useState(false)
const [url, setUrl] = useState('')
const [showToast, setShowToast] = useState(false)
const [showSettings, setShowSettings] = useState(false)
useEffect(() => {
socket.on('connect', () => {
setShowToast(true)
})
}, [])
useEffect(() => { useEffect(() => {
socket.on('progress', data => { socket.on('progress', data => {
setMessage(data.trim()) setMessage(data.trim())
@@ -14,9 +37,12 @@ export function App() {
setProgress(0) setProgress(0)
} }
try { try {
setProgress(Math.ceil(data.split(" ")[2].replace('%', ''))) const _progress = Math.ceil(data.split(" ")[2].replace('%', ''))
if (!isNaN(_progress)) {
setProgress(_progress)
}
} catch (error) { } catch (error) {
console.log('finished or empty url') console.log('finished or empty url or aborted')
} }
}) })
}, []) }, [])
@@ -31,39 +57,81 @@ export function App() {
setUrl(e.target.value) setUrl(e.target.value)
} }
const handleAddrChange = (e) => {
localStorage.setItem('server-addr', e.target.value)
}
const abort = () => { const abort = () => {
socket.emit('abort') socket.emit('abort')
setHalt(false) setHalt(false)
} }
const [progress, setProgress] = useState(0)
const [message, setMessage] = useState('')
const [halt, setHalt] = useState(false)
const [url, setUrl] = useState('')
return ( return (
<Container> <Container>
<Row>
<Col lg={7} xs={12}>
<div className="mt-5" /> <div className="mt-5" />
<h1>yt-dlp web ui</h1> <h1>yt-dlp Web UI 🤠</h1>
<InputGroup className="mt-5"> <InputGroup className="mt-5">
<FormControl placeholder="youtube video url" onChange={handleUrlChange} /> <FormControl
className="url-input"
placeholder="YouTube or other supported service video url"
onChange={handleUrlChange}
/>
</InputGroup> </InputGroup>
<div className="mt-2"> <div className="mt-2 status-box">
<h6>Status</h6> <h6>Status</h6>
<pre id='status'>{message}</pre> <pre id='status'>{message}</pre>
</div> </div>
<ProgressBar now={progress} /> {progress ? <ProgressBar className="container-padding" now={progress} variant="success" /> : null}
<Button className="my-5" variant="success" onClick={() => sendUrl()} disabled={halt}>Go!</Button>{' '} <Button className="my-5" variant="success" onClick={() => sendUrl()} disabled={halt}>Go!</Button>{' '}
<Button variant="danger" onClick={() => abort()}>Abort</Button> <Button variant="danger" onClick={() => abort()}>Abort</Button>{' '}
<Button variant="secondary" onClick={() => setShowSettings(!showSettings)}>Settings</Button>
{showSettings ?
<>
<h6>Server address</h6>
<InputGroup className="mb-3 url-input">
<InputGroup.Text>ws://</InputGroup.Text>
<FormControl
defaultValue={localStorage.getItem('server-addr')}
placeholder="Server address"
aria-label="Server address"
onChange={handleAddrChange}
/>
<InputGroup.Text>:3022</InputGroup.Text>
</InputGroup>
</> :
null
}
<div className="mt-5" /> <div className="mt-5" />
<div> <div>Once you close the page the download will continue in the background.</div>
Once you close the page the download will continue in the background. It won't be possible retriving the progress though. <div>It won't be possible retriving the progress though.</div>
</div> <div className="mt-5" />
<small>Made with ❤️ by Marcobaobao</small>
</Col>
<Col>
<Toast
show={showToast}
onClose={() => setShowToast(false)}
bg={'success'}
delay={1000}
autohide
className="mt-5"
>
<Toast.Header>
<strong className="me-auto">Server</strong>
<small>Now</small>
</Toast.Header>
<Toast.Body>{`Connected to ${localStorage.getItem('server-addr')}`}</Toast.Body>
</Toast>
</Col>
</Row>
</Container> </Container>
) )
} }

17
lib/downloader.js
View File

@@ -1,10 +1,17 @@
const { spawn } = require('child_process'); const { spawn } = require('child_process');
const logger = require('./logger'); const logger = require('./logger');
const settings = require('../settings.json'); let settings;
try {
settings = require('../settings.json');
}
catch (e) {
console.warn("settings.json not found")
}
const download = (socket, url) => { const download = (socket, url) => {
const ytldp = spawn('./lib/yt-dlp.exe', const ytldp = spawn('./lib/yt-dlp.exe',
['-o', `${settings.download_path}%(title)s.%(ext)s`, url] ['-o', `${settings.download_path || './downloads/'}%(title)s.%(ext)s`, url]
) )
ytldp.stdout.on('data', data => { ytldp.stdout.on('data', data => {
@@ -27,12 +34,6 @@ const abortDownload = (socket) => {
logger('download', 'Aborted') logger('download', 'Aborted')
} }
const kill = async () => {
return process.platform === 'win32' ?
spawn('taskkill', ['/IM', 'yt-dlp.exe', '/F', '/T']) :
spawn('killall', ['yt-dlp'])
}
module.exports = { module.exports = {
download: download, download: download,
abortDownload: abortDownload abortDownload: abortDownload

19
lib/event.js
View File

@@ -1,19 +0,0 @@
var Transform = require('stream').Transform;
class SSE extends Transform{
constructor(options) {
super();
if (!(this instanceof SSE))
return new SSE(options);
options = options || {};
Transform.call(this, options);
}
_transform(data, enc, cb) {
this.push('data: ' + data.toString('utf8') + '\n\n');
cb();
}
}
module.exports = SSE;

16
lib/fetch-yt-dlp.js Normal file
View File

@@ -0,0 +1,16 @@
const https = require('https');
const path = require('path');
const fs = require('fs');
const isWindows = process.platform === 'win32';
const file = fs.createWriteStream(path.join(
__dirname, `yt-dlp${isWindows ? '.exe' : ''}`
));
https.get(
isWindows ?
'https://github.com/yt-dlp/yt-dlp/releases/download/2021.11.10.1/yt-dlp.exe' :
'https://github.com/yt-dlp/yt-dlp/releases/download/2021.11.10.1/yt-dlp',
res => res.pipe(file)
);

3
package.json
View File

@@ -12,10 +12,9 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@koa/cors": "^3.1.0", "@koa/cors": "^3.1.0",
"dotenv": "^10.0.0",
"koa": "^2.13.4", "koa": "^2.13.4",
"koa-router": "^10.1.1",
"koa-static": "^5.0.0", "koa-static": "^5.0.0",
"koa-views": "^7.0.2",
"parcel": "^2.0.1", "parcel": "^2.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^2.0.2", "react-bootstrap": "^2.0.2",

6
server.js
View File

@@ -1,7 +1,7 @@
const Koa = require('koa'); const Koa = require('koa');
const serve = require('koa-static'); const serve = require('koa-static');
const { Server } = require('socket.io');
const path = require('path'); const path = require('path');
const { Server } = require('socket.io');
const { createServer } = require('http'); const { createServer } = require('http');
const cors = require('@koa/cors'); const cors = require('@koa/cors');
const logger = require('./lib/logger'); const logger = require('./lib/logger');
@@ -37,6 +37,6 @@ app
.use(cors()) .use(cors())
.use(serve(path.join(__dirname, 'dist'))) .use(serve(path.join(__dirname, 'dist')))
console.log('[koa] Server started port', 3000) console.log('[koa] Server started port', process.env.PORT || 3022)
server.listen(3000) server.listen(process.env.PORT || 3022)

2
settings.json
View File

@@ -1,3 +1,3 @@
{ {
"download_path": "C:\\Users\\marco\\Downloads\\" "download_path": ""
} }