breadcrumbs

1 files changed, 22 insertions, 8 deletions

diff --git a/resources/index.html b/resources/index.html
index ef601f6..6478301 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -75,16 +75,28 @@
      }
 
      async function browseTo(id) {
-       const list = document.querySelector('#files ul');
+       const fileList = document.querySelector('ul#file-list');
+       const pathList = document.querySelector('ul#path-list');
        const itemTemplate = document.querySelector('#file-item');
-       const files = await (await call('get',`media${ id ? '/' + id : ''}`)).json();
-       const items = files.children.map(f => {
+       const browseData = await (await call('get',`media${ id ? '/' + id : ''}`)).json();
+
+       const fileItems = browseData.children.map(f => {
          return fillTemplate(itemTemplate, {
-           'play-url': f.is_dir ? `javascript:browseTo(${f.id})` : `javascript:vlcCommand('play/${f.id}')`,
+           'url': f.is_dir ? `javascript:browseTo(${f.id})` : `javascript:vlcCommand('play/${f.id}')`,
            'name': f.name,
+           'dirclass': f.is_dir ? 'dir' : 'file',
          });
        });
-       list.replaceChildren(...items);
+       fileList.replaceChildren(...fileItems);
+
+       const parents = browseData.parents ? [{id:null,name:'(root)'},...browseData.parents] : [];
+       const pathItems = parents.map(f => {
+         return fillTemplate(itemTemplate, {
+           'url': `javascript:browseTo(${f.id})`,
+           'name': f.name,
+         });
+       });
+       pathList.replaceChildren(...pathItems);
      }
 
      async function fillFiles() {
@@ -162,9 +174,11 @@
         <button onclick="updateView()">update</button>
         <input type="range" id="current-pos">
       </details>
-      <details id="files" data-root="">
+      <details id="files">
         <summary>files</summary>
-        <ul>
+        <ul id="path-list">
+        </ul>
+        <ul id="file-list">
         </ul>
       </details>
     </div>
@@ -272,7 +286,7 @@
     </div>
 
     <template id="file-item">
-      <li><a slot:href="play-url"><span><slot>name</slot></span></a></li>
+      <li slot:class="dirclass"><a slot:href="url"><span><slot>name</slot></span></a></li>
     </template>
   </body>
 </html>