Eric Coissac
46e269a290
Removes the strict `transport_state` condition and now triggers `api.resume(id)` solely based on a non-empty queue. This improves resilience against transient or unknown device states, such as post-sleep-timer or network errors, where transport state strings may mismatch expected values but playback should still proceed.
648 lines
19 KiB
TypeScript
648 lines
19 KiB
TypeScript
/**
|
|
* 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, onUnmounted } from "vue";
|
|
import { api } from "../services/pmocontrol/api";
|
|
import { useSSE } from "./useSSE";
|
|
import { apiCache } from "./apiCache";
|
|
import { parseTimeToMs } from "../utils/time";
|
|
import { useUIStore } from "@/stores/ui";
|
|
import type {
|
|
RendererSummary,
|
|
RendererState,
|
|
QueueSnapshot,
|
|
AttachedPlaylistInfo,
|
|
FullRendererSnapshot,
|
|
} from "../services/pmocontrol/types";
|
|
import { isTransportState } from "../services/pmocontrol/types";
|
|
|
|
// État global des snapshots avec reactive pour une réactivité native Vue sur les Maps
|
|
const snapshots = reactive(new Map<string, FullRendererSnapshot>());
|
|
const lastSnapshotAt = reactive(new Map<string, number>());
|
|
const lastEventAt = reactive(new Map<string, number>());
|
|
const loadingIds = reactive(new Set<string>());
|
|
const queueRefreshingIds = reactive(new Set<string>());
|
|
const selectedRendererId = ref<string | null>(null);
|
|
|
|
// Compteur d'erreurs consécutives par renderer — on ne notifie l'utilisateur
|
|
// qu'après SNAPSHOT_ERROR_THRESHOLD échecs d'affilée pour absorber les hoquets
|
|
// transitoires des devices (Arylic, etc.).
|
|
const consecutiveSnapshotErrors = new Map<string, number>();
|
|
const SNAPSHOT_ERROR_THRESHOLD = 3;
|
|
|
|
// Cache des renderers (summary)
|
|
const renderersCache = ref<Map<string, RendererSummary>>(new Map());
|
|
const RENDERERS_CACHE_MS = 2000;
|
|
|
|
// Supprimé : les helpers triggerXXX ne sont plus nécessaires avec reactive
|
|
|
|
const loading = ref(false);
|
|
const error = ref<string | null>(null);
|
|
|
|
// Utiliser le composable SSE centralisé
|
|
let sseInitialized = false;
|
|
|
|
/**
|
|
* Réinitialise le flag SSE pour permettre une nouvelle connexion après reconnexion
|
|
*/
|
|
function resetSSE() {
|
|
sseInitialized = false;
|
|
}
|
|
|
|
function ensureSSEInitialized() {
|
|
if (sseInitialized) return;
|
|
|
|
const { onRendererEvent, connect } = useSSE();
|
|
|
|
// Démarrer la connexion SSE
|
|
connect();
|
|
|
|
onRendererEvent((event) => {
|
|
const rendererId = event.renderer_id;
|
|
const timestamp = Date.parse(event.timestamp ?? "") || Date.now();
|
|
|
|
// Gérer les événements Online/Offline différemment
|
|
if (event.type === "online") {
|
|
// Ajouter au cache avec les infos disponibles
|
|
// Note: on n'a pas toutes les infos (capabilities, protocol) donc on fetch ensuite
|
|
const renderer: RendererSummary = {
|
|
id: rendererId,
|
|
friendly_name: event.friendly_name,
|
|
model_name: event.model_name,
|
|
manufacturer: event.manufacturer,
|
|
protocol: "upnp", // Valeur par défaut, sera mise à jour par le fetch
|
|
capabilities: {
|
|
has_avtransport: false,
|
|
has_avtransport_set_next: false,
|
|
has_rendering_control: false,
|
|
has_connection_manager: false,
|
|
has_linkplay_http: false,
|
|
has_arylic_tcp: false,
|
|
has_oh_playlist: false,
|
|
has_oh_volume: false,
|
|
has_oh_info: false,
|
|
has_oh_time: false,
|
|
has_oh_radio: false,
|
|
},
|
|
online: true,
|
|
};
|
|
renderersCache.value.set(rendererId, renderer);
|
|
|
|
// Fetch la liste complète pour avoir les bonnes infos
|
|
void fetchRenderers(true);
|
|
|
|
// Fetch le snapshot complet pour ce renderer
|
|
void fetchRendererSnapshot(rendererId, { force: true });
|
|
return;
|
|
}
|
|
|
|
if (event.type === "offline") {
|
|
// Marquer comme offline dans le cache
|
|
const renderer = renderersCache.value.get(rendererId);
|
|
if (renderer) {
|
|
renderer.online = false;
|
|
renderersCache.value.set(rendererId, renderer);
|
|
}
|
|
|
|
// Supprimer le snapshot (il n'est plus valide)
|
|
snapshots.delete(rendererId);
|
|
lastSnapshotAt.delete(rendererId);
|
|
lastEventAt.delete(rendererId);
|
|
return;
|
|
}
|
|
|
|
// Pour les autres événements, mettre à jour le snapshot local directement
|
|
lastEventAt.set(rendererId, timestamp);
|
|
|
|
const snapshot = snapshots.get(rendererId);
|
|
|
|
// Si pas de snapshot, on doit fetch
|
|
if (!snapshot) {
|
|
void fetchRendererSnapshot(rendererId, { force: true });
|
|
return;
|
|
}
|
|
|
|
// Sinon, mettre à jour le snapshot localement selon le type d'événement
|
|
switch (event.type) {
|
|
case "state_changed":
|
|
// Créer un nouvel objet pour déclencher la réactivité
|
|
if (isTransportState(event.state)) {
|
|
snapshots.set(rendererId, {
|
|
...snapshot,
|
|
state: { ...snapshot.state, transport_state: event.state },
|
|
});
|
|
|
|
} else {
|
|
console.warn(`[useRenderers] transport_state inconnu: ${event.state}`);
|
|
}
|
|
break;
|
|
|
|
case "position_changed":
|
|
// Mettre à jour position et durée de manière atomique pour garantir la cohérence
|
|
// Le backend envoie TOUJOURS les deux valeurs (même si null)
|
|
|
|
// Convertir rel_time (HH:MM:SS) en millisecondes
|
|
const positionMs = parseTimeToMs(event.rel_time ?? null);
|
|
|
|
// Convertir track_duration (HH:MM:SS) en millisecondes
|
|
const durationMs = parseTimeToMs(event.track_duration ?? null);
|
|
|
|
// Créer un nouvel objet pour déclencher la réactivité
|
|
snapshots.set(rendererId, {
|
|
...snapshot,
|
|
state: {
|
|
...snapshot.state,
|
|
position_ms: positionMs ?? 0,
|
|
duration_ms: durationMs,
|
|
},
|
|
});
|
|
|
|
break;
|
|
|
|
case "volume_changed":
|
|
// Créer un nouvel objet pour déclencher la réactivité
|
|
snapshots.set(rendererId, {
|
|
...snapshot,
|
|
state: { ...snapshot.state, volume: event.volume },
|
|
});
|
|
break;
|
|
|
|
case "mute_changed":
|
|
// Créer un nouvel objet pour déclencher la réactivité
|
|
snapshots.set(rendererId, {
|
|
...snapshot,
|
|
state: { ...snapshot.state, mute: event.mute },
|
|
});
|
|
break;
|
|
|
|
case "metadata_changed":
|
|
if (!snapshot.state.current_track) {
|
|
snapshot.state.current_track = {
|
|
title: null,
|
|
artist: null,
|
|
album: null,
|
|
album_art_uri: null,
|
|
};
|
|
}
|
|
snapshot.state.current_track.title = event.title;
|
|
snapshot.state.current_track.artist = event.artist;
|
|
snapshot.state.current_track.album = event.album;
|
|
snapshot.state.current_track.album_art_uri = event.album_art_uri;
|
|
// Important: Trigger reactivity en réassignant l'objet complet avec deep copy
|
|
snapshots.set(rendererId, {
|
|
...snapshot,
|
|
state: { ...snapshot.state },
|
|
});
|
|
break;
|
|
|
|
case "queue_refreshing":
|
|
queueRefreshingIds.add(rendererId);
|
|
|
|
break;
|
|
|
|
case "queue_updated":
|
|
snapshot.state.queue_len = event.queue_length;
|
|
queueRefreshingIds.delete(rendererId);
|
|
|
|
// Fetch queue items immediately when we get queue_updated
|
|
// The debounce was causing race conditions where queue_len was updated
|
|
// but items weren't fetched yet when user clicked play
|
|
void fetchRendererSnapshot(rendererId, { force: true });
|
|
break;
|
|
|
|
case "binding_changed":
|
|
if (event.server_id && event.container_id) {
|
|
snapshot.binding = {
|
|
server_id: event.server_id,
|
|
container_id: event.container_id,
|
|
has_seen_update: false,
|
|
};
|
|
snapshot.state.attached_playlist = snapshot.binding;
|
|
} else {
|
|
snapshot.binding = null;
|
|
snapshot.state.attached_playlist = null;
|
|
}
|
|
// Créer un nouvel objet pour déclencher la réactivité
|
|
snapshots.set(rendererId, {
|
|
...snapshot,
|
|
state: { ...snapshot.state },
|
|
});
|
|
break;
|
|
|
|
case "stream_state_changed":
|
|
snapshot.is_stream = event.is_stream;
|
|
// Créer un nouvel objet pour déclencher la réactivité
|
|
snapshots.set(rendererId, { ...snapshot });
|
|
break;
|
|
|
|
case "timer_started":
|
|
case "timer_updated":
|
|
case "timer_tick":
|
|
case "timer_expired":
|
|
case "timer_cancelled":
|
|
// Les événements de timer ne modifient pas le snapshot renderer
|
|
// (le timer state est géré séparément)
|
|
break;
|
|
}
|
|
|
|
// Note: chaque case est maintenant responsable de stocker le snapshot dans la Map
|
|
// Plus de réassignation finale après le switch
|
|
});
|
|
|
|
sseInitialized = true;
|
|
}
|
|
|
|
const allRenderers = computed(() => Array.from(renderersCache.value.values()));
|
|
const onlineRenderers = computed(() =>
|
|
allRenderers.value.filter((r) => r.online),
|
|
);
|
|
const allSnapshots = computed(() =>
|
|
Array.from(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 snapshots.get(id) ?? null;
|
|
}
|
|
|
|
function getStateById(id: string): RendererState | null {
|
|
return snapshots.get(id)?.state ?? null;
|
|
}
|
|
|
|
function getQueueById(id: string): QueueSnapshot | null {
|
|
return snapshots.get(id)?.queue ?? null;
|
|
}
|
|
|
|
function getBindingById(id: string): AttachedPlaylistInfo | null {
|
|
return snapshots.get(id)?.binding ?? null;
|
|
}
|
|
|
|
function isSnapshotLoading(id: string) {
|
|
return loadingIds.has(id);
|
|
}
|
|
|
|
function isQueueRefreshing(id: string) {
|
|
return queueRefreshingIds.has(id);
|
|
}
|
|
|
|
function selectRenderer(id: string | null) {
|
|
selectedRendererId.value = id;
|
|
}
|
|
|
|
async function fetchRenderers(force = false, retries = 2) {
|
|
ensureSSEInitialized();
|
|
|
|
// Créer le store UI pour les notifications (lazy import pour éviter les effets de bord)
|
|
const uiStore = useUIStore();
|
|
|
|
let lastError: Error | null = null;
|
|
|
|
for (let attempt = 0; attempt <= retries; attempt++) {
|
|
try {
|
|
loading.value = true;
|
|
error.value = null;
|
|
|
|
// Utiliser le cache API centralisé
|
|
const data = await apiCache.fetch(
|
|
'/renderers',
|
|
undefined,
|
|
() => api.getRenderers(),
|
|
{ force, ttl: RENDERERS_CACHE_MS }
|
|
);
|
|
|
|
renderersCache.value = new Map(
|
|
data.map((renderer) => [renderer.id, renderer]),
|
|
);
|
|
return;
|
|
} catch (err) {
|
|
lastError = err instanceof Error ? err : new Error("Erreur fetch renderers");
|
|
console.error("[useRenderers] Erreur fetch (attempt " + (attempt + 1) + "):", lastError);
|
|
if (attempt < retries) {
|
|
await new Promise(r => setTimeout(r, 500 * (attempt + 1)));
|
|
}
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
error.value = lastError?.message ?? "Erreur fetch renderers";
|
|
|
|
// Notifier l'utilisateur en cas d'erreur finale
|
|
uiStore.notifyError("Impossible de rafraîchir la liste des lecteurs audio");
|
|
}
|
|
|
|
async function fetchRendererSnapshot(
|
|
rendererId: string,
|
|
opts?: { force?: boolean },
|
|
) {
|
|
ensureSSEInitialized();
|
|
const force = opts?.force ?? false;
|
|
const hasSnapshot = snapshots.has(rendererId);
|
|
|
|
if (!force && hasSnapshot) {
|
|
const lastSnapshot = lastSnapshotAt.get(rendererId) ?? 0;
|
|
const lastEvent = lastEventAt.get(rendererId) ?? 0;
|
|
if (lastEvent <= lastSnapshot) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Éviter les requêtes multiples simultanées pour le même renderer
|
|
if (loadingIds.has(rendererId)) {
|
|
return;
|
|
}
|
|
|
|
loadingIds.add(rendererId);
|
|
|
|
|
|
// Lazy load UI store pour les notifications
|
|
const uiStore = useUIStore();
|
|
|
|
try {
|
|
const snapshot = await api.getRendererFullSnapshot(rendererId);
|
|
snapshots.set(rendererId, snapshot);
|
|
lastSnapshotAt.set(rendererId, Date.now());
|
|
consecutiveSnapshotErrors.set(rendererId, 0);
|
|
|
|
} catch (err) {
|
|
const count = (consecutiveSnapshotErrors.get(rendererId) ?? 0) + 1;
|
|
consecutiveSnapshotErrors.set(rendererId, count);
|
|
console.error(`[useRenderers] Erreur snapshot ${rendererId} (${count}/${SNAPSHOT_ERROR_THRESHOLD}):`, err);
|
|
|
|
// Garder le dernier snapshot connu plutôt que de le supprimer — l'UI reste
|
|
// affichable même si le device est momentanément muet.
|
|
|
|
// Notifier seulement après N échecs consécutifs pour absorber les hoquets passagers
|
|
if (count >= SNAPSHOT_ERROR_THRESHOLD) {
|
|
const name = renderersCache.value.get(rendererId)?.friendly_name ?? rendererId;
|
|
uiStore.notifyError(`Impossible de récupérer l'état de « ${name} »`);
|
|
// Remettre à zéro pour ne pas spammer si le device reste instable
|
|
consecutiveSnapshotErrors.set(rendererId, 0);
|
|
}
|
|
} finally {
|
|
loadingIds.delete(rendererId);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fetch les snapshots de plusieurs renderers en parallèle controlée.
|
|
* - Limite le nombre de requêtes simultanées (concurrency)
|
|
* - Ajoute un délai entre chaque batch pour ne pas saturer le réseau
|
|
* - Continue même si certaines requêtes échouent
|
|
*/
|
|
async function fetchBatchSnapshots(
|
|
rendererIds: string[],
|
|
options: {
|
|
concurrency?: number; // Nombre max de requêtes parallèles (défaut: 3)
|
|
batchDelay?: number; // Délai entre les batches en ms (défaut: 100ms)
|
|
force?: boolean; // Forcer le refetch même en cache
|
|
} = {}
|
|
): Promise<void> {
|
|
const { concurrency = 3, batchDelay = 100, force = false } = options;
|
|
|
|
// Filtrer les rendererIds valides
|
|
const validIds = rendererIds.filter(id => id && typeof id === 'string');
|
|
|
|
if (validIds.length === 0) return;
|
|
|
|
// Fonction pour traiter un batch
|
|
const processBatch = async (batch: string[]): Promise<void> => {
|
|
await Promise.allSettled(
|
|
batch.map(id => fetchRendererSnapshot(id, { force }))
|
|
);
|
|
};
|
|
|
|
// Exécuter par batches avec controlled concurrency
|
|
for (let i = 0; i < validIds.length; i += concurrency) {
|
|
const batch = validIds.slice(i, i + concurrency);
|
|
await processBatch(batch);
|
|
|
|
// Délai entre les batches (sauf pour le dernier)
|
|
if (i + concurrency < validIds.length) {
|
|
await new Promise(resolve => setTimeout(resolve, batchDelay));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Transport controls
|
|
async function play(id: string) {
|
|
await api.play(id);
|
|
}
|
|
|
|
async function resumeOrPlayFromQueue(id: string) {
|
|
const snapshot = 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 queue has items, always try to play from queue regardless of transport
|
|
// state. After a sleep timer stop, the device may report an unknown/transient
|
|
// state ("load", network error → "UNKNOWN", etc.) that doesn't match the
|
|
// expected "STOPPED"/"NO_MEDIA" strings, yet the queue is non-empty.
|
|
if (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);
|
|
}
|
|
|
|
async function addAfterCurrent(
|
|
rendererId: string,
|
|
serverId: string,
|
|
objectId: string,
|
|
) {
|
|
await api.addAfterCurrent(rendererId, serverId, objectId);
|
|
}
|
|
|
|
export function useRenderers() {
|
|
ensureSSEInitialized();
|
|
|
|
return {
|
|
loading,
|
|
error,
|
|
// Collections
|
|
allRenderers,
|
|
onlineRenderers,
|
|
playingRenderers,
|
|
// Accessors
|
|
getRendererById,
|
|
getSnapshotById,
|
|
getStateById,
|
|
getQueueById,
|
|
getBindingById,
|
|
isSnapshotLoading,
|
|
isQueueRefreshing,
|
|
selectRenderer,
|
|
// Fetchers
|
|
fetchRenderers,
|
|
fetchRendererSnapshot,
|
|
fetchBatchSnapshots,
|
|
// Transport controls
|
|
play,
|
|
resumeOrPlayFromQueue,
|
|
pause,
|
|
stop,
|
|
next,
|
|
// Volume controls
|
|
setVolume,
|
|
volumeUp,
|
|
volumeDown,
|
|
toggleMute,
|
|
// Playlist binding
|
|
attachPlaylist,
|
|
detachPlaylist,
|
|
attachAndPlayPlaylist,
|
|
// Queue content
|
|
playContent,
|
|
addToQueue,
|
|
addAfterCurrent,
|
|
// SSE
|
|
resetSSE,
|
|
};
|
|
}
|
|
|
|
export function useRenderer(rendererId: Ref<string>) {
|
|
ensureSSEInitialized();
|
|
|
|
// Delegates to useRenderers functions - no duplication
|
|
const renderer = computed(() => getRendererById(rendererId.value));
|
|
const snapshot = computed(() => getSnapshotById(rendererId.value));
|
|
const state = computed(() => getStateById(rendererId.value));
|
|
const queue = computed(() => getQueueById(rendererId.value));
|
|
const binding = computed(() => getBindingById(rendererId.value));
|
|
const isStream = computed(() => snapshot.value?.is_stream ?? false);
|
|
const queueRefreshing = computed(() => isQueueRefreshing(rendererId.value));
|
|
|
|
// Debounce pour éviter les refreshs multiples trop fréquents
|
|
let refreshDebounceTimer: ReturnType<typeof setTimeout> | null = null;
|
|
const REFRESH_DEBOUNCE_MS = 500;
|
|
|
|
// Nettoyer le timer debounce si le composant est démonté
|
|
onUnmounted(() => {
|
|
if (refreshDebounceTimer !== null) {
|
|
clearTimeout(refreshDebounceTimer);
|
|
refreshDebounceTimer = null;
|
|
}
|
|
});
|
|
|
|
async function refresh(force = true) {
|
|
const currentRendererId = rendererId.value;
|
|
|
|
// Debounce: ignorer si un refresh est en cours pour ce renderer
|
|
if (refreshDebounceTimer !== null) {
|
|
return;
|
|
}
|
|
|
|
refreshDebounceTimer = setTimeout(() => {
|
|
refreshDebounceTimer = null;
|
|
}, REFRESH_DEBOUNCE_MS);
|
|
|
|
await Promise.all([
|
|
fetchRenderers(force),
|
|
fetchRendererSnapshot(currentRendererId, { force: true }),
|
|
]);
|
|
}
|
|
|
|
return {
|
|
renderer,
|
|
snapshot,
|
|
state,
|
|
queue,
|
|
binding,
|
|
isStream,
|
|
queueRefreshing,
|
|
refresh,
|
|
};
|
|
}
|