Initial Commit

2025-04-24 15:28:53 -04:00
commit 7bb45b12ca
9 changed files with 319 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>MPV Commander</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    </head>
+    <script>
+        async function onclick_processor(name) {
+            try {
+                const response = await fetch(
+                    window.location.origin + "/stream",
+                    {
+                        method: "POST",
+                        "headers": {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify({ "name": name })
+                    }
+                )
+
+
+                if (!response.ok) {
+                    throw new Error(`Response status: ${response.status}`)
+                }
+
+                const json = await response.json()
+                console.log(json)
+            } catch (error) {
+                console.log(error.message)
+            }
+        }
+    </script>
+    <body>
+        <div class="container">
+            <h1 class="text-center">MPV Commander Instance {{ instance_name }}</h1>
+            <h3 class="text-center">Which video stream do you want to show?</h3>
+            {% for index in range(buttons | length) %}
+            {% if index % 3 == 0 %}
+            <div class="row">
+            {% endif %}
+            {% set current_name = buttons[index]["name"] %}
+            <button class="col-sm-4 btn-default p-3 my-1" onclick="onclick_processor('{{ current_name }}')">{{ current_name }}</button>
+            {% if index + 1 == buttons | length or (index + 1) % 3 == 0 %}
+            </div>
+            {% endif %}
+            {% endfor %}
+        </div>
+    </body>
+</html>