Amélioration sélection de musique

frontend/app/templates/base.html

@@ -187,6 +187,7 @@ label {
 }
 
 input,
+select,
 button {
   border-radius: 12px;
   border: 1px solid var(--line);
@@ -194,13 +195,23 @@ button {
   max-width: 100%;
 }
 
-input {
+input,
+select {
   display: block;
   width: 100%;
   background: #fff;
   padding: 0.65rem 0.75rem;
 }
 
+select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23665e57' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+}
+
 input[type="file"] {
   min-width: 0;
 }
@@ -348,6 +359,24 @@ td {
   margin-bottom: 0.75rem;
 }
 
+.audio-select-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+.audio-select-row select {
+  flex: 1;
+  min-width: 0;
+}
+
+.audio-select-row .btn-preview {
+  flex-shrink: 0;
+  padding: 0.65rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1;
+}
+
 .audio-player-card {
   border: 1px solid var(--line);
   border-radius: 12px;

frontend/app/templates/dashboard.html

@@ -4,7 +4,6 @@
   <header class="topbar reveal">
     <div>
       <h1>Tableau de bord</h1>
-      <p class="muted">Backend: {{ backend_url }} | Utilisateur: {{ username }}</p>
     </div>
     <div class="topbar-actions">
       <button type="button" class="danger" id="btn-stop-audio">Arreter l'audio</button>
@@ -30,12 +29,20 @@
         </label>
         <label>
           Fichier audio
-          <input list="audio-files" name="music_file" id="music_file" placeholder="bell.mp3" required />
+          <div class="audio-select-row">
-          <datalist id="audio-files">
+            <select name="music_file" id="music_file" required
+              data-stream-url="{{ url_for('ui.stream_audio', filename='__FILE__') }}">
+              <option value="" disabled {% if not audio_files %}selected{% endif %}>
+                {% if audio_files %}Choisir un fichier…{% else %}Aucun fichier disponible{% endif %}
+              </option>
               {% for f in audio_files %}
-              <option value="{{ f }}"></option>
+                <option value="{{ f }}">{{ f }}</option>
               {% endfor %}
-          </datalist>
+            </select>
+            <button type="button" class="small btn-preview" id="btn-preview-trigger-audio"
+              title="Prévisualiser le fichier sélectionné"
+              {% if not audio_files %}disabled{% endif %}>&#9654;</button>
+          </div>
         </label>
         <div class="time-row">
           <label>
@@ -648,5 +655,24 @@
           });
       });
     })();
+    (function () {
+      const select = document.getElementById("music_file");
+      const btn = document.getElementById("btn-preview-trigger-audio");
+      if (!select || !btn) return;
+
+      btn.addEventListener("click", () => {
+        const filename = select.value;
+        if (!filename) return;
+        const streamBase = select.dataset.streamUrl || "";
+        const url = streamBase.replace("__FILE__", encodeURIComponent(filename));
+        const player = document.getElementById("browser-audio-player");
+        const nowPlaying = document.getElementById("audio-now-playing");
+        if (!player) return;
+        player.src = url;
+        player.play().catch(() => {});
+        if (nowPlaying) nowPlaying.textContent = "Lecture: " + filename;
+        player.closest("section")?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      });
+    })();
   </script>
 {% endblock %}