update 29

Dockerfile

@@ -1,5 +1,5 @@
 FROM node:16-bullseye
-RUN mkdir -p /usr/src/yt-dlp-webui/downloadsd
+RUN mkdir -p /usr/src/yt-dlp-webui/download
 VOLUME /usr/src/yt-dlp-webui/downloads
 WORKDIR /usr/src/yt-dlp-webui
 COPY package*.json ./

frontend/src/App.jsx

@@ -24,6 +24,7 @@ export function App() {
     const [url, setUrl] = useState('')
     const [showToast, setShowToast] = useState(false)
     const [invalidIP, setInvalidIP] = useState(false)
+    const [updatedBin, setUpdatedBin] = useState(false)
     const [showSettings, setShowSettings] = useState(false)
 
     useEffect(() => {
@@ -50,6 +51,13 @@ export function App() {
         })
     }, [])
 
+    useEffect(() => {
+        socket.on('updated', () => {
+            setUpdatedBin(true)
+            setHalt(false)
+        })
+    }, [])
+
     const sendUrl = () => {
         setHalt(true)
         socket.emit('send-url', url)
@@ -77,6 +85,11 @@ export function App() {
         setHalt(false)
     }
 
+    const updateBinary = () => {
+        setHalt(true)
+        socket.emit('update-bin')
+    }
+
     return (
         <Container>
             <Row>
@@ -100,12 +113,13 @@ export function App() {
                             <pre id='status'>{message}</pre>
                         </div>
                         <ButtonGroup>
-                            <Button className="mt-2" variant="primary" onClick={() => sendUrl()} disabled={halt}>Start</Button>{' '}
+                            <Button className="mt-2" onClick={() => sendUrl()} disabled={halt}>Start</Button>{' '}
-                            <Button className="mt-2" variant="primary" active onClick={() => abort()}>Abort</Button>{' '}
+                            <Button className="mt-2" active onClick={() => abort()}>Abort</Button>{' '}
                         </ButtonGroup>
+
+                        {progress ? <ProgressBar className="container-padding mt-2" now={progress} variant="primary" /> : null}
                     </div>
 
-                    {progress ? <ProgressBar className="container-padding" now={progress} variant="primary" /> : null}
 
                     <div className="my-4">
                         <span className="settings" onClick={() => setShowSettings(!showSettings)}>Settings</span>
@@ -126,6 +140,9 @@ export function App() {
                                 />
                                 <InputGroup.Text>:3022</InputGroup.Text>
                             </InputGroup>
+                            <Button onClick={() => updateBinary()} disabled={halt}>
+                                Update yt-dlp binary
+                            </Button>
                         </div> :
                         null
                     }
@@ -149,6 +166,18 @@ export function App() {
                             {`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>

jsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es2020",
+        "jsx": "preserve",
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}

lib/updater.js

@@ -0,0 +1,82 @@
+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+
+// endpoint to github API
+const options = {
+    hostname: 'api.github.com',
+    path: '/repos/yt-dlp/yt-dlp/releases/latest',
+    headers: {
+        'User-Agent': 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0'
+    },
+    method: 'GET',
+    port: 443,
+}
+
+// build the binary url based on the release tag
+function buildDonwloadOptions(release) {
+    return {
+        hostname: 'github.com',
+        path: `/yt-dlp/yt-dlp/releases/download/${release}/yt-dlp`,
+        headers: {
+            'User-Agent': 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0'
+        },
+        method: 'GET',
+        port: 443,
+    }
+}
+
+// main
+async function update() {
+    // ensure that the binary has been removed
+    try {
+        fs.rmSync(path.join(__dirname, 'yt-dlp'))
+    }
+    catch (e) {
+        console.log('file not found!')
+    }
+    // body buffer
+    let chunks = []
+    https.get(options, res => {
+        // push the http packets chunks into the buffer
+        res.on('data', chunk => {
+            chunks.push(chunk)
+        });
+        // the connection has ended so build the body from the buffer
+        // parse it as a JSON and get the tag_name
+        res.on('end', () => {
+            const buffer = Buffer.concat(chunks)
+            const release = JSON.parse(buffer.toString())['tag_name']
+            console.log('The latest release is:', release)
+            // invoke the binary downloader
+            downloadBinary(buildDonwloadOptions(release))
+        })
+    })
+}
+
+function downloadBinary(url) {
+    https.get(url, res => {
+        // if it is a redirect follow the url
+        if (res.statusCode === 301 || res.statusCode === 302) {
+            return downloadBinary(res.headers.location)
+        }
+        let bin = fs.createWriteStream(path.join(__dirname, 'yt-dlp'))
+        res.pipe(bin)
+        // once the connection has ended make the file executable
+        res.on('end', () => {
+            fs.chmod(path.join(__dirname, 'yt-dlp'), 0o775, err => {
+                err ? console.error('failed updating!') : console.log('done!')
+            })
+        })
+    })
+}
+
+function updateFromFrontend(socket) {
+    update().then(() => {
+        socket.emit('updated')
+    })
+}
+
+module.exports = {
+    ytdlpUpdater: updateFromFrontend
+}

server.js

@@ -6,6 +6,7 @@ const { createServer } = require('http');
 const cors = require('@koa/cors');
 const logger = require('./lib/logger');
 const { download, abortDownload } = require('./lib/downloader');
+const { ytdlpUpdater } = require('./lib/updater');
 
 const app = new Koa()
 const server = createServer(app.callback())
@@ -23,10 +24,13 @@ io.on('connection', socket => {
         logger('ws', args)
         download(socket, args)
     })
-
     socket.on('abort', () => {
         abortDownload(socket)
     })
+
+    socket.on('update-bin', () => {
+        ytdlpUpdater(socket)
+    })
 })
 
 io.on('disconnect', () => {