44 lines
1.7 KiB
HTML
44 lines
1.7 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>
|