From b0cd3f90fb18b8913a274daf4a52ac27aedbcc27 Mon Sep 17 00:00:00 2001 From: dakkar Date: Thu, 30 Dec 2021 18:31:05 +0000 Subject: some better vlc controls / status --- resources/index.html | 78 +++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 59 insertions(+), 19 deletions(-) (limited to 'resources/index.html') diff --git a/resources/index.html b/resources/index.html index 5665a10..042601d 100644 --- a/resources/index.html +++ b/resources/index.html @@ -56,15 +56,19 @@ } async function updateView() { - const status = (await (await call('get','vlc/status')).json()).status; - const currentPos = document.querySelector('#current-pos'); + const statusRes = (await (await call('get','vlc/status')).json()); + const status = statusRes.status; + const playlist = statusRes.playlist; + const current = playlist.find(i => { return i.current }); - if (status.state != 'playing') { - currentPos.disabled=true; - return; + if (current) { + document.querySelector('#playing-name span').textContent = current.name; } + + const currentPos = document.querySelector('#current-pos'); + + currentPos.disabled = status.state != 'playing'; - currentPos.disabled=false; const length = parseInt(status.length); if (!length) { return } @@ -101,14 +105,34 @@ document.addEventListener('readystatechange', (event) => { if (document.readyState == 'complete') { - //setInterval(updateView, 1000); document.querySelector('#files'). - addEventListener('toggle', async (event) => { - if (event.target.open) { - await browseTo(null); - } - }, { once:true, passive:true }); + addEventListener( + 'toggle', + async (event) => { + if (event.target.open) { + await browseTo(null); + } + }, + { once:true, passive:true }, + ); + + let vlcUpdateIntervalId; + document.querySelector('#vlc-controls'). + addEventListener( + 'toggle', + (event) => { + if (vlcUpdateIntervalId) { + clearInterval(vlcUpdateIntervalId); + vlcUpdateIntervalId=null; + } + if (event.target.open) { + updateView(); + vlcUpdateIntervalId = setInterval(updateView, 1000); + } + }, + { passive:true }, + ); } }) @@ -155,7 +179,9 @@ input[type=range] { width: 100%; - /* transform: scaleY(5); */ + position: relative; + z-index: -1; + transform: scaleY(5); } #files { @@ -195,6 +221,12 @@ li.dir::marker { content: '📁' } li.dir::after { content: '/' } li.file::marker { content: '🎞️' } + + #playing-name { + white-space: pre; + font-size: 50%; + overflow-x: scroll; + } @@ -206,13 +238,21 @@ -

controls

- - - - - + + + + + + + + + + + + +

files

-- cgit v1.2.3