From aad59e6b6b44abe732c9316d2cd822f7bea385c4 Mon Sep 17 00:00:00 2001
From: Mishig <dmishig@gmail.com>
Date: Mon, 26 Aug 2024 17:38:48 +0200
Subject: [PATCH] Fix videos in visualize_dataset are not in sync (#382)

---
 .../templates/visualize_dataset_template.html  | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/lerobot/templates/visualize_dataset_template.html b/lerobot/templates/visualize_dataset_template.html
index 16ca0fa3..e28473c1 100644
--- a/lerobot/templates/visualize_dataset_template.html
+++ b/lerobot/templates/visualize_dataset_template.html
@@ -75,7 +75,7 @@
             {% for video_info in videos_info %}
             <div class="max-w-96">
                 <p class="text-sm text-gray-300 bg-gray-800 px-2 rounded-t-xl truncate">{{ video_info.filename }}</p>
-                <video autoplay muted loop type="video/mp4" class="min-w-64" @timeupdate="() => {
+                <video muted loop type="video/mp4" class="min-w-64" @canplay="videoCanPlay" @timeupdate="() => {
                     if (video.duration) {
                       const time = video.currentTime;
                       const pc = (100 / video.duration) * time;
@@ -107,12 +107,12 @@
 
         <!-- Controllers -->
         <div class="flex gap-1 text-3xl items-center">
-            <button x-ref="btnPlay" class="-rotate-90 hidden" class="-rotate-90" title="Play. Toggle with Space" @click="() => {
+            <button x-ref="btnPlay" class="-rotate-90" class="-rotate-90" title="Play. Toggle with Space" @click="() => {
                 videos.forEach(video => video.play());
                 $refs.btnPlay.classList.toggle('hidden');
                 $refs.btnPause.classList.toggle('hidden');
             }">🔽</button>
-            <button x-ref="btnPause" title="Pause. Toggle with Space" @click="() => {
+            <button x-ref="btnPause" class="hidden" title="Pause. Toggle with Space" @click="() => {
                 videos.forEach(video => video.pause());
                 $refs.btnPlay.classList.toggle('hidden');
                 $refs.btnPause.classList.toggle('hidden');
@@ -125,7 +125,6 @@
                 @click="() => (videos.forEach(video => (video.currentTime = 0.0)))">↩️</button>
             <input x-ref="slider" max="100" min="0" step="1" type="range" value="0" class="w-80 mx-2" @input="() => {
                 const sliderValue = $refs.slider.value;
-                $refs.btnPause.click();
                 videos.forEach(video => {
                     const time = (video.duration * sliderValue) / 100;
                     video.currentTime = time;
@@ -208,6 +207,8 @@
                 videos: null,
                 video: null,
                 colors: null,
+                nVideos: {{ videos_info | length }},
+                nVideoReadyToPlay: 0,
 
                 // alpine initialization
                 init() {
@@ -343,7 +344,6 @@
                     window.history.replaceState({}, '', url.toString());
                 },
 
-
                 formatTime(time) {
                     var hours = Math.floor(time / 3600);
                     var minutes = Math.floor((time % 3600) / 60);
@@ -351,6 +351,14 @@
                     return (hours > 0 ? hours + ':' : '') + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds <
                         10 ?
                         '0' + seconds : seconds);
+                },
+
+                videoCanPlay() {
+                    this.nVideoReadyToPlay += 1;
+                    if(this.nVideoReadyToPlay == this.nVideos) {
+                        // start autoplay all videos in sync
+                        this.$refs.btnPlay.click();
+                    }
                 }
             };
         }