update 30

.dockerignore

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

.gitignore

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

README.md

@@ -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

frontend/src/App.tsx

@@ -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>
+                            <Row>
-                            {!message ? <pre>Ready</pre> : null}
+                                {downloadInfo ? <p>{downloadInfo.title}</p> : null}
-                            <pre id='status'>{message}</pre>
+                                <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>{' '}
+                        <ButtonGroup className="mt-2">
-                            <Button className="mt-2" active onClick={() => abort()}>Abort</Button>{' '}
+                            <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>

frontend/src/components/Statistics.tsx

@@ -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>
+    )
+}

frontend/src/interfaces.tsx

@@ -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 {

frontend/src/utils.ts

@@ -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 ''
 }

lib/downloader.js

@@ -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)
+                //let _stdout = String(stdout)
-                socket.emit('progress', formatter(_stdout)) // finally, emit
+                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,
-}
+}

lib/yt-dlpCaller.js

@@ -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);
-}

package.json

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

server.js

@@ -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', () => {
+io.on('disconnect', (socket) => {
-    logger('ws', 'disconnesso')
+    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)