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>