Display error on invalid Youtube URL

Xwilarg · Dec 30, 2024 · 60c18bb · 60c18bb
1 parent 78cd596
commit 60c18bb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/web/src/main/upload.js b/web/src/main/upload.js
@@ -15,6 +15,24 @@ export async function upload_initAsync() {
         popup.classList.remove("is-active");
     });
 
+    document.getElementById("upload-url").addEventListener("change", (_) => {
+        const upload = document.getElementById("upload-url");
+        const content = upload.value;
+        if (content === "") {
+            document.getElementById("upload-url-error").classList.add("is-hidden");
+            upload.classList.remove("is-danger");
+        } else {
+            const r = /youtu\.?be(\.com)?\/(watch\?v=)?([^?]+)/g.exec(upload.value);
+            if (r === null) {
+                document.getElementById("upload-url-error").classList.remove("is-hidden");
+                upload.classList.add("is-danger");
+            } else {
+                document.getElementById("upload-url-error").classList.add("is-hidden");
+                upload.classList.remove("is-danger");
+            }
+        }
+    });
+
     document.getElementById("upload-form").addEventListener("submit", (e) => {
         e.preventDefault();
         const data = new FormData(e.target);
@@ -28,6 +46,7 @@ export async function upload_initAsync() {
                 form.elements[i].disabled = false;
             }
             form.reset();
+            document.getElementById("upload-yt-player").src = "";
         }, () => {
             for (var i = 0, len = form.elements.length; i < len; ++i) {
                 form.elements[i].disabled = false;

diff --git a/web/templates/upload.html.twig b/web/templates/upload.html.twig
@@ -23,6 +23,7 @@
                 <div class="control">
                     <input class="input" type="url" name="Youtube" placeholder="Youtube URL to the song" id="upload-url"/>
                 </div>
+                <p class="help is-danger is-hidden" id="upload-url-error">This doesn't look like a valid YouTube link</p>
             </div>
             <div class="field">
                 <label class="label">Album name</label>