front end done

2022-06-29 10:35:43 -04:00
parent c69654f38f
commit 784b82313c
2 changed files with 36 additions and 13 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,9 +1,29 @@
 <!DOCTYPE html>
 <html>
    <head>
-        <title>Srinidhi Youtube videos</title>
+        <title>Youtube Downloader UI</title>
        <!-- Diable favicon requests: https://stackoverflow.com/a/13416784 -->
        <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+        <script>
+            // https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
+            window.addEventListener('DOMContentLoaded', () => {
+                            progressElems = document.querySelectorAll(".ytprogress")
+                            progressElems.forEach(function(item) {
+                                            // https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
+                                            item.innerText = item.dataset.ytid
+                                            ytid = item.dataset.ytid
+
+                                            // https://stackoverflow.com/a/47472874
+                                            var url = new URL("/ws/" + ytid, window.location.href);
+                                            url.protocol = url.protocol.replace('http', 'ws');
+
+                                            let socket = new WebSocket(url.href)
+                                            socket.onmessage = function(event) {
+                                                            item.innerHTML = event.data
+                                                        }
+                                        })
+                        });
+        </script>
    </head>
    <body>
        <form method="POST" action="/">
@@ -30,7 +50,7 @@
                        {{ if eq .Status "Done" }}
                        <a target="_blank" href="{{ vids_prefix }}/{{ .FileName }}">Watch</a>
                        {{ else if eq .Status "InProgress" }}
-                        <span class="progress" data="{{.Id}}">In Progress</span>
+                        <span class="ytprogress" data-ytid="{{.Id}}">In Progress</span>
                        {{ else }}
                        {{ .Status }}
                        {{ end }}