diff options
| -rw-r--r-- | resources/index.html | 30 |
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> |