added frontend tuning ability

This commit is contained in:
david 2025-04-01 17:29:27 -07:00
parent 3dbf27e149
commit 6f1faf2753
2 changed files with 52 additions and 1 deletions

View File

@ -11,9 +11,14 @@
<body> <body>
<h1>Video streams</h1> <h1>Video streams</h1>
<h2>WebRTC</h2> <h2>WebRTC</h2>
<video id="video" autoplay playsinline controls></video> <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/video.js"></script>
<script src="js/doc.js"></script>
</body> </body>
</html> </html>

46
src/static/js/doc.ts Normal file
View File

@ -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();