2025-04-03 21:32:59 -07:00
2 changed files with 52 additions and 1 deletions
--- a/src/static/index.html
+++ b/src/static/index.html
@ -11,9 +11,14 @@
 <body>
  <h1>Video streams</h1>
  <h2>WebRTC</h2>
+  <div class="player">
    <video id="video" autoplay playsinline controls></video>
+    <div id="channel-group" class="channel-group" ></div>
+    <button onClick="tune()">Tune</button>
+  </div>

  <script src="js/video.js"></script>
+  <script src="js/doc.js"></script>
 </body>

 </html>
--- a/src/static/js/doc.ts
+++ b/src/static/js/doc.ts
@ -0,0 +1,46 @@
+const getChannels = () => {
+    fetch('/api/list').then(async (res) => {
+        const channelNames: string[] = await res.json()
+        const radioGroup = document.getElementById('channel-group');
+        if (!radioGroup) {
+            throw new Error("Radio group not found")
+        }
+        radioGroup.innerHTML = ''
+        channelNames.forEach((channelName,index) => {
+            const id = `radio-${index}`;
+
+            const input = document.createElement('input');
+            input.type = "radio"
+            input.name = 'grp';
+            input.value = channelName;
+            input.id = id
+
+
+            const lbl = document.createElement("label");
+            lbl.htmlFor = id;
+            lbl.textContent = channelName;
+      
+            // Wrap in a div or line
+            const wrapper = document.createElement("div");
+            wrapper.appendChild(input);
+            wrapper.appendChild(lbl);
+
+
+
+            radioGroup.appendChild(wrapper)
+        })
+    }).catch(err => {
+        console.log("nope ",err)
+    })
+}
+
+const tune = () =>{
+    const choice = document.querySelector<HTMLInputElement>('input[name="grp"]:checked')
+    const channel = choice?.value;
+    if(channel){
+        fetch(`/api/tune/${channel}`, {method:'PUT'})
+    }
+    
+}
+
+getChannels();