eric/pmomusic
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Optimisation des délais de rafraîchissement et amélioration de la réactivité

Browse Source 
Réduction du délai de rafraîchissement des conteneurs à 2 secondes et ajustement du polling pour une meilleure réactivité de l'interface utilisateur.

- Modification du délai de cooldown de 5 secondes à 2 secondes dans MediaBrowser.vue
- Réduction du délai de polling de 60 secondes à 10 secondes pour la découverte des appareils dans control_point.rs
- Modification du polling de volume et de mute de 3 secondes à 1 seconde (tous les 2 ticks à 500ms) dans control_point.rs
- Réduction du délai de polling de position de 1 seconde à 500ms dans control_point.rs
This commit is contained in:
Eric Coissac
2026-01-11 15:44:37 +01:00
parent da12cc82b3
commit 7d2cb75e58
2 changed files with 239 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

454
pmoapp/webapp/src/components/pmocontrol/MediaBrowser.vue
View File

@@ -1,62 +1,58 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from "vue";
import { useMediaServers } from '@/composables/useMediaServers' import { useMediaServers } from "@/composables/useMediaServers";
import { useRenderers } from '@/composables/useRenderers' import { useRenderers } from "@/composables/useRenderers";
import { useUIStore } from '@/stores/ui' import { useUIStore } from "@/stores/ui";
import Breadcrumb from './Breadcrumb.vue' import Breadcrumb from "./Breadcrumb.vue";
import ContainerItem from './ContainerItem.vue' import ContainerItem from "./ContainerItem.vue";
import MediaItem from './MediaItem.vue' import MediaItem from "./MediaItem.vue";
import { Loader2 } from 'lucide-vue-next' import { Loader2 } from "lucide-vue-next";
const props = defineProps<{ const props = defineProps<{
serverId: string serverId: string;
containerId: string containerId: string;
}>() }>();
const { const {
getBrowseCached, getBrowseCached,
browseContainer, browseContainer,
currentPath: breadcrumbPath, currentPath: breadcrumbPath,
loading, loading,
error error,
} = useMediaServers() } = useMediaServers();
const { const { playContent, addToQueue, attachAndPlayPlaylist, attachPlaylist } =
playContent, useRenderers();
addToQueue, const uiStore = useUIStore();
attachAndPlayPlaylist,
attachPlaylist,
} = useRenderers()
const uiStore = useUIStore()
// Flags pour gérer le rechargement automatique avec debounce et cooldown // Flags pour gérer le rechargement automatique avec debounce et cooldown
const isRefreshing = ref(false) const isRefreshing = ref(false);
const refreshTimeoutId = ref<number | null>(null) const refreshTimeoutId = ref<number | null>(null);
const lastRefreshTime = ref<number>(0) const lastRefreshTime = ref<number>(0);
const REFRESH_COOLDOWN_MS = 5000 // Ne pas recharger plus d'une fois toutes les 5 secondes const REFRESH_COOLDOWN_MS = 2000; // Ne pas recharger plus d'une fois toutes les 2 secondes
const browseData = computed(() => const browseData = computed(() =>
getBrowseCached(props.serverId, props.containerId) getBrowseCached(props.serverId, props.containerId),
) );
const containers = computed(() => const containers = computed(
browseData.value?.entries.filter((e) => e.is_container) || [] () => browseData.value?.entries.filter((e) => e.is_container) || [],
) );
const items = computed(() => const items = computed(
browseData.value?.entries.filter((e) => !e.is_container) || [] () => browseData.value?.entries.filter((e) => !e.is_container) || [],
) );
// Charger le container au montage et quand containerId change // Charger le container au montage et quand containerId change
watch( watch(
() => props.containerId, () => props.containerId,
async (newContainerId) => { async (newContainerId) => {
if (newContainerId) { if (newContainerId) {
await browseContainer(props.serverId, newContainerId) await browseContainer(props.serverId, newContainerId);
} }
}, },
{ immediate: true } { immediate: true },
) );
// Recharger automatiquement si le cache est invalidé (ex: après un ContainersUpdated SSE) // Recharger automatiquement si le cache est invalidé (ex: après un ContainersUpdated SSE)
// Cela se produit notamment quand on clique sur "Lire maintenant" sur une playlist, // Cela se produit notamment quand on clique sur "Lire maintenant" sur une playlist,
@@ -64,268 +60,282 @@ watch(
// Utilise un debounce de 3 secondes pour regrouper les multiples invalidations // Utilise un debounce de 3 secondes pour regrouper les multiples invalidations
// et un cooldown de 5 secondes pour éviter les rechargements successifs // et un cooldown de 5 secondes pour éviter les rechargements successifs
watch( watch(
() => browseData.value, () => browseData.value,
(data) => { (data) => {
// Si browseData devient undefined alors que containerId est présent, // Si browseData devient undefined alors que containerId est présent,
// et qu'on n'est pas déjà en train de charger, planifier un rechargement // et qu'on n'est pas déjà en train de charger, planifier un rechargement
if (!data && props.containerId && !loading.value) { if (!data && props.containerId && !loading.value) {
// Vérifier le cooldown: ignorer si on a rechargé il y a moins de 5 secondes // Vérifier le cooldown: ignorer si on a rechargé il y a moins de 5 secondes
const timeSinceLastRefresh = Date.now() - lastRefreshTime.value const timeSinceLastRefresh = Date.now() - lastRefreshTime.value;
if (timeSinceLastRefresh < REFRESH_COOLDOWN_MS) { if (timeSinceLastRefresh < REFRESH_COOLDOWN_MS) {
console.log( console.log(
`[MediaBrowser] Cache invalidé mais cooldown actif (${Math.round((REFRESH_COOLDOWN_MS - timeSinceLastRefresh) / 1000)}s restantes), rechargement ignoré` `[MediaBrowser] Cache invalidé mais cooldown actif (${Math.round((REFRESH_COOLDOWN_MS - timeSinceLastRefresh) / 1000)}s restantes), rechargement ignoré`,
) );
return return;
} }
// Annuler tout timeout en cours // Annuler tout timeout en cours
if (refreshTimeoutId.value !== null) { if (refreshTimeoutId.value !== null) {
clearTimeout(refreshTimeoutId.value) clearTimeout(refreshTimeoutId.value);
} }
// Planifier le rechargement après 3 secondes // Planifier le rechargement après 200ms
// Cela permet de regrouper plusieurs événements SSE successifs // Cela permet de dédupliquer les événements SSE dans le même batch (polling 500ms)
refreshTimeoutId.value = window.setTimeout(async () => { refreshTimeoutId.value = window.setTimeout(async () => {
if (!isRefreshing.value) { if (!isRefreshing.value) {
console.log( console.log(
`[MediaBrowser] Cache invalidé pour ${props.serverId}/${props.containerId}, rechargement après debounce...` `[MediaBrowser] Cache invalidé pour ${props.serverId}/${props.containerId}, rechargement après debounce...`,
) );
isRefreshing.value = true isRefreshing.value = true;
await browseContainer(props.serverId, props.containerId, false) await browseContainer(
lastRefreshTime.value = Date.now() // Enregistrer le moment du rechargement props.serverId,
isRefreshing.value = false props.containerId,
refreshTimeoutId.value = null false,
);
lastRefreshTime.value = Date.now(); // Enregistrer le moment du rechargement
isRefreshing.value = false;
refreshTimeoutId.value = null;
}
}, 200);
} }
}, 3000) },
} );
}
)
const emit = defineEmits<{ const emit = defineEmits<{
navigate: [containerId: string] navigate: [containerId: string];
}>() }>();
function handleNavigate(containerId: string) { function handleNavigate(containerId: string) {
emit('navigate', containerId) emit("navigate", containerId);
} }
function handleBrowseContainer(containerId: string) { function handleBrowseContainer(containerId: string) {
emit('navigate', containerId) emit("navigate", containerId);
} }
// Actions handlers pour les containers (playlists/albums) // Actions handlers pour les containers (playlists/albums)
async function handlePlayContainer(containerId: string, rendererId: string) { async function handlePlayContainer(containerId: string, rendererId: string) {
try { try {
await attachAndPlayPlaylist(rendererId, props.serverId, containerId) await attachAndPlayPlaylist(rendererId, props.serverId, containerId);
uiStore.notifySuccess('Lecture de la playlist démarrée !') uiStore.notifySuccess("Lecture de la playlist démarrée !");
} catch (err) { } catch (err) {
const message = err instanceof Error ? err.message : 'Erreur inconnue' const message = err instanceof Error ? err.message : "Erreur inconnue";
uiStore.notifyError(`Erreur lors de la lecture de la playlist: ${message}`) uiStore.notifyError(
} `Erreur lors de la lecture de la playlist: ${message}`,
);
}
} }
async function handleQueueContainer(containerId: string, rendererId: string) { async function handleQueueContainer(containerId: string, rendererId: string) {
try { try {
await attachPlaylist(rendererId, props.serverId, containerId) await attachPlaylist(rendererId, props.serverId, containerId);
uiStore.notifySuccess('Playlist attachée à la queue !') uiStore.notifySuccess("Playlist attachée à la queue !");
} catch (err) { } catch (err) {
const message = err instanceof Error ? err.message : 'Erreur inconnue' const message = err instanceof Error ? err.message : "Erreur inconnue";
uiStore.notifyError(`Erreur lors de l'ajout de la playlist: ${message}`) uiStore.notifyError(
} `Erreur lors de l'ajout de la playlist: ${message}`,
);
}
} }
// Actions handlers pour les items (tracks) // Actions handlers pour les items (tracks)
async function handlePlayItem(itemId: string, rendererId: string) { async function handlePlayItem(itemId: string, rendererId: string) {
try { try {
await playContent(rendererId, props.serverId, itemId) await playContent(rendererId, props.serverId, itemId);
uiStore.notifySuccess('Lecture démarrée !') uiStore.notifySuccess("Lecture démarrée !");
} catch (err) { } catch (err) {
const message = err instanceof Error ? err.message : 'Erreur inconnue' const message = err instanceof Error ? err.message : "Erreur inconnue";
uiStore.notifyError(`Erreur lors de la lecture: ${message}`) uiStore.notifyError(`Erreur lors de la lecture: ${message}`);
} }
} }
async function handleQueueItem(itemId: string, rendererId: string) { async function handleQueueItem(itemId: string, rendererId: string) {
try { try {
await addToQueue(rendererId, props.serverId, itemId) await addToQueue(rendererId, props.serverId, itemId);
uiStore.notifySuccess('Ajouté à la queue !') uiStore.notifySuccess("Ajouté à la queue !");
} catch (err) { } catch (err) {
const message = err instanceof Error ? err.message : 'Erreur inconnue' const message = err instanceof Error ? err.message : "Erreur inconnue";
uiStore.notifyError(`Erreur lors de l'ajout à la queue: ${message}`) uiStore.notifyError(`Erreur lors de l'ajout à la queue: ${message}`);
} }
} }
</script> </script>
<template> <template>
<div class="media-browser"> <div class="media-browser">
<!-- Breadcrumb --> <!-- Breadcrumb -->
<Breadcrumb <Breadcrumb
:items="breadcrumbPath" :items="breadcrumbPath"
:serverId="serverId" :serverId="serverId"
@navigate="handleNavigate" @navigate="handleNavigate"
/> />
<!-- Loading state --> <!-- Loading state -->
<div v-if="loading" class="browser-loading"> <div v-if="loading" class="browser-loading">
<Loader2 :size="32" class="spinner" /> <Loader2 :size="32" class="spinner" />
<p>Chargement...</p> <p>Chargement...</p>
</div>
<!-- Error state -->
<div v-else-if="error" class="browser-error">
<p class="error-message">{{ error }}</p>
<button class="btn btn-secondary" @click="browseContainer(serverId, containerId, false)">
Réessayer
</button>
</div>
<!-- Content -->
<div v-else class="browser-content">
<!-- Containers section -->
<div v-if="containers.length" class="browser-section">
<h3 class="section-title">Dossiers et playlists</h3>
<div class="entries-list">
<ContainerItem
v-for="container in containers"
:key="container.id"
:entry="container"
:server-id="serverId"
@browse="handleBrowseContainer"
@play-now="handlePlayContainer"
@add-to-queue="handleQueueContainer"
/>
</div> </div>
</div>
<!-- Items section --> <!-- Error state -->
<div v-if="items.length" class="browser-section"> <div v-else-if="error" class="browser-error">
<h3 class="section-title">Pistes</h3> <p class="error-message">{{ error }}</p>
<div class="entries-list"> <button
<MediaItem class="btn btn-secondary"
v-for="item in items" @click="browseContainer(serverId, containerId, false)"
:key="item.id" >
:entry="item" Réessayer
:server-id="serverId" </button>
@play-now="handlePlayItem"
@add-to-queue="handleQueueItem"
/>
</div> </div>
</div>
<!-- Empty state --> <!-- Content -->
<div v-if="!containers.length && !items.length" class="browser-empty"> <div v-else class="browser-content">
<p>Ce dossier est vide</p> <!-- Containers section -->
</div> <div v-if="containers.length" class="browser-section">
<h3 class="section-title">Dossiers et playlists</h3>
<div class="entries-list">
<ContainerItem
v-for="container in containers"
:key="container.id"
:entry="container"
:server-id="serverId"
@browse="handleBrowseContainer"
@play-now="handlePlayContainer"
@add-to-queue="handleQueueContainer"
/>
</div>
</div>
<!-- Items section -->
<div v-if="items.length" class="browser-section">
<h3 class="section-title">Pistes</h3>
<div class="entries-list">
<MediaItem
v-for="item in items"
:key="item.id"
:entry="item"
:server-id="serverId"
@play-now="handlePlayItem"
@add-to-queue="handleQueueItem"
/>
</div>
</div>
<!-- Empty state -->
<div
v-if="!containers.length && !items.length"
class="browser-empty"
>
<p>Ce dossier est vide</p>
</div>
</div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
.media-browser { .media-browser {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-lg); gap: var(--spacing-lg);
height: 100%; height: 100%;
} }
/* Loading */ /* Loading */
.browser-loading { .browser-loading {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--spacing-md); gap: var(--spacing-md);
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
.spinner { .spinner {
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@keyframes spin { @keyframes spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
/* Error */ /* Error */
.browser-error { .browser-error {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--spacing-md); gap: var(--spacing-md);
} }
.error-message { .error-message {
font-size: var(--text-base); font-size: var(--text-base);
color: var(--status-offline); color: var(--status-offline);
margin: 0; margin: 0;
} }
/* Content */ /* Content */
.browser-content { .browser-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-xl); gap: var(--spacing-xl);
padding-right: var(--spacing-xs); padding-right: var(--spacing-xs);
} }
.browser-section { .browser-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-md); gap: var(--spacing-md);
} }
.section-title { .section-title {
font-size: var(--text-lg); font-size: var(--text-lg);
font-weight: 600; font-weight: 600;
color: var(--color-text); color: var(--color-text);
margin: 0; margin: 0;
padding-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
.entries-list { .entries-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-xs); gap: var(--spacing-xs);
} }
/* Empty state */ /* Empty state */
.browser-empty { .browser-empty {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--color-text-tertiary); color: var(--color-text-tertiary);
font-size: var(--text-base); font-size: var(--text-base);
padding: var(--spacing-xl); padding: var(--spacing-xl);
} }
/* Scrollbar styling */ /* Scrollbar styling */
.browser-content::-webkit-scrollbar { .browser-content::-webkit-scrollbar {
width: 6px; width: 6px;
} }
.browser-content::-webkit-scrollbar-track { .browser-content::-webkit-scrollbar-track {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
border-radius: var(--radius-full); border-radius: var(--radius-full);
} }
.browser-content::-webkit-scrollbar-thumb { .browser-content::-webkit-scrollbar-thumb {
background: var(--color-border); background: var(--color-border);
border-radius: var(--radius-full); border-radius: var(--radius-full);
} }
.browser-content::-webkit-scrollbar-thumb:hover { .browser-content::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary); background: var(--color-text-tertiary);
} }
</style> </style>

14
pmocontrol/src/control_point.rs
View File

@@ -112,8 +112,8 @@ impl ControlPoint {
]; ];
loop { loop {
// Attendre 60 secondes avant le prochain cycle // Attendre 10 secondes avant le prochain cycle pour découverte rapide
thread::sleep(Duration::from_secs(60)); thread::sleep(Duration::from_secs(10));
debug!("Sending periodic M-SEARCH for device discovery"); debug!("Sending periodic M-SEARCH for device discovery");
@@ -303,9 +303,9 @@ impl ControlPoint {
new_snapshot.state = Some(logical_state); new_snapshot.state = Some(logical_state);
} }
// Poll volume and mute less frequently (every 3 seconds) // Poll volume and mute every second (every 2 ticks at 500ms)
// to reduce SOAP overhead without impacting UI responsiveness // for responsive volume control feedback
if tick % 3 == 0 { if tick % 2 == 0 {
if let Ok(volume) = renderer.volume() { if let Ok(volume) = renderer.volume() {
if prev_snapshot.last_volume != Some(volume) { if prev_snapshot.last_volume != Some(volume) {
polling_cp.emit_renderer_event(RendererEvent::VolumeChanged { polling_cp.emit_renderer_event(RendererEvent::VolumeChanged {
@@ -334,8 +334,8 @@ impl ControlPoint {
} }
tick = tick.wrapping_add(1); tick = tick.wrapping_add(1);
// Keep 1 second polling for smooth position updates // 500ms polling for smoother position updates and progress bar
thread::sleep(Duration::from_secs(1)); thread::sleep(Duration::from_millis(500));
} }
}); });