Vulture/VApp/src/views/GameDisplay.vue

<template>
  <div class="main_div">
    <div>
      <v-container class="score_div_main">
        <v-container class="score_div color-blue"></v-container>
        <v-container class="score_div color-red"></v-container>
        <v-container class="score_div color-white d-flex align-center justify-center">
          <span class="v-label-time">00:00</span>
        </v-container>
        <v-container class="score_div color-green"></v-container>
        <v-container class="score_div color-yellow"></v-container>
      </v-container>
    </div>

    <div>
      <v-container v-show="gamehiding === true" class="v-container-game-hided">
        <v-img src="@\assets\v-hide.png" class="v-img-hidding"></v-img>
      </v-container>
      <v-container v-show="gamehiding === false" class="player_video_div">
          <video
            ref="videoJsPlayer"
            class="video-js  player_video"
            controls
          ></video>
      </v-container>
    </div>
  </div>
</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';

// --- Déclarations
const player = ref(null);
let gamehiding = ref(true)

const videoOptions = {
  autoplay: false,
  controls: false,
  preload: 'auto',
  fluid: true,
  loop: true,
  volume: 0,
  sources: [{ src: Mysteryland_h264, type: 'video/mp4' }],
};

// --- Fonctions
const playVideo = () => {
  if (player.value) {
    console.log("▶️ Lecture de la vidéo !");
    player.value.play().catch((error) => {
      console.error("Erreur de lecture :", error);
    });
  } else {
    console.warn("⚠️ Player non encore initialisé !");
  }
};

const pauseVideo = () => {
  if (player.value) {
    console.log("⏸️ Pause de la vidéo !");
    player.value.pause();
  } else {
    console.warn("⚠️ Player non encore initialisé !");
  }
};

const handleMessage = (topic, message) => {
  if (topic === "/display/control") {
    switch (message) {
      case "play":
        gamehiding.value = false;
        playVideo();
        break;
      case "pause":
        gamehiding.value = true;
        pauseVideo();
        break;
      case "hide":
        console.log("🛑 Cacher la vidéo (implémentation à venir)");
        break;
      default:
        console.warn("Commande non reconnue :", message);
    }
  }
};

// --- Lifecycle
onMounted(() => {
  player.value = videojs(
    document.querySelector('.video-js'),
    videoOptions,
    () => {
      console.log('🎥 Video player ready');
    }
  );

  subscribeToTopic('#', (topic, message) => {
    handleMessage(topic, message);
  });
});

onBeforeUnmount(() => {
  if (player.value) {
    player.value.dispose();
  }
});
</script>

<style scoped>
  .main_div {
    width: 100vw;
    height: calc(100vh - 15px);
    text-align: center;
  }
  .score_div_main {
    width: 60%;
    display: flex;
    justify-content: center;
    gap: 5px;
    background-color: rgb(80, 80, 80);
    padding: 25px 30px;
    border-radius: 0px 0px 30px 30px;
    box-shadow: 0px 1px 5px rgb(255, 0, 0);
  }
  .score_div {
    height: 100px;
    width: 170px;
    text-align: center;
  }
  .color-blue {
    background-color: rgb(var(--v-theme-BlueBuzzer), 1);
    border-radius: 40px 5px 40px 5px;
  }
  .color-red {
    background-color: rgb(var(--v-theme-RedBuzzer), 1);
    border-radius: 40px 5px 40px 5px;
  }
  .color-green {
    background-color: rgb(var(--v-theme-GreenBuzzer), 1);
    border-radius: 5px 40px 5px 40px;
  }
  .color-yellow {
    background-color: rgb(var(--v-theme-YellowBuzzer), 1);
    border-radius: 5px 40px 5px 40px;
  }
  .color-white {
    background-color: white;
    border-radius: 40px;
  }
  .v-label-time {
    padding-top: 5px;
    color: black;
    font-size: 49px;
    font-family: 'Bahnschrift';
  }
  .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;
  }
  .v-container-game-hided{
    margin-top: 40px;
    width: calc(100vw - 20%) !important;
    height: calc(100vh - 20%) !important;
    border-radius: 25px;
  }
  .v-img-hidding{
    border-radius: 25px;
  }
</style>