some better vlc controls / status

3 files changed, 78 insertions, 21 deletions

diff --git a/lib/App/MediaControl/Web.rakumod b/lib/App/MediaControl/Web.rakumod
index 240ebab..076e2f2 100644
--- a/lib/App/MediaControl/Web.rakumod
+++ b/lib/App/MediaControl/Web.rakumod
@@ -27,7 +27,8 @@ class App::MediaControl::Web {
 
             get -> 'status' {
                 my $status = await self.vlc.status();
-                content 'application/json', $status;
+                my $playlist = await self.vlc.playlist();
+                content 'application/json', %( :$status, :$playlist );
             }
         }
 
diff --git a/lib/Vlc/Client.rakumod b/lib/Vlc/Client.rakumod
index 8951c60..0860df4 100644
--- a/lib/Vlc/Client.rakumod
+++ b/lib/Vlc/Client.rakumod
@@ -49,6 +49,22 @@ class Vlc::Client {
     method status() {
         my $res = await self!call-vlc('status.xml');
         my XML::Document $status = await $res.body;
-        return Promise.kept({:status(xml-to-hash($status.root))})
+        return Promise.kept(xml-to-hash($status.root));
+    }
+
+    method playlist() {
+        my $res = await self!call-vlc('playlist.xml');
+        my XML::Document $playlist = await $res.body;
+        my @playlist-items = $playlist.elements()
+        .grep(*.attribs<name> eq 'Playlist').first
+        .elements().map(
+            -> $leaf {
+                %(
+                    $leaf.attribs<name id duration uri>:p.Slip,
+                    current => $leaf.attribs<current>:exists,
+                )
+            },
+        );
+        return Promise.kept(@playlist-items);
     }
 }
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>