start of browse ui

1 files changed, 30 insertions, 14 deletions

diff --git a/resources/index.html b/resources/index.html
index de19121..6711048 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -32,18 +32,6 @@
 
        return newElement;
      }
-     // example usage
-     function addRow() {
-       document.querySelector('#list').appendChild(
-         fillTemplate(
-           document.querySelector('#row'),
-           {
-             'play-url':'http://foo.bar',
-             'name':'something',
-           },
-         )
-       );
-     }
 
      function call(method,path,args) {
        args ||= {};
@@ -84,9 +72,32 @@
        currentPos.value=time;
      }
 
+     async function browseTo(id) {
+       const list = document.querySelector('#files ul');
+       const itemTemplate = document.querySelector('#file-item');
+       const files = await (await call('get',`media${ id ? '/' + id : ''}`)).json();
+       const items = files.children.map(f => {
+         return fillTemplate(itemTemplate, {
+           'play-url': f.is_dir ? `javascript:browseTo(${f.id})` : `javascript:vlcCommand('play/${f.id}')`,
+           'name': f.name,
+         });
+       });
+       list.replaceChildren(...items);
+     }
+
+     async function fillFiles() {
+       const filesDetails = document.querySelector('#files');
+       if (document.querySelector('#files').open) {
+         filesDetails.removeEventListener('toggle',fillFiles);
+         await browseTo(null);
+       }
+     }
+
      document.addEventListener('readystatechange', (event) => {
        if (document.readyState == 'complete') {
-         setInterval(updateView, 1000);
+         //setInterval(updateView, 1000);
+
+         document.querySelector('#files').addEventListener('toggle', fillFiles);
        }
      })
     </script>
@@ -149,6 +160,11 @@
         <button onclick="updateView()">update</button>
         <input type="range" id="current-pos">
       </details>
+      <details id="files" data-root="">
+        <summary>files</summary>
+        <ul>
+        </ul>
+      </details>
     </div>
     <div class="thing">
       <label>Laptop</label>
@@ -253,7 +269,7 @@
       </table>
     </div>
 
-    <template id="row">
+    <template id="file-item">
       <li><a slot:href="play-url"><span><slot>name</slot></span></a></li>
     </template>
   </body>