<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="manifest" href="ir.webmanifest">
<link rel="icon" href="ir.png">
<title>IR</title>
<script>
"use strict"
function fillTemplate(template,values) {
const newElement=template.content.cloneNode(true);
newElement.querySelectorAll('*').forEach(
(e) => {
if (e.tagName == 'SLOT') {
const valueKey=e.textContent.trim();
e.replaceWith(e.ownerDocument.createTextNode(values[valueKey]));
return;
}
const attrs = e.attributes;
for (var i = attrs.length - 1; i >= 0; i--) {
if (attrs[i].name.startsWith('slot:')) {
const name=attrs[i].name.replace('slot:','');
const valueKey=attrs[i].value;
e.removeAttribute(attrs[i].name);
e.setAttribute(name,values[valueKey]);
}
}
},
);
return newElement;
}
function addRow() {
document.querySelector('#list').appendChild(
fillTemplate(
document.querySelector('#row'),
{
'play-url':'http://foo.bar',
'name':'something',
},
)
);
}
function call(method,path,args) {
args ||= {};
let url=new URL(path,location.href);
for (let a in args) {
url.searchParams.set(a,args[a]);
}
return fetch(url, {
method: method,
mode: 'no-cors',
});
}
function vlcCommand(command,args) {
call('post',`vlc/${command}`,args);
}
function irCommand(thing,arg) {
call('post',`ir/${thing}/${arg}`);
}
async function updateView() {
const status = (await (await call('get','vlc/status')).json()).status;
const currentPos = document.querySelector('#current-pos');
if (status.state != 'playing') {
currentPos.disabled=true;
return;
}
currentPos.disabled=false;
const length = parseInt(status.length);
if (!length) { return }
const time = parseInt(status.time);
currentPos.max=length;
currentPos.value=time;
}
document.addEventListener('readystatechange', (event) => {
if (document.readyState == 'complete') {
setInterval(updateView, 1000);
}
})
</script>
<style>
body { font-size: 12vw }
* { font-size: inherit }
div.thing {
padding: 0.2em 0.1em 0.2em 0.1em;
margin-top: 0.5em;
margin-bottom: 1em;
border: solid 0.05em black;
border-radius: 0.5em;
position: relative;
}
div.thing label {
font-size: 0.8em;
line-height: 0.5em;
position: absolute;
top: -0.5em;
left: 1em;
background-color: white;
}
div.thing table {
width: 100%;
table-layout: fixed;
}
td button {
border-radius: 0.5em;
width: calc(100% - 0.2em);
margin: 0.1em;
}
.power { color: white }
.power.on { background-color: green }
.power.off { background-color: red }
.volume { background-color: lightblue }
.input { background-color: darkorange }
.control { background-color: black; color: white; filter: grayscale(100%) }
.bd-red { background-color: red }
.bd-yellow { background-color: yellow }
.bd-blue { background-color: blue; color: white }
</style>
</head>
<body>
<div class="thing">
<label>Vlc</label>
<table>
<tr>
<td><button onclick="irCommand('start','hdmi3')" class="power on">start</button></td>
<td><button onclick="irCommand('stop','hdmi')" class="power off">stop</button></td>
</tr>
</table>
<details>
<summary>controls</summary>
<button onclick="vlcCommand('play')">play</button>
<button onclick="vlcCommand('pause')">pause</button>
<button onclick="vlcCommand('stop')">stop</button>
<button onclick="updateView()">update</button>
<input type="range" id="current-pos">
</details>
</div>
<div class="thing">
<label>Laptop</label>
<table>
<tr>
<td><button onclick="irCommand('start','hdmi1')" class="power on">start</button></td>
<td><button onclick="irCommand('stop','hdmi')" class="power off">stop</button></td>
</tr>
</table>
</div>
<div class="thing">
<label>Bluray</label>
<table>
<tr>
<td><button onclick="irCommand('start','bluray')" class="power on">start</button></td>
<td><button onclick="irCommand('stop','bluray')" class="power off">stop</button></td>
</tr>
</table>
<details>
<summary>controls</summary>
<table>
<tr>
<td><button onclick="irCommand('bluray','ejectcd')" class="input">⏏</button></td>
<td> </td>
<td><button onclick="irCommand('bluray','power')" class="power on">ON</button></td>
</tr>
<tr>
<td><button onclick="irCommand('bluray','yellow')" class="bd-yellow">a</button></td>
<td><button onclick="irCommand('bluray','blue')" class="bd-blue">b</button></td>
<td><button onclick="irCommand('bluray','red')" class="bd-red">c</button></td>
</tr>
<tr>
<td><button onclick="irCommand('bluray','menu')" class="control">🔝</button></td>
<td><button onclick="irCommand('bluray','up')" class="control">↑</button></td>
<td><button onclick="irCommand('bluray','context_menu')" class="control">⎙</button></td>
</tr>
<tr>
<td><button onclick="irCommand('bluray','left')" class="control">←</button></td>
<td><button onclick="irCommand('bluray','ok')" class="control">ok</button></td>
<td><button onclick="irCommand('bluray','right')" class="control">→</button></td>
</tr>
<tr>
<td><button onclick="irCommand('bluray','back')" class="control">🔙</button></td>
<td><button onclick="irCommand('bluray','down')" class="control">↓</button></td>
<td><button onclick="irCommand('bluray','option')" class="control">opt</button></td>
</tr>
<tr>
<td colspan="3"><button onclick="irCommand('bluray','home')" class="control">home</button></td>
</tr>
<tr>
<td><button onclick="irCommand('bluray','previous')" class="control">⏪</button></td>
<td><button onclick="irCommand('bluray','play')" class="control">▶</button></td>
<td><button onclick="irCommand('bluray','next')" class="control">⏩</button></td>
</tr>
<tr>
<td><button onclick="irCommand('bluray','review')" class="control">⏮</button></td>
<td><button onclick="irCommand('bluray','pause')" class="control">⏸</button></td>
<td><button onclick="irCommand('bluray','fastforward')" class="control">⏭</button></td>
</tr>
<tr>
<td><button onclick="irCommand('bluray','subtitle')" class="control">sub</button></td>
<td><button onclick="irCommand('bluray','stop')" class="control">⏹</button></td>
<td><button onclick="irCommand('bluray','audio')" class="control">aud</button></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button onclick="irCommand('bluray','displaytoggle')" class="control">disp</button></td>
</tr>
</table>
</details>
</div>
<div class="thing">
<label>Amp</label>
<table>
<tr>
<td><button onclick="irCommand('amplifier','power')" class="power on">ON</button></td>
<td><button onclick="irCommand('amplifier','power')" class="power off">OFF</button></td>
<td><button onclick="irCommand('amplifier','volumeup')" class="volume">↑</button></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button onclick="irCommand('amplifier','volumedown')" class="volume">↓</button></td>
</tr>
<tr>
<td><button onclick="irCommand('amplifier','hdmi1')" class="input">Lap</button></td>
<td><button onclick="irCommand('amplifier','hdmi2')" class="input">BD</button></td>
<td><button onclick="irCommand('amplifier','hdmi3')" class="input">NAS</button></td>
</tr>
</table>
</div>
<div class="thing">
<label>Projector</label>
<table>
<tr>
<td><button onclick="irCommand('projector','power')" class="power on">ON</button></td>
<td><button onclick="irCommand('projector','suspend')" class="power off">OFF</button></td>
</tr>
</table>
</div>
<template id="row">
<li><a slot:href="play-url"><span><slot>name</slot></span></a></li>
</template>
</body>
</html>
