_
/
empede
1
0
Fork 0
Code Issues Releases 18 Activity
empede/templates/player.html

111 lines
2.9 KiB
HTML
Raw Normal View History

Implement "now playing" card
2023-04-25 14:32:51 +00:00
{# #}
<!DOCTYPE html>
Add a progress bar to the now playing card Fixes #5
2023-05-01 15:01:51 +00:00
Make queue scrollable
2023-05-07 00:51:34 +00:00
<div class="current">
{% if let Some(song) = song %}
<div class="albumart">
Replace mpdrs with own implementation
2023-05-14 13:31:16 +00:00
<a href="/art?path={{ song["file"]|urlencode }}" target="_blank">
Add album art placeholder
2023-05-08 11:56:10 +00:00
<img
Replace mpdrs with own implementation
2023-05-14 13:31:16 +00:00
src="/art?path={{ song["file"]|urlencode }}"
Add album art placeholder
2023-05-08 11:56:10 +00:00
onload="this.style.visibility = 'visible'"
Make queue scrollable
2023-05-07 00:51:34 +00:00
alt="Album art"
>
</a>
</div>
<div class="metadata">
{% if let Some(name) = name %}
<div class="song__name" title="Song name">{{ name }}</div>
{% endif %}
Replace mpdrs with own implementation
2023-05-14 13:31:16 +00:00
{% if let Some(artist) = song.get("Artist") %}
Make queue scrollable
2023-05-07 00:51:34 +00:00
<div class="song__artist" title="Artist">{{ artist }}</div>
Implement "now playing" card
2023-04-25 14:32:51 +00:00
{% endif %}
</div>
Make queue scrollable
2023-05-07 00:51:34 +00:00
{% else %}
<div class="metadata idle">
Nothing playing right now
</div>
{% endif %}
</div>
Implement "now playing" card
2023-04-25 14:32:51 +00:00
Make queue scrollable
2023-05-07 00:51:34 +00:00
<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
<button
hx-post="/previous"
class="control material-symbols-outlined" role="button" title="Previous track"
>skip_previous</button>
Combine play and pause controls into one that changes depending on state
2023-05-01 14:25:07 +00:00
Replace mpdrs with own implementation
2023-05-14 13:31:16 +00:00
{% if state == "play" %}
Make queue scrollable
2023-05-07 00:51:34 +00:00
<button
hx-post="/pause"
class="control material-symbols-outlined" role="button" title="Pause"
>pause</button>
{% else %}
<button
hx-post="/play"
class="control material-symbols-outlined" role="button" title="Play"
>play_arrow</button>
{% endif %}
Add a progress bar to the now playing card Fixes #5
2023-05-01 15:01:51 +00:00
Make queue scrollable
2023-05-07 00:51:34 +00:00
<button
hx-post="/next"
class="control material-symbols-outlined" role="button" title="Next track"
>skip_next</button>
Implement "now playing" card
2023-04-25 14:32:51 +00:00
</div>
Add a progress bar to the now playing card Fixes #5
2023-05-01 15:01:51 +00:00
Make settings buttons slightly smaller
2023-12-23 08:58:28 +00:00
<div class="settings" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
Add consume and shuffle buttons
2023-12-23 08:25:57 +00:00
<button
hx-post="/consume"
Make settings buttons slightly smaller
2023-12-23 08:58:28 +00:00
class="control material-symbols-outlined {% if consume %}active{% endif %}"
role="button" title="Consume"
style="font-size: 32px"
Add consume and shuffle buttons
2023-12-23 08:25:57 +00:00
>delete_sweep</button>
<button
Make settings buttons slightly smaller
2023-12-23 08:58:28 +00:00
hx-post="/random"
class="control material-symbols-outlined {% if random %}active{% endif %}"
role="button" title="Shuffle"
Add consume and shuffle buttons
2023-12-23 08:25:57 +00:00
>shuffle</button>
Add repeat button
2023-12-23 08:28:57 +00:00
<button
hx-post="/repeat"
Make settings buttons slightly smaller
2023-12-23 08:58:28 +00:00
class="control material-symbols-outlined {% if repeat %}active{% endif %}"
role="button" title="Repeat"
Add repeat button
2023-12-23 08:28:57 +00:00
>repeat</button>
Make settings buttons slightly smaller
2023-12-23 08:58:28 +00:00
<button
hx-post="/single"
class="control material-symbols-outlined {% if single %}active{% endif %}"
role="button" title="Single"
>filter_1</button>
Add consume and shuffle buttons
2023-12-23 08:25:57 +00:00
</div>
Make queue scrollable
2023-05-07 00:51:34 +00:00
<div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
Add a progress bar to the now playing card Fixes #5
2023-05-01 15:01:51 +00:00
<script>
{% if let Some(name) = name %}
Replace mpdrs with own implementation
2023-05-14 13:31:16 +00:00
{% if state == "play" %}
Fix URL encoding showing up in title
2023-05-13 12:51:22 +00:00
document.title = "▶ " + {{ name|json|safe }} + " - Empede";
Show a ▶ or ⏸ icon in the title when playing
2023-05-07 00:12:45 +00:00
{% else %}
Fix URL encoding showing up in title
2023-05-13 12:51:22 +00:00
document.title = "⏸ " + {{ name|json|safe }} + " - Empede";
Show a ▶ or ⏸ icon in the title when playing
2023-05-07 00:12:45 +00:00
{% endif %}
Add a progress bar to the now playing card Fixes #5
2023-05-01 15:01:51 +00:00
{% else %}
document.title = "Empede";
{% endif %}
Replace mpdrs with own implementation
2023-05-14 13:31:16 +00:00
{% if state == "play" %}
Add a progress bar to the now playing card Fixes #5
2023-05-01 15:01:51 +00:00
progressBar = document.querySelector(".nowplaying .progress");
elapsed = {{ elapsed }};
duration = {{ duration }};
if (progressInterval) {
window.clearInterval(progressInterval);
}
progressInterval = window.setInterval(() => {
elapsed += 1.0;
Clamp progress bar to 100%
2023-05-02 00:00:44 +00:00
let progress = Math.min(elapsed / duration, 1.0);
Add a progress bar to the now playing card Fixes #5
2023-05-01 15:01:51 +00:00
progressBar.style.width = `${progress * 100}%`;
}, 1000);
Stop progress bar when paused
2023-05-01 23:56:48 +00:00
{% endif %}
Fix HTML encoding showing up in title
2023-05-06 19:48:53 +00:00
</script>