(update) mise à jour des commentaires en francais
This commit is contained in:
@@ -47,7 +47,7 @@
|
|||||||
const buzzerColor = ref('');
|
const buzzerColor = ref('');
|
||||||
const client = mqtt.connect(config.mqttBrokerUrl);
|
const client = mqtt.connect(config.mqttBrokerUrl);
|
||||||
|
|
||||||
// Map hex colors to team names if needed, or just use the color directly
|
// Associe les couleurs hex aux noms d'équipe si besoin, ou utilise directement la couleur
|
||||||
function getTeamNameFromColor(color) {
|
function getTeamNameFromColor(color) {
|
||||||
const c = color.toUpperCase();
|
const c = color.toUpperCase();
|
||||||
const colors = theme.current.value.colors;
|
const colors = theme.current.value.colors;
|
||||||
@@ -59,7 +59,7 @@
|
|||||||
if (c === colors.BlueBuzzer.toUpperCase()) return 'bleue';
|
if (c === colors.BlueBuzzer.toUpperCase()) return 'bleue';
|
||||||
if (c === colors.YellowBuzzer.toUpperCase()) return 'jaune';
|
if (c === colors.YellowBuzzer.toUpperCase()) return 'jaune';
|
||||||
if (c === colors.GreenBuzzer.toUpperCase()) return 'verte';
|
if (c === colors.GreenBuzzer.toUpperCase()) return 'verte';
|
||||||
return color; // Fallback
|
return color; // Valeur par défaut
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTeamKeyFromColor(color) {
|
function getTeamKeyFromColor(color) {
|
||||||
@@ -88,7 +88,7 @@
|
|||||||
buzzerTeam.value = getTeamNameFromColor(data.color);
|
buzzerTeam.value = getTeamNameFromColor(data.color);
|
||||||
dialog.value = true;
|
dialog.value = true;
|
||||||
} else if (data.status === 'unblocked') {
|
} else if (data.status === 'unblocked') {
|
||||||
// Optional: auto-close if unblocked from elsewhere
|
// Optionnel : fermer automatiquement si débloqué depuis ailleurs
|
||||||
dialog.value = false;
|
dialog.value = false;
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -109,7 +109,7 @@
|
|||||||
client.publish('game/score/update', JSON.stringify(payload));
|
client.publish('game/score/update', JSON.stringify(payload));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add a small delay before unlocking to ensure the score update is processed
|
// Petit délai avant le déblocage pour que la mise à jour du score soit traitée
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
unlockBuzzers();
|
unlockBuzzers();
|
||||||
}, 100);
|
}, 100);
|
||||||
@@ -134,7 +134,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100%; /* Ensure it takes full height of the container if possible, or substantial height */
|
height: 100%; /* S'assure que l'élément occupe toute la hauteur du conteneur si possible, ou une hauteur substantielle */
|
||||||
}
|
}
|
||||||
.validate-btn {
|
.validate-btn {
|
||||||
color: rgb(var(--v-theme-background),1);
|
color: rgb(var(--v-theme-background),1);
|
||||||
|
|||||||
@@ -2,13 +2,13 @@
|
|||||||
<v-container v-show="gamehiding === false" class="player_video_div">
|
<v-container v-show="gamehiding === false" class="player_video_div">
|
||||||
<div v-if="currentQuestion" style="width: 100%; height: 100%;">
|
<div v-if="currentQuestion" style="width: 100%; height: 100%;">
|
||||||
|
|
||||||
<!-- VIDEO PLAYER -->
|
<!-- LECTEUR VIDÉO -->
|
||||||
<div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
|
<div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
|
||||||
<video ref="videoPlayer" class="video-js player_video" controls preload="auto">
|
<video ref="videoPlayer" class="video-js player_video" controls preload="auto">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- PICTURE DISPLAY -->
|
<!-- AFFICHAGE IMAGE -->
|
||||||
<div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
|
<div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
|
||||||
<v-img
|
<v-img
|
||||||
:src="getMediaUrl(currentQuestion.MediaUrl)"
|
:src="getMediaUrl(currentQuestion.MediaUrl)"
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
></v-img>
|
></v-img>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- AUDIO PLAYER -->
|
<!-- LECTEUR AUDIO -->
|
||||||
<div v-if="currentQuestion.Type === 'audio'" class="audio-container player_video">
|
<div v-if="currentQuestion.Type === 'audio'" class="audio-container player_video">
|
||||||
<div class="audio-visualizer">
|
<div class="audio-visualizer">
|
||||||
<v-icon size="150" color="white" class="mb-4">mdi-music-circle</v-icon>
|
<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 'video.js/dist/video-js.css';
|
||||||
import { subscribeToTopic, publishMessage } from '@/services/mqttService';
|
import { subscribeToTopic, publishMessage } from '@/services/mqttService';
|
||||||
|
|
||||||
// Store Access
|
// Accès au store
|
||||||
const currentQuestion = quizStore.getters.currentQuestion;
|
const currentQuestion = quizStore.getters.currentQuestion;
|
||||||
|
|
||||||
// Video Player Refs
|
// Références du lecteur vidéo
|
||||||
const videoPlayer = ref(null);
|
const videoPlayer = ref(null);
|
||||||
let vjsPlayer = null;
|
let vjsPlayer = null;
|
||||||
|
|
||||||
// Audio Player Refs
|
// Références du lecteur audio
|
||||||
const audioPlayer = ref(null);
|
const audioPlayer = ref(null);
|
||||||
|
|
||||||
let gamehiding = ref(true);
|
let gamehiding = ref(true);
|
||||||
|
|
||||||
// Methods
|
// Méthodes
|
||||||
function getMediaUrl(relativePath) {
|
function getMediaUrl(relativePath) {
|
||||||
if (!relativePath) return '';
|
if (!relativePath) return '';
|
||||||
const cleanPath = relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
|
const cleanPath = relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
|
||||||
@@ -59,8 +59,8 @@ function getMediaUrl(relativePath) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function initVideoPlayer() {
|
function initVideoPlayer() {
|
||||||
if (vjsPlayer) return; // Already init
|
if (vjsPlayer) return; // Déjà initialisé
|
||||||
if (!videoPlayer.value) return; // DOM not ready
|
if (!videoPlayer.value) return; // DOM pas prêt
|
||||||
|
|
||||||
console.log('GameMedia: Initializing VideoJS');
|
console.log('GameMedia: Initializing VideoJS');
|
||||||
vjsPlayer = videojs(videoPlayer.value, {
|
vjsPlayer = videojs(videoPlayer.value, {
|
||||||
@@ -72,12 +72,12 @@ function initVideoPlayer() {
|
|||||||
volume: 0,
|
volume: 0,
|
||||||
}, () => {
|
}, () => {
|
||||||
console.log('GameMedia: VideoJS Ready');
|
console.log('GameMedia: VideoJS Ready');
|
||||||
// If current question is video, load it
|
// Si la question courante est une vidéo, la charger
|
||||||
if (currentQuestion.value && currentQuestion.value.Type === 'video') {
|
if (currentQuestion.value && currentQuestion.value.Type === 'video') {
|
||||||
updateVideoSource();
|
updateVideoSource();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Auto-hide when video ends
|
// Masquer automatiquement à la fin de la vidéo
|
||||||
vjsPlayer.on('ended', () => {
|
vjsPlayer.on('ended', () => {
|
||||||
console.log('GameMedia: Video ended, hiding');
|
console.log('GameMedia: Video ended, hiding');
|
||||||
gamehiding.value = true;
|
gamehiding.value = true;
|
||||||
@@ -93,17 +93,17 @@ function updateVideoSource() {
|
|||||||
console.log('GameMedia: Loading Video Source', url);
|
console.log('GameMedia: Loading Video Source', url);
|
||||||
vjsPlayer.src({ type: 'video/mp4', src: url });
|
vjsPlayer.src({ type: 'video/mp4', src: url });
|
||||||
|
|
||||||
// AutoPlay is managed by MQTT 'play' command now
|
// L'autoplay est géré par la commande MQTT 'play' maintenant
|
||||||
// if (currentQuestion.value.Settings?.AutoPlay) {
|
// if (currentQuestion.value.Settings?.AutoPlay) {
|
||||||
// vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
|
// vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Watchers
|
// Observateurs
|
||||||
watch(currentQuestion, async (newVal, oldVal) => {
|
watch(currentQuestion, async (newVal, oldVal) => {
|
||||||
console.log('GameMedia: Question Changed', newVal);
|
console.log('GameMedia: Question Changed', newVal);
|
||||||
|
|
||||||
// Stop all media first
|
// Arrêter d'abord tous les médias
|
||||||
if (vjsPlayer) {
|
if (vjsPlayer) {
|
||||||
vjsPlayer.pause();
|
vjsPlayer.pause();
|
||||||
}
|
}
|
||||||
@@ -111,12 +111,12 @@ watch(currentQuestion, async (newVal, oldVal) => {
|
|||||||
audioPlayer.value.pause();
|
audioPlayer.value.pause();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ensure hidden on question change until played
|
// Rester masqué au changement de question jusqu'à la lecture
|
||||||
gamehiding.value = true;
|
gamehiding.value = true;
|
||||||
publishMessage('/display/control', 'hide');
|
publishMessage('/display/control', 'hide');
|
||||||
if (!newVal) return;
|
if (!newVal) return;
|
||||||
|
|
||||||
await nextTick(); // Wait for DOM updates (v-if)
|
await nextTick(); // Attendre la mise à jour du DOM (v-if)
|
||||||
|
|
||||||
if (newVal.Type === 'video') {
|
if (newVal.Type === 'video') {
|
||||||
if (!vjsPlayer) {
|
if (!vjsPlayer) {
|
||||||
@@ -125,13 +125,13 @@ watch(currentQuestion, async (newVal, oldVal) => {
|
|||||||
updateVideoSource();
|
updateVideoSource();
|
||||||
}
|
}
|
||||||
} else if (newVal.Type === 'audio') {
|
} else if (newVal.Type === 'audio') {
|
||||||
// Audio loading (no autoplay)
|
// Chargement audio (pas d'autoplay)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if(audioPlayer.value){
|
if(audioPlayer.value){
|
||||||
console.log('GameMedia: Loading Audio');
|
console.log('GameMedia: Loading Audio');
|
||||||
audioPlayer.value.load();
|
audioPlayer.value.load();
|
||||||
|
|
||||||
// Auto-hide when audio ends
|
// Masquer automatiquement à la fin de l'audio
|
||||||
audioPlayer.value.onended = () => {
|
audioPlayer.value.onended = () => {
|
||||||
console.log('GameMedia: Audio ended, hiding');
|
console.log('GameMedia: Audio ended, hiding');
|
||||||
gamehiding.value = true;
|
gamehiding.value = true;
|
||||||
@@ -140,10 +140,10 @@ watch(currentQuestion, async (newVal, oldVal) => {
|
|||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
// For 'picture' type, nothing to do, video/audio are already paused
|
// Pour le type 'picture', rien à faire, vidéo/audio déjà en pause
|
||||||
}, { immediate: true });
|
}, { immediate: true });
|
||||||
|
|
||||||
// Lifecycle
|
// Cycle de vie
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await nextTick();
|
await nextTick();
|
||||||
if (currentQuestion.value?.Type === 'video') {
|
if (currentQuestion.value?.Type === 'video') {
|
||||||
@@ -170,7 +170,7 @@ const handleMessage = (topic, message) => {
|
|||||||
audioPlayer.value.play().catch(e => console.error("Error playing audio:", e));
|
audioPlayer.value.play().catch(e => console.error("Error playing audio:", e));
|
||||||
}
|
}
|
||||||
if (currentQuestion.value?.Type === 'picture') {
|
if (currentQuestion.value?.Type === 'picture') {
|
||||||
// Start timer if PlayTime is configured
|
// Démarrer le timer si PlayTime est configuré
|
||||||
const playTime = currentQuestion.value.Settings?.PlayTime;
|
const playTime = currentQuestion.value.Settings?.PlayTime;
|
||||||
if (playTime && playTime > 0) {
|
if (playTime && playTime > 0) {
|
||||||
quizStore.actions.startTimer(playTime);
|
quizStore.actions.startTimer(playTime);
|
||||||
@@ -195,10 +195,9 @@ const handleMessage = (topic, message) => {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Check for buzzer status if we want to auto-hide on buzz (like HidingOverlay)
|
// Vérifier le statut du buzzer pour masquer automatiquement au buzz (comme HidingOverlay)
|
||||||
// The user asked to replicate VideoPlayer, which only had /display/control in the provided snippet.
|
// Réplication de VideoPlayer qui n'avait que /display/control dans l'extrait fourni.
|
||||||
// But if "mesmes événéments" implies behavior of the system...
|
// Comportement optionnel selon les événements du système.
|
||||||
// I'll stick to VideoPlayer replication first.
|
|
||||||
if (topic === 'vulture/buzzer/status') {
|
if (topic === 'vulture/buzzer/status') {
|
||||||
try {
|
try {
|
||||||
const data = JSON.parse(message);
|
const data = JSON.parse(message);
|
||||||
@@ -237,7 +236,7 @@ onBeforeUnmount(() => {
|
|||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Additional styles for Audio/Custom elements to fit the theme */
|
/* Styles additionnels pour les éléments Audio/Custom pour s'adapter au thème */
|
||||||
.audio-container {
|
.audio-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in New Issue
Block a user