Refactor isPlaying code, force save time state when playing/pausing

Also hide the play/pause button and share button until a scene is selectd.
magcius · Dec 30, 2024 · acf7f4b · acf7f4b
1 parent 6c4e989
commit acf7f4b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -345,8 +345,10 @@ class Main {
     private webXRContext: WebXRContext;
 
     public sceneTimeScale = 1.0;
-    public isEmbedMode = false;
+    private isPlaying = false;
     private isFrameStep = false;
+
+    public isEmbedMode = false;
     private pixelSize = 1;
 
     // Link to debugJunk so we can reference it from the DevTools.
@@ -435,6 +437,12 @@ class Main {
         this._onRequestAnimationFrameCanvas();
     }
 
+    private setIsPlaying(v: boolean): void {
+        this.isPlaying = v;
+        this.ui.playPauseButton.setIsPlaying(v);
+        this._saveCurrentTimeState(this._getCurrentSceneDescId()!);
+    }
+
     private _decodeHashString(hashString: string): [string, string] {
         let sceneDescId: string = '', sceneSaveState: string = '';
         const firstSemicolon = hashString.indexOf(';');
@@ -509,9 +517,9 @@ class Main {
         if (inputManager.isKeyDownEventTriggered('Numpad3'))
             this._exportSaveData();
         if (inputManager.isKeyDownEventTriggered('Period'))
-            this.ui.togglePlayPause();
+            this.setIsPlaying(!this.isPlaying);
         if (inputManager.isKeyDown('Comma')) {
-            this.ui.togglePlayPause(false);
+            this.setIsPlaying(false);
             this.isFrameStep = true;
         }
         if (inputManager.isKeyDownEventTriggered('F9'))
@@ -550,13 +558,11 @@ class Main {
         const shouldTakeScreenshot = this.viewer.inputManager.isKeyDownEventTriggered('Numpad7') || this.viewer.inputManager.isKeyDownEventTriggered('BracketRight');
 
         let sceneTimeScale = this.sceneTimeScale;
-        if (!this.ui.isPlaying) {
-            if (this.isFrameStep) {
-                sceneTimeScale /= 4.0;
-                this.isFrameStep = false;
-            } else {
-                sceneTimeScale = 0.0;
-            }
+        if (this.isFrameStep) {
+            sceneTimeScale /= 4.0;
+            this.isFrameStep = false;
+        } else if (!this.isPlaying) {
+            sceneTimeScale = 0.0;
         }
 
         if (!this.viewer.externalControl) {
@@ -695,13 +701,13 @@ class Main {
             return;
 
         const timeState = JSON.parse(timeStateStr) as TimeState;
-        this.ui.togglePlayPause(timeState.isPlaying);
+        this.setIsPlaying(timeState.isPlaying);
         this.sceneTimeScale = timeState.sceneTimeScale;
         this.viewer.sceneTime = timeState.sceneTime;
     }
 
     private _saveCurrentTimeState(sceneDescId: string): void {
-        const timeState: TimeState = { isPlaying: this.ui.isPlaying, sceneTimeScale: this.sceneTimeScale, sceneTime: this.viewer.sceneTime };
+        const timeState: TimeState = { isPlaying: this.isPlaying, sceneTimeScale: this.sceneTimeScale, sceneTime: this.viewer.sceneTime };
         const timeStateStr = JSON.stringify(timeState);
         const timeStateKey = `TimeState/${sceneDescId}`;
         this.saveManager.saveTemporaryState(timeStateKey, timeStateStr);
@@ -757,7 +763,7 @@ class Main {
             scenePanels = scene.createPanels();
         this.ui.setScenePanels(scenePanels);
         // Force time to play when loading a map.
-        this.ui.togglePlayPause(true);
+        this.setIsPlaying(true);
 
         const sceneDescId = this._getCurrentSceneDescId()!;
         this.saveManager.setCurrentSceneDescId(sceneDescId);
@@ -892,6 +898,7 @@ class Main {
         this.toplevel.appendChild(this.ui.elem);
         this.ui.sceneSelect.onscenedescselected = this._onSceneDescSelected.bind(this);
         this.ui.xrSettings.onWebXRStateRequested = this._onWebXRStateRequested.bind(this);
+        this.ui.playPauseButton.onplaypause = this.setIsPlaying.bind(this);
 
         this.webXRContext.onsupportedchanged = () => {
             this._syncWebXRSettingsVisible();

diff --git a/src/ui.ts b/src/ui.ts
@@ -2695,7 +2695,7 @@ export class UI {
 
     public cameraSpeedIndicator = new CameraSpeedIndicator();
     private bottomBar = new BottomBar();
-    private playPauseButton = new PlayPauseButton();
+    public playPauseButton = new PlayPauseButton();
     private shareButton = new ShareButton();
     private fullscreenButton = new FullscreenButton();
 
@@ -2704,10 +2704,9 @@ export class UI {
     private isDragging: boolean = false;
     private lastMouseActiveTime: number = -1;
 
-    public isPlaying: boolean = true;
-
     public isEmbedMode: boolean = false;
     public isVisible: boolean = true;
+    public hasScene: boolean = false;
 
     public studioModeEnabled: boolean = false;
 
@@ -2781,11 +2780,6 @@ export class UI {
         this.studioPanel = new StudioPanel(this, viewer);
         this.toplevel.appendChild(this.studioPanel.elem);
 
-        this.playPauseButton.onplaypause = (shouldBePlaying) => {
-            this.togglePlayPause(shouldBePlaying);
-        };
-        this.playPauseButton.setIsPlaying(this.isPlaying);
-
         this.about.onfaq = () => {
             this.faqPanel.elem.style.display = 'block';
         };
@@ -2800,9 +2794,8 @@ export class UI {
         this.elem = this.toplevel;
     }
 
-    public togglePlayPause(shouldBePlaying: boolean = !this.isPlaying): void {
-        this.isPlaying = shouldBePlaying;
-        this.playPauseButton.setIsPlaying(this.isPlaying);
+    public setIsPlaying(v: boolean): void {
+        this.playPauseButton.setIsPlaying(v);
     }
 
     public toggleWebXRCheckbox(shouldBeChecked: boolean = !this.xrSettings.enableXRCheckBox.checked) {
@@ -2853,7 +2846,17 @@ export class UI {
         this.debugFloaterHolder.destroyScene();
     }
 
+    private setHasScene(v: boolean): void {
+        if (this.hasScene === v)
+            return;
+
+        this.hasScene = v;
+        this.syncVisibilityState();
+    }
+
     public setScenePanels(scenePanels: Panel[] | null): void {
+        this.setHasScene(scenePanels !== null);
+
         if (scenePanels !== null) {
             this.setPanels([this.sceneSelect, ...scenePanels, this.textureViewer, this.viewerSettings, this.xrSettings, this.statisticsPanel, this.studioSidePanel, this.about]);
         } else {
@@ -2907,9 +2910,11 @@ export class UI {
         this.bottomBar.setVisible(bottomBarVisible);
         this.bottomBar.setActive(this.shouldBottomBarBeFadeIn());
 
+        this.playPauseButton.setVisible(this.hasScene);
+
         const extraButtonsVisible = !this.isEmbedMode;
         this.cameraSpeedIndicator.setVisible(extraButtonsVisible);
-        this.shareButton.setVisible(extraButtonsVisible);
+        this.shareButton.setVisible(extraButtonsVisible && this.hasScene);
     }
 
     public setEmbedMode(v: boolean): void {