From 56243361731b941a45fbb0ce9f0733ec6e26a6f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sun, 1 Feb 2026 16:17:10 +0100
Subject: [PATCH] (new) add the new media manager in the GameDisplay

---
 VApp/src/components/GameMedia.vue | 266 ++++++++++++++++++++++++++++++
 1 file changed, 266 insertions(+)
 create mode 100644 VApp/src/components/GameMedia.vue

diff --git a/VApp/src/components/GameMedia.vue b/VApp/src/components/GameMedia.vue
new file mode 100644
index 00000000..0229e08c
--- /dev/null
+++ b/VApp/src/components/GameMedia.vue
@@ -0,0 +1,266 @@
+<template>
+    <v-container v-show="gamehiding === false" class="player_video_div">
+        <div v-if="currentQuestion" style="width: 100%; height: 100%;">
+            
+            <!-- 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>
+
+            <!-- PICTURE DISPLAY -->
+            <div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
+                <v-img 
+                    :src="getMediaUrl(currentQuestion.MediaUrl)" 
+                    :key="currentQuestion.QuestionId"
+                    class="player_video"
+                ></v-img>
+            </div>
+
+            <!-- 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>
+                    <span class="text-h2 white--text">ÉCOUTEZ</span>
+                 </div>
+                 <audio ref="audioPlayer" :src="getMediaUrl(currentQuestion.MediaUrl)" class="custom-audio"></audio>
+             </div>
+
+        </div>
+    </v-container>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import quizStore from '@/store/quizStore';
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import { subscribeToTopic, publishMessage } from '@/services/mqttService';
+
+// Store Access
+const currentQuestion = quizStore.getters.currentQuestion;
+
+// Video Player Refs
+const videoPlayer = ref(null);
+let vjsPlayer = null;
+
+// Audio Player Refs
+const audioPlayer = ref(null);
+
+let gamehiding = ref(true);
+
+// Methods
+function getMediaUrl(relativePath) {
+    if (!relativePath) return '';
+    const cleanPath = relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
+    const url = new URL(`../quizz/vulture-session-2026-01/${cleanPath}`, import.meta.url).href;
+    console.log('GameMedia: Resolved URL:', { relativePath, url });
+    return url;
+}
+
+function initVideoPlayer() {
+    if (vjsPlayer) return; // Already init
+    if (!videoPlayer.value) return; // DOM not ready
+
+    console.log('GameMedia: Initializing VideoJS');
+    vjsPlayer = videojs(videoPlayer.value, {
+        autoplay: false,
+        controls: false,
+        preload: 'auto',
+        fluid: true,
+        loop: false,
+        volume: 0,
+    }, () => {
+        console.log('GameMedia: VideoJS Ready');
+        // If current question is video, load it
+        if (currentQuestion.value && currentQuestion.value.Type === 'video') {
+             updateVideoSource();
+        }
+        
+        // Auto-hide when video ends
+        vjsPlayer.on('ended', () => {
+            console.log('GameMedia: Video ended, hiding');
+            gamehiding.value = true;
+            publishMessage('/display/control', 'hide');
+        });
+    });
+}
+
+function updateVideoSource() {
+    if (!vjsPlayer || !currentQuestion.value) return;
+    
+    const url = getMediaUrl(currentQuestion.value.MediaUrl);
+    console.log('GameMedia: Loading Video Source', url);
+    vjsPlayer.src({ type: 'video/mp4', src: url });
+    
+    // AutoPlay is managed by MQTT 'play' command now
+    // if (currentQuestion.value.Settings?.AutoPlay) {
+    //      vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
+    // }
+}
+
+// Watchers
+watch(currentQuestion, async (newVal, oldVal) => {
+    console.log('GameMedia: Question Changed', newVal);
+    
+    // Stop all media first
+    if (vjsPlayer) {
+        vjsPlayer.pause();
+    }
+    if (audioPlayer.value) {
+        audioPlayer.value.pause();
+    }
+    
+    // Ensure hidden on question change until played
+    gamehiding.value = true;
+    publishMessage('/display/control', 'hide');
+    if (!newVal) return;
+
+    await nextTick(); // Wait for DOM updates (v-if)
+
+    if (newVal.Type === 'video') {
+         if (!vjsPlayer) {
+             initVideoPlayer();
+         } else {
+             updateVideoSource();
+         }
+    } else if (newVal.Type === 'audio') {
+        // Audio loading (no autoplay)
+         setTimeout(() => {
+             if(audioPlayer.value){
+                  console.log('GameMedia: Loading Audio');
+                  audioPlayer.value.load();
+                  
+                  // Auto-hide when audio ends
+                  audioPlayer.value.onended = () => {
+                      console.log('GameMedia: Audio ended, hiding');
+                      gamehiding.value = true;
+                      publishMessage('/display/control', 'hide');
+                  };
+             }
+         }, 100);
+    }
+    // For 'picture' type, nothing to do, video/audio are already paused
+}, { immediate: true });
+
+// Lifecycle
+onMounted(async () => {
+    await nextTick();
+    if (currentQuestion.value?.Type === 'video') {
+        initVideoPlayer();
+    }
+
+    subscribeToTopic('#', (topic, message) => {
+        handleMessage(topic, message);
+    });
+});
+
+const handleMessage = (topic, message) => {
+    console.log('GameMedia: Received', topic, message);
+    if (topic === "/display/control") {
+        switch (message) {
+            case "play":
+                gamehiding.value = false;
+                console.log("▶️ GameMedia: Play");
+                // Only play the media relevant to this question type
+                if (currentQuestion.value?.Type === 'video' && vjsPlayer) {
+                    vjsPlayer.play().catch(e => console.error("Error playing video:", e));
+                }
+                if (currentQuestion.value?.Type === 'audio' && audioPlayer.value) {
+                    audioPlayer.value.play().catch(e => console.error("Error playing audio:", e));
+                }
+                if (currentQuestion.value?.Type === 'picture') {
+                    // Start timer if PlayTime is configured
+                    const playTime = currentQuestion.value.Settings?.PlayTime;
+                    if (playTime && playTime > 0) {
+                        quizStore.actions.startTimer(playTime);
+                    }
+                }
+                break;
+            case "pause":
+                gamehiding.value = true;
+                console.log("⏸️ GameMedia: Pause");
+                quizStore.actions.stopTimer();
+                if (vjsPlayer) {
+                    vjsPlayer.pause();
+                }
+                if (audioPlayer.value) {
+                    audioPlayer.value.pause();
+                }
+                break;
+             case "hide":
+                console.log("🛑 GameMedia: Hide");
+                gamehiding.value = true;
+                quizStore.actions.stopTimer();
+                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.
+    if (topic === 'vulture/buzzer/status') {
+         try {
+             const data = JSON.parse(message);
+             if (data.status === 'blocked') {
+                 console.log("GameMedia: Buzzer Blocked -> Hiding");
+                 gamehiding.value = true;
+                 if (vjsPlayer) vjsPlayer.pause();
+                 if (audioPlayer.value) audioPlayer.value.pause();
+             }
+         } catch (e) { console.error('JSON Error', e); }
+    }
+};
+
+onBeforeUnmount(() => {
+    if (vjsPlayer) {
+        vjsPlayer.dispose();
+    }
+});
+</script>
+
+<style>
+.player_video_div {
+    margin-top: 40px;
+    width: calc(100vw - 20%);
+    height: calc(100vh - 20%);
+    border-radius: 20px !important;
+  }
+  .player_video {
+    width: 100%;
+    height: 100%;
+    max-width: 100vw;
+    max-height: 100vh;
+    border-radius: 25px !important;
+  }
+  .vjs-tech{
+    border-radius: 25px;
+  }
+  
+  /* Additional styles for Audio/Custom elements to fit the theme */
+  .audio-container {
+      display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: linear-gradient(45deg, #1a1a1a, #2c3e50);
+  }
+  .audio-visualizer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        animation: pulse 2s infinite;
+    }
+    .text-h2 {
+        font-family: 'Bahnschrift', sans-serif !important;
+    }
+    .custom-audio {
+        margin-top: 30px;
+        width: 80%;
+    }
+    @keyframes pulse {
+        0% { transform: scale(1); opacity: 0.8; }
+        50% { transform: scale(1.05); opacity: 1; }
+        100% { transform: scale(1); opacity: 0.8; }
+    }
+</style>