Folder organisation

2026-06-10 11:55:14 +10:00
parent f5c82d3b78
commit 74706a166a
17 changed files with 22 additions and 21 deletions
--- a/src/vr180player/xr/vr-panel-visibility.ts
+++ b/src/vr180player/xr/vr-panel-visibility.ts
@@ -0,0 +1,111 @@
+import {
+	hideVrPanelImmediately,
+	setVrPanelOpacity,
+	type VrControlPanel
+} from './vr-control-panel.js';
+
+const FADE_DURATION_MS = 200;
+const AUTO_HIDE_DELAY_MS = 10000;
+
+export class VrPanelVisibility {
+	private hideTimeout: number | undefined;
+	private lastFadeTimestamp = 0;
+	private opacity = 0;
+	private panel: VrControlPanel | undefined;
+	private targetOpacity = 0;
+	private fading = false;
+
+	get isFading(): boolean {
+		return this.fading;
+	}
+
+	get isVisible(): boolean {
+		return !!(this.panel?.group.visible && this.opacity > 0.01);
+	}
+
+	setPanel(panel: VrControlPanel): void {
+		this.panel = panel;
+		this.hideImmediately();
+	}
+
+	show(): void {
+		if (this.panel) this.panel.group.visible = true;
+		this.clearHideTimeout();
+
+		if (this.targetOpacity !== 1.0 || this.opacity < 1.0) {
+			this.targetOpacity = 1.0;
+			this.startFade();
+		}
+
+		this.hideTimeout = window.setTimeout(() => this.hide(), AUTO_HIDE_DELAY_MS);
+	}
+
+	hide(): void {
+		this.clearHideTimeout();
+
+		if (this.targetOpacity !== 0.0 || this.opacity > 0.0) {
+			this.targetOpacity = 0.0;
+			this.startFade();
+		}
+	}
+
+	hideImmediately(): void {
+		this.clearHideTimeout();
+		this.targetOpacity = 0;
+		this.opacity = 0;
+		this.fading = false;
+		hideVrPanelImmediately(this.panel);
+	}
+
+	updateFade(timestamp: number): void {
+		if (!this.panel) return;
+		if (this.lastFadeTimestamp === 0) this.lastFadeTimestamp = timestamp;
+
+		const deltaTime = (timestamp - this.lastFadeTimestamp) / 1000;
+		this.lastFadeTimestamp = timestamp;
+		const fadeSpeed = 1 / (FADE_DURATION_MS / 1000);
+		let opacityChanged = false;
+
+		if (this.opacity < this.targetOpacity) {
+			this.opacity += fadeSpeed * deltaTime;
+			if (this.opacity >= this.targetOpacity) {
+				this.opacity = this.targetOpacity;
+				this.fading = false;
+			}
+			opacityChanged = true;
+		} else if (this.opacity > this.targetOpacity) {
+			this.opacity -= fadeSpeed * deltaTime;
+			if (this.opacity <= this.targetOpacity) {
+				this.opacity = this.targetOpacity;
+				this.fading = false;
+				if (this.opacity === 0) this.panel.group.visible = false;
+			}
+			opacityChanged = true;
+		} else {
+			this.fading = false;
+		}
+
+		if (opacityChanged) {
+			setVrPanelOpacity(this.panel, this.opacity);
+		}
+
+		if (this.fading) {
+			requestAnimationFrame((nextTimestamp) => this.updateFade(nextTimestamp));
+		}
+	}
+
+	private clearHideTimeout(): void {
+		if (this.hideTimeout !== undefined) {
+			clearTimeout(this.hideTimeout);
+			this.hideTimeout = undefined;
+		}
+	}
+
+	private startFade(): void {
+		if (!this.fading) {
+			this.fading = true;
+			this.lastFadeTimestamp = 0;
+			requestAnimationFrame((timestamp) => this.updateFade(timestamp));
+		}
+	}
+}