Merge pull request '(update) mise à jour des commentaires en francais' (#4) from update/improve-uix into main

Reviewed-on: #4

VApp/src/components/BuzzerValidationDialog.vue

@@ -47,7 +47,7 @@
     const buzzerColor = ref('');
     const client = mqtt.connect(config.mqttBrokerUrl);
 
-    // Map hex colors to team names if needed, or just use the color directly
+    // Associe les couleurs hex aux noms d'équipe si besoin, ou utilise directement la couleur
     function getTeamNameFromColor(color) {
         const c = color.toUpperCase();
         const colors = theme.current.value.colors;
@@ -59,7 +59,7 @@
         if (c === colors.BlueBuzzer.toUpperCase()) return 'bleue';
         if (c === colors.YellowBuzzer.toUpperCase()) return 'jaune';
         if (c === colors.GreenBuzzer.toUpperCase()) return 'verte';
-        return color; // Fallback
+        return color; // Valeur par défaut
     }
 
     function getTeamKeyFromColor(color) {
@@ -88,7 +88,7 @@
                         buzzerTeam.value = getTeamNameFromColor(data.color);
                         dialog.value = true;
                     } else if (data.status === 'unblocked') {
-                        // Optional: auto-close if unblocked from elsewhere
+                        // Optionnel : fermer automatiquement si débloqué depuis ailleurs
                         dialog.value = false;
                     }
                 } catch (e) {
@@ -109,7 +109,7 @@
             client.publish('game/score/update', JSON.stringify(payload));
         }
         
-        // Add a small delay before unlocking to ensure the score update is processed
+        // Petit délai avant le déblocage pour que la mise à jour du score soit traitée
         setTimeout(() => {
             unlockBuzzers();
         }, 100);
@@ -134,7 +134,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 100%; /* Ensure it takes full height of the container if possible, or substantial height */
+        height: 100%; /* S'assure que l'élément occupe toute la hauteur du conteneur si possible, ou une hauteur substantielle */
     }
     .validate-btn {
         color: rgb(var(--v-theme-background),1);

VApp/src/components/GameMedia.vue

@@ -2,13 +2,13 @@
     <v-container v-show="gamehiding === false" class="player_video_div">
         <div v-if="currentQuestion" style="width: 100%; height: 100%;">
             
-            <!-- VIDEO PLAYER -->
+            <!-- LECTEUR VIDÉO -->
             <div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
                 <video ref="videoPlayer" class="video-js player_video" controls preload="auto">
                 </video>
             </div>
 
-            <!-- PICTURE DISPLAY -->
+            <!-- AFFICHAGE IMAGE -->
             <div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
                 <v-img 
                     :src="getMediaUrl(currentQuestion.MediaUrl)" 
@@ -17,7 +17,7 @@
                 ></v-img>
             </div>
 
-            <!-- AUDIO PLAYER -->
+            <!-- LECTEUR AUDIO -->
              <div v-if="currentQuestion.Type === 'audio'" class="audio-container player_video">
                  <div class="audio-visualizer">
                     <v-icon size="150" color="white" class="mb-4">mdi-music-circle</v-icon>
@@ -37,19 +37,19 @@ import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 import { subscribeToTopic, publishMessage } from '@/services/mqttService';
 
-// Store Access
+// Accès au store
 const currentQuestion = quizStore.getters.currentQuestion;
 
-// Video Player Refs
+// Références du lecteur vidéo
 const videoPlayer = ref(null);
 let vjsPlayer = null;
 
-// Audio Player Refs
+// Références du lecteur audio
 const audioPlayer = ref(null);
 
 let gamehiding = ref(true);
 
-// Methods
+// Méthodes
 function getMediaUrl(relativePath) {
     if (!relativePath) return '';
     const cleanPath = relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
@@ -59,8 +59,8 @@ function getMediaUrl(relativePath) {
 }
 
 function initVideoPlayer() {
-    if (vjsPlayer) return; // Already init
-    if (!videoPlayer.value) return; // DOM not ready
+    if (vjsPlayer) return; // Déjà initialisé
+    if (!videoPlayer.value) return; // DOM pas prêt
 
     console.log('GameMedia: Initializing VideoJS');
     vjsPlayer = videojs(videoPlayer.value, {
@@ -72,12 +72,12 @@ function initVideoPlayer() {
         volume: 0,
     }, () => {
         console.log('GameMedia: VideoJS Ready');
-        // If current question is video, load it
+        // Si la question courante est une vidéo, la charger
         if (currentQuestion.value && currentQuestion.value.Type === 'video') {
              updateVideoSource();
         }
         
-        // Auto-hide when video ends
+        // Masquer automatiquement à la fin de la vidéo
         vjsPlayer.on('ended', () => {
             console.log('GameMedia: Video ended, hiding');
             gamehiding.value = true;
@@ -93,17 +93,17 @@ function updateVideoSource() {
     console.log('GameMedia: Loading Video Source', url);
     vjsPlayer.src({ type: 'video/mp4', src: url });
     
-    // AutoPlay is managed by MQTT 'play' command now
+    // L'autoplay est géré par la commande MQTT 'play' maintenant
     // if (currentQuestion.value.Settings?.AutoPlay) {
     //      vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
     // }
 }
 
-// Watchers
+// Observateurs
 watch(currentQuestion, async (newVal, oldVal) => {
     console.log('GameMedia: Question Changed', newVal);
     
-    // Stop all media first
+    // Arrêter d'abord tous les médias
     if (vjsPlayer) {
         vjsPlayer.pause();
     }
@@ -111,12 +111,12 @@ watch(currentQuestion, async (newVal, oldVal) => {
         audioPlayer.value.pause();
     }
     
-    // Ensure hidden on question change until played
+    // Rester masqué au changement de question jusqu'à la lecture
     gamehiding.value = true;
     publishMessage('/display/control', 'hide');
     if (!newVal) return;
 
-    await nextTick(); // Wait for DOM updates (v-if)
+    await nextTick(); // Attendre la mise à jour du DOM (v-if)
 
     if (newVal.Type === 'video') {
          if (!vjsPlayer) {
@@ -125,13 +125,13 @@ watch(currentQuestion, async (newVal, oldVal) => {
              updateVideoSource();
          }
     } else if (newVal.Type === 'audio') {
-        // Audio loading (no autoplay)
+        // Chargement audio (pas d'autoplay)
          setTimeout(() => {
              if(audioPlayer.value){
                   console.log('GameMedia: Loading Audio');
                   audioPlayer.value.load();
                   
-                  // Auto-hide when audio ends
+                  // Masquer automatiquement à la fin de l'audio
                   audioPlayer.value.onended = () => {
                       console.log('GameMedia: Audio ended, hiding');
                       gamehiding.value = true;
@@ -140,10 +140,10 @@ watch(currentQuestion, async (newVal, oldVal) => {
              }
          }, 100);
     }
-    // For 'picture' type, nothing to do, video/audio are already paused
+    // Pour le type 'picture', rien à faire, vidéo/audio déjà en pause
 }, { immediate: true });
 
-// Lifecycle
+// Cycle de vie
 onMounted(async () => {
     await nextTick();
     if (currentQuestion.value?.Type === 'video') {
@@ -170,7 +170,7 @@ const handleMessage = (topic, message) => {
                     audioPlayer.value.play().catch(e => console.error("Error playing audio:", e));
                 }
                 if (currentQuestion.value?.Type === 'picture') {
-                    // Start timer if PlayTime is configured
+                    // Démarrer le timer si PlayTime est configuré
                     const playTime = currentQuestion.value.Settings?.PlayTime;
                     if (playTime && playTime > 0) {
                         quizStore.actions.startTimer(playTime);
@@ -195,10 +195,9 @@ const handleMessage = (topic, message) => {
                 break;
         }
     }
-    // Check for buzzer status if we want to auto-hide on buzz (like HidingOverlay)
-    // The user asked to replicate VideoPlayer, which only had /display/control in the provided snippet.
-    // But if "mesmes événéments" implies behavior of the system...
-    // I'll stick to VideoPlayer replication first.
+    // Vérifier le statut du buzzer pour masquer automatiquement au buzz (comme HidingOverlay)
+    // Réplication de VideoPlayer qui n'avait que /display/control dans l'extrait fourni.
+    // Comportement optionnel selon les événements du système.
     if (topic === 'vulture/buzzer/status') {
          try {
              const data = JSON.parse(message);
@@ -237,7 +236,7 @@ onBeforeUnmount(() => {
     border-radius: 25px;
   }
   
-  /* Additional styles for Audio/Custom elements to fit the theme */
+  /* Styles additionnels pour les éléments Audio/Custom pour s'adapter au thème */
   .audio-container {
       display: flex;
         flex-direction: column;