mini-player: implemented
This commit is contained in:
parent
310f79c14e
commit
400402e960
10 changed files with 81 additions and 23 deletions
|
|
@ -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
5
templates/music.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% include "partials/music.html" %}
|
||||
{% endblock %}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
1
templates/partials/music.html
Normal file
1
templates/partials/music.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<h1>y'a pas de miniplayer ici</h1>
|
||||
Loading…
Add table
Add a link
Reference in a new issue