Agahnim/agahnim.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mini-player: finished implementation, now need to keep trakc of state

Browse source
This commit is contained in:
Agahnim 2026-03-20 14:18:12 +01:00
parent 15da7cb7d2
commit d06922b584
9 changed files with 320 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

2
templates/base.html
View file

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, interactive-widget=resizes-content" />
<link rel="icon" type="image/gif" href="/static/assets/gifs/pcgif.gif">
<!-- <title>Ａｇａｈｎｉｍ</title> -->
<title>Agahnim proto</title>
@ -26,6 +27,7 @@
{% block content %}{% endblock %}
</main>
<script src="/static/miniplayer.js"></script>
<script>
function updateMiniplayerVisibility() {
const isMusicPage = window.location.pathname === '/music';

2
templates/index.html → templates/home.html
View file

@ -2,5 +2,5 @@
{% block content %}
{% include "partials/index.html" %}
{% include "partials/home.html" %}
{% endblock %}

0
templates/partials/index.html → templates/partials/home.html
View file

59
templates/partials/miniplayer.html
View file

@ -1,23 +1,44 @@
<miniplayer>
<mini-player>
{% if tracks.is_empty() %}
<ominous-message>You won't hear anything from me</ominous-message>
{% else %}
{% for track in tracks %}
<div class="track">
<p>{{ track.title }} - {{ track.artist }}</p>
<audio controls src="{{ track.src }}"></audio>
</div>
<controls>
<state>
<img src="/static/assets/svgs/skip-back.svg" width="12" height="12" />
<img src="/static/assets/svgs/play.svg" width="12" height="12" />
<img src="/static/assets/svgs/skip-forward.svg" width="12" height="12" />
</state>
<volume>
<img src="/static/assets/svgs/volume-2.svg" width="12" height="12" />
<input type="range" min="0" max="1" step="0.01" />
</volume>
</controls>
{% endfor %}
<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="" />
</button>
<button data-action="play" aria-label="Play/Pause">
<img class="play-icon" src="/static/assets/svgs/play.svg" width="12" height="12" alt="" />
<img class="pause-icon" src="/static/assets/svgs/pause.svg" width="12" height="12" alt="" style="display: none;" />
</button>
<button data-action="next" aria-label="Next">
<img src="/static/assets/svgs/skip-forward.svg" width="12" height="12" alt="" />
</button>
</transport-controls>
<volume-controls>
<img src="/static/assets/svgs/volume-2.svg" width="12" height="12" alt="" />
<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 %}
</miniplayer>
</mini-player>