empede/templates/browser.html

102 lines
2.9 KiB
HTML
Raw Normal View History

{# #}
<div class="header">
<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>
<div class="buttons">
{% let encoded = path.join("/")|urlencode %}
<button hx-delete="/queue" hx-swap="none" hx-post="/queue?path={{ encoded }}">
<span class="material-symbols-outlined">playlist_add</span>
Queue all
</button>
<button hx-delete="/queue" hx-swap="none" hx-post="/queue?path={{ encoded }}&replace=true&play=true">
<span class="material-symbols-outlined">playlist_play</span>
Play all
</button>
<button hx-delete="/queue" hx-swap="none" hx-post="/queue?path={{ encoded }}&next=true">
<span class="material-symbols-outlined">playlist_add</span>
Play next
</button>
</div>
</div>
2023-04-27 19:17:26 +00:00
<ul class="dir" hx-boost="true" tabindex="-1">
{% for entry in entries %}
{% match entry %}
2023-12-23 05:27:11 +00:00
{% when mpd::Entry::Song with { track, name, path, artist } %}
2023-04-27 19:17:26 +00:00
<li
2023-05-02 09:40:18 +00:00
hx-post="/queue?path={{ path|urlencode }}"
2023-04-27 19:17:26 +00:00
hx-trigger="click,keyup[key=='Enter']"
hx-swap="none"
role="button"
tabindex="0"
>
2023-04-27 18:38:15 +00:00
<span class="material-symbols-outlined" title="Song">music_note</span>
2023-04-27 13:36:35 +00:00
<div class="albumart">
2023-05-08 11:56:10 +00:00
<img
src="/art?path={{ path|urlencode }}"
onload="this.style.visibility = 'visible'"
alt="Album art"
>
2023-04-27 13:36:35 +00:00
</div>
2023-12-23 05:27:11 +00:00
{% if let Some(track) = track %}
<div class="track">
{{ track }}.
</div>
{% endif %}
<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"
2023-05-02 09:04:08 +00:00
hx-vals='{"path": "{{ path|urlencode }}"}'
hx-replace-url="/?path={{ path|urlencode }}"
hx-target=".browser"
2023-04-27 17:36:21 +00:00
role="link"
>
2023-04-27 18:38:15 +00:00
<span class="material-symbols-outlined" title="Directory">folder</span>
2023-04-27 19:17:26 +00:00
<div class="song__name">
2023-05-02 09:04:08 +00:00
<a href="/?path={{ path|urlencode }}" hx-get="/browser" hx-sync="closest li:abort">
2023-04-27 19:17:26 +00:00
{{ name }}
</a>
</div>
</li>
{% when mpd::Entry::Playlist with { name, path } %}
2023-05-02 09:04:08 +00:00
<li hx-post="/queue?path={{ path|urlencode }}" hx-swap="none" role="button" >
2023-04-27 18:38:15 +00:00
<span class="material-symbols-outlined" title="Playlist">playlist_play</span>
<div class="song">
<div class="song__name">{{ name }}</div>
</a>
</li>
{% endmatch %}
{% endfor %}
</ul>