small fixes

frontend/src/App.jsx

@@ -10,7 +10,8 @@ import {
     Button,
     Toast
 } from "react-bootstrap";
-import './App.css'
+import { validateDomain, validateIP } from "./utils";
+import './App.css';
 
 const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
 
@@ -21,6 +22,7 @@ export function App() {
     const [halt, setHalt] = useState(false)
     const [url, setUrl] = useState('')
     const [showToast, setShowToast] = useState(false)
+    const [invalidIP, setInvalidIP] = useState(false)
     const [showSettings, setShowSettings] = useState(false)
 
     useEffect(() => {
@@ -58,7 +60,16 @@ export function App() {
     }
 
     const handleAddrChange = (e) => {
-        localStorage.setItem('server-addr', e.target.value)
+        const input = e.target.value;
+        if (validateIP(input)) {
+            setInvalidIP(false)
+            localStorage.setItem('server-addr', input)
+        } else if (validateDomain(input)) {
+            setInvalidIP(false)
+            localStorage.setItem('server-addr', input)
+        } else {
+            setInvalidIP(true)
+        }
     }
 
     const abort = () => {
@@ -86,22 +97,24 @@ export function App() {
                         <pre id='status'>{message}</pre>
                     </div>
 
-                    {progress ? <ProgressBar className="container-padding" now={progress} variant="success" /> : null}
+                    {progress ? <ProgressBar className="container-padding" now={progress} variant="danger" /> : null}
 
-                    <Button className="my-5" variant="success" onClick={() => sendUrl()} disabled={halt}>Go!</Button>{' '}
-                    <Button variant="danger" onClick={() => abort()}>Abort</Button>{' '}
+                    <Button className="my-5" variant="danger" onClick={() => sendUrl()} disabled={halt}>Go!</Button>{' '}
+                    <Button variant="danger" active onClick={() => abort()}>Abort</Button>{' '}
                     <Button variant="secondary" onClick={() => setShowSettings(!showSettings)}>Settings</Button>
 
                     {showSettings ?
                         <>
                             <h6>Server address</h6>
-                            <InputGroup className="mb-3 url-input">
+                            <InputGroup className="mb-3 url-input" hasValidation>
                                 <InputGroup.Text>ws://</InputGroup.Text>
                                 <FormControl
                                     defaultValue={localStorage.getItem('server-addr')}
                                     placeholder="Server address"
                                     aria-label="Server address"
                                     onChange={handleAddrChange}
+                                    isInvalid={invalidIP}
+                                    isValid={!invalidIP}
                                 />
                                 <InputGroup.Text>:3022</InputGroup.Text>
                             </InputGroup>
@@ -120,7 +133,7 @@ export function App() {
                         show={showToast}
                         onClose={() => setShowToast(false)}
                         bg={'success'}
-                        delay={1000}
+                        delay={1500}
                         autohide
                         className="mt-5"
                     >

frontend/src/utils.js

@@ -0,0 +1,9 @@
+export function validateIP(ipAddr) {
+    let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
+    return ipRegex.test(ipAddr)
+}
+
+export function validateDomain(domainName) {
+    let domainRegex = /[^@ \t\r\n]+.[^@ \t\r\n]+\.[^@ \t\r\n]+/
+    return domainRegex.test(domainName) || domainName === 'localhost'
+}

lib/downloader.js

@@ -1,21 +1,20 @@
-const { spawn } = require('child_process');
-const logger = require('./logger');
-let settings;
+const { spawn } = require('child_process')
+const logger = require('./logger')
+let settings
 
 try {
-    settings = require('../settings.json');
+    settings = require('../settings.json')
 }
 catch (e) {
     console.warn("settings.json not found")
 }
 
-const isWindows = process.platform === 'win32';
+const isWindows = process.platform === 'win32'
 
 const download = (socket, url) => {
     const ytldp = spawn(`./lib/yt-dlp${isWindows ? '.exe' : ''}`,
         ['-o', `${settings.download_path || './downloads/'}%(title)s.%(ext)s`, url]
     )
-
     ytldp.stdout.on('data', data => {
         socket.emit('progress', data.toString())
         console.log(data.toString())