From 6b5282903e2ed6d454171e374f49a333e7464720 Mon Sep 17 00:00:00 2001
From: Eric Coissac <eric@coissac.eu>
Date: Sat, 27 Dec 2025 10:20:16 +0100
Subject: [PATCH] =?UTF-8?q?Grosse=20correction=20sur=20l'interface=20graph?=
 =?UTF-8?q?ique=20et=20d=C3=A9bugage=20de=20Open=20Home.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pmoapp/webapp/src/App.vue                     | 197 ------
 .../components/pmocontrol/CurrentTrack.vue    | 370 +++++++++-
 .../pmocontrol/TransportControls.vue          |  15 +
 .../components/pmocontrol/VolumeControl.vue   |  34 +
 .../src/components/unified/BottomTabBar.vue   |  45 +-
 .../components/unified/RendererTabContent.vue | 115 ++--
 .../src/components/unified/ServerDrawer.vue   | 632 ++++++++++++++++--
 pmoapp/webapp/src/composables/useTabs.ts      |  16 +-
 .../webapp/src/views/UnifiedControlView.vue   |  59 +-
 .../src/control_point/openhome_queue.rs       |  83 ++-
 pmocontrol/src/openhome_client.rs             | 101 +--
 pmocontrol/src/openhome_renderer.rs           |  10 +-
 12 files changed, 1213 insertions(+), 464 deletions(-)

diff --git a/pmoapp/webapp/src/App.vue b/pmoapp/webapp/src/App.vue
index a201f637..5da222ac 100644
--- a/pmoapp/webapp/src/App.vue
+++ b/pmoapp/webapp/src/App.vue
@@ -1,28 +1,5 @@
 <template>
   <div class="app-container">
-    <nav class="main-nav">
-      <router-link to="/" class="nav-logo">PMOControl</router-link>
-
-      <!-- Menu déroulant Debug -->
-      <div class="dropdown" @mouseenter="showDebugMenu = true" @mouseleave="showDebugMenu = false">
-        <button class="dropdown-toggle" :class="{ active: isDebugRoute }">
-          🔧 Debug
-          <span class="arrow">{{ showDebugMenu ? '▼' : '▶' }}</span>
-        </button>
-        <div v-show="showDebugMenu" class="dropdown-menu">
-          <router-link to="/debug/generic-player" @click="showDebugMenu = false">🎵 Generic Player</router-link>
-          <router-link to="/debug/logs" @click="showDebugMenu = false">📋 Logs</router-link>
-          <router-link to="/debug/upnp" @click="showDebugMenu = false">🎵 UPnP Explorer</router-link>
-          <router-link to="/debug/covers-cache" @click="showDebugMenu = false">🎨 Cover Cache</router-link>
-          <router-link to="/debug/audio-cache" @click="showDebugMenu = false">🎵 Audio Cache</router-link>
-          <router-link to="/debug/playlists" @click="showDebugMenu = false">🗂️ Playlists</router-link>
-          <router-link to="/debug/api-dashboard" @click="showDebugMenu = false">🚀 API Dashboard</router-link>
-
-          <div class="submenu-divider">Sources</div>
-          <router-link to="/debug/radio-paradise" @click="showDebugMenu = false">📻 Radio Paradise</router-link>
-        </div>
-      </div>
-    </nav>
     <main class="main-content">
       <router-view />
     </main>
@@ -33,16 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import NotificationToast from '@/components/NotificationToast.vue'
-
-const showDebugMenu = ref(false)
-const route = useRoute()
-
-const isDebugRoute = computed(() => {
-  return route.path.startsWith('/debug/')
-})
 </script>
 
 <style scoped>
@@ -54,175 +22,10 @@ const isDebugRoute = computed(() => {
   box-sizing: border-box;
 }
 
-.main-nav {
-  background: #333;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.nav-logo {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #fff !important;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 0.5rem 1rem !important;
-  border-radius: 6px;
-  text-decoration: none;
-  white-space: nowrap;
-  transition: all 0.2s;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.nav-logo:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
-}
-
-.main-nav a {
-  color: #eee;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  transition: all 0.2s;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.main-nav a:hover {
-  background: #555;
-  color: #fff;
-}
-
-.main-nav a.router-link-active:not(.nav-logo) {
-  background: #569cd6;
-  color: #fff;
-  font-weight: bold;
-}
-
-/* Dropdown menu */
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown-toggle {
-  color: #eee;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  transition: all 0.2s;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 1rem;
-  font-family: inherit;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dropdown-toggle:hover {
-  background: #555;
-  color: #fff;
-}
-
-.dropdown-toggle.active {
-  background: #569cd6;
-  color: #fff;
-  font-weight: bold;
-}
-
-.dropdown-toggle .arrow {
-  font-size: 0.7em;
-  transition: transform 0.2s;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background: #2d2d2d;
-  border: 1px solid #555;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  min-width: 200px;
-  margin-top: 0;
-  z-index: 1001;
-  display: flex;
-  flex-direction: column;
-  padding: 0.5rem 0;
-}
-
-.dropdown-menu a {
-  padding: 0.75rem 1rem;
-  color: #eee;
-  text-decoration: none;
-  transition: all 0.2s;
-  border-radius: 0;
-  display: block;
-}
-
-.dropdown-menu a:hover {
-  background: #555;
-  color: #fff;
-}
-
-.dropdown-menu a.router-link-active {
-  background: #569cd6;
-  color: #fff;
-  font-weight: bold;
-}
-
-.submenu-divider {
-  padding: 0.5rem 1rem;
-  margin-top: 0.5rem;
-  border-top: 1px solid #555;
-  color: #999;
-  font-size: 0.85em;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
 .main-content {
   flex: 1;
   width: 100%;
   box-sizing: border-box;
   overflow-x: hidden;
 }
-
-/* Responsive pour petits écrans */
-@media (max-width: 768px) {
-  .main-nav {
-    padding: 0.5rem;
-  }
-
-  .main-nav a {
-    font-size: 0.9rem;
-    padding: 0.4rem 0.8rem;
-  }
-
-  .dropdown-toggle {
-    font-size: 0.9rem;
-    padding: 0.4rem 0.8rem;
-  }
-
-  .dropdown-menu {
-    min-width: 180px;
-  }
-
-  .dropdown-menu a {
-    font-size: 0.9rem;
-    padding: 0.6rem 0.8rem;
-  }
-}
 </style>
diff --git a/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue b/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
index 77e9ef71..f1b71e49 100644
--- a/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed, toRef, ref } from 'vue'
 import { useRenderer } from '@/composables/useRenderers'
-import { Music } from 'lucide-vue-next'
+import { Music, X } from 'lucide-vue-next'
 
 const props = defineProps<{
   rendererId: string
@@ -10,6 +10,35 @@ const props = defineProps<{
 const { state } = useRenderer(toRef(props, 'rendererId'))
 const metadata = computed(() => state.value?.current_track)
 
+// État pour l'overlay de la cover
+const showCoverOverlay = ref(false)
+const showMetadata = ref(false)
+
+function openCoverOverlay() {
+  if (hasCover.value) {
+    showCoverOverlay.value = true
+    showMetadata.value = false // Reset metadata visibility when opening
+  }
+}
+
+function closeCoverOverlay() {
+  showCoverOverlay.value = false
+  showMetadata.value = false
+}
+
+// Détecter le clic sur la partie basse de l'image
+function handleOverlayContentClick(event: MouseEvent) {
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+  const clickY = event.clientY - rect.top
+  const height = rect.height
+
+  // Si le clic est dans le tiers inférieur, toggle les métadonnées
+  if (clickY > height * 0.66) {
+    showMetadata.value = !showMetadata.value
+  }
+}
+
 // Calcul du pourcentage de progression
 const progressPercent = computed(() => {
   const position = state.value?.position_ms
@@ -43,7 +72,7 @@ function handleImageError(event: Event) {
 <template>
   <div class="current-track">
     <!-- Cover Art -->
-    <div class="cover-container">
+    <div class="cover-container" :class="{ clickable: hasCover }" @click="openCoverOverlay">
       <img
         v-if="hasCover"
         :src="metadata?.album_art_uri!"
@@ -77,6 +106,32 @@ function handleImageError(event: Event) {
         <span>{{ totalTime }}</span>
       </div>
     </div>
+
+    <!-- Overlay cover en grand avec effet glassmorphism -->
+    <Teleport to="body">
+      <Transition name="cover-overlay">
+        <div v-if="showCoverOverlay" class="cover-overlay" @click="closeCoverOverlay">
+          <div class="cover-overlay-content" @click.stop="handleOverlayContentClick">
+            <button class="cover-overlay-close" @click="closeCoverOverlay" title="Fermer">
+              <X :size="24" />
+            </button>
+            <img
+              v-if="hasCover"
+              :src="metadata?.album_art_uri!"
+              :alt="metadata?.album || 'Album cover'"
+              class="cover-overlay-image"
+            />
+            <Transition name="metadata-fade">
+              <div v-if="metadata && showMetadata" class="cover-overlay-metadata">
+                <h2>{{ metadata.title }}</h2>
+                <p class="artist">{{ metadata.artist }}</p>
+                <p v-if="metadata.album" class="album">{{ metadata.album }}</p>
+              </div>
+            </Transition>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
@@ -96,6 +151,16 @@ function handleImageError(event: Event) {
   overflow: hidden;
   background-color: var(--color-bg-secondary);
   box-shadow: var(--shadow-lg);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.cover-container.clickable {
+  cursor: pointer;
+}
+
+.cover-container.clickable:hover {
+  transform: scale(1.02);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
 }
 
 .cover-image {
@@ -165,4 +230,303 @@ function handleImageError(event: Event) {
     max-width: 300px;
   }
 }
+
+/* Mode kiosque - compactage pour petites hauteurs (800x600) */
+@media (max-height: 700px) and (orientation: landscape) {
+  .current-track {
+    gap: var(--spacing-sm);
+  }
+
+  .cover-container {
+    max-width: 160px !important;
+    max-height: 160px;
+  }
+
+  .cover-placeholder {
+    font-size: 40px;
+  }
+
+  .metadata {
+    margin-top: -8px;
+  }
+
+  .title {
+    font-size: var(--text-lg);
+    margin: 0 0 4px;
+  }
+
+  .artist {
+    font-size: var(--text-sm);
+    margin: 0 0 2px;
+  }
+
+  .album {
+    font-size: var(--text-xs);
+  }
+
+  .progress-section {
+    gap: 4px;
+  }
+
+  .time-display {
+    font-size: 11px;
+  }
+}
+
+/* Overlay cover en grand - Liquid metal style */
+.cover-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  padding: 16px;
+}
+
+.cover-overlay-content {
+  position: relative;
+  width: calc(100vw - 32px);
+  height: calc(100vh - 32px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 24px;
+  box-shadow:
+    0 20px 60px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+  .cover-overlay-content {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .cover-overlay-metadata {
+    background: rgba(0, 0, 0, 0.7);
+  }
+}
+
+.cover-overlay-close {
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--color-text);
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.cover-overlay-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1) rotate(90deg);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.cover-overlay-close:active {
+  transform: scale(1.0) rotate(90deg);
+}
+
+@media (prefers-color-scheme: dark) {
+  .cover-overlay-close {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .cover-overlay-close:hover {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.cover-overlay-image {
+  width: calc(100vw - 64px);
+  height: calc(100vh - 64px);
+  border-radius: 16px;
+  box-shadow:
+    0 30px 80px rgba(0, 0, 0, 0.6),
+    0 0 2px rgba(255, 255, 255, 0.2);
+  object-fit: contain;
+}
+
+.cover-overlay-metadata {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  right: 24px;
+  text-align: center;
+  padding: var(--spacing-lg);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.cover-overlay-metadata h2 {
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+  font-weight: 700;
+  color: white;
+  margin: 0;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
+  line-height: 1.2;
+}
+
+.cover-overlay-metadata .artist {
+  font-size: clamp(1rem, 2.5vw, 1.5rem);
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 8px 0 0 0;
+  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.cover-overlay-metadata .album {
+  font-size: clamp(0.875rem, 2vw, 1.125rem);
+  font-weight: 400;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.75);
+  margin: 6px 0 0 0;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
+}
+
+/* Animations de transition */
+.cover-overlay-enter-active,
+.cover-overlay-leave-active {
+  transition: all 0.3s ease;
+}
+
+.cover-overlay-enter-active .cover-overlay-content,
+.cover-overlay-leave-active .cover-overlay-content {
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.cover-overlay-enter-from,
+.cover-overlay-leave-to {
+  opacity: 0;
+  backdrop-filter: blur(0px);
+  -webkit-backdrop-filter: blur(0px);
+}
+
+.cover-overlay-enter-from .cover-overlay-content,
+.cover-overlay-leave-to .cover-overlay-content {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.cover-overlay-enter-to,
+.cover-overlay-leave-from {
+  opacity: 1;
+}
+
+.cover-overlay-enter-to .cover-overlay-content,
+.cover-overlay-leave-from .cover-overlay-content {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Responsive overlay */
+@media (max-width: 768px) {
+  .cover-overlay {
+    padding: 12px;
+  }
+
+  .cover-overlay-content {
+    width: calc(100vw - 24px);
+    height: calc(100vh - 24px);
+    border-radius: 16px;
+  }
+
+  .cover-overlay-image {
+    width: calc(100vw - 48px);
+    height: calc(100vh - 48px);
+  }
+
+  .cover-overlay-metadata {
+    bottom: 16px;
+    left: 16px;
+    right: 16px;
+    padding: var(--spacing-md);
+  }
+
+  .cover-overlay-close {
+    width: 40px;
+    height: 40px;
+    top: 12px;
+    right: 12px;
+  }
+}
+
+/* Mode kiosque - overlay adapté */
+@media (max-height: 700px) and (orientation: landscape) {
+  .cover-overlay {
+    padding: 12px;
+  }
+
+  .cover-overlay-content {
+    width: calc(100vw - 24px);
+    height: calc(100vh - 24px);
+  }
+
+  .cover-overlay-image {
+    width: calc(100vw - 48px);
+    height: calc(100vh - 48px);
+  }
+
+  .cover-overlay-metadata {
+    bottom: 12px;
+    left: 12px;
+    right: 12px;
+    padding: var(--spacing-sm);
+  }
+
+  .cover-overlay-metadata .artist {
+    padding-top: 4px;
+  }
+
+  .cover-overlay-metadata .album {
+    display: none; /* Masquer l'album en mode kiosque pour plus d'espace */
+  }
+}
+
+/* Transition pour les métadonnées */
+.metadata-fade-enter-active,
+.metadata-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.metadata-fade-enter-from,
+.metadata-fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.metadata-fade-enter-to,
+.metadata-fade-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
 </style>
diff --git a/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue b/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue
index b1203ce8..caf673b3 100644
--- a/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue
@@ -191,4 +191,19 @@ async function handleNext() {
     }
   }
 }
+
+/* Mode kiosque - compactage pour petites hauteurs (800x600) */
+@media (max-height: 700px) and (orientation: landscape) {
+  .transport-controls {
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  .transport-controls .btn-icon {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
 </style>
diff --git a/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue b/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue
index 63f765ed..05b3f867 100644
--- a/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue
@@ -249,4 +249,38 @@ async function handleToggleMute() {
     }
   }
 }
+
+/* Mode kiosque - compactage pour petites hauteurs (800x600) */
+@media (max-height: 700px) and (orientation: landscape) {
+  .volume-control {
+    padding: var(--spacing-sm) var(--spacing-md);
+    gap: var(--spacing-sm);
+  }
+
+  .volume-control .btn-icon {
+    width: 36px;
+    height: 36px;
+    min-width: 36px;
+    min-height: 36px;
+  }
+
+  .volume-slider {
+    height: 6px;
+  }
+
+  .volume-slider::-webkit-slider-thumb {
+    width: 18px;
+    height: 18px;
+  }
+
+  .volume-slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+  }
+
+  .volume-value {
+    font-size: 11px;
+    min-width: 2rem;
+  }
+}
 </style>
diff --git a/pmoapp/webapp/src/components/unified/BottomTabBar.vue b/pmoapp/webapp/src/components/unified/BottomTabBar.vue
index 45fee4ce..3dfec76a 100644
--- a/pmoapp/webapp/src/components/unified/BottomTabBar.vue
+++ b/pmoapp/webapp/src/components/unified/BottomTabBar.vue
@@ -139,8 +139,8 @@ function handleServerDrawerClick() {
           :aria-label="`Switch to ${tab.fullTitle} tab`"
           :aria-current="tab.id === activeTabId ? 'page' : undefined"
         >
-          <!-- Icône -->
-          <component :is="tab.icon" class="tab-icon" :size="compactMode ? 28 : 24" />
+          <!-- Icône (réduite pour plus d'espace pour le texte) -->
+          <component :is="tab.icon" class="tab-icon" :size="compactMode ? 24 : 20" />
 
           <!-- Titre (masqué en mode compact) -->
           <span v-if="!compactMode" class="tab-title">{{ tab.title }}</span>
@@ -172,7 +172,10 @@ function handleServerDrawerClick() {
 
 <style scoped>
 .bottom-tab-bar {
-  position: relative;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: flex;
   align-items: center;
   height: 64px;
@@ -216,27 +219,24 @@ function handleServerDrawerClick() {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-width: 100px;
-  max-width: 200px;
+  gap: 6px;
+  width: 140px; /* Largeur fixe pour éviter l'espace blanc */
   height: 64px;
-  padding: 8px 16px;
+  padding: 6px 12px;
   background: transparent;
   border: none;
   border-bottom: 4px solid transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   color: var(--color-text-secondary);
-  font-size: var(--text-sm);
+  font-size: 13px; /* Réduit de var(--text-sm) pour plus d'espace */
   font-family: inherit;
-  white-space: nowrap;
   flex-shrink: 0;
 }
 
 /* Mode compact: icônes seulement */
 .tab-item.compact {
-  min-width: 60px;
-  max-width: 60px;
+  width: 60px;
   padding: 8px;
   justify-content: center;
 }
@@ -274,8 +274,14 @@ function handleServerDrawerClick() {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   text-align: left;
+  /* Permettre au texte de se replier sur 2 lignes */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.2;
+  max-height: 2.4em; /* 2 lignes × 1.2 line-height */
+  word-break: break-word;
 }
 
 .tab-close {
@@ -345,19 +351,16 @@ function handleServerDrawerClick() {
 /* Responsive mobile */
 @media (max-width: 768px) {
   .tab-item {
-    min-width: 80px;
-    max-width: 150px;
-    padding: 8px 12px;
-    gap: 6px;
+    width: 110px; /* Largeur fixe plus petite sur mobile */
+    padding: 6px 10px;
+    gap: 4px;
+    font-size: 12px; /* Encore un peu plus petit sur mobile */
   }
 
   .tab-title {
     font-size: 12px;
-  }
-
-  .tab-icon {
-    width: 20px;
-    height: 20px;
+    line-height: 1.3;
+    max-height: 2.6em; /* 2 lignes × 1.3 line-height */
   }
 
   .tab-close {
diff --git a/pmoapp/webapp/src/components/unified/RendererTabContent.vue b/pmoapp/webapp/src/components/unified/RendererTabContent.vue
index 43e5e557..2163c4b8 100644
--- a/pmoapp/webapp/src/components/unified/RendererTabContent.vue
+++ b/pmoapp/webapp/src/components/unified/RendererTabContent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, toRef, onMounted } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
 import { useRenderer } from '@/composables/useRenderers'
 import CurrentTrack from '@/components/pmocontrol/CurrentTrack.vue'
 import TransportControls from '@/components/pmocontrol/TransportControls.vue'
@@ -18,6 +19,9 @@ const { renderer, state, queue, binding, refresh } = useRenderer(toRef(props, 'r
 const { detachPlaylist } = useRenderers()
 const uiStore = useUIStore()
 
+// Détection mobile portrait pour afficher le drawer au lieu de la colonne
+const isMobilePortrait = useMediaQuery('(max-width: 768px) and (orientation: portrait)')
+
 // État du drawer queue sur mobile
 const queueDrawerOpen = ref(false)
 
@@ -94,22 +98,13 @@ async function handleDetachPlaylist() {
         </div>
       </div>
 
-      <!-- Colonne droite: Queue (desktop) -->
-      <div class="queue-column">
-        <div class="queue-header">
-          <h2 class="queue-title">File d'attente</h2>
-          <span v-if="queue" class="queue-count">{{ queue.items.length }} morceaux</span>
-        </div>
-
-        <QueueViewer v-if="queue" :renderer-id="rendererId" class="queue-viewer" />
-
-        <div v-else class="queue-empty">
-          <p>Aucun morceau en file d'attente</p>
-        </div>
+      <!-- Colonne droite: Queue (desktop et landscape uniquement) -->
+      <div v-if="!isMobilePortrait" class="queue-column">
+        <QueueViewer :renderer-id="rendererId" class="queue-viewer" />
       </div>
 
-      <!-- Drawer queue (mobile uniquement) -->
-      <div class="queue-drawer" :class="{ open: queueDrawerOpen }">
+      <!-- Drawer queue (mobile portrait uniquement) -->
+      <div v-if="isMobilePortrait" class="queue-drawer" :class="{ open: queueDrawerOpen }">
         <!-- Toggle button -->
         <button class="queue-drawer-toggle" @click="toggleQueueDrawer">
           <ChevronUp v-if="queueDrawerOpen" :size="24" />
@@ -119,10 +114,7 @@ async function handleDetachPlaylist() {
 
         <!-- Contenu du drawer -->
         <div class="queue-drawer-content">
-          <QueueViewer v-if="queue" :renderer-id="rendererId" />
-          <div v-else class="queue-empty">
-            <p>Aucun morceau en file d'attente</p>
-          </div>
+          <QueueViewer :renderer-id="rendererId" />
         </div>
       </div>
 
@@ -286,60 +278,23 @@ async function handleDetachPlaylist() {
 .queue-column {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
   overflow: hidden;
 }
 
-.queue-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: var(--spacing-sm);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.queue-title {
-  font-size: var(--text-xl);
-  font-weight: 600;
-  color: var(--color-text);
-  margin: 0;
-}
-
-.queue-count {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  padding: 4px 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: var(--radius-sm);
-}
-
 .queue-viewer {
   flex: 1;
   overflow-y: auto;
 }
 
-.queue-empty {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-xl);
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: var(--radius-md);
-  border: 1px dashed rgba(255, 255, 255, 0.1);
-}
-
-.queue-empty p {
-  color: var(--color-text-tertiary);
-  font-size: var(--text-base);
-  margin: 0;
-}
-
-/* Queue drawer - masqué sur desktop, visible sur mobile */
+/* Queue drawer - masqué sur desktop, visible uniquement sur mobile portrait */
 .queue-drawer {
   display: none;
 }
 
+.queue-drawer-backdrop {
+  display: none;
+}
+
 /* Responsive - Mobile portrait */
 @media (max-width: 768px) and (orientation: portrait) {
   .renderer-header {
@@ -358,17 +313,11 @@ async function handleDetachPlaylist() {
     grid-template-columns: 1fr;
     gap: var(--spacing-md);
     padding: var(--spacing-md);
-    padding-bottom: 0;
+    padding-bottom: var(--spacing-xl); /* Espace pour éviter que la tab bar cache les contrôles */
   }
 
-  /* Queue column cachée sur mobile */
-  .queue-column {
-    display: none;
-  }
-
-  /* Queue drawer visible sur mobile */
+  /* Queue drawer visible sur mobile (géré par v-if maintenant) */
   .queue-drawer {
-    display: block;
     position: fixed;
     bottom: 64px; /* Hauteur de la tab bar */
     left: 0;
@@ -425,10 +374,11 @@ async function handleDetachPlaylist() {
 
   .controls-column {
     padding-right: 0;
+    padding-bottom: 100px; /* Espace supplémentaire pour éviter que la tab bar (64px) cache le volume */
   }
 }
 
-/* Responsive - 800x600 landscape */
+/* Responsive - 800x600 landscape et petites hauteurs (mode kiosque) */
 @media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
   .renderer-layout {
     grid-template-columns: 280px 1fr;
@@ -443,10 +393,35 @@ async function handleDetachPlaylist() {
   .renderer-name {
     font-size: var(--text-xl);
   }
+}
 
-  .queue-title {
+/* Mode kiosque - compactage pour hauteurs ≤ 700px (ex: 800x600) */
+@media (max-height: 700px) and (orientation: landscape) {
+  .renderer-header {
+    padding: var(--spacing-xs) var(--spacing-md);
+  }
+
+  .renderer-name {
     font-size: var(--text-lg);
   }
+
+  .renderer-model {
+    font-size: 11px;
+  }
+
+  .renderer-layout {
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+  }
+
+  .controls-column {
+    gap: var(--spacing-sm);
+  }
+
+  /* Masquer le scroll, tout doit tenir */
+  .controls-column {
+    overflow-y: visible;
+  }
 }
 
 /* Large desktop */
diff --git a/pmoapp/webapp/src/components/unified/ServerDrawer.vue b/pmoapp/webapp/src/components/unified/ServerDrawer.vue
index 4cb68818..3ed5171e 100644
--- a/pmoapp/webapp/src/components/unified/ServerDrawer.vue
+++ b/pmoapp/webapp/src/components/unified/ServerDrawer.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
-import { X, Server as ServerIcon, Circle } from 'lucide-vue-next'
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { X, Server as ServerIcon, Circle, ChevronLeft, Folder, Music, ChevronRight, Play, Plus, Settings } from 'lucide-vue-next'
 import { useMediaServers } from '@/composables/useMediaServers'
-import type { MediaServerSummary } from '@/services/pmocontrol/types'
+import type { MediaServerSummary, BrowseResponse, ContainerEntry } from '@/services/pmocontrol/types'
 
 const props = defineProps<{
   modelValue: boolean // v-model pour contrôler l'ouverture
@@ -10,28 +11,141 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
-  'server-selected': [server: MediaServerSummary]
+  'play-item': [item: ContainerEntry, serverId: string]
+  'queue-item': [item: ContainerEntry, serverId: string]
 }>()
 
-const { allServers, fetchServers } = useMediaServers()
+const { allServers, fetchServers, browseContainer, currentPath, setPath, clearPath } = useMediaServers()
+const router = useRouter()
+
+// État de navigation
+const currentServer = ref<MediaServerSummary | null>(null)
+const browseData = ref<BrowseResponse | null>(null)
+const isLoading = ref(false)
 
 // Rafraîchir la liste quand le drawer s'ouvre
 watch(() => props.modelValue, (isOpen) => {
   if (isOpen) {
     fetchServers()
+  } else {
+    // Reset navigation quand on ferme
+    currentServer.value = null
+    browseData.value = null
+    clearPath()
   }
 })
 
 const onlineServers = computed(() => allServers.value.filter((s: MediaServerSummary) => s.online))
 const offlineServers = computed(() => allServers.value.filter((s: MediaServerSummary) => !s.online))
 
+// Mode du drawer
+const isNavigating = computed(() => currentServer.value !== null)
+
 function close() {
   emit('update:modelValue', false)
 }
 
-function handleServerClick(server: MediaServerSummary) {
+async function handleServerClick(server: MediaServerSummary) {
   if (!server.online) return
-  emit('server-selected', server)
+
+  // Commencer la navigation dans ce serveur
+  currentServer.value = server
+  isLoading.value = true
+
+  try {
+    // Browse racine (containerId = "0")
+    browseData.value = await browseContainer(server.id, '0')
+    setPath([{ id: '0', title: server.friendly_name }])
+  } catch (error) {
+    console.error('[ServerDrawer] Erreur browse racine:', error)
+    browseData.value = null
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function goBack() {
+  currentServer.value = null
+  browseData.value = null
+  clearPath()
+}
+
+async function handleContainerClick(item: ContainerEntry) {
+  if (!currentServer.value) return
+
+  isLoading.value = true
+  try {
+    browseData.value = await browseContainer(currentServer.value.id, item.id)
+    setPath([...currentPath.value, { id: item.id, title: item.title }])
+  } catch (error) {
+    console.error('[ServerDrawer] Erreur browse container:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function handleBreadcrumbClick(index: number) {
+  if (!currentServer.value || index >= currentPath.value.length) return
+
+  const targetCrumb = currentPath.value[index]
+  if (!targetCrumb) return
+
+  isLoading.value = true
+
+  try {
+    browseData.value = await browseContainer(currentServer.value.id, targetCrumb.id)
+    setPath(currentPath.value.slice(0, index + 1))
+  } catch (error) {
+    console.error('[ServerDrawer] Erreur breadcrumb navigation:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Détermine si un item est jouable (track ou container jouable comme album/playlist)
+function isPlayable(item: ContainerEntry): boolean {
+  if (!item.is_container) return true // Les tracks sont toujours jouables
+
+  // Containers jouables basés sur la classe UPnP
+  const playableClasses = [
+    'object.container.album',
+    'object.container.playlist',
+    'object.container.person.musicartist'
+  ]
+
+  return playableClasses.some(cls => item.class.toLowerCase().includes(cls))
+}
+
+// Détermine si un container est navigable
+function isNavigable(item: ContainerEntry): boolean {
+  // Tous les containers sont navigables (on laisse le serveur décider si vide)
+  return item.is_container
+}
+
+function handleItemClick(item: ContainerEntry) {
+  if (!currentServer.value) return
+
+  // Les containers sont toujours navigables
+  if (item.is_container) {
+    handleContainerClick(item)
+  }
+  // Les tracks individuels : on ne fait rien (actions via boutons)
+}
+
+function handlePlayItem(event: Event, item: ContainerEntry) {
+  event.stopPropagation()
+  if (!currentServer.value) return
+  emit('play-item', item, currentServer.value.id)
+}
+
+function handleQueueItem(event: Event, item: ContainerEntry) {
+  event.stopPropagation()
+  if (!currentServer.value) return
+  emit('queue-item', item, currentServer.value.id)
+}
+
+function handleSettingsClick() {
+  router.push('/debug/api-dashboard')
   close()
 }
 </script>
@@ -46,8 +160,8 @@ function handleServerClick(server: MediaServerSummary) {
     <!-- Drawer -->
     <Transition name="drawer">
       <aside v-if="modelValue" class="server-drawer">
-        <!-- Header -->
-        <header class="drawer-header">
+        <!-- Header - Liste des serveurs -->
+        <header v-if="!isNavigating" class="drawer-header">
           <div class="drawer-title-section">
             <ServerIcon :size="24" />
             <h2 class="drawer-title">Media Servers</h2>
@@ -57,61 +171,161 @@ function handleServerClick(server: MediaServerSummary) {
           </button>
         </header>
 
-        <!-- Liste des servers -->
+        <!-- Header - Navigation dans un serveur -->
+        <header v-else class="drawer-header">
+          <button class="back-btn" @click="goBack" aria-label="Retour aux serveurs">
+            <ChevronLeft :size="20" />
+          </button>
+          <div class="drawer-title-section">
+            <ServerIcon :size="20" />
+            <h2 class="drawer-title small">{{ currentServer?.friendly_name }}</h2>
+          </div>
+          <button class="drawer-close-btn" @click="close" aria-label="Fermer">
+            <X :size="24" />
+          </button>
+        </header>
+
+        <!-- Breadcrumb -->
+        <nav v-if="isNavigating && currentPath.length > 1" class="breadcrumb">
+          <button
+            v-for="(crumb, index) in currentPath"
+            :key="crumb.id"
+            class="breadcrumb-item"
+            :class="{ active: index === currentPath.length - 1 }"
+            @click="handleBreadcrumbClick(index)"
+          >
+            {{ crumb.title }}
+            <ChevronRight v-if="index < currentPath.length - 1" :size="14" />
+          </button>
+        </nav>
+
+        <!-- Contenu -->
         <div class="drawer-content">
-          <!-- Servers online -->
-          <section v-if="onlineServers.length > 0" class="server-section">
-            <h3 class="section-title">Disponibles ({{ onlineServers.length }})</h3>
-            <ul class="server-list">
+          <!-- Liste des serveurs -->
+          <div v-if="!isNavigating">
+            <!-- Servers online -->
+            <section v-if="onlineServers.length > 0" class="server-section">
+              <h3 class="section-title">Disponibles ({{ onlineServers.length }})</h3>
+              <ul class="server-list">
+                <li
+                  v-for="server in onlineServers"
+                  :key="server.id"
+                  class="server-item online"
+                  @click="handleServerClick(server)"
+                >
+                  <div class="server-icon">
+                    <ServerIcon :size="20" />
+                  </div>
+                  <div class="server-info">
+                    <p class="server-name">{{ server.friendly_name }}</p>
+                    <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
+                  </div>
+                  <div class="server-status">
+                    <Circle :size="8" fill="currentColor" />
+                  </div>
+                </li>
+              </ul>
+            </section>
+
+            <!-- Servers offline -->
+            <section v-if="offlineServers.length > 0" class="server-section">
+              <h3 class="section-title">Hors ligne ({{ offlineServers.length }})</h3>
+              <ul class="server-list">
+                <li
+                  v-for="server in offlineServers"
+                  :key="server.id"
+                  class="server-item offline"
+                >
+                  <div class="server-icon">
+                    <ServerIcon :size="20" />
+                  </div>
+                  <div class="server-info">
+                    <p class="server-name">{{ server.friendly_name }}</p>
+                    <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
+                  </div>
+                  <div class="server-status">
+                    <Circle :size="8" fill="currentColor" />
+                  </div>
+                </li>
+              </ul>
+            </section>
+
+            <!-- Aucun server -->
+            <div v-if="allServers.length === 0" class="empty-servers">
+              <ServerIcon :size="48" />
+              <p>Aucun serveur multimédia détecté</p>
+            </div>
+          </div>
+
+          <!-- Navigation dans un serveur -->
+          <div v-else>
+            <!-- Loading -->
+            <div v-if="isLoading" class="loading-state">
+              <div class="spinner"></div>
+              <p>Chargement...</p>
+            </div>
+
+            <!-- Contenu du serveur -->
+            <ul v-else-if="browseData" class="content-list">
               <li
-                v-for="server in onlineServers"
-                :key="server.id"
-                class="server-item online"
-                @click="handleServerClick(server)"
+                v-for="item in browseData.entries"
+                :key="item.id"
+                class="content-item"
+                :class="{ navigable: item.is_container && isNavigable(item) }"
+                @click="handleItemClick(item)"
               >
-                <div class="server-icon">
-                  <ServerIcon :size="20" />
+                <div class="content-icon">
+                  <Folder v-if="item.is_container" :size="20" />
+                  <Music v-else :size="20" />
                 </div>
-                <div class="server-info">
-                  <p class="server-name">{{ server.friendly_name }}</p>
-                  <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
+                <div class="content-info">
+                  <p class="content-title">{{ item.title }}</p>
+                  <p v-if="item.artist" class="content-subtitle">{{ item.artist }}</p>
+                  <p v-else-if="item.album" class="content-subtitle">{{ item.album }}</p>
                 </div>
-                <div class="server-status">
-                  <Circle :size="8" fill="currentColor" />
+
+                <!-- Actions pour items jouables -->
+                <div v-if="isPlayable(item)" class="content-actions">
+                  <button
+                    class="action-btn play-btn"
+                    :title="item.is_container ? 'Jouer tout' : 'Jouer'"
+                    @click="handlePlayItem($event, item)"
+                  >
+                    <Play :size="16" />
+                  </button>
+                  <button
+                    class="action-btn queue-btn"
+                    :title="item.is_container ? 'Ajouter tout à la queue' : 'Ajouter à la queue'"
+                    @click="handleQueueItem($event, item)"
+                  >
+                    <Plus :size="16" />
+                  </button>
                 </div>
+
+                <!-- Chevron pour containers navigables (même si jouables) -->
+                <ChevronRight
+                  v-if="item.is_container && isNavigable(item)"
+                  :size="16"
+                  class="content-chevron"
+                />
               </li>
             </ul>
-          </section>
 
-          <!-- Servers offline -->
-          <section v-if="offlineServers.length > 0" class="server-section">
-            <h3 class="section-title">Hors ligne ({{ offlineServers.length }})</h3>
-            <ul class="server-list">
-              <li
-                v-for="server in offlineServers"
-                :key="server.id"
-                class="server-item offline"
-              >
-                <div class="server-icon">
-                  <ServerIcon :size="20" />
-                </div>
-                <div class="server-info">
-                  <p class="server-name">{{ server.friendly_name }}</p>
-                  <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
-                </div>
-                <div class="server-status">
-                  <Circle :size="8" fill="currentColor" />
-                </div>
-              </li>
-            </ul>
-          </section>
-
-          <!-- Aucun server -->
-          <div v-if="allServers.length === 0" class="empty-servers">
-            <ServerIcon :size="48" />
-            <p>Aucun serveur multimédia détecté</p>
+            <!-- Vide -->
+            <div v-else class="empty-servers">
+              <Folder :size="48" />
+              <p>Dossier vide</p>
+            </div>
           </div>
         </div>
+
+        <!-- Footer avec bouton settings -->
+        <footer class="drawer-footer">
+          <button class="settings-btn" @click="handleSettingsClick" title="Ouvrir le menu Debug">
+            <Settings :size="20" />
+            <span>Debug & Config</span>
+          </button>
+        </footer>
       </aside>
     </Transition>
   </div>
@@ -121,22 +335,27 @@ function handleServerClick(server: MediaServerSummary) {
 .drawer-backdrop {
   position: fixed;
   top: 0;
-  left: 0;
+  left: 50vw; /* Commence après le drawer (desktop: 50vw) */
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.35); /* Moins sombre */
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   z-index: 200;
 }
 
+@media (max-width: 768px) and (orientation: portrait) {
+  .drawer-backdrop {
+    left: 80vw; /* Mobile portrait: 80vw */
+  }
+}
+
 .server-drawer {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
-  width: 320px;
-  max-width: 80vw;
+  width: 50vw; /* Desktop/landscape: 50% de l'écran */
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(30px) saturate(180%);
   -webkit-backdrop-filter: blur(30px) saturate(180%);
@@ -160,6 +379,7 @@ function handleServerClick(server: MediaServerSummary) {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--spacing-sm);
   padding: var(--spacing-lg);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   flex-shrink: 0;
@@ -170,12 +390,42 @@ function handleServerClick(server: MediaServerSummary) {
   align-items: center;
   gap: var(--spacing-sm);
   color: var(--color-text);
+  flex: 1;
+  min-width: 0;
 }
 
 .drawer-title {
   font-size: var(--text-xl);
   font-weight: 700;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.drawer-title.small {
+  font-size: var(--text-base);
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text);
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
 }
 
 .drawer-close-btn {
@@ -184,6 +434,7 @@ function handleServerClick(server: MediaServerSummary) {
   justify-content: center;
   width: 40px;
   height: 40px;
+  flex-shrink: 0;
   padding: 0;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
@@ -202,6 +453,47 @@ function handleServerClick(server: MediaServerSummary) {
   transform: scale(0.95);
 }
 
+/* Breadcrumb */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.breadcrumb-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text);
+}
+
+.breadcrumb-item.active {
+  color: var(--color-text);
+  font-weight: 600;
+  cursor: default;
+}
+
+.breadcrumb-item.active:hover {
+  background: transparent;
+}
+
 /* Content */
 .drawer-content {
   flex: 1;
@@ -307,6 +599,168 @@ function handleServerClick(server: MediaServerSummary) {
   color: var(--status-offline);
 }
 
+/* Content list */
+.content-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.content-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.content-item.navigable {
+  cursor: pointer;
+}
+
+.content-item.navigable:hover {
+  background: rgba(255, 255, 255, 0.12);
+  transform: translateX(2px);
+}
+
+.content-item.navigable:active {
+  transform: translateX(1px);
+}
+
+.content-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--color-text-secondary);
+}
+
+.content-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.content-title {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.content-subtitle {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  margin: 2px 0 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.content-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+}
+
+/* Actions pour items jouables */
+.content-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  opacity: 1; /* Toujours visible pour le tactile */
+  transition: all 0.2s ease;
+  z-index: 1; /* Au-dessus pour capturer les clicks */
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text);
+  pointer-events: auto; /* S'assurer que les boutons capturent les clicks */
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
+}
+
+.action-btn:active {
+  transform: scale(0.95);
+}
+
+.play-btn {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.play-btn:hover {
+  background: var(--color-primary);
+  color: white;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+}
+
+.queue-btn {
+  color: var(--color-text-secondary);
+}
+
+.queue-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  color: var(--color-text);
+}
+
+/* Loading state */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-2xl);
+  color: var(--color-text-secondary);
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-state p {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
 .empty-servers {
   display: flex;
   flex-direction: column;
@@ -323,10 +777,51 @@ function handleServerClick(server: MediaServerSummary) {
   font-size: var(--text-base);
 }
 
+/* Footer */
+.drawer-footer {
+  flex-shrink: 0;
+  padding: var(--spacing-md);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.settings-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-md);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.settings-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--color-text);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.settings-btn:active {
+  transform: translateY(0);
+}
+
 /* Animations */
-.backdrop-enter-active,
+.backdrop-enter-active {
+  transition: opacity 0.2s ease;
+  transition-delay: 0.15s; /* Attend que le drawer soit à moitié visible */
+}
+
 .backdrop-leave-active {
-  transition: opacity 0.3s ease;
+  transition: opacity 0.2s ease;
+  /* Pas de delay au leave - disparaît en même temps que le drawer */
 }
 
 .backdrop-enter-from,
@@ -345,28 +840,33 @@ function handleServerClick(server: MediaServerSummary) {
 }
 
 /* Scrollbar styling */
-.drawer-content::-webkit-scrollbar {
+.drawer-content::-webkit-scrollbar,
+.breadcrumb::-webkit-scrollbar {
   width: 6px;
+  height: 6px;
 }
 
-.drawer-content::-webkit-scrollbar-track {
+.drawer-content::-webkit-scrollbar-track,
+.breadcrumb::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
 }
 
-.drawer-content::-webkit-scrollbar-thumb {
+.drawer-content::-webkit-scrollbar-thumb,
+.breadcrumb::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 3px;
 }
 
-.drawer-content::-webkit-scrollbar-thumb:hover {
+.drawer-content::-webkit-scrollbar-thumb:hover,
+.breadcrumb::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
 }
 
-/* Mobile responsive */
-@media (max-width: 768px) {
+/* Mobile responsive - portrait */
+@media (max-width: 768px) and (orientation: portrait) {
   .server-drawer {
-    width: 280px;
+    width: 80vw; /* Mobile portrait: 80% de l'écran */
   }
 
   .drawer-header {
diff --git a/pmoapp/webapp/src/composables/useTabs.ts b/pmoapp/webapp/src/composables/useTabs.ts
index ee6edd56..dcaf1527 100644
--- a/pmoapp/webapp/src/composables/useTabs.ts
+++ b/pmoapp/webapp/src/composables/useTabs.ts
@@ -4,6 +4,7 @@
  * Onglets server ouverts manuellement via le drawer (fermables).
  */
 import { reactive, computed, watch, onMounted, type Component } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
 import { Radio, Server } from 'lucide-vue-next'
 import type { RendererSummary, MediaServerSummary } from '../services/pmocontrol/types'
 
@@ -28,7 +29,6 @@ interface TabsState {
 
 const MAX_TABS = 12 // Augmenté car onglets auto-générés
 const STORAGE_KEY = 'pmo-tabs-state'
-const COMPACT_MODE_THRESHOLD = 5 // Passer en mode icônes seulement au-delà de 5 onglets
 
 // État global partagé entre toutes les instances du composable
 const state = reactive<TabsState>({
@@ -41,10 +41,12 @@ const state = reactive<TabsState>({
 let isRestoringFromStorage = false
 
 /**
- * Tronque un titre pour mobile si nécessaire
+ * Retourne le titre complet sans troncature
+ * Note: On laisse le CSS gérer l'overflow avec ellipsis pour un affichage stable
  */
-function truncateTitle(title: string, maxLength = 15): string {
-  return title.length > maxLength ? title.slice(0, maxLength) + '...' : title
+function truncateTitle(title: string): string {
+  // Retourner le titre complet, le CSS gère l'ellipsis de façon stable
+  return title
 }
 
 /**
@@ -345,12 +347,16 @@ export function useTabs() {
     }
   })
 
+  // Détection de la largeur d'écran pour le mode compact
+  // Mode compact sur les écrans < 900px (tablettes et mobiles)
+  const isNarrowScreen = useMediaQuery('(max-width: 900px)')
+
   // Computed properties
   const activeTab = computed(() => findTab(state.activeTabId) || state.tabs[0] || null)
   const hasMultipleTabs = computed(() => state.tabs.length > 1)
   const canAddTab = computed(() => state.tabs.length < MAX_TABS)
   const isEmpty = computed(() => state.tabs.length === 0)
-  const compactMode = computed(() => state.tabs.length > COMPACT_MODE_THRESHOLD)
+  const compactMode = computed(() => isNarrowScreen.value)
 
   return {
     // State
diff --git a/pmoapp/webapp/src/views/UnifiedControlView.vue b/pmoapp/webapp/src/views/UnifiedControlView.vue
index 614a2343..fad696ba 100644
--- a/pmoapp/webapp/src/views/UnifiedControlView.vue
+++ b/pmoapp/webapp/src/views/UnifiedControlView.vue
@@ -5,7 +5,8 @@ import { useTabs } from '@/composables/useTabs'
 import { useRenderers } from '@/composables/useRenderers'
 import { useMediaServers } from '@/composables/useMediaServers'
 import { useSwipe } from '@vueuse/core'
-import type { MediaServerSummary } from '@/services/pmocontrol/types'
+import { api } from '@/services/pmocontrol/api'
+import type { ContainerEntry } from '@/services/pmocontrol/types'
 
 // Import des composants
 import BottomTabBar from '@/components/unified/BottomTabBar.vue'
@@ -16,7 +17,7 @@ import ServerTabContent from '@/components/unified/ServerTabContent.vue'
 
 const route = useRoute()
 const router = useRouter()
-const { tabs, activeTabId, switchTab, activeTab, syncWithRenderers, isEmpty, openServer } = useTabs()
+const { tabs, activeTabId, switchTab, activeTab, syncWithRenderers, isEmpty } = useTabs()
 const { allRenderers, fetchRenderers } = useRenderers()
 const { allServers, fetchServers } = useMediaServers()
 
@@ -41,9 +42,50 @@ useSwipe(viewRef, {
   },
 })
 
-// Gestion de l'ouverture d'un server depuis le drawer
-function handleServerSelected(server: MediaServerSummary) {
-  openServer(server)
+// Gestion de la lecture d'un item depuis le drawer
+async function handlePlayItem(item: ContainerEntry, serverId: string) {
+  const currentTab = activeTab.value
+
+  if (!currentTab || currentTab.type !== 'renderer' || !currentTab.metadata?.rendererId) {
+    console.error('[UnifiedControlView] Pas de renderer actif')
+    return
+  }
+
+  const rendererId = currentTab.metadata.rendererId
+
+  try {
+    console.log('[UnifiedControlView] Play item:', item.title, 'on renderer:', rendererId)
+
+    await api.attachPlaylist(rendererId, serverId, item.id, true) // autoPlay = true
+
+    // Fermer le drawer après succès
+    drawerOpen.value = false
+  } catch (error) {
+    console.error('[UnifiedControlView] Erreur lors de la lecture:', error)
+  }
+}
+
+// Gestion de l'ajout d'un item à la queue depuis le drawer
+async function handleQueueItem(item: ContainerEntry, serverId: string) {
+  const currentTab = activeTab.value
+
+  if (!currentTab || currentTab.type !== 'renderer' || !currentTab.metadata?.rendererId) {
+    console.error('[UnifiedControlView] Pas de renderer actif')
+    return
+  }
+
+  const rendererId = currentTab.metadata.rendererId
+
+  try {
+    console.log('[UnifiedControlView] Queue item:', item.title, 'on renderer:', rendererId)
+
+    await api.attachPlaylist(rendererId, serverId, item.id, false) // autoPlay = false
+
+    // Fermer le drawer après succès
+    drawerOpen.value = false
+  } catch (error) {
+    console.error('[UnifiedControlView] Erreur lors de l\'ajout à la queue:', error)
+  }
 }
 
 // Nombre de servers online pour afficher dans le badge
@@ -163,7 +205,11 @@ const currentTabProps = computed(() => {
     <BottomTabBar :online-servers-count="onlineServersCount" @open-drawer="handleDrawerOpen" />
 
     <!-- Drawer servers (swipe depuis bord gauche) -->
-    <ServerDrawer v-model="drawerOpen" @server-selected="handleServerSelected" />
+    <ServerDrawer
+      v-model="drawerOpen"
+      @play-item="handlePlayItem"
+      @queue-item="handleQueueItem"
+    />
   </div>
 </template>
 
@@ -182,6 +228,7 @@ const currentTabProps = computed(() => {
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0;
+  padding-bottom: 80px; /* Espace pour la barre fixe en bas (64px + marge) */
   position: relative;
 }
 
diff --git a/pmocontrol/src/control_point/openhome_queue.rs b/pmocontrol/src/control_point/openhome_queue.rs
index 3e861280..df8c24f2 100644
--- a/pmocontrol/src/control_point/openhome_queue.rs
+++ b/pmocontrol/src/control_point/openhome_queue.rs
@@ -62,51 +62,52 @@ impl OpenHomeQueue {
         // 1. Info.Id() - Direct ID query (fastest, but fails if track no longer in playlist)
         // 2. Info.Track() - Returns URI, which we can search for (works even if track removed)
         // 3. None - No current track can be determined
-        let current_id = self.info_client.as_ref().and_then(|client| {
-            // Try Info.Id() first
-            if let Ok(id) = client.id() {
-                debug!(
-                    renderer = self.renderer_id.0.as_str(),
-                    track_id = id,
-                    "Detected current track via Info.Id()"
-                );
-                return Some(id);
-            }
+        let current_id = self.playlist.id()?;
+        //  {
+        //     // Try Info.Id() first
+        //     if let Ok(id) = client.id() {
+        //         debug!(
+        //             renderer = self.renderer_id.0.as_str(),
+        //             track_id = id,
+        //             "Detected current track via Info.Id()"
+        //         );
+        //         return Some(id);
+        //     }
 
-            // If Id() fails, try Track() to get the URI and search for it
-            if let Ok(track_info) = client.track() {
-                debug!(
-                    renderer = self.renderer_id.0.as_str(),
-                    track_uri = track_info.uri.as_str(),
-                    "Info.Id() failed, searching for current track by URI from Info.Track()"
-                );
-                return entries
-                    .iter()
-                    .find(|entry| entry.uri == track_info.uri)
-                    .map(|entry| {
-                        debug!(
-                            renderer = self.renderer_id.0.as_str(),
-                            found_id = entry.id,
-                            found_uri = entry.uri.as_str(),
-                            "Found current track ID by matching URI"
-                        );
-                        entry.id
-                    });
-            }
+        //     // If Id() fails, try Track() to get the URI and search for it
+        //     if let Ok(track_info) = client.track() {
+        //         debug!(
+        //             renderer = self.renderer_id.0.as_str(),
+        //             track_uri = track_info.uri.as_str(),
+        //             "Info.Id() failed, searching for current track by URI from Info.Track()"
+        //         );
+        //         return entries
+        //             .iter()
+        //             .find(|entry| entry.uri == track_info.uri)
+        //             .map(|entry| {
+        //                 debug!(
+        //                     renderer = self.renderer_id.0.as_str(),
+        //                     found_id = entry.id,
+        //                     found_uri = entry.uri.as_str(),
+        //                     "Found current track ID by matching URI"
+        //                 );
+        //                 entry.id
+        //             });
+        //     }
 
-            debug!(
-                renderer = self.renderer_id.0.as_str(),
-                "Both Info.Id() and Info.Track() failed, cannot determine current track"
-            );
-            None
-        });
+        //     debug!(
+        //         renderer = self.renderer_id.0.as_str(),
+        //         "Both Info.Id() and Info.Track() failed, cannot determine current track"
+        //     );
+        //     None
+        // });
 
-        let current_index = current_id
-            .and_then(|id| track_ids.iter().position(|entry_id| *entry_id == id));
+        // let current_index = current_id
+        //     .and_then(|id| track_ids.iter().position(|entry_id| *entry_id == id));
 
         self.items = items;
         self.track_ids = track_ids;
-        self.current_index = current_index;
+        self.current_index = Some(current_id as usize);
         Ok(())
     }
 
@@ -844,9 +845,7 @@ impl QueueBackend for OpenHomeQueue {
         // Note: Some OpenHome renderers (like upmpdcli) don't reliably support Info.Id(),
         // so we fall back to using our internal current_index pointer.
         let currently_playing_id_from_renderer = self
-            .info_client
-            .as_ref()
-            .and_then(|client| client.id().ok());
+            .playlist.id().ok();
 
         // Find the currently playing item in our local state.
         // Priority: 1) Renderer-reported ID, 2) Our internal current_index
diff --git a/pmocontrol/src/openhome_client.rs b/pmocontrol/src/openhome_client.rs
index d820ecf5..b866c6fb 100644
--- a/pmocontrol/src/openhome_client.rs
+++ b/pmocontrol/src/openhome_client.rs
@@ -85,7 +85,7 @@ impl OhPlaylistClient {
             .ok_or_else(|| anyhow!("Missing ReadListResponse element in SOAP body"))?;
 
         let track_list_b64 =
-            extract_child_text_any(response, &["aTrackList", "TrackList", "aValue", "Value"])?;
+            extract_child_text_any(response, &["TrackList", "Value"])?;
         let track_list_sample: String = track_list_b64.chars().take(256).collect();
         debug!(
             control_url = self.control_url.as_str(),
@@ -111,10 +111,10 @@ impl OhPlaylistClient {
         let response = find_child_with_suffix(&envelope.body.content, "InsertResponse")
             .ok_or_else(|| anyhow!("Missing InsertResponse element in SOAP body"))?;
         let new_id_text =
-            extract_child_text_any(response, &["aNewId", "NewId", "aValue", "Value"])?;
+            extract_child_text_any(response, &["NewId", "Value"])?;
         let new_id = new_id_text
             .parse::<u32>()
-            .map_err(|_| anyhow!("Invalid aNewId value: {}", new_id_text))?;
+            .map_err(|_| anyhow!("Invalid NewId value: {}", new_id_text))?;
 
         Ok(new_id)
     }
@@ -129,6 +129,31 @@ impl OhPlaylistClient {
         handle_action_response("SeekId", &call_result)
     }
 
+    pub fn transport_state(&self) -> Result<String> {
+        let call_result =
+            invoke_upnp_action(&self.control_url, &self.service_type, "TransportState", &[])?;
+
+        let envelope = ensure_success("TransportState", &call_result)?;
+        let response = find_child_with_suffix(&envelope.body.content, "TransportStateResponse")
+            .ok_or_else(|| anyhow!("Missing TransportStateResponse element in SOAP body"))?;
+        let state = extract_child_text_any(response, &["State", "Value"])?;
+        Ok(state)
+    }
+
+    pub fn id(&self) -> Result<u32> {
+        let call_result = invoke_upnp_action(&self.control_url, &self.service_type, "Id", &[])?;
+
+        let envelope = ensure_success("Id", &call_result)?;
+        let response = find_child_with_suffix(&envelope.body.content, "IdResponse")
+            .ok_or_else(|| anyhow!("Missing IdResponse element in SOAP body"))?;
+        let id_text = extract_child_text(response, "Id")?;
+        let id = id_text
+            .parse::<u32>()
+            .map_err(|_| anyhow!("Invalid Info.Id value: {}", id_text))?;
+        Ok(id)
+    }
+
+
     pub fn play(&self) -> Result<()> {
         let call_result = invoke_upnp_action(&self.control_url, &self.service_type, "Play", &[])?;
         handle_action_response("Play", &call_result)
@@ -227,10 +252,10 @@ impl OhPlaylistClient {
         let envelope = ensure_success("Id", &call_result)?;
         let response = find_child_with_suffix(&envelope.body.content, "IdResponse")
             .ok_or_else(|| anyhow!("Missing IdResponse element in SOAP body"))?;
-        let value: String = extract_child_text_any(response, &["aValue", "Value"])?;
+        let value: String = extract_child_text_any(response, &["Value"])?;
         Ok(value)
     }
-    
+
     pub fn tracks_max(&self) -> Result<u32> {
         let call_result =
             invoke_upnp_action(&self.control_url, &self.service_type, "TracksMax", &[])?;
@@ -238,7 +263,7 @@ impl OhPlaylistClient {
         let envelope = ensure_success("TracksMax", &call_result)?;
         let response = find_child_with_suffix(&envelope.body.content, "TracksMaxResponse")
             .ok_or_else(|| anyhow!("Missing TracksMaxResponse element in SOAP body"))?;
-        let value_text: String = extract_child_text_any(response, &["aValue", "Value"])?;
+        let value_text: String = extract_child_text_any(response, &["Value"])?;
         let value = value_text
             .parse::<u32>()
             .map_err(|_| anyhow!("Invalid TracksMax value: {}", value_text))?;
@@ -256,7 +281,7 @@ impl OhPlaylistClient {
         // Try to extract the array element. If missing, assume empty playlist.
         let array_text = match extract_child_text_any(
             response,
-            &["aArray", "Array", "aIdArray", "IdArray", "aValue", "Value"],
+            &["Array", "IdArray", "Value"],
         ) {
             Ok(text) => text,
             Err(_) => {
@@ -355,9 +380,9 @@ impl OhInfoClient {
         let response = find_child_with_suffix(&envelope.body.content, "TrackResponse")
             .ok_or_else(|| anyhow!("Missing TrackResponse element in SOAP body"))?;
 
-        let uri = extract_child_text_any(response, &["aUri", "Uri", "aValue", "Value"])
+        let uri = extract_child_text_any(response, &["Uri", "Uri", "Value"])
             .unwrap_or_default();
-        let metadata_xml = extract_child_text_optional(response, "aMetadata")
+        let metadata_xml = extract_child_text_optional(response, "Metadata")
             .unwrap_or(None)
             .filter(|s| !s.is_empty());
 
@@ -382,39 +407,15 @@ impl OhInfoClient {
         let response = find_child_with_suffix(&envelope.body.content, "NextResponse")
             .ok_or_else(|| anyhow!("Missing NextResponse element in SOAP body"))?;
 
-        let uri = extract_child_text_any(response, &["aUri", "Uri", "aValue", "Value"])
+        let uri = extract_child_text_any(response, &["Uri", "Value"])
             .unwrap_or_default();
-        let metadata_xml = extract_child_text_optional(response, "aMetadata")
+        let metadata_xml = extract_child_text_optional(response, "Metadata")
             .unwrap_or(None)
             .filter(|s| !s.is_empty());
 
         Ok(OhInfoTrack { uri, metadata_xml })
     }
 
-    pub fn id(&self) -> Result<u32> {
-        let call_result = invoke_upnp_action(&self.control_url, &self.service_type, "Id", &[])?;
-
-        let envelope = ensure_success("Id", &call_result)?;
-        let response = find_child_with_suffix(&envelope.body.content, "IdResponse")
-            .ok_or_else(|| anyhow!("Missing IdResponse element in SOAP body"))?;
-        let id_text = extract_child_text(response, "aId")?;
-        let id = id_text
-            .parse::<u32>()
-            .map_err(|_| anyhow!("Invalid Info.Id value: {}", id_text))?;
-        Ok(id)
-    }
-
-    pub fn transport_state(&self) -> Result<String> {
-        let call_result =
-            invoke_upnp_action(&self.control_url, &self.service_type, "TransportState", &[])?;
-
-        let envelope = ensure_success("TransportState", &call_result)?;
-        let response = find_child_with_suffix(&envelope.body.content, "TransportStateResponse")
-            .ok_or_else(|| anyhow!("Missing TransportStateResponse element in SOAP body"))?;
-        let state = extract_child_text_any(response, &["aState", "State", "aValue", "Value"])?;
-        Ok(state)
-    }
-
     pub fn read_current_metadata(&self) -> Result<Option<TrackMetadata>> {
         let track = self.track()?;
         Ok(track.metadata())
@@ -443,17 +444,17 @@ impl OhTimeClient {
             .ok_or_else(|| anyhow!("Missing TimeResponse element in SOAP body"))?;
 
         let track_count =
-            extract_child_text_any(response, &["aTrackCount", "TrackCount", "aValue", "Value"])?
+            extract_child_text_any(response, &["TrackCount", "Value"])?
                 .parse::<u32>()
-                .map_err(|_| anyhow!("Invalid aTrackCount value in Time response"))?;
+                .map_err(|_| anyhow!("Invalid TrackCount value in Time response"))?;
         let duration_secs =
-            extract_child_text_any(response, &["aDuration", "Duration", "aValue", "Value"])?
+            extract_child_text_any(response, &["Duration","Value"])?
                 .parse::<u32>()
-                .map_err(|_| anyhow!("Invalid aDuration value in Time response"))?;
+                .map_err(|_| anyhow!("Invalid Duration value in Time response"))?;
         let elapsed_secs =
-            extract_child_text_any(response, &["aSeconds", "Seconds", "aValue", "Value"])?
+            extract_child_text_any(response, &["Seconds", "Value"])?
                 .parse::<u32>()
-                .map_err(|_| anyhow!("Invalid aSeconds value in Time response"))?;
+                .map_err(|_| anyhow!("Invalid Seconds value in Time response"))?;
 
         Ok(OhTimePosition {
             track_count,
@@ -482,7 +483,7 @@ impl OhVolumeClient {
         let envelope = ensure_success("Volume", &call_result)?;
         let response = find_child_with_suffix(&envelope.body.content, "VolumeResponse")
             .ok_or_else(|| anyhow!("Missing VolumeResponse element in SOAP body"))?;
-        let value = extract_child_text_any(response, &["aVolume", "Volume", "aValue", "Value"])?;
+        let value = extract_child_text_any(response, &["Volume", "Value"])?;
         let parsed = value
             .parse::<u32>()
             .map_err(|_| anyhow!("Invalid volume value: {}", value))?;
@@ -502,7 +503,7 @@ impl OhVolumeClient {
         let envelope = ensure_success("Mute", &call_result)?;
         let response = find_child_with_suffix(&envelope.body.content, "MuteResponse")
             .ok_or_else(|| anyhow!("Missing MuteResponse element in SOAP body"))?;
-        let value = extract_child_text_any(response, &["aMute", "Mute", "aValue", "Value"])?;
+        let value = extract_child_text_any(response, &["Mute", "Value"])?;
         parse_bool(&value)
     }
 
@@ -547,9 +548,9 @@ impl OhRadioClient {
         let response = find_child_with_suffix(&envelope.body.content, "ChannelResponse")
             .ok_or_else(|| anyhow!("Missing ChannelResponse element in SOAP body"))?;
 
-        let uri = extract_child_text_any(response, &["aUri", "Uri", "aValue", "Value"])
+        let uri = extract_child_text_any(response, &["Uri", "Value"])
             .unwrap_or_default();
-        let metadata_xml = extract_child_text_optional(response, "aMetadata")
+        let metadata_xml = extract_child_text_optional(response, "Metadata")
             .unwrap_or(None)
             .filter(|s| !s.is_empty());
 
@@ -577,7 +578,7 @@ impl OhProductClient {
         let envelope = ensure_success("SourceXml", &call_result)?;
         let response = find_child_with_suffix(&envelope.body.content, "SourceXmlResponse")
             .ok_or_else(|| anyhow!("Missing SourceXmlResponse element in SOAP body"))?;
-        let xml = extract_child_text_any(response, &["aSourceXml", "aXml", "aValue", "Value"])?;
+        let xml = extract_child_text_any(response, &["SourceXml", "Xml", "Value"])?;
         parse_product_source_list(&xml)
     }
 
@@ -587,7 +588,7 @@ impl OhProductClient {
         let envelope = ensure_success("SourceIndex", &call_result)?;
         let response = find_child_with_suffix(&envelope.body.content, "SourceIndexResponse")
             .ok_or_else(|| anyhow!("Missing SourceIndexResponse element in SOAP body"))?;
-        let value = extract_child_text_any(response, &["aIndex", "Index", "aValue", "Value"])?;
+        let value = extract_child_text_any(response, &["Index", "Value"])?;
         value
             .parse::<u32>()
             .map_err(|_| anyhow!("Invalid Product.SourceIndex value: {}", value))
@@ -998,7 +999,7 @@ mod tests {
         let mut cursor = Cursor::new(xml.as_bytes());
         let response = Element::parse(&mut cursor).expect("valid xml");
         let value =
-            extract_child_text_any(&response, &["aNewId", "NewId", "aValue", "Value"]).unwrap();
+            extract_child_text_any(&response, &["NewId", "Value"]).unwrap();
         assert_eq!(value, "1337");
     }
 
@@ -1008,7 +1009,7 @@ mod tests {
         let mut cursor = Cursor::new(xml.as_bytes());
         let response = Element::parse(&mut cursor).expect("valid xml");
         let value =
-            extract_child_text_any(&response, &["aTrackList", "TrackList", "aValue", "Value"])
+            extract_child_text_any(&response, &["TrackList", "Value"])
                 .expect("tracklist");
         assert_eq!(value, "PGVudHJ5PjwvZW50cnk+");
     }
@@ -1020,7 +1021,7 @@ mod tests {
         let response = Element::parse(&mut cursor).expect("valid xml");
         let value = extract_child_text_any(
             &response,
-            &["aArray", "Array", "aIdArray", "IdArray", "aValue", "Value"],
+            &["Array", "IdArray", "Value"],
         )
         .expect("array content");
         assert_eq!(value, "AAAAAQAAAAI=");
diff --git a/pmocontrol/src/openhome_renderer.rs b/pmocontrol/src/openhome_renderer.rs
index 3f325018..a78a7f3e 100644
--- a/pmocontrol/src/openhome_renderer.rs
+++ b/pmocontrol/src/openhome_renderer.rs
@@ -120,7 +120,7 @@ impl OpenHomeRenderer {
 
         // Essayer d'obtenir current_id depuis Info.Id()
         let mut current_id = self
-            .info_client
+            .playlist
             .as_ref()
             .and_then(|client| {
                 match client.id() {
@@ -316,7 +316,7 @@ impl VolumeControl for OpenHomeRenderer {
 
 impl PlaybackStatus for OpenHomeRenderer {
     fn playback_state(&self) -> Result<PlaybackState> {
-        let client = self.info_client_for("playback_state")?;
+        let client = self.playlist_client_for("playback_state")?;
         let state = client.transport_state()?;
         Ok(map_openhome_state(&state))
     }
@@ -330,8 +330,8 @@ impl PlaybackPosition for OpenHomeRenderer {
         let mut track_uri = None;
         let mut track_metadata_xml = None;
 
-        if let Some(info_client) = &self.info_client {
-            match info_client.id() {
+        if let Some(playlist_client) = &self.playlist {
+            match playlist_client.id() {
                 Ok(id) => track_id = Some(id),
                 Err(err) => debug!(
                     renderer = self.info.id.0.as_str(),
@@ -339,7 +339,9 @@ impl PlaybackPosition for OpenHomeRenderer {
                     "Failed to read OpenHome track id"
                 ),
             }
+        }
 
+        if let Some(info_client) = &self.info_client {
             match info_client.track() {
                 Ok(track) => {
                     track_uri = Some(track.uri);