74 lines
2 KiB
HTML
74 lines
2 KiB
HTML
{# #}
|
|
<ul class="breadcrumb">
|
|
<li>
|
|
<a
|
|
href="/"
|
|
hx-replace-url="/"
|
|
hx-get="/browser"
|
|
hx-vals='{"path": ""}'
|
|
hx-target=".browser"
|
|
>Root</a>
|
|
</li>
|
|
{% for (i, component) in path.iter().enumerate() %}
|
|
<li>
|
|
{% if i == path.len() - 1 %}
|
|
{{ component }}
|
|
{% else %}
|
|
<a
|
|
{% let encoded = path[..i + 1].join("/")|urlencode %}
|
|
href="/?path={{ encoded }}"
|
|
hx-replace-url="/?path={{ encoded }}"
|
|
hx-get="/browser"
|
|
hx-vals='{"path": "{{ encoded }}"}'
|
|
hx-target=".browser"
|
|
>{{ component }}</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<ul class="dir" hx-boost="true" tabindex="-1">
|
|
{% for entry in entries %}
|
|
{% match entry %}
|
|
{% when mpd::Entry::Song with { name, path, artist } %}
|
|
<li
|
|
hx-post="/queue?path={{path}}"
|
|
hx-trigger="click,keyup[key=='Enter']"
|
|
hx-swap="none"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<span class="material-symbols-outlined" title="Song">music_note</span>
|
|
<div class="albumart">
|
|
<img src="/art?path={{path}}" onerror="this.style.visibility = 'hidden'">
|
|
</div>
|
|
<div class="song">
|
|
<div class="song__name">{{ name }}</div>
|
|
<div class="song__artist">{{ artist }}</div>
|
|
</a>
|
|
</li>
|
|
{% when mpd::Entry::Directory with { name, path } %}
|
|
<li
|
|
hx-get="/browser"
|
|
hx-vals='{"path": "{{ path|urlencode }}"}'
|
|
hx-replace-url="/?path={{ path|urlencode }}"
|
|
hx-target=".browser"
|
|
role="link"
|
|
>
|
|
<span class="material-symbols-outlined" title="Directory">folder</span>
|
|
<div class="song__name">
|
|
<a href="/?path={{ path|urlencode }}" hx-get="/browser" hx-sync="closest li:abort">
|
|
{{ name }}
|
|
</a>
|
|
</div>
|
|
</li>
|
|
{% when mpd::Entry::Playlist with { name, path } %}
|
|
<li hx-post="/queue?path={{ path|urlencode }}" hx-swap="none" role="button" >
|
|
<span class="material-symbols-outlined" title="Playlist">playlist_play</span>
|
|
<div class="song">
|
|
<div class="song__name">{{ name }}</div>
|
|
</a>
|
|
</li>
|
|
{% endmatch %}
|
|
{% endfor %}
|
|
</ul>
|