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

update 30

Browse Source
This commit is contained in:
marcobaobao
2021-11-30 13:07:22 +01:00
parent 8f204f7cbd
commit 29d23144e7
11 changed files with 124 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.dockerignore
View File

@@ -2,4 +2,8 @@ node_modules
dist
package-lock.json
.parcel-cache
.git
.git
lib/*.exe
lib/yt-dlp
.env
*.mp4

4
.gitignore vendored
View File

@@ -3,4 +3,6 @@ dist
package-lock.json
node_modules
lib/*.exe
.env
lib/yt-dlp
.env
*.mp4

28
README.md
View File

@@ -1,12 +1,26 @@
# 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.
Created for the only purpose of *consume* videos from my server/nas.
I will eventually make this better as soon as I can. Not in the immediate.
<img src="https://i.ibb.co/drt0LWc/Screenshot-2021-11-24-at-13-11-09-yt-dlp-Web-UI.png" alt="ytdlpwebui">
<img src="https://i.ibb.co/7VBK1PY/1.png">
## Docker install
## Now with dark mode
<img src="https://i.ibb.co/h8S5vKg/2.png">
## Settings
The avaible settings are currently only:
- Server address
- Switch theme
Future releases will have:
- Exctract audio
- Format selection
## Docker installation
```
docker pull marcobaobao/yt-dlp-webui:latest
docker run -d -p 3022:3022 -v <your dir>:/usr/src/yt-dlp-webui/downloads marcobaobao/yt-dlp-webui
@@ -17,16 +31,14 @@ docker build -t yt-dlp-webui .
docker run -d -p 3022:3022 -v <your dir>:/usr/src/yt-dlp-webui/downloads yt-dlp-webui
```
## Manual install
## Manual installation
```
// download the yt-dl build and put it in the lib folder and make it executable
npm i
npm run build
npm run fetch
// edit the settings.json specifying the download path or
// it will use the following folder
// it will default to the following created folder
mkdir downloads
@@ -34,5 +46,5 @@ node server.js
```
## Todo list
- retrieve background task
- retrieve background tasks
- better ui/ux

44
frontend/src/App.tsx
View File

@@ -12,7 +12,7 @@ import {
Toast,
} from "react-bootstrap";
import { validateDomain, validateIP } from "./utils";
import { IMessage } from "./interfaces";
import { IDLInfo, IMessage } from "./interfaces";
import './App.css';
const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
@@ -28,11 +28,15 @@ export function App() {
const [updatedBin, setUpdatedBin] = useState(false)
const [showSettings, setShowSettings] = useState(false)
const [darkMode, setDarkMode] = useState(localStorage.getItem('theme') === 'dark')
const [downloadInfo, setDownloadInfo] = useState<IDLInfo>()
useEffect(() => {
socket.on('connect', () => {
setShowToast(true)
})
return () => {
socket.disconnect()
}
}, [])
useEffect(() => {
@@ -41,9 +45,15 @@ export function App() {
document.body.classList.remove('dark')
}, [darkMode])
useEffect(() => {
socket.on('info', (data: IDLInfo) => {
setDownloadInfo(data)
})
}, [])
useEffect(() => {
socket.on('progress', (data: IMessage) => {
setMessage(`${data.status || '...'} | progress: ${data.progress || '?'} | size: ${data.size || '?'} | speed: ${data.dlSpeed || '?'}`)
setMessage(`operation: ${data.status || '...'} \nprogress: ${data.progress || '?'} \nsize: ${data.size || '?'} \nspeed: ${data.dlSpeed || '?'}`)
if (data.status === 'Done!') {
setHalt(false)
setMessage('Done!')
@@ -86,6 +96,10 @@ export function App() {
}
const abort = () => {
setDownloadInfo({
title: '',
thumbnail: ''
})
socket.emit('abort')
setHalt(false)
}
@@ -123,13 +137,23 @@ export function App() {
</InputGroup>
<div className="mt-2 status-box">
<h6>Status</h6>
{!message ? <pre>Ready</pre> : null}
<pre id='status'>{message}</pre>
<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>
<ButtonGroup>
<Button className="mt-2" onClick={() => sendUrl()} disabled={halt}>Start</Button>{' '}
<Button className="mt-2" active onClick={() => abort()}>Abort</Button>{' '}
<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}
@@ -161,14 +185,14 @@ export function App() {
<Button
variant={darkMode ? 'light' : 'dark'}
onClick={() => toggleTheme()}>
{darkMode ? 'Dark theme' : 'Light theme'}
{darkMode ? 'Light theme' : 'Dark theme'}
</Button>
</div> :
null
}
<div className="mt-5" />
<div>Once you close the page the download will continue in the background.</div>
<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>

12
frontend/src/components/Statistics.tsx Normal file
View File

@@ -0,0 +1,12 @@
import React, { useState } from "react";
import { IDLSpeed } from "../interfaces";
export function Statistics(props: any) {
const [dataset, setDataset] = useState<Array<IDLSpeed>>()
return (
<div className="chart">
</div>
)
}

9
frontend/src/interfaces.tsx
View File

@@ -2,7 +2,14 @@ export interface IMessage {
status: string,
progress?: string,
size?: string,
dlSpeed?: string
dlSpeed?: string | IDLSpeed
}
export interface IDLInfo {
title: string,
thumbnail: string,
upload_date?: string | Date,
duration?: number
}
export interface IDLSpeed {

7
frontend/src/utils.ts
View File

@@ -6,4 +6,11 @@ export function validateIP(ipAddr: string): boolean {
export function validateDomain(domainName: string): boolean {
let domainRegex = /[^@ \t\r\n]+.[^@ \t\r\n]+\.[^@ \t\r\n]+/
return domainRegex.test(domainName) || domainName === 'localhost'
}
export function ellipsis(str: string, lim: number): string {
if (str) {
return str.length > lim ? `${str.substr(0, lim)}...` : str
}
return ''
}

40
lib/downloader.js
View File

@@ -14,22 +14,27 @@ catch (e) {
const isWindows = process.platform === 'win32'
const download = (socket, url) => {
if (url === '' || url === null) {
socket.emit('progress', { status: 'Done!' })
return
}
getDownloadInfo(socket, url)
const ytldp = spawn(`./lib/yt-dlp${isWindows ? '.exe' : ''}`,
['-o', `${settings.download_path || 'downloads/'}%(title)s.%(ext)s`, url]
)
from(ytldp.stdout) // stout as observable
from(ytldp.stdout) // stdout as observable
.pipe(throttle(() => interval(500))) // discard events closer than 500ms
.subscribe({
next: (stdout) => {
let _stdout = String(stdout)
socket.emit('progress', formatter(_stdout)) // finally, emit
//let _stdout = String(stdout)
socket.emit('progress', formatter(String(stdout))) // finally, emit
//logger('download', `Fetching ${stdout}`)
console.log(formatter(_stdout))
},
complete: () => {
socket.emit('progress', { status: 'Done!' })
logger('download', 'Done!')
}
})
@@ -39,15 +44,29 @@ const download = (socket, url) => {
})
}
const getDownloadInfo = (socket, url) => {
let stdoutChunks = [];
const ytdlpInfo = spawn(`./lib/yt-dlp${isWindows ? '.exe' : ''}`, ['-s', '-j', url]);
ytdlpInfo.stdout.on('data', (data) => {
stdoutChunks.push(data)
})
ytdlpInfo.on('exit', () => {
const buffer = Buffer.concat(stdoutChunks)
const json = JSON.parse(buffer.toString())
socket.emit('info', json)
})
}
const abortDownload = (socket) => {
const res = process.platform === 'win32' ?
spawn('taskkill', ['/IM', 'yt-dlp.exe', '/F', '/T']) :
spawn('killall', ['yt-dlp'])
res.stdout.on('data', data => {
res.on('exit', () => {
socket.emit('progress', 'Aborted!')
logger('download', `Aborting ${data.toString()}`)
logger('download', 'Aborting downloads')
})
logger('download', 'Aborted')
}
const formatter = (stdout) => {
@@ -71,10 +90,9 @@ const formatter = (stdout) => {
default:
return { progress: '0' }
}
}
module.exports = {
download: download,
abortDownload: abortDownload
}
abortDownload: abortDownload,
}

24
lib/yt-dlpCaller.js
View File

@@ -1,24 +0,0 @@
const Readable = require('stream').Readable;
class Subscription extends Readable{
constructor(options) {
super();
if (!(this instanceof Subscription))
return new Subscription(options);
options = options || {};
Readable.call(this, options);
this.value = 0;
}
_read() {
while(this.value <= 100){
this.push(String(this.value++));
}
}
}
exports.subscribe = function(event, options){
return new Subscription(options);
}

2
package.json
View File

@@ -25,4 +25,4 @@
"devDependencies": {
"parcel": "^2.0.1"
}
}
}

10
server.js
View File

@@ -18,8 +18,8 @@ const io = new Server(server, {
})
io.on('connection', socket => {
logger('ws', 'connesso')
logger('ws', `${socket.handshake.address} connected!`)
// message listeners
socket.on('send-url', args => {
logger('ws', args)
download(socket, args)
@@ -32,14 +32,14 @@ io.on('connection', socket => {
})
})
io.on('disconnect', () => {
logger('ws', 'disconnesso')
io.on('disconnect', (socket) => {
logger('ws', `${socket.handshake.address} disconnected`)
})
app
.use(cors())
.use(serve(path.join(__dirname, 'dist')))
console.log('[koa] Server started port', process.env.PORT || 3022)
logger('koa', `Server started on port ${process.env.PORT || 3022}`)
server.listen(process.env.PORT || 3022)