mini-player: implemented

This commit is contained in:
Agahnim 2026-03-20 11:28:11 +01:00
parent 310f79c14e
commit 400402e960
Signed by: Agahnim
SSH key fingerprint: SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
10 changed files with 81 additions and 23 deletions

View file

@ -12,11 +12,30 @@
<body hx-boost="true" hx-target="#content">
{% include "partials/header.html" %}
<!-- <div hx-get="/miniplayer" hx-trigger="load" hx-swap="outerHtml"></div> -->
<div id="miniplayer-container" hx-get="/miniplayer" hx-trigger="load" hx-swap="innerHTML"
hx-target="#miniplayer-container">
<miniplayer>
<h1>Chargement...</h1>
</miniplayer>
</div>
<main id="content">
{% block content %}{% endblock %}
</main>
<script>
function updateMiniplayerVisibility() {
const isMusicPage = window.location.pathname === '/music';
const miniplayer = document.getElementById('miniplayer-container');
if (miniplayer) {
miniplayer.style.display = isMusicPage ? 'none' : '';
}
}
updateMiniplayerVisibility();
document.body.addEventListener('htmx:afterSwap', updateMiniplayerVisibility);
</script>
</body>
</html>

5
templates/music.html Normal file
View file

@ -0,0 +1,5 @@
{% extends "base.html" %}
{% block content %}
{% include "partials/music.html" %}
{% endblock %}

View file

@ -1,3 +1,13 @@
<miniplayer>
<h1>Je suis un miniplayer</h1>
</miniplayer>
<h1>Miniplayer</h1>
{% if tracks.is_empty() %}
<p>Aucune track</p>
{% else %}
{% for track in tracks %}
<div class="track">
<p>{{ track.title }} - {{ track.artist }}</p>
<audio controls src="{{ track.src }}"></audio>
</div>
{% endfor %}
{% endif %}
</miniplayer>

View file

@ -0,0 +1 @@
<h1>y'a pas de miniplayer ici</h1>