dsh-skin-galactic-opera 0.1.9 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.2.0 - 2026-09-04
+
+### Changed
+
+- Pauses skin animation work while the page is hidden to reduce background CPU/GPU usage.
+- Suspends telemetry scans while the page is hidden, then forces an immediate refresh plus a short follow-up when the page becomes visible again.
+
 ## 0.1.9 - 2026-09-03
 
 ### Changed

package/lib/client.js

@@ -11,6 +11,7 @@ window.__ModuleLoader__.load({
 		const STYLE_ID = "dsh-skin-galactic-opera-style";
 		const DECOR_ID = "dsh-skin-galactic-opera-decor";
 		const DECOR_HOST_CLASS = "dsh-skin-galactic-opera-decor-host";
+		const PAGE_HIDDEN_CLASS = "dsh-skin-galactic-opera-page-hidden";
 		const CSS_TAG_ID = `${PLUGIN_ID}/global.css`;
 
 		const TOKENS = Object.freeze({
@@ -170,6 +171,16 @@ body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-
   opacity: 0.16 !important;
 }
 
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden::after,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden #root::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden .dsh-skin-galactic-opera-decor::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden .dsh-skin-galactic-opera-decor *,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden .dsh-skin-galactic-opera-decor *::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden .dsh-skin-galactic-opera-decor *::after {
+  animation-play-state: paused !important;
+}
+
 body.dsh-skin-galactic-opera #root > *,
 body.dsh-skin-galactic-opera main,
 body.dsh-skin-galactic-opera aside,
@@ -1149,6 +1160,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			return `${CSS
 				.replace(/body\.dsh-skin-galactic-opera\.dsh-skin-galactic-opera-input-active\s+/g, ":host-context(body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active) ")
 				.replace(/body\.dsh-skin-galactic-opera\.dsh-skin-galactic-opera-hyperspace\s+/g, ":host-context(body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace) ")
+				.replace(/body\.dsh-skin-galactic-opera\.dsh-skin-galactic-opera-page-hidden\s+/g, ":host-context(body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden) ")
 				.replace(/body\.dsh-skin-galactic-opera\s+/g, "")}
 
 .dsh-skin-galactic-opera-decor {
@@ -1249,6 +1261,20 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 		}
 
 		const EDITABLE_CONTENT_SELECTOR = `[contenteditable]:not([contenteditable="false"])`;
+
+		function installVisibilityState() {
+			if (typeof document === "undefined" || typeof window === "undefined") return () => {};
+			const syncVisibilityClass = () => {
+				document.body.classList.toggle(PAGE_HIDDEN_CLASS, document.hidden);
+			};
+			syncVisibilityClass();
+			document.addEventListener("visibilitychange", syncVisibilityClass);
+			return () => {
+				document.removeEventListener("visibilitychange", syncVisibilityClass);
+				document.body.classList.remove(PAGE_HIDDEN_CLASS);
+			};
+		}
+
 		let reducedMotionQuery;
 		let reducedMotionMatches = false;
 		let reducedMotionListener;
@@ -1676,7 +1702,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			const update = ({ ignorePause = false } = {}) => {
 				frame = 0;
 				frameIgnoresTelemetryPause = false;
-				if (!ignorePause && isTelemetryPaused()) return;
+				if (document.hidden || (!ignorePause && isTelemetryPaused())) return;
 				let nextSources = currentSources;
 				let text = getSourcesText(nextSources);
 				const needsFullScan = forceTelemetryRescan || telemetryRefreshesSinceFullScan >= TELEMETRY_FULL_RESCAN_UPDATES || !areCachedSourcesUsable();
@@ -1696,7 +1722,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				renderPanel(text);
 			};
 			const schedule = ({ delay = TELEMETRY_UPDATE_DELAY, force = false, ignorePause = false } = {}) => {
-				if (!ignorePause && isTelemetryPaused()) return;
+				if (document.hidden || (!ignorePause && isTelemetryPaused())) return;
 				if (force) forceTelemetryRescan = true;
 				if (frame !== 0) {
 					if (!force && delay >= TELEMETRY_UPDATE_DELAY) return;
@@ -1778,6 +1804,20 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				forceTelemetryRescan = true;
 				schedule();
 			};
+			const onTelemetryVisibilityChange = () => {
+				if (document.hidden) {
+					if (frame !== 0) {
+						window.clearTimeout(frame);
+						frame = 0;
+					}
+					frameIgnoresTelemetryPause = false;
+					for (const timer of telemetryNavigationTimers) window.clearTimeout(timer);
+					telemetryNavigationTimers.clear();
+					return;
+				}
+				schedule({ delay: 0, force: true, ignorePause: true });
+				setTelemetryNavigationTimer(() => schedule({ delay: 0, force: true, ignorePause: true }), TELEMETRY_NAV_FOLLOWUP_DELAY);
+			};
 			const observer = typeof MutationObserver === "undefined" ? undefined : new MutationObserver((mutations) => {
 				if (mutations.every(isSkinOwnedMutation)) return;
 				if (isTelemetryPaused() && mutations.some(isPotentialTelemetryNavigationMutation)) {
@@ -1790,6 +1830,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			schedule();
 			observer?.observe(document.body, { childList: true, subtree: true, characterData: true });
 			window.addEventListener("resize", onTelemetryResize, { passive: true });
+			document.addEventListener("visibilitychange", onTelemetryVisibilityChange);
 			window.addEventListener("popstate", checkTelemetryLocation, { passive: true });
 			window.addEventListener("hashchange", checkTelemetryLocation, { passive: true });
 			document.addEventListener("click", onTelemetryNavigationClick, true);
@@ -1800,6 +1841,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				if (telemetryPushState !== undefined && window.history.pushState === telemetryPushState) window.history.pushState = originalPushState;
 				if (telemetryReplaceState !== undefined && window.history.replaceState === telemetryReplaceState) window.history.replaceState = originalReplaceState;
 				window.removeEventListener("resize", onTelemetryResize);
+				document.removeEventListener("visibilitychange", onTelemetryVisibilityChange);
 				window.removeEventListener("popstate", checkTelemetryLocation);
 				window.removeEventListener("hashchange", checkTelemetryLocation);
 				document.removeEventListener("click", onTelemetryNavigationClick, true);
@@ -1821,12 +1863,14 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			ctx.effect(() => {
 				const style = ensureStyle();
 				if (typeof document !== "undefined") document.body.classList.add("dsh-skin-galactic-opera");
+				const disposeVisibilityState = installVisibilityState();
 				const decor = ensureDecor();
 				const disposeInteractions = installInteractions(decor);
 				const disposeTelemetryPanel = installTelemetryPanel();
 				return () => {
 					disposeTelemetryPanel();
 					disposeInteractions();
+					disposeVisibilityState();
 					disposeReducedMotionCache();
 					if (typeof document !== "undefined") document.body.classList.remove("dsh-skin-galactic-opera");
 					decor?.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-skin-galactic-opera",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.",
   "repository": {
     "type": "git",