<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>vlc</title>
<script>
"use strict"
function vlcCall(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) {
vlcCall('post',command,args);
}
async function updateView() {
const status = (await (await vlcCall('get','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>
</head>
<body>
<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">
</body>
</html>
