mini-player: implemented

content/mp-tracks.json

@@ -3,36 +3,36 @@
     "id": 1,
     "title": "Good old times",
     "artist": "Agahnim",
-    "src": "/static/music/times.mp3"
+    "src": "/static/assets/music/times.mp3"
   },
   {
     "id": 2,
     "title": "Identification",
     "artist": "Infinity Frequencies",
-    "src": "/static/music/infinity.mp3"
+    "src": "/static/assets/music/infinity.mp3"
   },
   {
     "id": 3,
     "title": "Flip the Switch",
     "artist": "Stevia Sphere",
-    "src": "/static/music/switch.mp3"
+    "src": "/static/assets/music/switch.mp3"
   },
   {
     "id": 4,
     "title": "Machines Vs Water",
     "artist": "Stevia Sphere",
-    "src": "/static/music/machines.mp3"
+    "src": "/static/assets/music/machines.mp3"
   },
   {
     "id": 5,
     "title": "Elevator 1",
     "artist": "Stevia Sphere",
-    "src": "/static/music/elevator.mp3"
+    "src": "/static/assets/music/elevator.mp3"
   },
   {
     "id": 6,
     "title": "Somewhere Dark",
     "artist": "Monodrone",
-    "src": "/static/music/dark.mp3"
+    "src": "/static/assets/music/dark.mp3"
   }
 ]

content/p-tracks.json

@@ -3,70 +3,70 @@
     "id": 1,
     "title": "I'm getting tired of farewells",
     "artist": "Agahnim",
-    "src": "/static/music/farewells.mp3",
+    "src": "/static/assets/music/farewells.mp3",
     "album": "LIFE"
   },
   {
     "id": 2,
     "title": "DAWN",
     "artist": "Agahnim",
-    "src": "/static/music/DAWN.mp3",
+    "src": "/static/assets/music/DAWN.mp3",
     "album": "DAWN"
   },
   {
     "id": 3,
     "title": "Move on",
     "artist": "Agahnim",
-    "src": "/static/music/move_on.mp3",
+    "src": "/static/assets/music/move_on.mp3",
     "album": "DAWN"
   },
   {
     "id": 4,
     "title": "Carcer",
     "artist": "Agahnim",
-    "src": "/static/music/carcer.mp3",
+    "src": "/static/assets/music/carcer.mp3",
     "album": "LIFE"
   },
   {
     "id": 5,
     "title": "Under listening",
     "artist": "Agahnim",
-    "src": "/static/music/listening.mp3",
+    "src": "/static/assets/music/listening.mp3",
     "album": "Justice"
   },
   {
     "id": 6,
     "title": "Fading away",
     "artist": "Agahnim",
-    "src": "/static/music/fading.mp3",
+    "src": "/static/assets/music/fading.mp3",
     "album": "LIFE"
   },
   {
     "id": 7,
     "title": "Hindsight",
     "artist": "Agahnim",
-    "src": "/static/music/hindsight.mp3",
+    "src": "/static/assets/music/hindsight.mp3",
     "album": "The End"
   },
   {
     "id": 8,
     "title": "With or without",
     "artist": "Agahnim",
-    "src": "/static/music/without.mp3",
+    "src": "/static/assets/music/without.mp3",
     "album": "Extinction"
   },
   {
     "id": 9,
     "title": "Perfect Light",
     "artist": "Agahnim",
-    "src": "/static/music/perfect_light.mp3",
+    "src": "/static/assets/music/perfect_light.mp3",
     "album": "Rebirth"
   },
   {
     "id": 10,
     "title": "Good old times",
     "artist": "Agahnim",
-    "src": "/static/music/times.mp3",
+    "src": "/static/assets/music/times.mp3",
     "album": "Extinction"
   }
 ]

src/domain.rs

@@ -24,7 +24,7 @@ impl AppState {
 
 #[derive(Deserialize, Clone)]
 pub struct Track {
-    title: String,
+    pub title: String,
-    artist: String,
+    pub artist: String,
-    src: String,
+    pub src: String,
 }

src/main.rs

@@ -2,7 +2,7 @@ use std::sync::Arc;
 
 use agahnim_web_v2::{
     domain::AppState,
-    templates::{index::home, miniplayer::miniplayer, notfound::notfound},
+    templates::{index::home, miniplayer::miniplayer, music::music, notfound::notfound},
 };
 use axum::{Router, routing::get};
 use tower_http::services::ServeDir;
@@ -15,6 +15,7 @@ async fn main() {
 
     let app = Router::new()
         .route("/", get(home))
+        .route("/music", get(music))
         .route("/miniplayer", get(miniplayer))
         .nest_service("/static", ServeDir::new("static"))
         .fallback(notfound)

src/templates/mod.rs

@@ -1,3 +1,4 @@
 pub mod index;
 pub mod miniplayer;
+pub mod music;
 pub mod notfound;

src/templates/music.rs

@@ -0,0 +1,21 @@
+use askama::Template;
+use axum::{
+    http::HeaderMap,
+    response::{Html, IntoResponse},
+};
+
+#[derive(Template)]
+#[template(path = "music.html")]
+struct MusicTemplate;
+
+#[derive(Template)]
+#[template(path = "partials/music.html")]
+struct MusicPartialTemplate;
+
+pub async fn music(headers: HeaderMap) -> impl IntoResponse {
+    if headers.contains_key("hx-request") {
+        Html(MusicPartialTemplate.render().unwrap())
+    } else {
+        Html(MusicTemplate.render().unwrap())
+    }
+}

templates/base.html

@@ -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>

templates/music.html

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

templates/partials/miniplayer.html

@@ -1,3 +1,13 @@
 <miniplayer>
-  <h1>Je suis un miniplayer</h1>
+  <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>

templates/partials/music.html

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