Merge pull request 'update/improve-uix' (#3) from update/improve-uix into main

Reviewed-on: #3

VApp/src/components/BuzzerValidationDialog.vue

@@ -47,7 +47,7 @@
     const buzzerColor = ref('');
     const client = mqtt.connect(config.mqttBrokerUrl);
 
-    // Associe les couleurs hex aux noms d'équipe si besoin, ou utilise directement la couleur
+    // Map hex colors to team names if needed, or just use the color directly
     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; // Valeur par défaut
+        return color; // Fallback
     }
 
     function getTeamKeyFromColor(color) {
@@ -88,7 +88,7 @@
                         buzzerTeam.value = getTeamNameFromColor(data.color);
                         dialog.value = true;
                     } else if (data.status === 'unblocked') {
-                        // Optionnel : fermer automatiquement si débloqué depuis ailleurs
+                        // Optional: auto-close if unblocked from elsewhere
                         dialog.value = false;
                     }
                 } catch (e) {
@@ -109,7 +109,7 @@
             client.publish('game/score/update', JSON.stringify(payload));
         }
         
-        // Petit délai avant le déblocage pour que la mise à jour du score soit traitée
+        // Add a small delay before unlocking to ensure the score update is processed
         setTimeout(() => {
             unlockBuzzers();
         }, 100);
@@ -134,7 +134,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 100%; /* S'assure que l'élément occupe toute la hauteur du conteneur si possible, ou une hauteur substantielle */
+        height: 100%; /* Ensure it takes full height of the container if possible, or substantial height */
     }
     .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%;">
             
-            <!-- LECTEUR VIDÉO -->
+            <!-- VIDEO PLAYER -->
             <div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
                 <video ref="videoPlayer" class="video-js player_video" controls preload="auto">
                 </video>
             </div>
 
-            <!-- AFFICHAGE IMAGE -->
+            <!-- PICTURE DISPLAY -->
             <div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
                 <v-img 
                     :src="getMediaUrl(currentQuestion.MediaUrl)" 
@@ -17,7 +17,7 @@
                 ></v-img>
             </div>
 
-            <!-- LECTEUR AUDIO -->
+            <!-- AUDIO PLAYER -->
              <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';
 
-// Accès au store
+// Store Access
 const currentQuestion = quizStore.getters.currentQuestion;
 
-// Références du lecteur vidéo
+// Video Player Refs
 const videoPlayer = ref(null);
 let vjsPlayer = null;
 
-// Références du lecteur audio
+// Audio Player Refs
 const audioPlayer = ref(null);
 
 let gamehiding = ref(true);
 
-// Méthodes
+// Methods
 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; // Déjà initialisé
-    if (!videoPlayer.value) return; // DOM pas prêt
+    if (vjsPlayer) return; // Already init
+    if (!videoPlayer.value) return; // DOM not ready
 
     console.log('GameMedia: Initializing VideoJS');
     vjsPlayer = videojs(videoPlayer.value, {
@@ -72,12 +72,12 @@ function initVideoPlayer() {
         volume: 0,
     }, () => {
         console.log('GameMedia: VideoJS Ready');
-        // Si la question courante est une vidéo, la charger
+        // If current question is video, load it
         if (currentQuestion.value && currentQuestion.value.Type === 'video') {
              updateVideoSource();
         }
         
-        // Masquer automatiquement à la fin de la vidéo
+        // Auto-hide when video ends
         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 });
     
-    // L'autoplay est géré par la commande MQTT 'play' maintenant
+    // AutoPlay is managed by MQTT 'play' command now
     // if (currentQuestion.value.Settings?.AutoPlay) {
     //      vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
     // }
 }
 
-// Observateurs
+// Watchers
 watch(currentQuestion, async (newVal, oldVal) => {
     console.log('GameMedia: Question Changed', newVal);
     
-    // Arrêter d'abord tous les médias
+    // Stop all media first
     if (vjsPlayer) {
         vjsPlayer.pause();
     }
@@ -111,12 +111,12 @@ watch(currentQuestion, async (newVal, oldVal) => {
         audioPlayer.value.pause();
     }
     
-    // Rester masqué au changement de question jusqu'à la lecture
+    // Ensure hidden on question change until played
     gamehiding.value = true;
     publishMessage('/display/control', 'hide');
     if (!newVal) return;
 
-    await nextTick(); // Attendre la mise à jour du DOM (v-if)
+    await nextTick(); // Wait for DOM updates (v-if)
 
     if (newVal.Type === 'video') {
          if (!vjsPlayer) {
@@ -125,13 +125,13 @@ watch(currentQuestion, async (newVal, oldVal) => {
              updateVideoSource();
          }
     } else if (newVal.Type === 'audio') {
-        // Chargement audio (pas d'autoplay)
+        // Audio loading (no autoplay)
          setTimeout(() => {
              if(audioPlayer.value){
                   console.log('GameMedia: Loading Audio');
                   audioPlayer.value.load();
                   
-                  // Masquer automatiquement à la fin de l'audio
+                  // Auto-hide when audio ends
                   audioPlayer.value.onended = () => {
                       console.log('GameMedia: Audio ended, hiding');
                       gamehiding.value = true;
@@ -140,10 +140,10 @@ watch(currentQuestion, async (newVal, oldVal) => {
              }
          }, 100);
     }
-    // Pour le type 'picture', rien à faire, vidéo/audio déjà en pause
+    // For 'picture' type, nothing to do, video/audio are already paused
 }, { immediate: true });
 
-// Cycle de vie
+// Lifecycle
 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') {
-                    // Démarrer le timer si PlayTime est configuré
+                    // Start timer if PlayTime is configured
                     const playTime = currentQuestion.value.Settings?.PlayTime;
                     if (playTime && playTime > 0) {
                         quizStore.actions.startTimer(playTime);
@@ -195,9 +195,10 @@ const handleMessage = (topic, message) => {
                 break;
         }
     }
-    // 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.
+    // 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.
     if (topic === 'vulture/buzzer/status') {
          try {
              const data = JSON.parse(message);
@@ -236,7 +237,7 @@ onBeforeUnmount(() => {
     border-radius: 25px;
   }
   
-  /* Styles additionnels pour les éléments Audio/Custom pour s'adapter au thème */
+  /* Additional styles for Audio/Custom elements to fit the theme */
   .audio-container {
       display: flex;
         flex-direction: column;

VHard/affichage_score_kiosque.md

@@ -0,0 +1,84 @@
+# Documentation Déploiement Kiosque - Tableau de Score
+
+Ce document décrit la configuration du serveur Fedora pour lancer automatiquement Google Chrome en mode plein écran au démarrage via un compositeur Wayland minimaliste (Cage).
+
+## 1. Installation des dépendances
+
+```bash
+sudo dnf install -y https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
+sudo dnf install -y cage
+
+```
+
+## 2. Configuration de l'Autologin (Systemd)
+
+Créer le fichier d'override pour que le serveur se connecte seul sur le TTY1 :
+`sudo systemctl edit getty@tty1.service`
+
+Coller le contenu suivant :
+
+```ini
+[Service]
+ExecStart=
+ExecStart=-/sbin/agetty --autologin VOTRE_USER --noclear %I $TERM
+
+```
+
+## 3. Script de lancement et Watchdog
+
+Créer un script nommé `kiosk-waiter.sh` dans votre dossier personnel pour relancer Chrome s'il crash :
+
+```bash
+#!/bin/bash
+# kiosk-waiter.sh
+
+URL="https://votre-url-quizz.com"
+
+while true; do
+  cage -- google-chrome-stable \
+    --kiosk \
+    --no-first-run \
+    --password-store=basic \
+    --ozone-platform=wayland \
+    --autoplay-policy=no-user-gesture-required \
+    --disable-component-update \
+    "$URL"
+
+  echo "Chrome s'est arrêté. Relancement dans 2 secondes..."
+  sleep 2
+done
+
+```
+
+*N'oubliez pas : `chmod +x ~/kiosk-waiter.sh*`
+
+## 4. Configuration Zsh (`~/.zlogin`)
+
+Ajouter ces lignes à la fin de votre fichier `~/.zlogin` pour déclencher l'affichage uniquement sur le port HDMI physique (TTY1) :
+
+```zsh
+# Empêcher la mise en veille de l'écran
+setterm --blank 0 --powersave off --powerdown 0
+
+if [[ -z "$DISPLAY" && "$XDG_VTNR" -eq 1 ]]; then
+  export MOZ_ENABLE_WAYLAND=1
+  export XDG_SESSION_TYPE=wayland
+
+  # Lancement du script de monitoring
+  exec ~/kiosk-waiter.sh
+fi
+
+```
+
+## 5. Debug et Commandes utiles
+
+* **Relancer le navigateur à distance (SSH) :**
+`pkill -u $USER cage` (Le script de boucle le relancera instantanément).
+* **Vérifier les logs :**
+`journalctl -u getty@tty1.service`
+* **Forcer l'arrêt :**
+Supprimer temporairement l'appel dans `~/.zlogin` ou tuer le script `kiosk-waiter.sh`.
+
+---
+
+*Note : Si vous utilisez Podman pour le reste du projet (Vulture), ce setup "Bare Metal" pour l'affichage garantit une latence minimale pour les animations du tableau de score.*