91 lines
2.1 KiB
HTML
91 lines
2.1 KiB
HTML
<mini-player>
|
|
{% if tracks.is_empty() %}
|
|
<ominous-message>You won't hear anything from me</ominous-message>
|
|
{% else %}
|
|
<title-bar>
|
|
<track-info>
|
|
<track-title>{{ tracks[0].title }}</track-title>
|
|
<track-artist>{{ tracks[0].artist }}</track-artist>
|
|
</track-info>
|
|
<time-display>
|
|
<current-time>00:00</current-time> / <duration-time>00:00</duration-time>
|
|
</time-display>
|
|
</title-bar>
|
|
|
|
<progress-bar-container>
|
|
<input
|
|
class="progress-input"
|
|
type="range"
|
|
min="0"
|
|
max="0"
|
|
value="0"
|
|
step="0.01"
|
|
/>
|
|
</progress-bar-container>
|
|
|
|
<controls-bar>
|
|
<transport-controls>
|
|
<button data-action="prev" aria-label="Previous">
|
|
<img
|
|
src="/static/assets/svgs/skip-back.svg"
|
|
width="12"
|
|
height="12"
|
|
alt="Skip back"
|
|
/>
|
|
</button>
|
|
<button data-action="play" aria-label="Play/Pause">
|
|
<img
|
|
class="play-icon"
|
|
src="/static/assets/svgs/play.svg"
|
|
width="12"
|
|
height="12"
|
|
alt="Play"
|
|
/>
|
|
<img
|
|
class="pause-icon"
|
|
src="/static/assets/svgs/pause.svg"
|
|
width="12"
|
|
height="12"
|
|
alt="Pause"
|
|
style="display: none"
|
|
/>
|
|
</button>
|
|
<button data-action="next" aria-label="Next">
|
|
<img
|
|
src="/static/assets/svgs/skip-forward.svg"
|
|
width="12"
|
|
height="12"
|
|
alt="Skip forward"
|
|
/>
|
|
</button>
|
|
</transport-controls>
|
|
<volume-controls>
|
|
<img
|
|
src="/static/assets/svgs/volume-2.svg"
|
|
width="12"
|
|
height="12"
|
|
alt="Volume"
|
|
/>
|
|
<input
|
|
class="volume-input"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value="0.7"
|
|
/>
|
|
</volume-controls>
|
|
</controls-bar>
|
|
|
|
<audio hidden>
|
|
{% for track in tracks %}
|
|
<source
|
|
src="{{ track.src }}"
|
|
data-index="{{ loop.index0 }}"
|
|
data-title="{{ track.title }}"
|
|
data-artist="{{ track.artist }}"
|
|
/>
|
|
{% endfor %}
|
|
</audio>
|
|
{% endif %}
|
|
</mini-player>
|