Synchronisation de l'Éditeur Visuel (Ghost Mode)

Vue d'ensemble

Le mode Ghost permet une édition interactive en direct. L'application Display (TV) envoie des intentions d'édition au CMS, qui effectue les mutations dans Directus et renvoie des aperçus ciblés via postMessage.

Flux de Mise à Jour (CMS vers Display)

Lorsqu'une modification est effectuée dans le CMS, celui-ci envoie un message UPDATE_CONTENT_PREVIEW contenant :

1. Le payload partiel ou complet de l'objet modifié.
2. Un syncId unique (nonce) identifiant la transaction de synchronisation.

Traitement côté Display (cmsPreviewSync.ts)

À la réception d'un UPDATE_CONTENT_PREVIEW :

• Invalidation du cache : Le service appelle invalidateAdvertisingStoreCache(). C'est une étape cruciale car le advertisingStore possède des optimisations de cache qui bloqueraient sinon le rafraîchissement des données du carrousel si l'ID de la publicité reste le même.
• Mise à jour du pipeline : Les données locales de la facility sont mises à jour via cmsPipelineService.updateFacilityData.
• Événement local : Un événement live_content_update est dispatché sur window. Le syncId est injecté dans les détails de l'événement sous la propriété __syncId.
• Acquittement : Une confirmation VISUAL_EDITOR_SYNC_DONE est renvoyée au CMS.

Réactivité Instantanée des Assets

Pour garantir que les images (fonds de slide) se mettent à jour sans rechargement de page, l'application utilise un mécanisme de "Fast Track" synchrone.

Gestion du Fond de Slide (HeroShowcase.svelte)

Le fond de la slide active est piloté par la variable liveBackdropUrl, calculée réactivement à partir de localizedActiveContent.

Pour forcer le navigateur à rafraîchir l'image (même si l'URL semble identique), nous utilisons le syncId comme paramètre de version :

const syncId = (localizedActiveContent as any)?.__syncId;
const ghostBuster = $isGhostModeActive && syncId ? `?v=${syncId}` : '';
liveBackdropUrl = `${getAssetUrl(coverId)}${ghostBuster}`;

Avantages de l'approche par syncId :

• Stabilité : Contrairement à un timestamp Date.now(), le syncId ne change que lorsque le CMS confirme réellement une modification.
• Économie de bande passante : Le navigateur ne recharge l'asset que s'il a réellement été modifié côté serveur.
• Zéro Clignotement : Évite les rafraîchissements d'images lors de l'édition de simples champs textuels (car le syncId des textes est différent ou géré séparément).

Identité du Carrousel

Les éléments du carrousel sont identifiés par leur carouselItemId (ID de la table de jonction Directus). C'est cet ID qui doit être utilisé pour toutes les opérations de déplacement (MOVE) ou de retrait (REMOVE), car le content.id n'est pas unique au sein d'un même carrousel.

Fichiers de Référence

• Contrat technique : src/lib/types/visual-editor.ts
• Service de synchro : src/lib/services/cmsPreviewSync.ts
• Composant de rendu : src/lib/heroShowcase/HeroShowcase.svelte
• Invalidateur de cache : src/lib/stores/advertisingStore.ts