Ajout des commentaires sur le js

jericho/static/main.js

@@ -9,6 +9,7 @@ const videoPlayer = document.getElementById('video-player');
 videoPlayer.muted = true;
 videoPlayer.defaultMuted = true;
 
+// Sécurise le texte pour éviter les bugs d'affichage si le nom de la vidéo contient des caractères bizarres
 function escapeHtml(value) {
     return String(value)
         .replaceAll('&', '&')
@@ -18,6 +19,7 @@ function escapeHtml(value) {
         .replaceAll("'", ''');
 }
 
+// Envoie l'état actuel de la vidéo (temps précis, si elle est en lecture ou pause) au serveur Python
 async function sendPlayback(action, options = {}) {
     const projectName = options.projectName || currentLoadedProject;
     if (!projectName) return;
@@ -47,6 +49,7 @@ async function sendPlayback(action, options = {}) {
     }
 }
 
+// Lance le chronomètre qui synchronise la vidéo avec le robot (s'active 2 fois par seconde)
 function startSyncLoop() {
     stopSyncLoop();
     syncTimer = setInterval(() => {
@@ -56,6 +59,7 @@ function startSyncLoop() {
     }, SYNC_INTERVAL_MS);
 }
 
+// Arrête le chronomètre de synchronisation
 function stopSyncLoop() {
     if (syncTimer) {
         clearInterval(syncTimer);
@@ -63,6 +67,7 @@ function stopSyncLoop() {
     }
 }
 
+// Initialisation au chargement de la page web : lance la bibliothèque et prépare les boutons d'émotions
 document.addEventListener('DOMContentLoaded', () => {
     loadLibrary();
     setInterval(loadLibrary, 3000);
@@ -92,6 +97,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
+// Gère l'envoi d'un fichier vidéo local depuis l'ordinateur vers le serveur
 document.getElementById('import-btn').onclick = function() {
     const name = document.getElementById('video-name').value.trim();
     const file = document.getElementById('video-file').files[0];
@@ -110,6 +116,7 @@ document.getElementById('import-btn').onclick = function() {
     const reader = new FileReader();
     reader.readAsDataURL(file);
 
+    // S'exécute quand la vidéo est transformée en texte (Base64) et prête à partir
     reader.onload = async function () {
         const base64data = reader.result;
 
@@ -140,6 +147,7 @@ document.getElementById('import-btn').onclick = function() {
     };
 };
 
+// Gère l'envoi d'un lien YouTube au serveur pour qu'il le télécharge
 document.getElementById('yt-import-btn').onclick = async function() {
     const name = document.getElementById('yt-name').value.trim();
     const url = document.getElementById('yt-url').value.trim();
@@ -181,6 +189,7 @@ document.getElementById('yt-import-btn').onclick = async function() {
     }
 };
 
+// Demande au serveur de supprimer définitivement un projet
 window.deleteProject = async function(event, name) {
     event.stopPropagation();
 
@@ -212,6 +221,7 @@ window.deleteProject = async function(event, name) {
     }
 };
 
+// Interroge le serveur pour récupérer la liste des vidéos et met à jour l'affichage
 async function loadLibrary() {
     try {
         const response = await fetch('/api/library');
@@ -276,6 +286,7 @@ async function loadLibrary() {
     }
 }
 
+// Charge la vidéo cliquée dans le lecteur principal et réinitialise l'affichage
 window.loadVideoPlayer = async function(name, url) {
     if (currentLoadedProject && currentLoadedProject !== name) {
         await sendPlayback('stop', { projectName: currentLoadedProject, playing: false });
@@ -311,6 +322,7 @@ window.loadVideoPlayer = async function(name, url) {
     }
 };
 
+// Prévient le serveur quand l'utilisateur clique sur Lecture
 videoPlayer.addEventListener('play', () => {
     if (!currentLoadedProject) return;
     robotStatus.textContent = 'Lecture synchronisée — audio robot';
@@ -318,6 +330,7 @@ videoPlayer.addEventListener('play', () => {
     startSyncLoop();
 });
 
+// Prévient le serveur quand l'utilisateur met la vidéo en pause
 videoPlayer.addEventListener('pause', () => {
     if (!currentLoadedProject || videoPlayer.ended) return;
     robotStatus.textContent = 'En pause';
@@ -325,26 +338,31 @@ videoPlayer.addEventListener('pause', () => {
     stopSyncLoop();
 });
 
+// Prévient le serveur quand on clique sur la barre d'avancement pour faire un saut
 videoPlayer.addEventListener('seeking', () => {
     if (!currentLoadedProject) return;
     sendPlayback('seek', { playing: !videoPlayer.paused && !videoPlayer.ended });
 });
 
+// Relance le processus juste après que le saut dans la vidéo soit terminé
 videoPlayer.addEventListener('seeked', () => {
     if (!currentLoadedProject) return;
     sendPlayback('seek', { playing: !videoPlayer.paused && !videoPlayer.ended });
 });
 
+// Mouvement naturel de la vidéo (déjà géré par startSyncLoop, donc pas besoin de surcharger)
 videoPlayer.addEventListener('timeupdate', () => {
     // synchro geree par startSyncLoop(), ici pas de double envoi
 });
 
+// Prévient le serveur que la vidéo est complètement terminée
 videoPlayer.addEventListener('ended', () => {
     robotStatus.textContent = 'Terminé';
     sendPlayback('stop', { playing: false });
     stopSyncLoop();
 });
 
+// Ajoute une nouvelle ligne avec une émotion et un temps dans le créateur de séquence
 function createEmotionRow() {
     const row = document.createElement('div');
     row.className = 'emotion-row';
@@ -390,6 +408,7 @@ function createEmotionRow() {
     document.getElementById('sequence-list').appendChild(row);
 }
 
+// Configure le bouton "+" pour ajouter des lignes au créateur de séquence
 document.addEventListener('DOMContentLoaded', () => {
     const addEmotionBtn = document.getElementById('add-emotion-btn');
     if(addEmotionBtn) {
@@ -408,6 +427,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 });
 
+// Rassemble les émotions choisies et envoie l'ordre au serveur de créer la séquence
 document.getElementById('save-seq-btn').onclick = async function() {
     const name = document.getElementById('seq-name').value.trim();
     const msg = document.getElementById('seq-msg');