From acf7f4b0f7fb623db9700b85e654b1c8fb60265d Mon Sep 17 00:00:00 2001 From: "Jasper St. Pierre" Date: Sun, 29 Dec 2024 16:05:02 -0800 Subject: [PATCH] Refactor isPlaying code, force save time state when playing/pausing Also hide the play/pause button and share button until a scene is selectd. --- src/main.ts | 33 ++++++++++++++++++++------------- src/ui.ts | 29 +++++++++++++++++------------ 2 files changed, 37 insertions(+), 25 deletions(-) diff --git a/src/main.ts b/src/main.ts index b7a03641e..d3fd88fb8 100644 --- 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 index 9b2259df4..2426efd6d 100644 --- 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 {