Set a couple of `title` and `alt`s

This commit is contained in:
Sijmen 2023-04-27 20:38:15 +02:00
parent 743283a9ec
commit 25790a784d
Signed by: vijfhoek
GPG Key ID: DAF7821E067D9C48
3 changed files with 23 additions and 13 deletions

View File

@ -31,7 +31,7 @@
{% match entry %}
{% when mpd::Entry::Song with { name, path, artist } %}
<li hx-post="/queue?path={{path}}" hx-swap="none" role="button">
<span class="material-symbols-outlined">music_note</span>
<span class="material-symbols-outlined" title="Song">music_note</span>
<div class="albumart">
<img src="/art?path={{path}}" onerror="this.style.visibility = 'hidden'">
</div>
@ -48,12 +48,12 @@
hx-target=".browser"
role="link"
>
<span class="material-symbols-outlined">folder</span>
<span class="material-symbols-outlined" title="Directory">folder</span>
<div class="song__name">{{ name }}</div>
</li>
{% when mpd::Entry::Playlist with { name, path } %}
<li hx-post="/queue?path={{ path }}" hx-swap="none" role="button" >
<span class="material-symbols-outlined">playlist_play</span>
<span class="material-symbols-outlined" title="Playlist">playlist_play</span>
<div class="song">
<div class="song__name">{{ name }}</div>
</a>

View File

@ -12,16 +12,21 @@
{% if let Some(song) = song %}
<div class="albumart">
<a href="/art?path={{ song.file }}" target="_blank">
<img src="/art?path={{ song.file }}" onerror="this.style.opacity = 0">
<img
src="/art?path={{ song.file }}"
onerror="this.style.opacity = 0"
alt="Album art"
title="Album art"
>
</a>
</div>
<div class="metadata">
{% if let Some(name) = name %}
<div class="song__name">{{ name }}</div>
<div class="song__name" title="Song name">{{ name }}</div>
{% endif %}
{% if let Some(artist) = song.artist %}
<div>{{ artist }}</div>
<div class="song__artist" title="Artist">{{ artist }}</div>
{% endif %}
</div>
{% else %}
@ -34,19 +39,19 @@
<div class="controls">
<span
hx-post="/previous" hx-swap="none"
class="control material-symbols-outlined" role="button"
class="control material-symbols-outlined" role="button" title="Previous track"
>skip_previous</span>
<span
hx-post="/play" hx-swap="none"
class="control material-symbols-outlined" role="button"
class="control material-symbols-outlined" role="button" title="Play"
>play_arrow</span>
<span
hx-post="/pause" hx-swap="none"
class="control material-symbols-outlined" role="button"
class="control material-symbols-outlined" role="button" title="Pause"
>pause</span>
<span
hx-post="/next" hx-swap="none"
class="control material-symbols-outlined" role="button"
class="control material-symbols-outlined" role="button" title="Next track"
>skip_next</span>
</div>
</div>

View File

@ -13,12 +13,17 @@
{% for item in queue %}
<li {% if item.playing %}class="playing"{% endif %}>
<div class="albumart">
<img src="/art?path={{ item.file }}" onerror="this.style.opacity = 0">
<img
src="/art?path={{ item.file }}"
onerror="this.style.opacity = 0"
alt="Album art"
title="Album art"
>
</div>
<div class="metadata">
<div class="song__name">{{ item.title }}</div>
<div class="song__name" title="Song name">{{ item.title }}</div>
{% if let Some(artist) = item.artist %}
<div class="song__artist">{{ artist }}</div>
<div class="song__artist" title="Artist">{{ artist }}</div>
{% endif %}
</div>
</li>