Nouveau player video du game display

2026-01-23 18:48:41 +01:00
parent 5c16468157
commit bc8846d9eb
1 changed files with 121 additions and 0 deletions
--- a/VApp/src/components/VideoPlayer.vue
+++ b/VApp/src/components/VideoPlayer.vue
@@ -0,0 +1,121 @@
+<template>
+    <v-container v-show="gamehiding === false" class="player_video_div">
+        <video
+        ref="videoJsPlayer"
+        class="video-js  player_video"
+        controls
+        ></video>
+    </v-container>
+</template>
+
+<script setup>
+    import { ref, onMounted, onBeforeUnmount } from 'vue';
+    import videojs from 'video.js';
+    import 'video.js/dist/video-js.css';
+    import Mysteryland_h264 from '@/quizz/Quizz-1/festival/Mysteryland_h264.mp4';
+    import { subscribeToTopic } from '@/services/mqttService';
+    let gamehiding = ref(true);
+
+    let player = ref(null);
+    const videoOptions = {
+    autoplay: false,
+    controls: false,
+    preload: 'auto',
+    fluid: true,
+    loop: false,
+    volume: 0,
+    sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
+    };
+
+    const handleMessage = (topic, message) => {
+        console.log(topic, message)
+        if (topic === "/display/media") {
+            switch (message) {
+            case "BOX_BEAT.mp4":
+                changeVideoSource("BOX_BEAT.mp4")
+                break;
+            case "DARK_VALLEY.mp4":
+                changeVideoSource("DARK_VALLEY.mp4")
+                break;
+            }
+        }
+        if (topic === "/display/control") {
+            switch (message) {
+            case "play":
+                gamehiding.value = false;
+                console.log("▶️ Lecture de la vidéo !");
+                player.value.play().catch((error) => {
+                console.error("Erreur de lecture :", error);
+                });
+                break;
+            case "pause":
+                gamehiding.value = true;
+                console.log("⏸️ Pause de la vidéo !");
+                player.value.pause();
+                break;
+            case "hide":
+                console.log("🛑 Cacher la vidéo (implémentation à venir)");
+                break;
+            }
+        }
+    };
+    const changeVideoSource = (relativePath) => {
+    try {
+        const fullPath = new URL(`../quizz/Quizz-1/festival/${relativePath}`, import.meta.url).href;
+
+        if (player.value) {
+            if (relativePath.includes("mp4")){
+            player.value.src({ src: fullPath, type: 'video/mp4' });
+            }
+            if (relativePath.includes(".jpg")){
+            player.value.src({ src: fullPath, type: 'image/jpeg' });
+            }
+            player.value.load();
+            player.value.play().catch((err) => console.error('Erreur lecture :', err));
+        }
+    } catch (error) {
+        console.error('❌ Erreur lors du chargement de la vidéo :', error);
+    }
+    };
+
+    // --- Lifecycle
+    onMounted(() => {
+    player.value = videojs(
+        document.querySelector('.video-js'),
+        videoOptions,
+        () => {
+        console.log('🎥 Video player ready');
+        }
+    );
+
+    subscribeToTopic('#', (topic, message) => {
+        handleMessage(topic, message);
+        });
+    });
+
+    onBeforeUnmount(() => {
+    if (player) {
+        player.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;
+  }
+
+</style>