Add support for youtube links

client/web/client.js

@@ -93,39 +93,68 @@ document.getElementById('uploadForm').addEventListener('submit', function(event)
 
     var fileInput = document.getElementById('myFile');
     var file = fileInput.files[0];
+    var youtubeLink = document.getElementById('youtubeLink').value;
 
-    var objectURL = URL.createObjectURL(file);
-    var audio = new Audio(objectURL);
+    if (file) {
+        var objectURL = URL.createObjectURL(file);
+        var audio = new Audio(objectURL);
 
-    audio.addEventListener('loadedmetadata', function() {
-        var duration = audio.duration;
-        console.log(duration);
+        audio.addEventListener('loadedmetadata', function() {
+            var duration = audio.duration;
+            console.log(duration);
 
-        if (duration > 10) {
-            alert('File is longer than 10 seconds.');
-            return;
-        }
+            if (duration > 10) {
+                alert('File is longer than 10 seconds.');
+                return;
+            }
 
-        if (file.size > 1024 * 1024) {
-            alert('File is larger than 1MB.');
-            return;
-        }
+            if (file.size > 1024 * 1024) {
+                alert('File is larger than 1MB.');
+                return;
+            }
 
-        if (file.name.split('.').pop().toLowerCase() !== 'mp3') {
-            alert('Only .mp3 files are allowed.');
-            return;
-        }
+            if (file.name.split('.').pop().toLowerCase() !== 'mp3') {
+                alert('Only .mp3 files are allowed.');
+                return;
+            }
 
-        var formData = new FormData();
-        formData.append('myFile', file);
+            var formData = new FormData();
+            formData.append('myFile', file);
 
-        fetch('/upload', {
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.text())
+            .then(data => {
+                console.log(data);
+                alert('File uploaded successfully.');
+
+                // Call loadFiles again to update the file list
+                loadFiles();
+            })
+            .catch(error => {
+                console.error(error);
+                alert('An error occurred while uploading the file.');
+            });
+        });
+    } else if (youtubeLink) {
+        console.log(youtubeLink);
+        fetch('/upload-youtube', {
             method: 'POST',
-            body: formData
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ url: youtubeLink }),
         })
         .then(response => response.text())
         .then(data => {
             console.log(data);
+            // if response is not ok, alert
+            if (data !== 'ok') {
+                alert(data);
+                return;
+            }
             alert('File uploaded successfully.');
 
             // Call loadFiles again to update the file list
@@ -135,5 +164,7 @@ document.getElementById('uploadForm').addEventListener('submit', function(event)
             console.error(error);
             alert('An error occurred while uploading the file.');
         });
-    });
+    } else {
+        alert('Please select a file or paste a YouTube link.');
+    }
 });

client/web/index.html

@@ -19,6 +19,7 @@
                                 <input type="file" id="myFile" class="custom-file-input">
                                 <label class="custom-file-label" for="myFile">Choose file</label>
                             </div>
+                            <input type="text" id="youtubeLink" class="form-control" placeholder="Paste YouTube link here">
                         </div>
                     </div>
                     <button type="submit" class="btn btn-primary btn-block">Upload</button>

client/webserver.ts

@@ -3,6 +3,10 @@ import express from 'express';
 import multer, { diskStorage } from 'multer';
 import path from 'path';
 import { LoggerColors } from '../bot';
+import ytdl from 'ytdl-core';
+import fs from 'fs';
+import bodyParser from 'body-parser';
+import ffmpeg from 'fluent-ffmpeg';
 
 const app = express();
 const storage = diskStorage({
@@ -12,6 +16,7 @@ const storage = diskStorage({
     }
 });
 
+app.use(bodyParser.json());
 
 const upload = multer({ 
     storage: storage,
@@ -20,6 +25,7 @@ const upload = multer({
         if (path.extname(file.originalname) !== '.mp3') {
             return cb(new Error('Only .mp3 files are allowed'));
         }
+        
         cb(null, true);
     }
 });
@@ -32,6 +38,55 @@ app.post('/upload', upload.single('myFile'), async (req, res) => {
     res.send('File uploaded successfully.');
 });
 
+app.post('/upload-youtube', async (req, res) => {
+    const url = req.body.url;
+
+    if (ytdl.validateURL(url)) {
+        const info = await ytdl.getInfo(url);
+        // remove special characters from the title and white spaces
+        const title = info.videoDetails.title.replace(/[^a-zA-Z ]/g, "").replace(/\s+/g, '-').toLowerCase();
+
+        // Create a temporary directory to store the uploaded file so validation can be done
+        const tempDir = fs.mkdtempSync('temp');
+        const outputFilePath = path.resolve(tempDir, Date.now() + '-' + title + '.mp3');
+
+        const videoReadableStream = ytdl(url, { filter: 'audioonly' });
+        const fileWritableStream = fs.createWriteStream(outputFilePath);
+
+        videoReadableStream.pipe(fileWritableStream);
+
+        fileWritableStream.on('finish', () => {
+            ffmpeg.ffprobe(outputFilePath, function(err, metadata) {
+                if (err) {
+                    fs.rmSync(tempDir, { recursive: true, force: true });
+                    return res.status(500).send('Error occurred during processing.');
+                }
+                const duration = metadata.format.duration;
+
+                if (duration == undefined) {
+                    fs.rmSync(tempDir, { recursive: true, force: true });
+                    return res.status(400).send('Something went wrong.');
+                }
+                if (duration > 10) {
+                    fs.rmSync(tempDir, { recursive: true, force: true });
+                    return res.status(400).send('File is longer than 10 seconds.');
+                } else {
+                    // Move the file from the temporary directory to its final destination
+                    const finalFilePath = path.resolve(__dirname, '../sounds/', Date.now() + '-' + title + '.mp3');
+                    fs.renameSync(outputFilePath, finalFilePath);
+
+                    res.send('File uploaded successfully.');
+                }
+
+                // Remove the temporary directory and its contents once done
+                fs.rmSync(tempDir, { recursive: true, force: true });
+            });
+        });
+    } else {
+        res.status(400).send('Invalid url provided.');
+    }
+});
+
 // create a enpoint to return a file from the sounds folder (use the file name) with as little code as possible
 app.use('/sounds', express.static(path.join(__dirname, '../sounds')));