diff options
| author | dakkar <dakkar@thenautilus.net> | 2021-12-30 18:31:05 +0000 |
|---|---|---|
| committer | dakkar <dakkar@thenautilus.net> | 2021-12-30 18:31:05 +0000 |
| commit | b0cd3f90fb18b8913a274daf4a52ac27aedbcc27 (patch) | |
| tree | 5d1d1f7f8c4077c23e75c9ade85196d443973d1d /resources/index.html | |
| parent | simpler one-shot browse (diff) | |
| download | media-control-b0cd3f90fb18b8913a274daf4a52ac27aedbcc27.tar.gz media-control-b0cd3f90fb18b8913a274daf4a52ac27aedbcc27.tar.bz2 media-control-b0cd3f90fb18b8913a274daf4a52ac27aedbcc27.zip | |
some better vlc controls / status
Diffstat (limited to 'resources/index.html')
| -rw-r--r-- | resources/index.html | 78 |
1 files changed, 59 insertions, 19 deletions
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 }, + ); } }) </script> @@ -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; + } </style> </head> <body> @@ -206,13 +238,21 @@ <td><button onclick="irCommand('stop','hdmi')" class="power off">stop</button></td> </tr> </table> - <details> + <details id="vlc-controls"> <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"> + <table> + <tr> + <td><button onclick="vlcCommand('play')" class="control">▶</button></td> + <td><button onclick="vlcCommand('pause')" class="control">⏸</button></td> + <td><button onclick="vlcCommand('stop')" class="control">⏹</button></td> + </tr> + <tr> + <td id="playing-name"><span></span></td> + </tr> + <tr> + <td colspan="3"><input type="range" id="current-pos"></td> + </tr> + </table> </details> <details id="files"> <summary>files</summary> |