Customize styles through UI API (#133)

* support customizing styles through UI API * do not apply styles automatically in constructor * do not apply styles automatically in constructor for stresstest * move light/dark mode palette change code to PixelStreamingApplicationStyle * Renamed updateColors / onUpdateColors -> setColorMode / onColorModeChanged
EpicGames · Mar 2, 2023 · 73bc553 · 73bc553
1 parent 53847f4
commit 73bc553
Show file tree

Hide file tree

Showing 4 changed files with 567 additions and 500 deletions.
diff --git a/Frontend/implementations/EpicGames/src/player.ts b/Frontend/implementations/EpicGames/src/player.ts
@@ -2,9 +2,9 @@
 
 import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
 import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
-export const PixelStreamingApplicationStyles =
+const PixelStreamingApplicationStyles =
     new PixelStreamingApplicationStyle();
-
+PixelStreamingApplicationStyles.applyStyleSheet();
 
 document.body.onload = function() {
 	// Example of how to set the logger level
@@ -15,7 +15,10 @@ document.body.onload = function() {
 
 	// Create a Native DOM delegate instance that implements the Delegate interface class
 	const stream = new PixelStreaming(config);
-	const application = new Application({ stream });
+	const application = new Application({
+		stream,
+		onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
+	});
 	// document.getElementById("centrebox").appendChild(application.rootElement);
 	document.body.appendChild(application.rootElement);
 }
diff --git a/Frontend/implementations/EpicGames/src/stresstest.ts b/Frontend/implementations/EpicGames/src/stresstest.ts
@@ -2,8 +2,9 @@
 
 import { Config, Flags, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
 import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
-export const PixelStreamingApplicationStyles =
+const PixelStreamingApplicationStyles =
     new PixelStreamingApplicationStyle();
+PixelStreamingApplicationStyles.applyStyleSheet();
 
 // This is the entrypoint to the stress test, all setup happens here
 export class StressTester {
@@ -146,7 +147,10 @@ export class StressTester {
 
 		// Create a Native DOM delegate instance that implements the Delegate interface class
 		const stream = new PixelStreaming(config);
-		const application = new Application({ stream });
+		const application = new Application({
+			stream,
+			onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
+		});
 		streamFrame.appendChild(application.rootElement);
 		return streamFrame;
 	}

diff --git a/Frontend/ui-library/src/Application/Application.ts b/Frontend/ui-library/src/Application/Application.ts
@@ -27,6 +27,7 @@ import { ConfigUI, LightMode } from '../Config/ConfigUI';
 
 export interface UIOptions {
     stream: PixelStreaming;
+    onColorModeChanged?: (isLightMode: boolean) => void;
 }
 
 /**
@@ -55,11 +56,14 @@ export class Application {
 
     configUI: ConfigUI;
 
+    onColorModeChanged: UIOptions["onColorModeChanged"];
+
     /**
      * @param options - Initialization options
      */
     constructor(options: UIOptions) {
         this.stream = options.stream;
+        this.onColorModeChanged = options.onColorModeChanged;
         this.configUI = new ConfigUI(this.stream.config);
 
         this.createOverlays();
@@ -84,7 +88,7 @@ export class Application {
 
         this.showConnectOrAutoConnectOverlays();
 
-        this.updateColors(this.configUI.isCustomFlagEnabled(LightMode));
+        this.setColorMode(this.configUI.isCustomFlagEnabled(LightMode));
     }
 
     public createOverlays(): void {
@@ -192,7 +196,7 @@ export class Application {
                     LightMode,
                     `Color Scheme: ${isLightMode ? 'Light' : 'Dark'} Mode`
                 );
-                this.updateColors(isLightMode);
+                this.setColorMode(isLightMode);
             }
         );
     }
@@ -589,29 +593,12 @@ export class Application {
     }
 
     /**
-     * Update the players color variables
+     * Set light/dark color mode
      * @param isLightMode - should we use a light or dark color scheme
      */
-    updateColors(isLightMode: boolean) {
-        const rootElement = document.querySelector(':root') as HTMLElement;
-        if (isLightMode) {
-            rootElement.style.setProperty('--color0', '#e2e0dd80');
-            rootElement.style.setProperty('--color1', '#FFFFFF');
-            rootElement.style.setProperty('--color2', '#000000');
-            rootElement.style.setProperty('--color3', '#0585fe');
-            rootElement.style.setProperty('--color4', '#35b350');
-            rootElement.style.setProperty('--color5', '#ffab00');
-            rootElement.style.setProperty('--color6', '#e1e2dd');
-            rootElement.style.setProperty('--color7', '#c3c4bf');
-        } else {
-            rootElement.style.setProperty('--color0', '#1D1F2280');
-            rootElement.style.setProperty('--color1', '#000000');
-            rootElement.style.setProperty('--color2', '#FFFFFF');
-            rootElement.style.setProperty('--color3', '#0585fe');
-            rootElement.style.setProperty('--color4', '#35b350');
-            rootElement.style.setProperty('--color5', '#ffab00');
-            rootElement.style.setProperty('--color6', '#1e1d22');
-            rootElement.style.setProperty('--color7', '#3c3b40');
+    setColorMode(isLightMode: boolean) {
+        if (this.onColorModeChanged) {
+            this.onColorModeChanged(isLightMode);
         }
     }
 }