From f3fc94cab37a7178ed347bfcb09bbdee96d3a293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sun, 8 Feb 2026 16:29:25 +0100
Subject: [PATCH] fix(SessionEditor): Nettoyage config avant sauvegarde et
 traductions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Suppression des timestamps (cache-busting) dans les MediaUrl avant l'envoi au serveur

- Filtrage des propriétés internes (commençant par _) pour ne pas polluer le JSON

- Traduction des logs console en français
---
 VApp/src/views/SessionEditor.vue | 524 +++++++------------------------
 1 file changed, 114 insertions(+), 410 deletions(-)

diff --git a/VApp/src/views/SessionEditor.vue b/VApp/src/views/SessionEditor.vue
index 19ac2e4b..267c17a3 100644
--- a/VApp/src/views/SessionEditor.vue
+++ b/VApp/src/views/SessionEditor.vue
@@ -1,260 +1,31 @@
 <template>
   <v-container>
-    <v-row class="mb-4 align-center">
-      <v-col cols="12" md="4" class="d-flex align-center gap-2">
-         <v-select
-            v-model="selectedSessionId"
-            :items="availableSessions"
-            item-title="title"
-            item-value="id"
-            label="Choisir une session"
-            variant="outlined"
-            hide-details
-            @update:model-value="loadSession"
-            rounded="xl"
-            class="flex-grow-1"
-         ></v-select>
-         <v-btn icon="mdi-plus" color="green" variant="tonal" @click="openCreateDialog" title="Nouvelle Session"></v-btn>
-         <v-btn icon="mdi-delete" color="red" variant="tonal" @click="deleteDialogVisible = true" :disabled="!selectedSessionId" title="Supprimer Session"></v-btn>
-      </v-col>
-      <v-col>
-        <h1 class="text-h4 white--text">Éditeur</h1>
-      </v-col>
-      <v-col class="text-right">
-        <v-btn rounded="xl" color="primary" @click="saveSession" :loading="saving" :disabled="!selectedSessionId">
-          <v-icon start>mdi-content-save</v-icon> Sauvegarder
-        </v-btn>
-      </v-col>
-    </v-row>
+    <SessionSelector
+        v-model="selectedSessionId"
+        :sessions="availableSessions"
+        :saving="saving"
+        @update:model-value="loadSession"
+        @create="openCreateDialog"
+        @delete="deleteDialogVisible = true"
+        @save="saveSession"
+    />
 
     <div v-if="!selectedSessionId" class="text-center mt-10 text-h5 grey--text">
         Veuillez sélectionner une session pour commencer.
     </div>
 
     <div v-else>
-        <v-alert v-if="error" type="error" closable class="mb-4">{{ error }}</v-alert>
-        <v-alert rounded="xl" v-if="success" type="success" closable class="mb-4">{{ success }}</v-alert>
-
-        <v-card class="mb-6" rounded="xl">
-        <v-card-title>Configuration Générale</v-card-title>
-        <v-card-text>
-            <v-row>
-            <v-col cols="12" md="6">
-                <v-text-field color="primary" v-model="sessionConfig.PackId" label="ID du Pack" readonly variant="outlined" rounded="xl"></v-text-field>
-            </v-col>
-            <v-col cols="12" md="6">
-                <v-text-field color="primary" v-model="sessionConfig.PackTitle" label="Titre du Pack" variant="outlined" rounded="xl"></v-text-field>
-            </v-col>
-            </v-row>
-        </v-card-text>
-        </v-card>
-
-        <v-card>
-        <v-card-title class="d-flex justify-space-between align-center">
-            Questions ({{ sessionConfig.Questions.length }})
-            <v-btn color="secondary" size="small" prepend-icon="mdi-plus" @click="openQuestionDialog()">Ajouter</v-btn>
-        </v-card-title>
-        <v-card-text>
-            <v-list lines="two" bg-color="transparent">
-            <v-list-item v-if="sessionConfig.Questions.length === 0">
-                <v-list-item-title class="text-center">Aucune question définie.</v-list-item-title>
-            </v-list-item>
-            
-            <template v-for="(question, index) in sessionConfig.Questions" :key="question.QuestionId">
-                <v-card variant="outlined" class="mb-2">
-                <v-card-text class="d-flex align-center py-2">
-                    <div class="mr-4 font-weight-bold text-h6">{{ index + 1 }}</div>
-                    <div class="flex-grow-1">
-                    <div class="text-subtitle-1 font-weight-bold">
-                        {{ question.QuestionId }} - {{ question.Type }} ({{ question.Points }} pts)
-                    </div>
-                    <div class="text-body-2">{{ question.QuestionText }}</div>
-                    <div class="text-caption grey--text">Réponse: {{ question.MasterData.CorrectAnswer }}</div>
-                    </div>
-                    <div class="d-flex flex-column gap-1">
-                        <v-btn icon="mdi-arrow-up" size="x-small" variant="text" :disabled="index === 0" @click="moveQuestion(index, -1)"></v-btn>
-                        <v-btn icon="mdi-arrow-down" size="x-small" variant="text" :disabled="index === sessionConfig.Questions.length - 1" @click="moveQuestion(index, 1)"></v-btn>
-                    </div>
-                    <div class="d-flex ml-2">
-                    <v-btn icon="mdi-pencil" size="small" variant="text" color="blue" @click="openQuestionDialog(question, index)"></v-btn>
-                    <v-btn icon="mdi-delete" size="small" variant="text" color="red" @click="deleteQuestion(index)"></v-btn>
-                    </div>
-                </v-card-text>
-                </v-card>
-            </template>
-            </v-list>
-        </v-card-text>
-        </v-card>
+        <SessionDetails 
+            :config="sessionConfig"
+            :session-id="selectedSessionId"
+            :api-url="API_URL"
+            :success="success"
+            :error="error"
+            @delete-media="deleteMediaFile"
+            @rename-media="renameMediaFile"
+        />
     </div>
 
-    <!-- Dialog d'édition de question -->
-    <v-dialog  v-model="dialogVisible" persistent max-width="800px">
-      <v-card rounded="xl" class="pa-3">
-        <v-card-title class="text-title-style">
-            {{ editingIndex === -1 ? 'Nouvelle Question' : 'Éditer la Question' }}
-        </v-card-title>
-        <v-card-text>
-          <v-container>
-            <v-row>
-              <v-col cols="12" md="4">
-                <v-text-field color="primary" density="compact" variant="outlined" rounded="lg" v-model="editedQuestion.QuestionId" label="ID Question" hint="Unique ID, ex: Q-005"></v-text-field>
-              </v-col>
-              <v-col cols="12" md="4">
-                <v-select color="primary" density="compact" variant="outlined" rounded="lg" v-model="editedQuestion.Type" :items="['video', 'audio', 'picture']" label="Type"></v-select>
-              </v-col>
-              <v-col cols="12" md="4">
-                <v-text-field color="primary" density="compact" variant="outlined" rounded="lg" v-model.number="editedQuestion.Points" type="number" label="Points"></v-text-field>
-              </v-col>
-              <v-col cols="12">
-                <v-textarea color="primary" variant="outlined" rounded="lg" v-model="editedQuestion.QuestionText" label="Texte de la question" rows="2"></v-textarea>
-              </v-col>
-              
-              <!-- Media Section -->
-              <v-col cols="12">
-                 <div class="d-flex align-end">
-                    <!-- Preview Section -->
-                    <div v-if="editedQuestion.MediaUrl" class="mr-4 text-center" style="width: 120px; height: 120px; background: #333; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; position: relative;">
-                        <img v-if="editedQuestion.Type === 'picture'" :src="getPreviewUrl(editedQuestion.MediaUrl)" style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;" @click="showFullPreview = true">
-                        <video 
-                            v-else-if="editedQuestion.Type === 'video'" 
-                            :src="getPreviewUrl(editedQuestion.MediaUrl)" 
-                            style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;" 
-                            @click="showVideoPreview = true"    
-                            @loadedmetadata="(e) => e.target.currentTime = e.target.duration / 3"
-                            muted
-                        ></video>
-                        <div v-else-if="editedQuestion.Type === 'audio'" class="text-caption" style="cursor: pointer;" @click="showAudioPreview = true">
-                            <v-icon size="64" color="primary">mdi-music</v-icon>
-                        </div>
-                    </div>
-                    
-                    <v-text-field color="primary" density="compact" variant="outlined" rounded="lg" v-model="editedQuestion.MediaUrl" label="URL du Média" class="flex-grow-2 mr-2" hide-details></v-text-field>
-                    <input 
-                        type="file" 
-                        ref="fileInputRef" 
-                        style="display: none;" 
-                        @change="onFileSelected"
-                        accept="image/*,video/*,audio/*"
-                    />
-                    <v-btn 
-                        rounded="lg"
-                        variant="tonal" 
-                        color="primary"
-                        :loading="uploading"
-                        :disabled="!editedQuestion.Type"
-                        @click="$refs.fileInputRef.click()"
-                    >
-                        <v-icon start>mdi-upload</v-icon>
-                        Upload
-                    </v-btn>
-                 </div>
-                 <div v-if="uploadError" class="text-caption text-red">{{ uploadError }}</div>
-              </v-col>
-
-              <v-col cols="12"><v-divider></v-divider></v-col>
-              <v-col cols="12" class="text-h6">Paramètres</v-col>
-              
-              <v-col cols="6" md="4">
-                  <v-switch inset v-model="editedQuestion.Settings.AutoPlay" label="AutoPlay" density="compact" color="primary"></v-switch>
-              </v-col>
-              <v-col cols="6" md="4">
-                  <v-switch inset v-model="editedQuestion.Settings.Loop" label="Loop" density="compact" color="primary"></v-switch>
-              </v-col>
-              <v-col cols="6" md="4">
-                  <v-text-field color="primary" variant="outlined" rounded="lg" v-model.number="editedQuestion.Settings.PlayTime" type="number" label="Durée (sec)" density="compact"></v-text-field>
-              </v-col>
-
-              <v-col cols="12"><v-divider></v-divider></v-col>
-              <v-label class="text-title-style">
-                Réponse (Maître du jeu)
-              </v-label>
-              <v-col cols="12" class="text-h6"></v-col>
-              
-              <v-col cols="12">
-                <v-text-field color="primary" variant="outlined" rounded="lg" v-model="editedQuestion.MasterData.CorrectAnswer" label="Réponse Correcte"></v-text-field>
-              </v-col>
-              <v-col cols="12">
-                <v-textarea color="primary" variant="outlined" rounded="lg" v-model="editedQuestion.MasterData.MasterNotes" label="Notes pour le MJ" rows="2"></v-textarea>
-              </v-col>
-              <v-col cols="12">
-                <v-textarea color="primary" variant="outlined" rounded="lg" v-model="editedQuestion.MasterData.Help" label="Indice / Aide" rows="2"></v-textarea>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="primary" rounded="xl" variant="outlined" @click="closeDialog">Annuler</v-btn>
-          <v-btn color="success" rounded="xl" variant="outlined" @click="saveQuestion">Ok</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Dialog Preview Image -->
-    <v-dialog v-model="showFullPreview" max-width="90vw">
-        <v-card rounded="xl" class="pa-2">
-            <v-card-text class="d-flex justify-center" style="padding: 16px;">
-                <v-img
-                    :src="getPreviewUrl(editedQuestion.MediaUrl)" 
-                    max-height="80vh"
-                    rounded="lg"
-                    @click="showFullPreview = false"
-                    style="cursor: pointer;"
-                ></v-img>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="primary" variant="text" @click="showFullPreview = false">Fermer</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-
-    <!-- Dialog Preview Video -->
-    <v-dialog v-model="showVideoPreview" max-width="90vw">
-        <v-card rounded="xl" class="pa-2">
-            <v-card-text class="d-flex justify-center" style="padding: 16px;">
-                <video 
-                    :src="getPreviewUrl(editedQuestion.MediaUrl)" 
-                    controls
-                    autoplay
-                    disablepictureinpicture 
-                    disableremoteplayback
-                    controlslist="nodownload"
-                    style="max-width: 100%; max-height: 80vh; border-radius: 12px;"
-                ></video>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="primary" variant="text" @click="showVideoPreview = false">Fermer</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-
-    <!-- Dialog Preview Audio -->
-    <v-dialog v-model="showAudioPreview" max-width="500px">
-        <v-card rounded="xl" class="pa-4">
-            <v-card-title class="text-center">
-                <v-icon size="64" color="primary">mdi-music-circle</v-icon>
-            </v-card-title>
-            <v-card-text class="d-flex justify-center" style="padding: 16px;">
-                <audio 
-                    :src="getPreviewUrl(editedQuestion.MediaUrl)" 
-                    controls
-                    controlslist="nodownload"
-                    disablepictureinpicture 
-                    disableremoteplayback
-                    autoplay
-                    style="width: 100%;"
-                ></audio>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="primary" variant="text" @click="showAudioPreview = false">Fermer</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-
-
     <!-- Dialog Création de session -->
     <v-dialog v-model="createDialogVisible" persistent max-width="500px">
         <v-card rounded="xl">
@@ -294,121 +65,103 @@
 </template>
 
 <script setup>
+import SessionSelector from '@/components/SessionSelector.vue';
+import SessionDetails from '@/components/SessionDetails.vue';
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import mqtt from 'mqtt';
 import config from '@/config.js';
-import axios from 'axios'; 
 
+// --- État de l'Application ---
+
+// Liste des sessions disponibles récupérées via MQTT
 const availableSessions = ref([]);
+
+// ID de la session actuellement sélectionnée
 const selectedSessionId = ref(null);
 
+// Configuration de la session active (Lié au formulaire)
 const sessionConfig = reactive({
   PackId: '',
   PackTitle: '',
   Questions: []
 });
 
-const defaultQuestion = {
-  QuestionId: '',
-  Type: '',
-  Points: 1,
-  QuestionText: '',
-  MediaUrl: '',
-  Settings: {
-    StartAt: null,
-    StopAt: null,
-    AutoPlay: false,
-    Loop: false,
-    PlayTime: null,
-    DisplayMode: 'Cover',
-    BlurEffect: false
-  },
-  MasterData: {
-    CorrectAnswer: '',
-    MasterNotes: '',
-    Help: ''
-  }
-};
+// --- Gestion des Dialogues et États de Chargement ---
 
-const dialogVisible = ref(false);
-const editingIndex = ref(-1);
-const editedQuestion = reactive(JSON.parse(JSON.stringify(defaultQuestion)));
-
-// Creation Session
+// Création de session
 const createDialogVisible = ref(false);
 const newSessionName = ref('');
-const deleteDialogVisible = ref(false);
-const showFullPreview = ref(false);
-const showVideoPreview = ref(false);
-const showAudioPreview = ref(false);
 
+// Suppression de session
+const deleteDialogVisible = ref(false);
+
+// États UI
 const saving = ref(false);
-const uploading = ref(false);
 const error = ref('');
 const success = ref('');
-const uploadError = ref('');
 
-// MQTT
+// --- Configuration MQTT & API ---
+
 const mqttBrokerUrl = config.mqttBrokerUrl;
-// Guess HTTP URL from MQTT URL (assuming typical setup or localhost fallback)
-// Ideally this should be in config too
-const httpBaseUrl = mqttBrokerUrl.replace('ws://', 'http://').replace('wss://', 'https://').split(':')[0] + ':' + (config.mqttBrokerUrl.includes('localhost') ? '3000' : '3000'); 
-// Warning: This URL construction is brittle. Better to put api URL in config. But for now we assume port 3000 next to MQTT.
-// Correct logic: take protocol://hostname from mqtt, add :3000.
-function getApiUrl() {
-    // Port 3001 to avoid conflict with Vite (3000)
-    // Use the same hostname as the current page to avoid "Private Network Access" blocks
-    return `http://192.168.1.178:3001`;
-}
-const API_URL = getApiUrl();
-
-function getPreviewUrl(relativePath) {
-    if (!relativePath || relativePath.startsWith('http')) return relativePath;
-    // Construct full URL: API_URL + /quizz/ + sessionId + relativePath
-    // relativePath starts with /assets/...
-    return `${API_URL}/quizz/${selectedSessionId.value}${relativePath}`;
-}
 
+// URL API (Backend Express) définie dans config.js
+const API_URL = config.apiUrl;
 
 let client = null;
-const topics = {
-    requestList: 'game/session/list/request',
-    responseList: 'game/session/list/response',
-    requestConfig: 'game/session/config/request',
-    getConfig: 'game/session/config/get',
-    updateConfig: 'game/session/config/update',
-    createSession: 'game/session/create',
-    deleteSession: 'game/session/delete'
-};
+
+// Topics MQTT utilisés pour la communication avec le backend
+const topics = config.topics;
+
+// --- Cycle de Vie du Composant ---
 
 onMounted(() => {
+    // Connexion au broker MQTT
     client = mqtt.connect(mqttBrokerUrl);
 
     client.on('connect', () => {
-        console.log('SessionEditor: Connected to MQTT');
+        console.log('SessionEditor: Connecté à MQTT');
         client.subscribe(topics.responseList);
         client.subscribe(topics.getConfig);
         
-        // Request list of sessions
+        // Demande initiale de la liste des sessions
         client.publish(topics.requestList, '{}');
     });
 
     client.on('message', (topic, message) => {
         if (topic === topics.responseList) {
             try {
+                // Mise à jour de la liste des sessions
                 availableSessions.value = JSON.parse(message.toString());
-                console.log("Sessions received:", availableSessions.value);
+                console.log("Sessions reçues:", availableSessions.value);
             } catch (e) { console.error(e); }
         }
         else if (topic === topics.getConfig) {
             try {
+                // Chargement de la configuration de la session reçue
                 const data = JSON.parse(message.toString());
-                // Reset config
+                
+                // Réinitialisation et peuplement de sessionConfig
                 sessionConfig.Questions = [];
+                
+                // Ajout d'une clé UI unique pour chaque question (pour les animations de liste)
+                if (Array.isArray(data.Questions)) {
+                    data.Questions.forEach(q => {
+                        if (!q._ui_key) {
+                            Object.defineProperty(q, '_ui_key', {
+                                value: `q-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                                writable: true,
+                                enumerable: false,
+                                configurable: true
+                            });
+                        }
+                    });
+                }
+                
+                // Fusion des données reçues dans l'objet réactif
                 Object.assign(sessionConfig, data);
-                console.log('Session config loaded');
+                console.log('Configuration de session chargée');
             } catch (e) {
-                console.error('Error parsing session config', e);
+                console.error('Erreur parsing config session', e);
                 error.value = "Erreur lors du chargement de la configuration.";
             }
         }
@@ -419,116 +172,55 @@ onUnmounted(() => {
     if (client) client.end();
 });
 
+// --- Méthodes Métier ---
+
+// Charge la configuration de la session sélectionnée
 function loadSession() {
     if (!selectedSessionId.value) return;
-    console.log("Loading session:", selectedSessionId.value);
+    console.log("Chargement session:", selectedSessionId.value);
     client.publish(topics.requestConfig, JSON.stringify({ SessionId: selectedSessionId.value }));
 }
 
-function openQuestionDialog(item, index) {
-    if (item) {
-        editingIndex.value = index;
-        Object.assign(editedQuestion, JSON.parse(JSON.stringify(item)));
-        if(!editedQuestion.Settings) editedQuestion.Settings = {...defaultQuestion.Settings};
-        if(!editedQuestion.MasterData) editedQuestion.MasterData = {...defaultQuestion.MasterData};
-    } else {
-        editingIndex.value = -1;
-        Object.assign(editedQuestion, JSON.parse(JSON.stringify(defaultQuestion)));
-        editedQuestion.QuestionId = "Q-NEW"; 
-    }
-    dialogVisible.value = true;
-    uploadError.value = '';
-}
-
-function closeDialog() {
-    dialogVisible.value = false;
-    setTimeout(() => {
-        Object.assign(editedQuestion, JSON.parse(JSON.stringify(defaultQuestion)));
-        editingIndex.value = -1;
-    }, 300);
-}
-
-function saveQuestion() {
-    if (editingIndex.value > -1) {
-        Object.assign(sessionConfig.Questions[editingIndex.value], editedQuestion);
-    } else {
-        sessionConfig.Questions.push(JSON.parse(JSON.stringify(editedQuestion)));
-    }
-    closeDialog();
-}
-
-function deleteQuestion(index) {
-    if (confirm('Êtes-vous sûr de vouloir supprimer cette question ?')) {
-        sessionConfig.Questions.splice(index, 1);
-    }
-}
-
-function moveQuestion(index, direction) {
-    const newIndex = index + direction;
-    if (newIndex >= 0 && newIndex < sessionConfig.Questions.length) {
-        const item = sessionConfig.Questions.splice(index, 1)[0];
-        sessionConfig.Questions.splice(newIndex, 0, item);
-    }
-}
-
-function onFileSelected(event) {
-    const file = event.target.files[0];
-    if (file) {
-        handleFileUpload(file);
-    }
-    // Reset input so same file can be selected again
-    event.target.value = '';
-}
-
-async function handleFileUpload(files) {
-    if (!files) return;
-    // Vuetify v-file-input can return a single object or an array depending on version/props
-    const file = Array.isArray(files) ? files[0] : files;
-    
-    if (!file) return;
-    
-    uploading.value = true;
-    uploadError.value = '';
-
-    // Validation: Type is mandatory for folder sorting
-    if (!editedQuestion.Type) {
-        uploadError.value = "Veuillez sélectionner un Type avant d'uploader un fichier.";
-        uploading.value = false;
-        // Reset input (optional but cleanest)
-        return;
-    }
-    
+// Envoie une requête pour supprimer un fichier média spécifique
+function deleteMediaFile(mediaPath) {
     try {
-        const formData = new FormData();
-        // Append metadata BEFORE file so multer can read them first for destination/filename
-        formData.append('questionId', editedQuestion.QuestionId);
-        formData.append('type', editedQuestion.Type);
-        formData.append('file', file);
-        
-        // Upload to backend
-        const response = await axios.post(`${API_URL}/upload/${selectedSessionId.value}`, formData);
-        
-        if (response.data && response.data.path) {
-            editedQuestion.MediaUrl = response.data.path;
-            console.log("File uploaded successfully:", response.data.path);
-        }
+        const payload = JSON.stringify({
+            SessionId: selectedSessionId.value,
+            MediaPath: mediaPath
+        });
+        client.publish(topics.deleteMedia, payload);
+        console.log("Requête suppression média envoyée:", payload);
     } catch (e) {
-        console.error("Upload error:", e);
-        uploadError.value = "Erreur lors de l'upload du fichier.";
-    } finally {
-        uploading.value = false;
+        console.error("Erreur suppression média", e);
     }
 }
 
+// Envoie une requête pour renommer un fichier média
+function renameMediaFile({ oldPath, newName }) {
+    try {
+        const payload = JSON.stringify({
+            SessionId: selectedSessionId.value,
+            OldPath: oldPath,
+            NewName: newName
+        });
+        client.publish(topics.renameMedia, payload);
+        console.log("Requête renommage média envoyée:", payload);
+    } catch (e) {
+        console.error("Erreur renommage média", e);
+    }
+}
+
+// Ouvre le dialogue de création
 function openCreateDialog() {
     newSessionName.value = '';
     createDialogVisible.value = true;
 }
 
+// Crée une nouvelle session via MQTT
 function createSession() {
     if (!newSessionName.value) return;
     
-    console.log("Creating session:", newSessionName.value);
+    console.log("Création session:", newSessionName.value);
     
     try {
         const payload = JSON.stringify({ SessionName: newSessionName.value });
@@ -539,15 +231,16 @@ function createSession() {
         
         createDialogVisible.value = false;
     } catch (e) {
-        console.error("Error creating session", e);
+        console.error("Erreur création session", e);
         error.value = "Erreur lors de la création.";
     }
 }
 
+// Supprime la session actuellement sélectionnée
 function confirmDeleteSession() {
     if (!selectedSessionId.value) return;
     
-    console.log("Deleting session:", selectedSessionId.value);
+    console.log("Suppression session:", selectedSessionId.value);
     
     try {
         const payload = JSON.stringify({ SessionId: selectedSessionId.value });
@@ -562,11 +255,12 @@ function confirmDeleteSession() {
         sessionConfig.PackId = '';
         sessionConfig.PackTitle = '';
     } catch (e) {
-        console.error("Error deleting session", e);
+        console.error("Erreur suppression session", e);
         error.value = "Erreur lors de la suppression.";
     }
 }
 
+// Sauvegarde la configuration actuelle via MQTT
 function saveSession() {
     if (!selectedSessionId.value) return;
     saving.value = true;
@@ -576,7 +270,15 @@ function saveSession() {
     try {
         const payload = JSON.stringify({
             SessionId: selectedSessionId.value,
-            Config: sessionConfig
+            Config: JSON.parse(JSON.stringify(sessionConfig, (key, value) => {
+                // Filter out keys starting with underscore (internal UI state)
+                if (key.startsWith('_')) return undefined;
+                // Filter out cache busting querystring
+                if (key === 'MediaUrl' && typeof value === 'string') {
+                    return value.split('?')[0];
+                }
+                return value;
+            }))
         });
         client.publish(topics.updateConfig, payload);
         success.value = "Sauvegarde envoyée."; 
@@ -607,4 +309,6 @@ function saveSession() {
         font-size: 20px;
         font-weight: bold;
     }
+
+
 </style>