update/improve-uix #3
266
VApp/src/components/GameMedia.vue
Normal file
266
VApp/src/components/GameMedia.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user