refactor: Streamer

breaking change: change PlayConfig.CustomArgs type

server/static/index.html

@@ -367,6 +367,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script>
       let ws;
+      let shouldAutoScroll = true;
 
       function connectWebSocket() {
         const token = document.getElementById("token-input").value;
@@ -388,7 +389,9 @@
         ws.onmessage = function (evt) {
           let obj = JSON.parse(evt.data);
           messagesArea.value = obj.output;
-          // messagesArea.scrollTop = messagesArea.scrollHeight;
+          if (shouldAutoScroll) {
+            messagesArea.scrollTop = messagesArea.scrollHeight;
+          }
           document.querySelector("#current-video>span").innerHTML =
             obj.currentVideoPath;
           const listContainer = document.querySelector(
@@ -425,15 +428,32 @@
       function validateToken() {
         const tokenInput = document.getElementById("token-input");
         const token = tokenInput.value || getStoredToken();
-
         if (token) {
           tokenInput.value = token;
           connectWebSocket();
         }
       }
 
+      document
+        .getElementById("token-input")
+        .addEventListener("keydown", function (event) {
+          if (event.key === "Enter") {
+            validateToken();
+          }
+        });
+
       const messagesArea = document.getElementById("messages");
 
+      messagesArea.addEventListener("scroll", function () {
+        const maxScrollTop =
+          messagesArea.scrollHeight - messagesArea.clientHeight;
+        if (messagesArea.scrollTop === maxScrollTop) {
+          shouldAutoScroll = true;
+        } else {
+          shouldAutoScroll = false;
+        }
+      });
+
       function sendWs(type) {
         if (ws && ws.readyState === WebSocket.OPEN) {
           ws.send(`{ "type": "${type}" }`);