Débugage de la WebUI non complètement convaincants.

pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRenderersStore } from '@/stores/renderers'
-import { usePlaybackStore } from '@/stores/playback'
 import { Music } from 'lucide-vue-next'
 
 const props = defineProps<{
@@ -9,10 +8,9 @@ const props = defineProps<{
 }>()
 
 const renderersStore = useRenderersStore()
-const playbackStore = usePlaybackStore()
 
 const state = computed(() => renderersStore.getStateById(props.rendererId))
-const metadata = computed(() => playbackStore.getTrackMetadata(props.rendererId))
+const metadata = computed(() => state.value?.current_track)
 
 // Calcul du pourcentage de progression
 const progressPercent = computed(() => {

pmoapp/webapp/src/components/pmocontrol/QueueItem.vue

@@ -18,9 +18,17 @@ defineProps<{
     <!-- Index (1-based pour l'affichage) -->
     <span class="item-index">{{ item.index + 1 }}</span>
 
-    <!-- Cover miniature (placeholder pour l'instant, on ajoutera la cover plus tard) -->
+    <!-- Cover miniature -->
     <div class="item-cover">
-      <Music :size="20" />
+      <img
+        v-if="item.album_art_uri"
+        :src="item.album_art_uri"
+        :alt="item.album || 'Album cover'"
+        class="cover-image"
+        loading="lazy"
+        @error="(e: Event) => (e.target as HTMLImageElement).style.display = 'none'"
+      />
+      <Music v-else :size="20" />
     </div>
 
     <!-- Métadonnées -->
@@ -85,6 +93,13 @@ defineProps<{
   justify-content: center;
   color: var(--color-text-tertiary);
   flex-shrink: 0;
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .item-metadata {

pmoapp/webapp/src/components/pmocontrol/RendererCard.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { usePlaybackStore } from '@/stores/playback'
 import type {
   RendererCapabilitiesSummary,
   RendererSummary,
@@ -16,9 +15,9 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
-const playbackStore = usePlaybackStore()
 
-const metadata = computed(() => playbackStore.getTrackMetadata(props.renderer.id))
+// Métadonnées proviennent directement de l'état du renderer (API + SSE)
+const metadata = computed(() => props.state?.current_track)
 
 const protocolLabel = computed(() => {
   switch (props.renderer.protocol) {

pmoapp/webapp/src/main.ts

@@ -6,7 +6,6 @@ import router from "./router";
 // Stores
 import { useRenderersStore } from "./stores/renderers";
 import { useMediaServersStore } from "./stores/mediaServers";
-import { usePlaybackStore } from "./stores/playback";
 import { useUIStore } from "./stores/ui";
 
 // Service SSE
@@ -31,13 +30,13 @@ app.mount("#app");
 // Après montage, initialiser SSE et connecter aux stores
 const renderersStore = useRenderersStore();
 const mediaServersStore = useMediaServersStore();
-const playbackStore = usePlaybackStore();
 const uiStore = useUIStore();
 
 // Connecter SSE aux stores
+// Note: Les métadonnées proviennent de l'API (current_track dans RendererState)
+// Les événements SSE ne servent qu'à notifier les changements
 sse.onRendererEvent((event) => {
   renderersStore.updateFromSSE(event);
-  playbackStore.updateFromSSE(event);
 });
 
 sse.onMediaServerEvent((event) => {

pmoapp/webapp/src/services/pmocontrol/types.ts

@@ -40,6 +40,14 @@ export interface RendererState {
   mute: boolean | null
   queue_len: number
   attached_playlist: AttachedPlaylistInfo | null
+  current_track: CurrentTrackMetadata | null
+}
+
+export interface CurrentTrackMetadata {
+  title: string | null
+  artist: string | null
+  album: string | null
+  album_art_uri: string | null
 }
 
 export interface AttachedPlaylistInfo {
@@ -58,6 +66,7 @@ export interface QueueItem {
   title: string | null
   artist: string | null
   album: string | null
+  album_art_uri: string | null
   server_id: string | null
   object_id: string | null
 }

pmoapp/webapp/src/stores/renderers.ts

@@ -298,6 +298,10 @@ export const useRenderersStore = defineStore('renderers', () => {
         const state = states.value.get(rendererId)
         if (state) {
           state.transport_state = event.state as any
+          // Effacer les métadonnées si stopped/no_media
+          if (event.state === 'STOPPED' || event.state === 'NO_MEDIA') {
+            state.current_track = null
+          }
         }
         break
       }
@@ -339,7 +343,15 @@ export const useRenderersStore = defineStore('renderers', () => {
       }
 
       case 'metadata_changed': {
-        // Les métadonnées sont gérées par le store playback
+        const state = states.value.get(rendererId)
+        if (state) {
+          state.current_track = {
+            title: event.title,
+            artist: event.artist,
+            album: event.album,
+            album_art_uri: event.album_art_uri
+          }
+        }
         break
       }