Rends les items de la queue de lecture cliquables.

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

@@ -6,10 +6,19 @@ defineProps<{
   item: QueueItem
   isCurrent: boolean
 }>()
+
+const emit = defineEmits<{
+  click: [item: QueueItem]
+}>()
+
+function handleClick(item: QueueItem) {
+  console.log('[QueueItem] Click detected on item:', item.index, item.title)
+  emit('click', item)
+}
 </script>
 
 <template>
-  <div :class="['queue-item', { current: isCurrent }]">
+  <div :class="['queue-item', { current: isCurrent }]" @click="handleClick(item)">
     <!-- Indicateur piste en cours -->
     <div class="current-indicator" v-if="isCurrent">
       <Play :size="16" fill="currentColor" />
@@ -51,6 +60,7 @@ defineProps<{
   border-radius: var(--radius-md);
   transition: background-color var(--transition-fast);
   position: relative;
+  cursor: pointer;
 }
 
 .queue-item:hover {

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

@@ -3,17 +3,26 @@ import { computed, ref, watch, nextTick, toRef } from 'vue'
 import { useRenderer } from '@/composables/useRenderers'
 import QueueItem from './QueueItem.vue'
 import { Link } from 'lucide-vue-next'
+import type { QueueItem as QueueItemType } from '@/services/pmocontrol/types'
 
 const props = defineProps<{
   rendererId: string
 }>()
 
+const emit = defineEmits<{
+  clickItem: [item: QueueItemType]
+}>()
+
 const { queue, binding } = useRenderer(toRef(props, 'rendererId'))
 
 const isAttached = computed(() => !!binding.value)
 
 const queueContainer = ref<HTMLElement | null>(null)
 
+function handleItemClick(item: QueueItemType) {
+  emit('clickItem', item)
+}
+
 // Auto-scroll vers la piste courante lors de l'ouverture
 watch(() => queue.value?.current_index, async (currentIndex) => {
   if (currentIndex !== null && currentIndex !== undefined && queueContainer.value) {
@@ -53,6 +62,7 @@ watch(() => queue.value?.current_index, async (currentIndex) => {
         :key="item.index"
         :item="item"
         :is-current="item.index === queue.current_index"
+        @click="handleItemClick"
       />
     </div>
 

pmoapp/webapp/src/components/unified/RendererTabContent.vue

@@ -10,6 +10,8 @@ import StatusBadge from '@/components/pmocontrol/StatusBadge.vue'
 import { ChevronUp, ChevronDown, Link } from 'lucide-vue-next'
 import { useRenderers } from '@/composables/useRenderers'
 import { useUIStore } from '@/stores/ui'
+import { api } from '@/services/pmocontrol/api'
+import type { QueueItem } from '@/services/pmocontrol/types'
 
 const props = defineProps<{
   rendererId: string
@@ -48,6 +50,17 @@ async function handleDetachPlaylist() {
     uiStore.notifyError(`Erreur: ${error instanceof Error ? error.message : 'Erreur inconnue'}`)
   }
 }
+
+// Gérer le clic sur un item de la queue
+async function handleQueueItemClick(item: QueueItem) {
+  try {
+    await api.seekQueueIndex(props.rendererId, item.index)
+    console.log('[RendererTabContent] Jumped to queue index:', item.index, item.title)
+  } catch (error) {
+    console.error('[RendererTabContent] Error seeking to queue index:', error)
+    uiStore.notifyError(`Erreur: ${error instanceof Error ? error.message : 'Impossible de sauter à cet item'}`)
+  }
+}
 </script>
 
 <template>
@@ -100,7 +113,7 @@ async function handleDetachPlaylist() {
 
       <!-- Colonne droite: Queue (desktop et landscape uniquement) -->
       <div v-if="!isMobilePortrait" class="queue-column">
-        <QueueViewer :renderer-id="rendererId" class="queue-viewer" />
+        <QueueViewer :renderer-id="rendererId" class="queue-viewer" @click-item="handleQueueItemClick" />
       </div>
 
       <!-- Drawer queue (mobile portrait uniquement) -->
@@ -114,7 +127,7 @@ async function handleDetachPlaylist() {
 
         <!-- Contenu du drawer -->
         <div class="queue-drawer-content">
-          <QueueViewer :renderer-id="rendererId" />
+          <QueueViewer :renderer-id="rendererId" @click-item="handleQueueItemClick" />
         </div>
       </div>
 

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

@@ -147,6 +147,17 @@ class PMOControlAPI {
     })
   }
 
+  /**
+   * Saute à un index spécifique dans la queue
+   * POST /api/control/renderers/{id}/queue/seek
+   */
+  async seekQueueIndex(id: string, index: number): Promise<SuccessResponse> {
+    return this.request<SuccessResponse>(`/renderers/${encodeURIComponent(id)}/queue/seek`, {
+      method: 'POST',
+      body: JSON.stringify({ index }),
+    })
+  }
+
   // ============================================================================
   // CONTRÔLE VOLUME
   // ============================================================================