Add simple 'loading' indicator for motion study video

ptcrealitylab · Nov 1, 2024 · 28185e4 · 28185e4
1 parent 459e716
commit 28185e4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/css/index.css b/css/index.css
@@ -2110,7 +2110,11 @@ Logic Interface CSS
     cursor: pointer;
 
     pointer-events: all;
+}
 
+.analytics-video-toggle.analytics-video-toggle-loading {
+    color: #777;
+    cursor: progress;
 }
 
 .analytics-export-link-container {

diff --git a/src/gui/ar/videoPlayback.js b/src/gui/ar/videoPlayback.js
@@ -180,7 +180,7 @@ class VideoPlayer extends Followable {
         // this.phone.add(this.debugBox);
 
         this.rvl = null;
-        fetch(urls.rvl).then(res => {
+        this.rvlLoadPromise = fetch(urls.rvl).then(res => {
             return res.arrayBuffer();
         }).then(buf => {
             this.rvl = new RVLParser(buf);

diff --git a/src/motionStudy/motionStudy.js b/src/motionStudy/motionStudy.js
@@ -791,10 +791,20 @@ export class MotionStudy {
 
     createVideoPlayerShowHideButton() {
         this.videoPlayerShowHideButton = document.createElement('div');
-        this.videoPlayerShowHideButton.classList.add('analytics-video-toggle');
+        this.videoPlayerShowHideButton.classList.add('analytics-video-toggle', 'analytics-video-toggle-loading');
         this.videoPlayerShowHideButton.classList.add('analytics-button-container');
-        this.videoPlayerShowHideButton.textContent = 'Show Spatial Video';
+        this.videoPlayerShowHideButton.textContent = 'Loading Spatial Video';
+
+        this.videoPlayer.rvlLoadPromise.then(() => {
+            this.videoPlayerShowHideButton.textContent = 'Show Spatial Video';
+            this.videoPlayerShowHideButton.classList.remove('analytics-video-toggle-loading');
+        });
+
         this.videoPlayerShowHideButton.addEventListener('pointerup', () => {
+            if (this.videoPlayerShowHideButton.classList.contains('analytics-video-toggle-loading')) {
+                return;
+            }
+
             if (this.videoPlayer.isShown()) {
                 this.humanPoseAnalyzer.setDepthTestEnabled(true);
                 this.videoPlayer.hide();
@@ -811,6 +821,9 @@ export class MotionStudy {
         if (!this.videoPlayerShowHideButton || !this.videoPlayer) {
             return;
         }
+        if (this.videoPlayerShowHideButton.classList.contains('analytics-video-toggle-loading')) {
+            return;
+        }
 
         if (this.videoPlayer.isShown()) {
             this.videoPlayerShowHideButton.textContent = 'Hide Spatial Video';