❌ {{ channelsError }}
@@ -500,24 +652,117 @@
@@ -1951,31 +2025,724 @@ onUnmounted(() => {
flex-wrap: wrap;
}
-.audio-player-container {
- margin: 12px 0 24px;
- padding: 16px;
- border-radius: 8px;
- background: rgba(0, 0, 0, 0.2);
- border: 1px solid #333;
+/* Enhanced Media Player Section */
+.enhanced-player-section {
+ background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
+ border-radius: 12px;
+ padding: 24px;
+ margin: 20px 0 32px;
+ border: 2px solid rgba(0, 212, 255, 0.4);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.player-header {
display: flex;
- gap: 12px;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.player-header h3 {
+ margin: 0;
+ color: #00d4ff;
+ font-size: 1.3rem;
+}
+
+.player-controls-header {
+ display: flex;
+ gap: 10px;
align-items: center;
}
-.audio-error {
- margin: 0;
- color: #ff6b6b;
- flex: 1;
+.btn-refresh-meta {
+ background: rgba(0, 212, 255, 0.15);
+ border: 1px solid rgba(0, 212, 255, 0.4);
+ color: #00d4ff;
+ padding: 8px 12px;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 1.1rem;
+ transition: all 0.2s;
+ min-width: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.btn-refresh-meta:hover:not(:disabled) {
+ background: rgba(0, 212, 255, 0.25);
+ border-color: rgba(0, 212, 255, 0.6);
+}
+
+.btn-refresh-meta:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
}
.btn-stop {
padding: 8px 16px;
- border-radius: 4px;
- border: none;
+ border-radius: 6px;
+ border: 1px solid rgba(231, 76, 60, 0.4);
cursor: pointer;
- background: rgba(231, 76, 60, 0.2);
+ background: rgba(231, 76, 60, 0.15);
color: #e74c3c;
font-weight: bold;
+ transition: all 0.2s;
+}
+
+.btn-stop:hover {
+ background: rgba(231, 76, 60, 0.25);
+ border-color: rgba(231, 76, 60, 0.6);
+}
+
+.audio-error-banner {
+ background: rgba(255, 68, 68, 0.15);
+ border: 1px solid rgba(255, 68, 68, 0.4);
+ color: #ff6b6b;
+ padding: 16px;
+ border-radius: 8px;
+ margin-bottom: 16px;
+ font-weight: 500;
+}
+
+.player-content {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.player-info {
+ display: flex;
+ gap: 24px;
+ align-items: flex-start;
+}
+
+.player-cover {
+ flex-shrink: 0;
+}
+
+.player-cover img {
+ width: 180px;
+ height: 180px;
+ object-fit: cover;
+ border-radius: 12px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
+ border: 2px solid rgba(0, 212, 255, 0.2);
+}
+
+.player-metadata {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 8px;
+ min-width: 0;
+}
+
+.metadata-display {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.player-title {
+ font-size: 1.8rem;
+ font-weight: bold;
+ color: #ffffff;
+ line-height: 1.2;
+ word-wrap: break-word;
+}
+
+.player-artist {
+ font-size: 1.4rem;
+ color: #00d4ff;
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+.player-album {
+ font-size: 1.1rem;
+ color: #9aa0a6;
+ font-style: italic;
+}
+
+.player-year {
+ font-size: 0.95rem;
+ color: #666;
+ background: rgba(255, 255, 255, 0.05);
+ padding: 4px 10px;
+ border-radius: 4px;
+ display: inline-block;
+ align-self: flex-start;
+ margin-top: 4px;
+}
+
+.metadata-loading {
+ color: #9aa0a6;
+ font-size: 1rem;
+ font-style: italic;
+}
+
+.player-audio-controls {
+ width: 100%;
+}
+
+.player-audio-controls audio {
+ width: 100%;
+ border-radius: 8px;
+ background: #0a0a0a;
+ outline: none;
+}
+
+.player-stream-info {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 12px;
+ padding: 16px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 8px;
+ border: 1px solid rgba(0, 212, 255, 0.15);
+}
+
+.stream-info-item {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.info-label {
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: #9aa0a6;
+ font-weight: 600;
+}
+
+.info-value {
+ font-size: 1rem;
+ color: #f5f5f5;
+ font-weight: 500;
+}
+
+/* Stream Controls Section */
+.stream-controls-section {
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.stream-controls-section h3 {
+ margin-top: 0;
+ color: #00d4ff;
+ margin-bottom: 16px;
+}
+
+.stream-controls-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 20px;
+}
+
+.control-group {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.control-group label {
+ font-weight: 600;
+ color: #9aa0a6;
+ font-size: 0.9rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+.format-chips,
+.mode-chips {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+
+.format-chip,
+.mode-chip {
+ padding: 10px 18px;
+ border-radius: 6px;
+ border: 2px solid rgba(0, 212, 255, 0.3);
+ background: rgba(0, 212, 255, 0.08);
+ color: #00d4ff;
+ cursor: pointer;
+ font-weight: 600;
+ transition: all 0.2s;
+ font-size: 0.9rem;
+}
+
+.format-chip:hover,
+.mode-chip:hover {
+ background: rgba(0, 212, 255, 0.15);
+ border-color: rgba(0, 212, 255, 0.5);
+ transform: translateY(-2px);
+}
+
+.format-chip.active,
+.mode-chip.active {
+ background: rgba(0, 212, 255, 0.25);
+ border-color: #00d4ff;
+ box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
+}
+
+.format-description {
+ padding: 8px 12px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 4px;
+ font-size: 0.85rem;
+ color: #9aa0a6;
+ font-style: italic;
+}
+
+.client-id-input {
+ padding: 10px 12px;
+ border-radius: 6px;
+ border: 1px solid #333;
+ background: #0f0f0f;
+ color: #fff;
+ font-family: 'Courier New', monospace;
+ font-size: 0.9rem;
+}
+
+.client-id-input:focus {
+ outline: none;
+ border-color: #00d4ff;
+ box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
+}
+
+/* Stream Diagnostics Section */
+.stream-diagnostics-section {
+ background: #1a1a1a;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ border: 1px solid #333;
+}
+
+.stream-diagnostics-section h3 {
+ margin-top: 0;
+ color: #00d4ff;
+}
+
+/* Stream Metadata Section */
+.stream-metadata-section {
+ background: #1a1a1a;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ border: 1px solid #333;
+}
+
+.stream-metadata-section h3 {
+ margin-top: 0;
+ color: #00d4ff;
+}
+
+.playlist-events-section {
+ background: #141414;
+ border-radius: 8px;
+ padding: 20px;
+ margin: 20px 0;
+ border: 1px solid #333;
+}
+
+.status-chip {
+ padding: 6px 10px;
+ border-radius: 999px;
+ border: 1px solid #555;
+ color: #bbb;
+ font-size: 0.8rem;
+}
+
+.status-chip.connected {
+ border-color: rgba(46, 204, 113, 0.6);
+ color: #2ecc71;
+ background: rgba(46, 204, 113, 0.1);
+}
+
+.events-list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-top: 14px;
+}
+
+.event-item {
+ background: rgba(0, 0, 0, 0.25);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+ padding: 12px;
+}
+
+.event-header {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+
+.event-kind {
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: #00d4ff;
+ font-weight: 700;
+}
+
+.event-time {
+ color: #9aa0a6;
+ font-size: 0.9rem;
+}
+
+.event-source {
+ color: #9aa0a6;
+ font-style: italic;
+ font-size: 0.85rem;
+}
+
+.event-body {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.event-row {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.event-row .label {
+ min-width: 80px;
+}
+
+.metadata-content {
+ margin-top: 12px;
+}
+
+.metadata-json {
+ background: #0f0f0f;
+ border: 1px solid #333;
+ border-radius: 6px;
+ padding: 16px;
+ overflow-x: auto;
+ font-family: 'Courier New', monospace;
+ font-size: 0.85rem;
+ color: #00d4ff;
+ line-height: 1.5;
+ max-height: 400px;
+ overflow-y: auto;
+}
+
+.metadata-json::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+.metadata-json::-webkit-scrollbar-track {
+ background: #1a1a1a;
+ border-radius: 4px;
+}
+
+.metadata-json::-webkit-scrollbar-thumb {
+ background: #333;
+ border-radius: 4px;
+}
+
+.metadata-json::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+/* Quick Test Section */
+.quick-test-section {
+ background: linear-gradient(135deg, #2a1a1a 0%, #1a1a1a 100%);
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px;
+ border: 1px solid rgba(255, 193, 7, 0.3);
+}
+
+.quick-test-section h3 {
+ margin-top: 0;
+ color: #ffc107;
+ margin-bottom: 8px;
+}
+
+.section-description {
+ color: #9aa0a6;
+ font-size: 0.9rem;
+ margin-bottom: 16px;
+}
+
+.test-commands {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.command-group {
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(255, 193, 7, 0.2);
+ border-radius: 6px;
+ padding: 12px;
+}
+
+.command-label {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+}
+
+.command-label strong {
+ color: #ffc107;
+ font-size: 0.9rem;
+}
+
+.btn-copy-small {
+ background: rgba(255, 193, 7, 0.15);
+ border: 1px solid rgba(255, 193, 7, 0.3);
+ color: #ffc107;
+ padding: 4px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.85rem;
+ transition: all 0.2s;
+}
+
+.btn-copy-small:hover {
+ background: rgba(255, 193, 7, 0.25);
+ border-color: rgba(255, 193, 7, 0.5);
+}
+
+.command-text {
+ display: block;
+ background: #0a0a0a;
+ padding: 10px 12px;
+ border-radius: 4px;
+ font-family: 'Courier New', monospace;
+ font-size: 0.85rem;
+ color: #00d4ff;
+ overflow-x: auto;
+ white-space: nowrap;
+ border: 1px solid #222;
+}
+
+.command-text::-webkit-scrollbar {
+ height: 6px;
+}
+
+.command-text::-webkit-scrollbar-track {
+ background: #111;
+ border-radius: 3px;
+}
+
+.command-text::-webkit-scrollbar-thumb {
+ background: #333;
+ border-radius: 3px;
+}
+
+.command-text::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+.diagnostics-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 12px;
+ margin-bottom: 20px;
+}
+
+.diagnostic-card {
+ background: rgba(0, 212, 255, 0.05);
+ border: 1px solid rgba(0, 212, 255, 0.15);
+ border-radius: 6px;
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.diagnostic-label {
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: #9aa0a6;
+ font-weight: 600;
+}
+
+.diagnostic-value {
+ font-size: 1rem;
+ font-weight: 600;
+ color: #f5f5f5;
+}
+
+.diagnostic-value code {
+ background: rgba(0, 0, 0, 0.4);
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-family: 'Courier New', monospace;
+ font-size: 0.85rem;
+ color: #00d4ff;
+ word-break: break-all;
+ display: block;
+ margin-top: 4px;
+}
+
+.stream-urls-list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ background: rgba(0, 0, 0, 0.3);
+ padding: 16px;
+ border-radius: 6px;
+}
+
+.url-item {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 8px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.url-item:last-child {
+ border-bottom: none;
+}
+
+.url-item strong {
+ color: #00d4ff;
+ min-width: 120px;
+}
+
+/* Test Endpoints Section */
+.test-endpoints-section {
+ background: linear-gradient(135deg, #1a2a1a 0%, #1a1a1a 100%);
+ border-radius: 8px;
+ padding: 20px;
+ margin: 30px 0;
+ border: 1px solid rgba(46, 204, 113, 0.3);
+}
+
+.test-endpoints-section h3 {
+ margin-top: 0;
+ color: #2ecc71;
+ margin-bottom: 16px;
+}
+
+.test-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: 20px;
+}
+
+.test-card {
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(46, 204, 113, 0.2);
+ border-radius: 8px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.test-card h4 {
+ margin: 0 0 8px 0;
+ color: #2ecc71;
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+.test-controls {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.test-input {
+ padding: 8px 12px;
+ border-radius: 4px;
+ border: 1px solid #333;
+ background: #111;
+ color: #fff;
+ font-size: 0.9rem;
+}
+
+.test-input:focus {
+ outline: none;
+ border-color: #2ecc71;
+ box-shadow: 0 0 6px rgba(46, 204, 113, 0.2);
+}
+
+.test-result {
+ background: rgba(46, 204, 113, 0.05);
+ border: 1px solid rgba(46, 204, 113, 0.15);
+ border-radius: 6px;
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 4px;
+}
+
+.result-item {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ font-size: 0.9rem;
+}
+
+.result-item strong {
+ color: #2ecc71;
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+}
+
+.text-muted {
+ color: #666;
+ font-style: italic;
+}
+
+.cover-preview {
+ margin-top: 8px;
+ display: flex;
+ justify-content: center;
+}
+
+.cover-preview img {
+ max-width: 100%;
+ max-height: 300px;
+ border-radius: 8px;
+ border: 2px solid rgba(46, 204, 113, 0.3);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.cover-preview-small {
+ margin-top: 8px;
+ display: flex;
+ justify-content: center;
+}
+
+.cover-preview-small img {
+ max-width: 150px;
+ max-height: 150px;
+ border-radius: 6px;
+ border: 2px solid rgba(46, 204, 113, 0.3);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
@@ -2005,5 +2772,61 @@ onUnmounted(() => {
flex-direction: column;
align-items: stretch;
}
+
+ .stream-controls-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .diagnostics-grid {
+ grid-template-columns: 1fr;
+ }
+
+ /* Enhanced Player Responsive */
+ .player-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ }
+
+ .player-controls-header {
+ width: 100%;
+ justify-content: flex-end;
+ }
+
+ .player-info {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .player-cover img {
+ width: 150px;
+ height: 150px;
+ }
+
+ .player-title {
+ font-size: 1.4rem;
+ }
+
+ .player-artist {
+ font-size: 1.1rem;
+ }
+
+ .player-album {
+ font-size: 1rem;
+ }
+
+ .player-stream-info {
+ grid-template-columns: 1fr;
+ }
+
+ /* Test Section Responsive */
+ .test-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .cover-preview img {
+ max-height: 200px;
+ }
}
diff --git a/pmoapp/webapp/src/components/pmocontrol/ActionMenu.vue b/pmoapp/webapp/src/components/pmocontrol/ActionMenu.vue
new file mode 100644
index 00000000..0ffb6cc6
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/ActionMenu.vue
@@ -0,0 +1,251 @@
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/Breadcrumb.vue b/pmoapp/webapp/src/components/pmocontrol/Breadcrumb.vue
new file mode 100644
index 00000000..0011b839
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/Breadcrumb.vue
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/ContainerItem.vue b/pmoapp/webapp/src/components/pmocontrol/ContainerItem.vue
new file mode 100644
index 00000000..51036efe
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/ContainerItem.vue
@@ -0,0 +1,173 @@
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue b/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
new file mode 100644
index 00000000..77e9ef71
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
@@ -0,0 +1,168 @@
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ currentTime }}
+ {{ totalTime }}
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/MediaBrowser.vue b/pmoapp/webapp/src/components/pmocontrol/MediaBrowser.vue
new file mode 100644
index 00000000..10af54c8
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/MediaBrowser.vue
@@ -0,0 +1,331 @@
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/MediaItem.vue b/pmoapp/webapp/src/components/pmocontrol/MediaItem.vue
new file mode 100644
index 00000000..1a309db3
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/MediaItem.vue
@@ -0,0 +1,185 @@
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/MediaServerCard.vue b/pmoapp/webapp/src/components/pmocontrol/MediaServerCard.vue
new file mode 100644
index 00000000..fba4e0bd
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/MediaServerCard.vue
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+
+
+
+
+ {{ statusLabel }}
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/PlaylistBindingPanel.vue b/pmoapp/webapp/src/components/pmocontrol/PlaylistBindingPanel.vue
new file mode 100644
index 00000000..788c399a
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/PlaylistBindingPanel.vue
@@ -0,0 +1,182 @@
+
+
+
+
+
Synchronisation Playlist
+
+
+
+
+
+
+
Attachée à une playlist
+
+ Serveur:
+ {{ binding?.server_id }}
+
+
+ Container:
+ {{ binding?.container_id }}
+
+
+
+
+
+
+
+
+
+
+
+
+
Non attachée
+
+ La file d'attente n'est pas synchronisée avec une playlist.
+
+
+
+
+
+
+ 📌 Playlist Dynamique
+ La queue se synchronisera automatiquement avec la playlist/album du serveur.
+ Les pistes ajoutées ou retirées sur le serveur apparaîtront ici en temps réel.
+
+
+ 💡 Comment activer ?
+ Naviguez vers un serveur de médias, trouvez une playlist/album,
+ et cliquez sur ⋮ puis "Lire maintenant". Le binding se fera automatiquement !
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/QueueItem.vue b/pmoapp/webapp/src/components/pmocontrol/QueueItem.vue
new file mode 100644
index 00000000..8dd7e808
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/QueueItem.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
+
{{ item.index + 1 }}
+
+
+
+
![]()
+
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/QueueViewer.vue b/pmoapp/webapp/src/components/pmocontrol/QueueViewer.vue
new file mode 100644
index 00000000..16c0eb90
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/QueueViewer.vue
@@ -0,0 +1,149 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Aucun élément dans la file d'attente
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/RendererCard.vue b/pmoapp/webapp/src/components/pmocontrol/RendererCard.vue
new file mode 100644
index 00000000..3d411c80
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/RendererCard.vue
@@ -0,0 +1,332 @@
+
+
+
+
+
+
+
+
+
+
+ {{ badge.label }}
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ state.volume }}
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/StatusBadge.vue b/pmoapp/webapp/src/components/pmocontrol/StatusBadge.vue
new file mode 100644
index 00000000..39ecfdb3
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/StatusBadge.vue
@@ -0,0 +1,52 @@
+
+
+
+
+ {{ getStatusLabel(status) }}
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue b/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue
new file mode 100644
index 00000000..1b5c8fd4
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue b/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue
new file mode 100644
index 00000000..572248cd
--- /dev/null
+++ b/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
+
+ {{ localVolume }}
+
+
+
+
diff --git a/pmoapp/webapp/src/composables/useMediaServers.ts b/pmoapp/webapp/src/composables/useMediaServers.ts
new file mode 100644
index 00000000..299b0e68
--- /dev/null
+++ b/pmoapp/webapp/src/composables/useMediaServers.ts
@@ -0,0 +1,183 @@
+/**
+ * Composable pour gérer les media servers
+ * Architecture simple : l'API est la source de vérité, SSE invalide le cache
+ */
+import { ref, computed } from 'vue'
+import { api } from '../services/pmocontrol/api'
+import { sse } from '../services/pmocontrol/sse'
+import type {
+ MediaServerSummary,
+ BrowseResponse
+} from '../services/pmocontrol/types'
+
+export interface BreadcrumbItem {
+ id: string
+ title: string
+}
+
+// Cache global partagé
+const serversCache = ref
>(new Map())
+const browseCache = ref>(new Map())
+const currentPath = ref([])
+
+// Timestamps
+const lastFetch = {
+ servers: 0
+}
+
+const CACHE_DURATION_MS = 2000
+
+// Connecter SSE une seule fois
+let sseConnected = false
+function ensureSSEConnected() {
+ if (sseConnected) return
+
+ sse.onMediaServerEvent((event) => {
+ const serverId = event.server_id
+
+ switch (event.type) {
+ case 'global_updated':
+ // Invalider tout le cache de ce serveur
+ console.log(`[useMediaServers] GlobalUpdated pour ${serverId}`)
+ const keysToDelete: string[] = []
+ browseCache.value.forEach((_, key) => {
+ if (key.startsWith(serverId + '/')) {
+ keysToDelete.push(key)
+ }
+ })
+ keysToDelete.forEach(key => browseCache.value.delete(key))
+ break
+
+ case 'containers_updated':
+ // Invalider les containers spécifiques
+ console.log(`[useMediaServers] ContainersUpdated pour ${serverId}:`, event.container_ids)
+ event.container_ids.forEach(containerId => {
+ const key = `${serverId}/${containerId}`
+ browseCache.value.delete(key)
+ })
+ break
+ }
+ })
+
+ sseConnected = true
+}
+
+/**
+ * Composable principal pour gérer les media servers
+ */
+export function useMediaServers() {
+ ensureSSEConnected()
+
+ const loading = ref(false)
+ const error = ref(null)
+
+ // Getters computed
+ const allServers = computed(() => Array.from(serversCache.value.values()))
+ const onlineServers = computed(() => allServers.value.filter(s => s.online))
+
+ // Fetch servers list
+ async function fetchServers(force = false) {
+ const now = Date.now()
+ if (!force && now - lastFetch.servers < CACHE_DURATION_MS) {
+ return // Cache encore valide
+ }
+
+ try {
+ loading.value = true
+ error.value = null
+ const data = await api.getServers()
+
+ serversCache.value.clear()
+ data.forEach(s => serversCache.value.set(s.id, s))
+ lastFetch.servers = now
+ } catch (e) {
+ error.value = e instanceof Error ? e.message : 'Erreur fetch servers'
+ console.error('[useMediaServers] Erreur fetch:', e)
+ } finally {
+ loading.value = false
+ }
+ }
+
+ // Browse container (avec cache automatique)
+ async function browseContainer(serverId: string, containerId: string, useCache = true) {
+ const key = `${serverId}/${containerId}`
+
+ // Vérifier le cache
+ if (useCache && browseCache.value.has(key)) {
+ return browseCache.value.get(key)!
+ }
+
+ try {
+ loading.value = true
+ error.value = null
+
+ const data = await api.browseContainer(serverId, containerId)
+
+ // Mettre en cache
+ browseCache.value.set(key, data)
+
+ return data
+ } catch (e) {
+ error.value = e instanceof Error ? e.message : 'Erreur browse container'
+ console.error(`[useMediaServers] Erreur browse ${serverId}/${containerId}:`, e)
+ throw e
+ } finally {
+ loading.value = false
+ }
+ }
+
+ // Getters
+ function getServerById(id: string) {
+ return serversCache.value.get(id)
+ }
+
+ function getBrowseCached(serverId: string, containerId: string) {
+ const key = `${serverId}/${containerId}`
+ return browseCache.value.get(key)
+ }
+
+ // Breadcrumb path management
+ function setPath(path: BreadcrumbItem[]) {
+ currentPath.value = path
+ }
+
+ function clearPath() {
+ currentPath.value = []
+ }
+
+ // Invalidation du cache
+ function invalidateCache(serverId: string, containerId?: string) {
+ if (containerId) {
+ // Invalider un container spécifique
+ const key = `${serverId}/${containerId}`
+ browseCache.value.delete(key)
+ } else {
+ // Invalider tous les containers d'un serveur
+ const keysToDelete: string[] = []
+ browseCache.value.forEach((_, key) => {
+ if (key.startsWith(serverId + '/')) {
+ keysToDelete.push(key)
+ }
+ })
+ keysToDelete.forEach(key => browseCache.value.delete(key))
+ }
+ }
+
+ return {
+ // État
+ loading,
+ error,
+ currentPath,
+ // Getters
+ allServers,
+ onlineServers,
+ getServerById,
+ getBrowseCached,
+ // Actions
+ fetchServers,
+ browseContainer,
+ setPath,
+ clearPath,
+ invalidateCache
+ }
+}
diff --git a/pmoapp/webapp/src/composables/useRenderers.ts b/pmoapp/webapp/src/composables/useRenderers.ts
new file mode 100644
index 00000000..ca6e715c
--- /dev/null
+++ b/pmoapp/webapp/src/composables/useRenderers.ts
@@ -0,0 +1,299 @@
+/**
+ * Composable pour gérer les renderers.
+ * Le ControlPoint est la seule source de vérité :
+ * - Les snapshots complets proviennent de /renderers/{id}/full
+ * - Les événements SSE ne servent qu'à déclencher un refetch.
+ */
+import { ref, reactive, computed, type Ref } from 'vue'
+import { api } from '../services/pmocontrol/api'
+import { sse } from '../services/pmocontrol/sse'
+import type {
+ RendererSummary,
+ RendererState,
+ QueueSnapshot,
+ AttachedPlaylistInfo,
+ FullRendererSnapshot,
+} from '../services/pmocontrol/types'
+
+interface RendererSnapshotState {
+ snapshots: Map
+ lastSnapshotAt: Map
+ lastEventAt: Map
+ loadingIds: Set
+ selectedRendererId: string | null
+}
+
+const renderersCache = ref>(new Map())
+const RENDERERS_CACHE_MS = 2000
+const lastRenderersFetch = ref(0)
+
+const snapshotState = reactive({
+ snapshots: reactive(new Map()),
+ lastSnapshotAt: reactive(new Map()),
+ lastEventAt: reactive(new Map()),
+ loadingIds: reactive(new Set()),
+ selectedRendererId: null,
+})
+
+const loading = ref(false)
+const error = ref(null)
+
+let sseConnected = false
+function ensureSSEConnected() {
+ if (sseConnected) return
+
+ sse.onRendererEvent((event) => {
+ const rendererId = event.renderer_id
+ const timestamp = Date.parse(event.timestamp ?? '') || Date.now()
+ snapshotState.lastEventAt.set(rendererId, timestamp)
+ const lastSnapshot = snapshotState.lastSnapshotAt.get(rendererId) ?? 0
+ if (!snapshotState.snapshots.has(rendererId) || timestamp > lastSnapshot) {
+ void fetchRendererSnapshot(rendererId, { force: true })
+ }
+ })
+
+ sseConnected = true
+}
+
+const allRenderers = computed(() => Array.from(renderersCache.value.values()))
+const onlineRenderers = computed(() => allRenderers.value.filter((r) => r.online))
+const allSnapshots = computed(() => Array.from(snapshotState.snapshots.values()))
+const playingRenderers = computed(() =>
+ allSnapshots.value
+ .filter((snapshot) => snapshot.state.transport_state === 'PLAYING')
+ .map((snapshot) => snapshot.state),
+)
+
+function getRendererById(id: string) {
+ return renderersCache.value.get(id)
+}
+
+function getSnapshotById(id: string) {
+ return snapshotState.snapshots.get(id) ?? null
+}
+
+function getStateById(id: string): RendererState | null {
+ return snapshotState.snapshots.get(id)?.state ?? null
+}
+
+function getQueueById(id: string): QueueSnapshot | null {
+ return snapshotState.snapshots.get(id)?.queue ?? null
+}
+
+function getBindingById(id: string): AttachedPlaylistInfo | null {
+ return snapshotState.snapshots.get(id)?.binding ?? null
+}
+
+function isSnapshotLoading(id: string) {
+ return snapshotState.loadingIds.has(id)
+}
+
+function selectRenderer(id: string | null) {
+ snapshotState.selectedRendererId = id
+}
+
+async function fetchRenderers(force = false) {
+ ensureSSEConnected()
+
+ const now = Date.now()
+ if (!force && now - lastRenderersFetch.value < RENDERERS_CACHE_MS) {
+ return
+ }
+
+ try {
+ loading.value = true
+ error.value = null
+ const data = await api.getRenderers()
+ renderersCache.value = new Map(data.map((renderer) => [renderer.id, renderer]))
+ lastRenderersFetch.value = now
+ } catch (err) {
+ error.value = err instanceof Error ? err.message : 'Erreur fetch renderers'
+ console.error('[useRenderers] Erreur fetch:', err)
+ } finally {
+ loading.value = false
+ }
+}
+
+async function fetchRendererSnapshot(rendererId: string, opts?: { force?: boolean }) {
+ ensureSSEConnected()
+ const force = opts?.force ?? false
+ const hasSnapshot = snapshotState.snapshots.has(rendererId)
+
+ if (!force && hasSnapshot) {
+ const lastSnapshot = snapshotState.lastSnapshotAt.get(rendererId) ?? 0
+ const lastEvent = snapshotState.lastEventAt.get(rendererId) ?? 0
+ if (lastEvent <= lastSnapshot) {
+ return
+ }
+ }
+
+ if (snapshotState.loadingIds.has(rendererId)) {
+ return
+ }
+
+ snapshotState.loadingIds.add(rendererId)
+ try {
+ const snapshot = await api.getRendererFullSnapshot(rendererId)
+ snapshotState.snapshots.set(rendererId, snapshot)
+ snapshotState.lastSnapshotAt.set(rendererId, Date.now())
+ } catch (err) {
+ console.error(`[useRenderers] Erreur snapshot ${rendererId}:`, err)
+ } finally {
+ snapshotState.loadingIds.delete(rendererId)
+ }
+}
+
+// Transport controls
+async function play(id: string) {
+ await api.play(id)
+}
+
+async function resumeOrPlayFromQueue(id: string) {
+ const snapshot = snapshotState.snapshots.get(id)
+ if (!snapshot) {
+ throw new Error(`Renderer ${id} non trouvé`)
+ }
+
+ const state = snapshot.state
+ if (state.transport_state === 'PAUSED') {
+ return play(id)
+ }
+
+ if (
+ ['STOPPED', 'NO_MEDIA'].includes(state.transport_state) &&
+ snapshot.queue.items.length > 0
+ ) {
+ return api.resume(id)
+ }
+
+ throw new Error('La file d\'attente est vide. Ajoutez des morceaux avant de démarrer la lecture.')
+}
+
+async function pause(id: string) {
+ await api.pause(id)
+}
+
+async function stop(id: string) {
+ await api.stop(id)
+}
+
+async function next(id: string) {
+ await api.next(id)
+}
+
+// Volume controls
+async function setVolume(id: string, volume: number) {
+ await api.setVolume(id, volume)
+}
+
+async function volumeUp(id: string) {
+ await api.volumeUp(id)
+}
+
+async function volumeDown(id: string) {
+ await api.volumeDown(id)
+}
+
+async function toggleMute(id: string) {
+ await api.toggleMute(id)
+}
+
+// Playlist binding
+async function attachPlaylist(
+ rendererId: string,
+ serverId: string,
+ containerId: string,
+ options?: { autoPlay?: boolean },
+) {
+ await api.attachPlaylist(rendererId, serverId, containerId, options?.autoPlay ?? false)
+}
+
+async function detachPlaylist(rendererId: string) {
+ await api.detachPlaylist(rendererId)
+}
+
+async function attachAndPlayPlaylist(
+ rendererId: string,
+ serverId: string,
+ containerId: string,
+) {
+ await attachPlaylist(rendererId, serverId, containerId, { autoPlay: true })
+}
+
+// Queue content
+async function playContent(rendererId: string, serverId: string, objectId: string) {
+ await api.playContent(rendererId, serverId, objectId)
+}
+
+async function addToQueue(rendererId: string, serverId: string, objectId: string) {
+ await api.addToQueue(rendererId, serverId, objectId)
+}
+
+export function useRenderers() {
+ ensureSSEConnected()
+
+ return {
+ loading,
+ error,
+ // Collections
+ allRenderers,
+ onlineRenderers,
+ playingRenderers,
+ // Accessors
+ getRendererById,
+ getSnapshotById,
+ getStateById,
+ getQueueById,
+ getBindingById,
+ isSnapshotLoading,
+ selectRenderer,
+ snapshotState,
+ // Fetchers
+ fetchRenderers,
+ fetchRendererSnapshot,
+ // Transport controls
+ play,
+ resumeOrPlayFromQueue,
+ pause,
+ stop,
+ next,
+ // Volume controls
+ setVolume,
+ volumeUp,
+ volumeDown,
+ toggleMute,
+ // Playlist binding
+ attachPlaylist,
+ detachPlaylist,
+ attachAndPlayPlaylist,
+ // Queue content
+ playContent,
+ addToQueue,
+ }
+}
+
+export function useRenderer(rendererId: Ref) {
+ ensureSSEConnected()
+
+ const renderer = computed(() => renderersCache.value.get(rendererId.value))
+ const snapshot = computed(() => snapshotState.snapshots.get(rendererId.value) ?? null)
+ const state = computed(() => snapshot.value?.state ?? null)
+ const queue = computed(() => snapshot.value?.queue ?? null)
+ const binding = computed(() => snapshot.value?.binding ?? null)
+
+ async function refresh(force = true) {
+ await Promise.all([
+ fetchRenderers(force),
+ fetchRendererSnapshot(rendererId.value, { force: true }),
+ ])
+ }
+
+ return {
+ renderer,
+ snapshot,
+ state,
+ queue,
+ binding,
+ refresh,
+ }
+}
diff --git a/pmoapp/webapp/src/main.ts b/pmoapp/webapp/src/main.ts
index 0e93bac4..db6a5a4a 100644
--- a/pmoapp/webapp/src/main.ts
+++ b/pmoapp/webapp/src/main.ts
@@ -1,7 +1,44 @@
import { createApp } from "vue";
+import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
-import "./style.css";
+// Service SSE (les composables se connectent automatiquement)
+import { sse } from "./services/pmocontrol/sse";
-createApp(App).use(router).mount("#app");
+// Store UI (garde UIStore pour les notifications et état UI global)
+import { useUIStore } from "./stores/ui";
+
+// Styles
+import "./style.css";
+import "./assets/styles/variables.css";
+import "./assets/styles/pmocontrol.css";
+
+// Créer l'application Vue
+const app = createApp(App);
+
+// Créer et installer Pinia
+const pinia = createPinia();
+app.use(pinia);
+app.use(router);
+
+// Monter l'application
+app.mount("#app");
+
+// Après montage, initialiser SSE
+const uiStore = useUIStore();
+
+// Les composables se connectent automatiquement à SSE
+// Ils gèrent eux-mêmes le re-fetch lors des événements
+
+sse.onConnectionChange((connected) => {
+ uiStore.setSSEConnected(connected);
+ if (connected) {
+ console.log("[App] SSE connecté");
+ }
+});
+
+// Démarrer la connexion SSE
+sse.connect();
+
+console.log("[App] PMOControl initialisé");
diff --git a/pmoapp/webapp/src/router/index.ts b/pmoapp/webapp/src/router/index.ts
index a9bc198f..7502dbd9 100644
--- a/pmoapp/webapp/src/router/index.ts
+++ b/pmoapp/webapp/src/router/index.ts
@@ -1,5 +1,12 @@
import { createRouter, createWebHistory } from "vue-router";
-import HelloWorld from "../components/HelloWorld.vue";
+
+// PMOControl Views (nouvelle home)
+import DashboardView from "../views/DashboardView.vue";
+import RendererView from "../views/RendererView.vue";
+import MediaServerView from "../views/MediaServerView.vue";
+
+// Debug Components (anciennes routes)
+import GenericMusicPlayer from "../components/GenericMusicPlayer.vue";
import LogView from "../components/LogView.vue";
import CoverCacheManager from "../components/CoverCacheManager.vue";
import AudioCacheManager from "../components/AudioCacheManager.vue";
@@ -8,13 +15,59 @@ import APIDashboard from "../components/APIDashboard.vue";
import RadioParadiseExplorer from "../components/RadioParadiseExplorer.vue";
const routes = [
- { path: "/", name: "home", component: HelloWorld },
- { path: "/logs", name: "logs", component: LogView },
- { path: "/covers-cache", name: "covers-cache", component: CoverCacheManager },
- { path: "/audio-cache", name: "audio-cache", component: AudioCacheManager },
- { path: "/upnp", name: "upnp", component: UpnpExplorer },
- { path: "/api-dashboard", name: "api-dashboard", component: APIDashboard },
- { path: "/radio-paradise", name: "radio-paradise", component: RadioParadiseExplorer },
+ // PMOControl (nouvelle home)
+ {
+ path: "/",
+ name: "Dashboard",
+ component: DashboardView,
+ },
+ {
+ path: "/renderer/:id",
+ name: "Renderer",
+ component: RendererView,
+ },
+ {
+ path: "/server/:serverId",
+ name: "MediaServer",
+ component: MediaServerView,
+ },
+
+ // Debug menu (anciennes routes déplacées sous /debug)
+ {
+ path: "/debug/generic-player",
+ name: "GenericPlayer",
+ component: GenericMusicPlayer,
+ },
+ {
+ path: "/debug/logs",
+ name: "Logs",
+ component: LogView,
+ },
+ {
+ path: "/debug/covers-cache",
+ name: "CoversCache",
+ component: CoverCacheManager,
+ },
+ {
+ path: "/debug/audio-cache",
+ name: "AudioCache",
+ component: AudioCacheManager,
+ },
+ {
+ path: "/debug/upnp",
+ name: "UpnpExplorer",
+ component: UpnpExplorer,
+ },
+ {
+ path: "/debug/api-dashboard",
+ name: "APIDashboard",
+ component: APIDashboard,
+ },
+ {
+ path: "/debug/radio-paradise",
+ name: "RadioParadise",
+ component: RadioParadiseExplorer,
+ },
];
const router = createRouter({
diff --git a/pmoapp/webapp/src/services/audioCache.ts b/pmoapp/webapp/src/services/audioCache.ts
index 5f35abba..997dc3bb 100644
--- a/pmoapp/webapp/src/services/audioCache.ts
+++ b/pmoapp/webapp/src/services/audioCache.ts
@@ -19,6 +19,8 @@ export interface AudioCacheMetadata {
bitrate?: number;
channels?: number;
conversion?: ConversionInfo;
+ cover_pk?: string;
+ cover_url?: string;
[key: string]: unknown;
}
@@ -228,3 +230,26 @@ export function formatSampleRate(sampleRate?: number): string {
if (!sampleRate) return "Unknown";
return `${(sampleRate / 1000).toFixed(1)} kHz`;
}
+
+/**
+ * Génère l'URL de la cover d'une piste
+ * Priorité : cover_pk (cache) > cover_url (externe) > undefined
+ */
+export function getCoverUrl(metadata?: AudioCacheMetadata | null, size?: number): string | undefined {
+ if (!metadata) return undefined;
+
+ // Priorité 1 : cover en cache via cover_pk
+ if (metadata.cover_pk) {
+ if (size) {
+ return `/covers/image/${metadata.cover_pk}/${size}`;
+ }
+ return `/covers/image/${metadata.cover_pk}`;
+ }
+
+ // Priorité 2 : cover externe via cover_url
+ if (metadata.cover_url) {
+ return metadata.cover_url;
+ }
+
+ return undefined;
+}
diff --git a/pmoapp/webapp/src/services/coverCache.ts b/pmoapp/webapp/src/services/coverCache.ts
index 3605232d..bc391a62 100644
--- a/pmoapp/webapp/src/services/coverCache.ts
+++ b/pmoapp/webapp/src/services/coverCache.ts
@@ -192,3 +192,42 @@ export function getImageUrl(pk: string, size?: number): string {
}
return `/covers/image/${pk}`;
}
+
+export function getJpegUrl(pk: string, size?: number): string {
+ if (size) {
+ return `/covers/jpeg/${pk}/${size}`;
+ }
+ return `/covers/jpeg/${pk}`;
+}
+
+/**
+ * SVG par défaut pour les images qui ne se chargent pas
+ */
+const DEFAULT_COVER_SVG = ``;
+
+/**
+ * Retourne l'URL de l'image par défaut comme data URL
+ */
+export function getDefaultImageUrl(): string {
+ return `data:image/svg+xml;utf8,${encodeURIComponent(DEFAULT_COVER_SVG)}`;
+}
diff --git a/pmoapp/webapp/src/services/openhomePlaylist.ts b/pmoapp/webapp/src/services/openhomePlaylist.ts
new file mode 100644
index 00000000..892fccd4
--- /dev/null
+++ b/pmoapp/webapp/src/services/openhomePlaylist.ts
@@ -0,0 +1,55 @@
+import type {
+ OpenHomePlaylistAddRequest,
+ OpenHomePlaylistSnapshot,
+} from '@/services/pmocontrol/types'
+
+const API_BASE = '/api/control'
+
+export async function getOpenHomePlaylist(rendererId: string): Promise {
+ const resp = await fetch(
+ `${API_BASE}/renderers/${encodeURIComponent(rendererId)}/oh/playlist`,
+ )
+ if (!resp.ok) {
+ throw new Error(`Failed to fetch OpenHome playlist: ${resp.status} ${resp.statusText}`)
+ }
+ return resp.json()
+}
+
+export async function clearOpenHomePlaylist(rendererId: string): Promise {
+ const resp = await fetch(
+ `${API_BASE}/renderers/${encodeURIComponent(rendererId)}/oh/playlist/clear`,
+ { method: 'POST' },
+ )
+ if (!resp.ok) {
+ throw new Error(`Failed to clear OpenHome playlist: ${resp.status} ${resp.statusText}`)
+ }
+}
+
+export async function addOpenHomeTrack(
+ rendererId: string,
+ payload: OpenHomePlaylistAddRequest,
+): Promise {
+ const resp = await fetch(
+ `${API_BASE}/renderers/${encodeURIComponent(rendererId)}/oh/playlist/add`,
+ {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload),
+ },
+ )
+ if (!resp.ok) {
+ throw new Error(`Failed to add track to OpenHome playlist: ${resp.status} ${resp.statusText}`)
+ }
+}
+
+export async function playOpenHomeTrack(rendererId: string, trackId: number): Promise {
+ const resp = await fetch(
+ `${API_BASE}/renderers/${encodeURIComponent(
+ rendererId,
+ )}/oh/playlist/play/${encodeURIComponent(trackId.toString())}`,
+ { method: 'POST' },
+ )
+ if (!resp.ok) {
+ throw new Error(`Failed to play OpenHome track ${trackId}: ${resp.status} ${resp.statusText}`)
+ }
+}
diff --git a/pmoapp/webapp/src/services/pmocontrol/api.ts b/pmoapp/webapp/src/services/pmocontrol/api.ts
new file mode 100644
index 00000000..7468126a
--- /dev/null
+++ b/pmoapp/webapp/src/services/pmocontrol/api.ts
@@ -0,0 +1,291 @@
+// Client API REST pour PMOControl
+// Communique avec /api/control/*
+
+import type {
+ RendererSummary,
+ RendererState,
+ FullRendererSnapshot,
+ QueueSnapshot,
+ AttachedPlaylistInfo,
+ MediaServerSummary,
+ BrowseResponse,
+ VolumeSetRequest,
+ AttachPlaylistRequest,
+ PlayContentRequest,
+ SuccessResponse,
+ ErrorResponse
+} from './types'
+
+/**
+ * Client API REST pour le Control Point PMOMusic
+ */
+class PMOControlAPI {
+ private readonly baseURL = '/api/control'
+
+ /**
+ * Effectue une requête HTTP générique
+ */
+ private async request(
+ path: string,
+ options: RequestInit = {}
+ ): Promise {
+ const url = `${this.baseURL}${path}`
+
+ const response = await fetch(url, {
+ ...options,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options.headers,
+ },
+ })
+
+ if (!response.ok) {
+ const error: ErrorResponse = await response.json().catch(() => ({
+ error: `HTTP ${response.status}: ${response.statusText}`,
+ }))
+ throw new Error(error.error)
+ }
+
+ return response.json()
+ }
+
+ // ============================================================================
+ // RENDERERS
+ // ============================================================================
+
+ /**
+ * Liste tous les renderers découverts
+ * GET /api/control/renderers
+ */
+ async getRenderers(): Promise {
+ return this.request('/renderers')
+ }
+
+ /**
+ * Récupère l'état détaillé d'un renderer
+ * GET /api/control/renderers/{id}
+ */
+ async getRendererState(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}`)
+ }
+
+ /**
+ * Récupère le snapshot complet d'un renderer
+ * GET /api/control/renderers/{id}/full
+ */
+ async getRendererFullSnapshot(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/full`)
+ }
+
+ /**
+ * Récupère la queue d'un renderer (avec current_index)
+ * GET /api/control/renderers/{id}/queue
+ */
+ async getQueue(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/queue`)
+ }
+
+ /**
+ * Récupère le binding playlist d'un renderer
+ * GET /api/control/renderers/{id}/binding
+ */
+ async getBinding(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/binding`)
+ }
+
+ // ============================================================================
+ // CONTRÔLE TRANSPORT
+ // ============================================================================
+
+ /**
+ * Démarre la lecture sur un renderer
+ * POST /api/control/renderers/{id}/play
+ */
+ async play(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/play`, {
+ method: 'POST',
+ })
+ }
+
+ /**
+ * Met en pause la lecture sur un renderer
+ * POST /api/control/renderers/{id}/pause
+ */
+ async pause(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/pause`, {
+ method: 'POST',
+ })
+ }
+
+ /**
+ * Arrête la lecture sur un renderer
+ * POST /api/control/renderers/{id}/stop
+ */
+ async stop(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/stop`, {
+ method: 'POST',
+ })
+ }
+
+ /**
+ * Reprend la lecture depuis le morceau actuel de la queue
+ * POST /api/control/renderers/{id}/resume
+ */
+ async resume(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/resume`, {
+ method: 'POST',
+ })
+ }
+
+ /**
+ * Passe au morceau suivant dans la queue
+ * POST /api/control/renderers/{id}/next
+ */
+ async next(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/next`, {
+ method: 'POST',
+ })
+ }
+
+ // ============================================================================
+ // CONTRÔLE VOLUME
+ // ============================================================================
+
+ /**
+ * Définit le volume d'un renderer (0-100)
+ * POST /api/control/renderers/{id}/volume/set
+ */
+ async setVolume(id: string, volume: number): Promise {
+ const payload: VolumeSetRequest = { volume }
+ return this.request(`/renderers/${encodeURIComponent(id)}/volume/set`, {
+ method: 'POST',
+ body: JSON.stringify(payload),
+ })
+ }
+
+ /**
+ * Augmente le volume de 5%
+ * POST /api/control/renderers/{id}/volume/up
+ */
+ async volumeUp(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/volume/up`, {
+ method: 'POST',
+ })
+ }
+
+ /**
+ * Diminue le volume de 5%
+ * POST /api/control/renderers/{id}/volume/down
+ */
+ async volumeDown(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/volume/down`, {
+ method: 'POST',
+ })
+ }
+
+ /**
+ * Bascule le mute d'un renderer
+ * POST /api/control/renderers/{id}/mute/toggle
+ */
+ async toggleMute(id: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(id)}/mute/toggle`, {
+ method: 'POST',
+ })
+ }
+
+ // ============================================================================
+ // PLAYLIST BINDING
+ // ============================================================================
+
+ /**
+ * Attache la queue d'un renderer à une playlist d'un serveur
+ * POST /api/control/renderers/{id}/binding/attach
+ */
+ async attachPlaylist(
+ rendererId: string,
+ serverId: string,
+ containerId: string,
+ autoPlay = false
+ ): Promise {
+ const payload: AttachPlaylistRequest = {
+ server_id: serverId,
+ container_id: containerId,
+ auto_play: autoPlay,
+ }
+ return this.request(`/renderers/${encodeURIComponent(rendererId)}/binding/attach`, {
+ method: 'POST',
+ body: JSON.stringify(payload),
+ })
+ }
+
+ /**
+ * Détache la queue d'un renderer de sa playlist
+ * POST /api/control/renderers/{id}/binding/detach
+ */
+ async detachPlaylist(rendererId: string): Promise {
+ return this.request(`/renderers/${encodeURIComponent(rendererId)}/binding/detach`, {
+ method: 'POST',
+ })
+ }
+
+ // ============================================================================
+ // QUEUE CONTENT
+ // ============================================================================
+
+ /**
+ * Lire du contenu immédiatement (clear queue + enqueue + play)
+ * POST /api/control/renderers/{id}/queue/play
+ */
+ async playContent(
+ rendererId: string,
+ serverId: string,
+ objectId: string
+ ): Promise {
+ const payload: PlayContentRequest = { server_id: serverId, object_id: objectId }
+ return this.request(`/renderers/${encodeURIComponent(rendererId)}/queue/play`, {
+ method: 'POST',
+ body: JSON.stringify(payload),
+ })
+ }
+
+ /**
+ * Ajouter du contenu à la queue (sans démarrer la lecture)
+ * POST /api/control/renderers/{id}/queue/add
+ */
+ async addToQueue(
+ rendererId: string,
+ serverId: string,
+ objectId: string
+ ): Promise {
+ const payload: PlayContentRequest = { server_id: serverId, object_id: objectId }
+ return this.request(`/renderers/${encodeURIComponent(rendererId)}/queue/add`, {
+ method: 'POST',
+ body: JSON.stringify(payload),
+ })
+ }
+
+ // ============================================================================
+ // MEDIA SERVERS
+ // ============================================================================
+
+ /**
+ * Liste tous les serveurs de médias découverts
+ * GET /api/control/servers
+ */
+ async getServers(): Promise {
+ return this.request('/servers')
+ }
+
+ /**
+ * Browse le contenu d'un container sur un serveur
+ * GET /api/control/servers/{serverId}/containers/{containerId}
+ */
+ async browseContainer(serverId: string, containerId: string): Promise {
+ return this.request(
+ `/servers/${encodeURIComponent(serverId)}/containers/${encodeURIComponent(containerId)}`
+ )
+ }
+}
+
+// Export singleton
+export const api = new PMOControlAPI()
diff --git a/pmoapp/webapp/src/services/pmocontrol/sse.ts b/pmoapp/webapp/src/services/pmocontrol/sse.ts
new file mode 100644
index 00000000..ae2cbdc4
--- /dev/null
+++ b/pmoapp/webapp/src/services/pmocontrol/sse.ts
@@ -0,0 +1,208 @@
+// Service SSE (Server-Sent Events) pour PMOControl
+// Gère la connexion temps réel à /api/control/events
+
+import type { RendererEventPayload, MediaServerEventPayload, UnifiedEventPayload } from './types'
+
+type RendererEventCallback = (event: RendererEventPayload) => void
+type MediaServerEventCallback = (event: MediaServerEventPayload) => void
+type ConnectionCallback = (connected: boolean) => void
+
+/**
+ * Service SSE pour recevoir les événements du Control Point en temps réel
+ */
+export class PMOControlSSE {
+ private eventSource: EventSource | null = null
+ private reconnectAttempts = 0
+ private maxReconnectDelay = 30000 // 30 secondes max
+ private reconnectTimer: number | null = null
+
+ private rendererCallbacks: Set = new Set()
+ private serverCallbacks: Set = new Set()
+ private connectionCallbacks: Set = new Set()
+
+ private isConnected = false
+
+ /**
+ * Connecte au flux SSE
+ */
+ connect(): void {
+ if (this.eventSource) {
+ console.warn('[SSE] Connexion déjà active')
+ return
+ }
+
+ console.log('[SSE] Connexion à /api/control/events...')
+
+ try {
+ this.eventSource = new EventSource('/api/control/events')
+
+ this.eventSource.onopen = () => {
+ console.log('[SSE] Connexion établie')
+ this.reconnectAttempts = 0
+ this.isConnected = true
+ this.notifyConnectionCallbacks(true)
+ }
+
+ this.eventSource.addEventListener('control', (e: MessageEvent) => {
+ try {
+ const event: UnifiedEventPayload = JSON.parse(e.data)
+ this.handleEvent(event)
+ } catch (error) {
+ console.error('[SSE] Erreur parsing événement:', error)
+ }
+ })
+
+ this.eventSource.onerror = () => {
+ console.error('[SSE] Erreur de connexion')
+ this.isConnected = false
+ this.notifyConnectionCallbacks(false)
+ this.disconnect()
+ this.scheduleReconnect()
+ }
+ } catch (error) {
+ console.error('[SSE] Erreur création EventSource:', error)
+ this.scheduleReconnect()
+ }
+ }
+
+ /**
+ * Déconnecte du flux SSE
+ */
+ disconnect(): void {
+ if (this.reconnectTimer !== null) {
+ clearTimeout(this.reconnectTimer)
+ this.reconnectTimer = null
+ }
+
+ if (this.eventSource) {
+ console.log('[SSE] Déconnexion')
+ this.eventSource.close()
+ this.eventSource = null
+ this.isConnected = false
+ this.notifyConnectionCallbacks(false)
+ }
+ }
+
+ /**
+ * Programme une reconnexion avec backoff exponentiel
+ */
+ private scheduleReconnect(): void {
+ if (this.reconnectTimer !== null) {
+ return
+ }
+
+ this.reconnectAttempts++
+
+ // Backoff exponentiel: 1s, 2s, 4s, 8s, 16s, 30s (max)
+ const delay = Math.min(
+ 1000 * Math.pow(2, this.reconnectAttempts - 1),
+ this.maxReconnectDelay
+ )
+
+ console.log(`[SSE] Reconnexion dans ${delay / 1000}s (tentative ${this.reconnectAttempts})`)
+
+ this.reconnectTimer = window.setTimeout(() => {
+ this.reconnectTimer = null
+ this.connect()
+ }, delay)
+ }
+
+ /**
+ * Dispatch un événement aux callbacks appropriés
+ */
+ private handleEvent(event: UnifiedEventPayload): void {
+ if (event.category === 'renderer') {
+ // Extraire le payload renderer (sans le champ category)
+ const { category, ...rendererEvent } = event
+ this.notifyRendererCallbacks(rendererEvent as RendererEventPayload)
+ } else if (event.category === 'media_server') {
+ // Extraire le payload server (sans le champ category)
+ const { category, ...serverEvent } = event
+ this.notifyServerCallbacks(serverEvent as MediaServerEventPayload)
+ }
+ }
+
+ /**
+ * Enregistre un callback pour les événements renderer
+ */
+ onRendererEvent(callback: RendererEventCallback): () => void {
+ this.rendererCallbacks.add(callback)
+ // Retourne une fonction de cleanup
+ return () => {
+ this.rendererCallbacks.delete(callback)
+ }
+ }
+
+ /**
+ * Enregistre un callback pour les événements media server
+ */
+ onMediaServerEvent(callback: MediaServerEventCallback): () => void {
+ this.serverCallbacks.add(callback)
+ // Retourne une fonction de cleanup
+ return () => {
+ this.serverCallbacks.delete(callback)
+ }
+ }
+
+ /**
+ * Enregistre un callback pour les changements de connexion
+ */
+ onConnectionChange(callback: ConnectionCallback): () => void {
+ this.connectionCallbacks.add(callback)
+ // Appeler immédiatement avec l'état actuel
+ callback(this.isConnected)
+ // Retourne une fonction de cleanup
+ return () => {
+ this.connectionCallbacks.delete(callback)
+ }
+ }
+
+ /**
+ * Notifie tous les callbacks renderer
+ */
+ private notifyRendererCallbacks(event: RendererEventPayload): void {
+ this.rendererCallbacks.forEach(callback => {
+ try {
+ callback(event)
+ } catch (error) {
+ console.error('[SSE] Erreur dans callback renderer:', error)
+ }
+ })
+ }
+
+ /**
+ * Notifie tous les callbacks server
+ */
+ private notifyServerCallbacks(event: MediaServerEventPayload): void {
+ this.serverCallbacks.forEach(callback => {
+ try {
+ callback(event)
+ } catch (error) {
+ console.error('[SSE] Erreur dans callback server:', error)
+ }
+ })
+ }
+
+ /**
+ * Notifie tous les callbacks de connexion
+ */
+ private notifyConnectionCallbacks(connected: boolean): void {
+ this.connectionCallbacks.forEach(callback => {
+ try {
+ callback(connected)
+ } catch (error) {
+ console.error('[SSE] Erreur dans callback connexion:', error)
+ }
+ })
+ }
+
+ /**
+ * Retourne l'état de connexion actuel
+ */
+ isConnectedState(): boolean {
+ return this.isConnected
+ }
+}
+
+// Export singleton
+export const sse = new PMOControlSSE()
diff --git a/pmoapp/webapp/src/services/pmocontrol/types.ts b/pmoapp/webapp/src/services/pmocontrol/types.ts
new file mode 100644
index 00000000..39fbcd02
--- /dev/null
+++ b/pmoapp/webapp/src/services/pmocontrol/types.ts
@@ -0,0 +1,203 @@
+// Types TypeScript pour l'API PMOControl
+// Synchronisés avec pmocontrol/src/openapi.rs
+
+// ============================================================================
+// RENDERERS
+// ============================================================================
+
+export type RendererProtocolSummary = 'upnp' | 'openhome' | 'hybrid'
+
+export interface RendererCapabilitiesSummary {
+ has_avtransport: boolean
+ has_avtransport_set_next: boolean
+ has_rendering_control: boolean
+ has_connection_manager: boolean
+ has_linkplay_http: boolean
+ has_arylic_tcp: boolean
+ has_oh_playlist: boolean
+ has_oh_volume: boolean
+ has_oh_info: boolean
+ has_oh_time: boolean
+ has_oh_radio: boolean
+}
+
+export interface RendererSummary {
+ id: string
+ friendly_name: string
+ model_name: string
+ protocol: RendererProtocolSummary
+ capabilities: RendererCapabilitiesSummary
+ online: boolean
+}
+
+export interface RendererState {
+ id: string
+ friendly_name: string
+ transport_state: 'PLAYING' | 'PAUSED' | 'STOPPED' | 'TRANSITIONING' | 'NO_MEDIA' | 'UNKNOWN'
+ position_ms: number | null
+ duration_ms: number | null
+ volume: number | null // 0-100
+ 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 {
+ server_id: string
+ container_id: string
+ has_seen_update: boolean
+}
+
+// ============================================================================
+// QUEUE (avec current_index)
+// ============================================================================
+
+export interface QueueItem {
+ index: number // 0-based
+ uri: string
+ title: string | null
+ artist: string | null
+ album: string | null
+ album_art_uri: string | null
+ server_id: string | null
+ object_id: string | null
+}
+
+export interface QueueSnapshot {
+ renderer_id: string
+ items: QueueItem[]
+ current_index: number | null // Index de la piste en cours (null si rien en lecture)
+}
+
+export interface FullRendererSnapshot {
+ state: RendererState
+ queue: QueueSnapshot
+ binding: AttachedPlaylistInfo | null
+}
+
+// ============================================================================
+// OPENHOME PLAYLIST
+// ============================================================================
+
+export interface OpenHomePlaylistTrack {
+ id: number
+ uri: string
+ title: string | null
+ artist: string | null
+ album: string | null
+ album_art_uri: string | null
+}
+
+export interface OpenHomePlaylistSnapshot {
+ renderer_id: string
+ current_id: number | null
+ tracks: OpenHomePlaylistTrack[]
+}
+
+export interface OpenHomePlaylistAddRequest {
+ uri: string
+ metadata: string
+ after_id?: number | null
+ play?: boolean
+}
+
+// ============================================================================
+// MEDIA SERVERS
+// ============================================================================
+
+export interface MediaServerSummary {
+ id: string
+ friendly_name: string
+ model_name: string
+ online: boolean
+}
+
+export interface ContainerEntry {
+ id: string
+ title: string
+ class: string // UPnP class
+ is_container: boolean
+ child_count: number | null
+ artist: string | null
+ album: string | null
+ album_art_uri: string | null // ⚠️ Nom exact: album_art_uri
+}
+
+export interface BrowseResponse {
+ container_id: string
+ entries: ContainerEntry[]
+}
+
+// ============================================================================
+// COMMANDES
+// ============================================================================
+
+export interface VolumeSetRequest {
+ volume: number // 0-100
+}
+
+export interface AttachPlaylistRequest {
+ server_id: string
+ container_id: string
+ auto_play?: boolean
+}
+
+export interface PlayContentRequest {
+ server_id: string
+ object_id: string
+}
+
+export interface SuccessResponse {
+ message: string
+}
+
+export interface ErrorResponse {
+ error: string
+}
+
+// ============================================================================
+// ÉVÉNEMENTS SSE
+// ============================================================================
+
+export type RendererEventPayload =
+ | { type: 'state_changed'; renderer_id: string; state: string; timestamp: string }
+ | { type: 'position_changed'; renderer_id: string; track: number | null; rel_time: string | null; track_duration: string | null; timestamp: string }
+ | { type: 'volume_changed'; renderer_id: string; volume: number; timestamp: string }
+ | { type: 'mute_changed'; renderer_id: string; mute: boolean; timestamp: string }
+ | { type: 'metadata_changed'; renderer_id: string; title: string | null; artist: string | null; album: string | null; album_art_uri: string | null; timestamp: string }
+ | { type: 'queue_updated'; renderer_id: string; queue_length: number; timestamp: string }
+ | { type: 'binding_changed'; renderer_id: string; server_id: string | null; container_id: string | null; timestamp: string }
+
+export type MediaServerEventPayload =
+ | { type: 'global_updated'; server_id: string; system_update_id: number | null; timestamp: string }
+ | { type: 'containers_updated'; server_id: string; container_ids: string[]; timestamp: string }
+
+export type UnifiedEventPayload =
+ | { category: 'renderer' } & RendererEventPayload
+ | { category: 'media_server' } & MediaServerEventPayload
+
+// ============================================================================
+// MÉTADONNÉES PISTE
+// ============================================================================
+
+export interface TrackMetadata {
+ title: string | null
+ artist: string | null
+ album: string | null
+ album_art_uri: string | null
+ duration_ms: number | null
+}
+
+export interface PositionInfo {
+ track: number | null
+ rel_time: string | null // Format HH:MM:SS
+ track_duration: string | null // Format HH:MM:SS
+}
diff --git a/pmoapp/webapp/src/services/pmosource.ts b/pmoapp/webapp/src/services/pmosource.ts
new file mode 100644
index 00000000..71931968
--- /dev/null
+++ b/pmoapp/webapp/src/services/pmosource.ts
@@ -0,0 +1,200 @@
+/**
+ * Service pour interagir avec l'API pmosource générique
+ *
+ * Ce service utilise uniquement l'API REST définie dans pmosource::api
+ * et ne dépend d'aucune implémentation spécifique (comme pmoparadise)
+ */
+
+const API_BASE = '/api/sources'
+
+// Types correspondant aux structures de l'API pmosource
+
+export interface SourceInfo {
+ id: string
+ name: string
+ supports_fifo: boolean
+ capabilities: SourceCapabilities
+}
+
+export interface SourceCapabilities {
+ supports_search: boolean
+ supports_favorites: boolean
+ supports_playlists: boolean
+ supports_user_content: boolean
+ supports_high_res_audio: boolean
+ max_sample_rate: number | null
+ supports_multiple_formats: boolean
+ supports_advanced_search: boolean
+ supports_pagination: boolean
+}
+
+export interface SourcesList {
+ count: number
+ sources: SourceInfo[]
+}
+
+export interface BrowseContainer {
+ id: string
+ parent_id: string
+ title: string
+ class: string
+ child_count: string | null
+ restricted: string | null
+}
+
+export interface BrowseItemResource {
+ url: string
+ protocol_info: string
+ duration: string | null
+}
+
+export interface BrowseItem {
+ id: string
+ parent_id: string
+ title: string
+ class: string
+ artist: string | null
+ album: string | null
+ creator: string | null
+ album_art: string | null
+ resources: BrowseItemResource[]
+}
+
+export interface BrowseResponse {
+ object_id: string
+ containers: BrowseContainer[]
+ items: BrowseItem[]
+ returned_containers: number
+ returned_items: number
+ total: number
+ update_id: number
+}
+
+export interface ResolveUriResponse {
+ object_id: string
+ uri: string
+}
+
+export interface SourceRootContainer {
+ id: string
+ parent_id: string
+ title: string
+ class: string
+ child_count: string | null
+ searchable: string | null
+}
+
+/**
+ * Liste toutes les sources musicales enregistrées
+ */
+export async function listSources(): Promise {
+ const response = await fetch(`${API_BASE}`)
+ if (!response.ok) {
+ throw new Error(`Failed to list sources: ${response.status} ${response.statusText}`)
+ }
+ return response.json()
+}
+
+/**
+ * Récupère les informations d'une source spécifique
+ */
+export async function getSource(sourceId: string): Promise {
+ const response = await fetch(`${API_BASE}/${sourceId}`)
+ if (!response.ok) {
+ throw new Error(`Failed to get source: ${response.status} ${response.statusText}`)
+ }
+ return response.json()
+}
+
+/**
+ * Récupère le container racine d'une source
+ */
+export async function getSourceRoot(sourceId: string): Promise {
+ const response = await fetch(`${API_BASE}/${sourceId}/root`)
+ if (!response.ok) {
+ throw new Error(`Failed to get source root: ${response.status} ${response.statusText}`)
+ }
+ return response.json()
+}
+
+/**
+ * Parcourt un container d'une source
+ *
+ * @param sourceId - ID de la source
+ * @param objectId - ID de l'objet à parcourir (optionnel, par défaut utilise la racine)
+ * @param startingIndex - Index de départ pour la pagination
+ * @param requestedCount - Nombre d'éléments demandés
+ */
+export async function browseSource(
+ sourceId: string,
+ objectId?: string,
+ startingIndex?: number,
+ requestedCount?: number
+): Promise {
+ const params = new URLSearchParams()
+ if (objectId) params.set('object_id', objectId)
+ if (startingIndex !== undefined) params.set('starting_index', startingIndex.toString())
+ if (requestedCount !== undefined) params.set('requested_count', requestedCount.toString())
+
+ const url = `${API_BASE}/${sourceId}/browse?${params.toString()}`
+ const response = await fetch(url)
+ if (!response.ok) {
+ throw new Error(`Failed to browse source: ${response.status} ${response.statusText}`)
+ }
+ return response.json()
+}
+
+/**
+ * Résout l'URI réelle d'un objet (pour le streaming)
+ *
+ * @param sourceId - ID de la source
+ * @param objectId - ID de l'objet à résoudre
+ */
+export async function resolveUri(sourceId: string, objectId: string): Promise {
+ const params = new URLSearchParams({ object_id: objectId })
+ const url = `${API_BASE}/${sourceId}/resolve?${params.toString()}`
+
+ const response = await fetch(url)
+ if (!response.ok) {
+ throw new Error(`Failed to resolve URI: ${response.status} ${response.statusText}`)
+ }
+ return response.json()
+}
+
+/**
+ * Récupère l'URL de l'image par défaut d'une source
+ *
+ * @param sourceId - ID de la source
+ * @returns L'URL de l'image
+ */
+export function getSourceImageUrl(sourceId: string): string {
+ return `${API_BASE}/${sourceId}/image`
+}
+
+/**
+ * Récupère les capacités d'une source
+ */
+export async function getSourceCapabilities(sourceId: string): Promise {
+ const response = await fetch(`${API_BASE}/${sourceId}/capabilities`)
+ if (!response.ok) {
+ throw new Error(`Failed to get source capabilities: ${response.status} ${response.statusText}`)
+ }
+ return response.json()
+}
+
+/**
+ * Récupère les métadonnées détaillées d'un item spécifique
+ *
+ * @param sourceId - ID de la source
+ * @param objectId - ID de l'item à récupérer
+ */
+export async function getItem(sourceId: string, objectId: string): Promise {
+ const params = new URLSearchParams({ object_id: objectId })
+ const url = `${API_BASE}/${sourceId}/item?${params.toString()}`
+
+ const response = await fetch(url)
+ if (!response.ok) {
+ throw new Error(`Failed to get item: ${response.status} ${response.statusText}`)
+ }
+ return response.json()
+}
diff --git a/pmoapp/webapp/src/services/radioParadise.ts b/pmoapp/webapp/src/services/radioParadise.ts
new file mode 100644
index 00000000..556e9d5a
--- /dev/null
+++ b/pmoapp/webapp/src/services/radioParadise.ts
@@ -0,0 +1,233 @@
+/**
+ * Service API pour interagir avec Radio Paradise
+ */
+
+export interface ChannelInfo {
+ id: number;
+ name: string;
+ description: string;
+}
+
+export interface SongInfo {
+ index: number;
+ artist: string;
+ title: string;
+ album: string;
+ year?: number;
+ elapsed_ms: number;
+ duration_ms: number;
+ cover_url?: string;
+ rating?: number;
+}
+
+export interface BlockResponse {
+ event: number;
+ end_event: number;
+ url: string;
+ length_ms: number;
+ songs: SongInfo[];
+}
+
+export interface NowPlayingResponse {
+ event: number;
+ end_event: number;
+ stream_url: string;
+ block_length_ms: number;
+ current_song_index?: number;
+ current_song?: SongInfo;
+ songs: SongInfo[];
+}
+
+export interface StreamUrlResponse {
+ event: number;
+ stream_url: string;
+ length_ms: number;
+}
+
+export interface CoverUrlResponse {
+ event: number;
+ song_index: number;
+ cover_url?: string;
+ cover_type: string;
+}
+
+export interface ApiError {
+ error: string;
+ message: string;
+}
+
+/**
+ * Liste tous les canaux disponibles
+ */
+export async function listChannels(): Promise {
+ const response = await fetch("/api/radioparadise/channels");
+ if (!response.ok) {
+ throw new Error("Failed to fetch channels");
+ }
+ return response.json();
+}
+
+/**
+ * Récupère le morceau en cours de lecture
+ */
+export async function getNowPlaying(channel?: number): Promise {
+ const url = channel !== undefined
+ ? `/api/radioparadise/now-playing?channel=${channel}`
+ : "/api/radioparadise/now-playing";
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ const error: ApiError = await response.json();
+ throw new Error(error.message || "Failed to fetch now playing");
+ }
+ return response.json();
+}
+
+/**
+ * Récupère le block actuel
+ */
+export async function getCurrentBlock(channel?: number): Promise {
+ const url = channel !== undefined
+ ? `/api/radioparadise/block/current?channel=${channel}`
+ : "/api/radioparadise/block/current";
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ const error: ApiError = await response.json();
+ throw new Error(error.message || "Failed to fetch current block");
+ }
+ return response.json();
+}
+
+/**
+ * Récupère un block spécifique par son event ID
+ */
+export async function getBlockById(eventId: number, channel?: number): Promise {
+ const url = channel !== undefined
+ ? `/api/radioparadise/block/${eventId}?channel=${channel}`
+ : `/api/radioparadise/block/${eventId}`;
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ const error: ApiError = await response.json();
+ throw new Error(error.message || "Failed to fetch block");
+ }
+ return response.json();
+}
+
+/**
+ * Récupère un morceau spécifique d'un block
+ */
+export async function getSongByIndex(
+ eventId: number,
+ index: number,
+ channel?: number
+): Promise {
+ const url = channel !== undefined
+ ? `/api/radioparadise/block/${eventId}/song/${index}?channel=${channel}`
+ : `/api/radioparadise/block/${eventId}/song/${index}`;
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ const error: ApiError = await response.json();
+ throw new Error(error.message || "Failed to fetch song");
+ }
+ return response.json();
+}
+
+/**
+ * Récupère l'URL de la pochette d'un morceau
+ */
+export async function getCoverUrl(
+ eventId: number,
+ songIndex: number,
+ channel?: number
+): Promise {
+ const url = channel !== undefined
+ ? `/api/radioparadise/cover-url/${eventId}/${songIndex}?channel=${channel}`
+ : `/api/radioparadise/cover-url/${eventId}/${songIndex}`;
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ const error: ApiError = await response.json();
+ throw new Error(error.message || "Failed to fetch cover URL");
+ }
+ return response.json();
+}
+
+/**
+ * Récupère l'URL de streaming d'un block
+ */
+export async function getStreamUrl(
+ eventId: number,
+ channel?: number
+): Promise {
+ const url = channel !== undefined
+ ? `/api/radioparadise/stream-url/${eventId}?channel=${channel}`
+ : `/api/radioparadise/stream-url/${eventId}`;
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ const error: ApiError = await response.json();
+ throw new Error(error.message || "Failed to fetch stream URL");
+ }
+ return response.json();
+}
+
+/**
+ * Formate une durée en millisecondes en format MM:SS
+ */
+export function formatDuration(ms: number): string {
+ const totalSeconds = Math.floor(ms / 1000);
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Formate une durée en millisecondes en format H:MM:SS si >= 1h, sinon MM:SS
+ */
+export function formatDurationLong(ms: number): string {
+ const totalSeconds = Math.floor(ms / 1000);
+ const hours = Math.floor(totalSeconds / 3600);
+ const minutes = Math.floor((totalSeconds % 3600) / 60);
+ const seconds = totalSeconds % 60;
+
+ if (hours > 0) {
+ return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+ }
+ return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Récupère l'URL de la pochette d'un morceau, avec fallback vers l'image par défaut
+ */
+export function getSongCoverUrl(song: SongInfo): string | undefined {
+ return song.cover_url;
+}
+
+/**
+ * Retourne le nom complet d'un canal
+ */
+export function getChannelName(channelId: number): string {
+ const channelNames: Record = {
+ 0: "Main Mix",
+ 1: "Mellow Mix",
+ 2: "Rock Mix",
+ 3: "Eclectic Mix",
+ };
+ return channelNames[channelId] || "Unknown";
+}
+
+/**
+ * Retourne la description d'un canal
+ */
+export function getChannelDescription(channelId: number): string {
+ const descriptions: Record = {
+ 0: "Eclectic mix of rock, world, electronica, and more",
+ 1: "Mellower, less aggressive music",
+ 2: "Heavier, more guitar-driven music",
+ 3: "Curated worldwide selection",
+ };
+ return descriptions[channelId] || "";
+}
diff --git a/pmoapp/webapp/src/stores/ui.ts b/pmoapp/webapp/src/stores/ui.ts
new file mode 100644
index 00000000..029fea22
--- /dev/null
+++ b/pmoapp/webapp/src/stores/ui.ts
@@ -0,0 +1,111 @@
+// Store Pinia pour l'état UI global
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface Notification {
+ id: string
+ type: 'info' | 'success' | 'warning' | 'error'
+ message: string
+ duration?: number // ms, undefined = permanent
+}
+
+export const useUIStore = defineStore('ui', () => {
+ // État
+ const selectedRendererId = ref(null)
+ const selectedServerId = ref(null)
+ const showEventLog = ref(false)
+ const sseConnected = ref(false)
+ const notifications = ref([])
+
+ // Actions
+ function selectRenderer(id: string | null) {
+ selectedRendererId.value = id
+ }
+
+ function selectServer(id: string | null) {
+ selectedServerId.value = id
+ }
+
+ function toggleEventLog() {
+ showEventLog.value = !showEventLog.value
+ }
+
+ function setSSEConnected(connected: boolean) {
+ sseConnected.value = connected
+ }
+
+ function addNotification(
+ type: Notification['type'],
+ message: string,
+ duration?: number
+ ) {
+ const id = `notif-${Date.now()}-${Math.random()}`
+ const notification: Notification = {
+ id,
+ type,
+ message,
+ duration,
+ }
+
+ notifications.value.push(notification)
+
+ // Auto-remove après duration (défaut: 5s)
+ const timeout = duration !== undefined ? duration : 5000
+ if (timeout > 0) {
+ setTimeout(() => {
+ removeNotification(id)
+ }, timeout)
+ }
+
+ return id
+ }
+
+ function removeNotification(id: string) {
+ const index = notifications.value.findIndex(n => n.id === id)
+ if (index !== -1) {
+ notifications.value.splice(index, 1)
+ }
+ }
+
+ function clearNotifications() {
+ notifications.value = []
+ }
+
+ // Raccourcis pour les types de notifications
+ function notifySuccess(message: string, duration?: number) {
+ return addNotification('success', message, duration)
+ }
+
+ function notifyError(message: string, duration?: number) {
+ return addNotification('error', message, duration || 7000) // 7s pour erreurs
+ }
+
+ function notifyWarning(message: string, duration?: number) {
+ return addNotification('warning', message, duration)
+ }
+
+ function notifyInfo(message: string, duration?: number) {
+ return addNotification('info', message, duration)
+ }
+
+ return {
+ // État
+ selectedRendererId,
+ selectedServerId,
+ showEventLog,
+ sseConnected,
+ notifications,
+ // Actions
+ selectRenderer,
+ selectServer,
+ toggleEventLog,
+ setSSEConnected,
+ addNotification,
+ removeNotification,
+ clearNotifications,
+ notifySuccess,
+ notifyError,
+ notifyWarning,
+ notifyInfo,
+ }
+})
diff --git a/pmoapp/webapp/src/views/DashboardView.vue b/pmoapp/webapp/src/views/DashboardView.vue
new file mode 100644
index 00000000..52a77a40
--- /dev/null
+++ b/pmoapp/webapp/src/views/DashboardView.vue
@@ -0,0 +1,239 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Aucun renderer découvert
+
+
+
+
+
+
+
+
+
+
+
+
+
Aucun serveur de médias découvert
+
+
+
+
+
+
+
+
+
Chargement du renderer...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ OpenHome Playlist
+
+ Chargement de la playlist…
+ {{ ohError }}
+
+
+ Playlist vide.
+
+
+
+
+
+
+ | # |
+ Titre |
+ Artiste |
+ Album |
+ Actions |
+
+
+
+
+ | {{ track.id }} |
+ {{ track.title || '—' }} |
+ {{ track.artist || '—' }} |
+ {{ track.album || '—' }} |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+