first commit

2021-11-18 15:09:56 +01:00
commit 52759b7ce9
14 changed files with 260 additions and 0 deletions
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -0,0 +1,5 @@
+body{
+    height: 100vh;
+    background-color: #202124;
+    color: #f1f1f1;
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="index.css">
+    <title>Frontend</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="index.js"></script>
+</body>
+
+</html>
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom'
+import { App } from './src/App'
+
+const root = document.getElementById('root')
+ReactDOM.render(<App />, root)
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,69 @@
+import { io } from "socket.io-client";
+import React, { useState, useEffect } from "react";
+import { Container, ProgressBar, InputGroup, FormControl, Button } from "react-bootstrap";
+import './App.css'
+
+const socket = io('http://localhost:3000')
+
+export function App() {
+    useEffect(() => {
+        socket.on('progress', data => {
+            setMessage(data.trim())
+            if (data.trim() === 'Done!') {
+                setHalt(false)
+                setProgress(0)
+            }
+            try {
+                setProgress(Math.ceil(data.split(" ")[2].replace('%', '')))
+            } catch (error) {
+                console.log('finished or empty url')
+            }
+        })
+    }, [])
+
+    const sendUrl = () => {
+        setHalt(true)
+        console.log(url)
+        socket.emit('send-url', url)
+    }
+
+    const handleUrlChange = (e) => {
+        setUrl(e.target.value)
+    }
+
+    const abort = () => {
+        socket.emit('abort')
+        setHalt(false)
+    }
+
+    const [progress, setProgress] = useState(0)
+    const [message, setMessage] = useState('')
+    const [halt, setHalt] = useState(false)
+    const [url, setUrl] = useState('')
+
+    return (
+        <Container>
+            <div className="mt-5" />
+            <h1>yt-dlp web ui</h1>
+
+            <InputGroup className="mt-5">
+                <FormControl placeholder="youtube video url" onChange={handleUrlChange} />
+            </InputGroup>
+
+            <div className="mt-2">
+                <h6>Status</h6>
+                <pre id='status'>{message}</pre>
+            </div>
+
+            <ProgressBar now={progress} />
+
+            <Button className="my-5" variant="success" onClick={() => sendUrl()} disabled={halt}>Go!</Button>{' '}
+            <Button variant="danger" onClick={() => abort()}>Abort</Button>
+
+            <div className="mt-5" />
+            <div>
+                Once you close the page the download will continue in the background. It won't be possible retriving the progress though.
+            </div>
+        </Container>
+    )
+}