npm - @arcware-cloud/pixelstreaming-websdk - Versions diffs - 1.3.32 → 1.3.39 - Mend

@arcware-cloud/pixelstreaming-websdk 1.3.32 → 1.3.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +4 -289
package/index.cjs +100 -7
package/index.mjs +122 -24
package/index.umd.cjs +100 -7
package/package.json +1 -1
package/types/lib/ArcwareApplication.d.ts +1 -0
package/types/lib/ArcwareConfig.d.ts +1 -1
package/types/lib/styles/ArcwarePixelStreamingApplicationStyles.d.ts +52 -5

package/README.md CHANGED Viewed

@@ -8,8 +8,6 @@ If you are not familiar with Arcware Cloud yet, check it out on [www.arcware.com
 The WebSDK is designed to bring immersive experiences, similar to those found in native applications, to the web. It's enabled for a range of applications, from gaming and architectural visualization to interactive training. Bringing high quality real-time and ensures a seamless user experience.
-This README offers an initial guide to integrating the WebSDK into your application. For comprehensive instructions, including setup, configuration, advanced features, and best practices, please refer to our detailed documentation: [Arcware Pixel Streaming WebSDK Documentation](https://docs.arcware.cloud/web-integration/new-websdk).
 For an in-depth understanding of the underlying technology and infrastructure, you can explore the original "PixelStreamingInfrastructure" repository by Epic Games on GitHub: [EpicGames/PixelStreamingInfrastructure](https://github.com/EpicGames/PixelStreamingInfrastructure).
 ## Getting Started
@@ -20,252 +18,17 @@ Before integrating the `@arcware-cloud/pixelstreaming-websdk` into your project,
 1. **Share ID**: You must have a valid Share ID set up for your project. This ID is crucial for establishing the connection between your application and the Arcware Cloud pixel streaming service. If you need assistance in setting up your Share ID, please refer to our detailed guide: [Setting up Share ID](https://docs.arcware.cloud/arcware-cloud-platform/getting-started/07.-preview-and-share-the-stream).
-2. **Web Application Development Environment**: Ensure that your web application development environment is set up with either `yarn` or `npm`. These package managers are required for installing the WebSDK.
-3. **TypeScript Recommendation**: While the SDK can be used with JavaScript, we strongly recommend using TypeScript in your development process. TypeScript offers enhanced code quality, readability, and will provide you with more intrinsic information during development, often surpassing what traditional documentation can offer.
-### Installation
-To integrate the Arcware Cloud Pixel Streaming WebSDK into your project, you can use either npm or yarn. Run one of the following commands in your project directory:
-```bash
-npm install @arcware-cloud/pixelstreaming-websdk --save
-```
-```bash
-yarn add @arcware-cloud/pixelstreaming-websdk
-```
-We recommend keeping the WebSDK up to date to ensure you have the latest features and bug fixes. Regularly check for and install updates.
-### Basic Usage
-Below is a simple example demonstrating how to use the WebSDK in an HTML file to set up pixel streaming. This example imports the SDK and initializes it with a share ID and initial settings. It then attaches the streaming application to a div element in your HTML.
-```html
-<html>
-  <head>
-    <title>Arcware Cloud - Pixel Streaming</title>
-    <script type="module">
-      import * as PixelStreamingWebSdkCore from "https://unpkg.com/@arcware-cloud/pixelstreaming-websdk@latest/index.esm.js";
-      const { ArcwareInit } = PixelStreamingWebSdkCore;
-      const { Config, PixelStreaming, Application } = ArcwareInit(
-        {
-          // Replace with your actual share ID
-          shareId: "share-0be4620b-77aa-42b1-98cb-f7ee61be443?"
-        },
-        {
-          initialSettings: {
-            AutoConnect: false
-            // additional initial settings
-          },
-          settings: {
-            // additional settings
-          }
-        }
-      );
-      document.getElementById("videoContainer").appendChild(Application.rootElement);
-    </script>
-  </head>
-  <body>
-    <div id="videoContainer" style="height: 1000px; width: 1000px;"></div>
-  </body>
-</html>
-```
-For more detailed examples and advanced usage, please refer to our documentation: [Arcware Cloud Pixelstreaming WebSDK Documentation](https://docs.arcware.cloud/web-integration/new-websdk).
-# Changelog
-### 1.3.25
-- fixed types being emitted again after bundler change
-### 1.3.24
-- allowing json type payload for upcoming events feature
-### 1.3.20
-- polished types a bit and aligned with documentation
-### 1.3.19
-- added new configuration parameters to optionally hide AfkOverlay and to hide love letters box
-- exposing a function to clear session ID which can be called before connecting to stream to force a fresh instance
-- fixed a bug that was causing onWebsocketClosedEventHandler to fire three times. Also it now returns proper CloseEvent
-### 1.3.17
-- added support for videos in white labelling
-### 1.3.16
-- added white labeling options for loader icon and screen
-- options can be loaded via base64 encoded string in URL, fetched via API (configured on platform) or set as properties on the SDK
-### 1.3.12
-- added orientationZoom field for managing zoom
-- fixed stream-ui issue (occurred on React.js)
-### 1.3.9
-- added an event handler to check if video is streaming if cloud requests evidence
-### 1.3.8
-- fixed error handling in SDK to back of reconnects if connection was intentionally terminated by cloud
-### 1.3.3
-- adding built in functionality for filetransfer (docs will follow soon)
-- added function to send events to Arcware Platform for custom analytics (this feature is alpha on backend, contact account manager if you are interested)
-- some fixes to
-### 1.2.18
-- fixed webpack to emit types
-### 1.2.17 (broken)
-- fixed diagnostics to interpred user agent and user agent data more accurately
-- webpack did not emit types.d.ts do not use this version!
-### 1.2.16
-- Added "diagnostics collector" module
-### 1.2.13
-- Replaced "moment" by "date-fns"
-### 1.2.7
-- "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "0.3.1",
-- "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5": "1.2.1",
-- "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5": "1.3.1",
-### 1.2.6
-- Added the "TextboxEntry" handler
-- global CSS rule encapsulation
-### 1.2.5
-- Initial resolution can now be set as configuration parameter. Platform will start the instance with this resolution as startup argument for Unreal, such that Unreal will start with the web container size's resolution for fastest loading experience and screen adaptation
-### 1.1.22
-- Added flag to force refresh the components on ArcwareInit
-- removed lodash and lottie dependencies to reduce package size significantly
-### 1.1.20
+2. **Web Application Development Environment**: Please check out our documentation [Arcware Pixel Streaming WebSDK Getting started](https://docs.arcware.cloud/web-integration/new-websdk/implementing-the-stream-on-your-app/getting-started)
-- fixing ZoD error on queuing
+# CHANGELOG
-### 1.1.19
-- "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "0.2.9"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5": "1.1.0"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5": "1.2.0"
-### 1.1.18
-- hotfix: PixelStreaming.websocketState now returning correct state
-### 1.1.17
-- "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "0.2.9"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5": "1.0.3"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5": "1.0.2"
-### 1.1.12
-- pushing to newer versions of pixelstreaming infrastructure
-- "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "0.2.8"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5": "1.0.1"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5": "1.0.0"
-### 1.1.5
-- removing the reconnect on successive calls to ArcwareInit if websocket was stale. If this behaviour is needed, it should be implemented outside the SDK
-### 1.1.3
-- reverting as the new versions of pixelstreaming infrastructure break things at least on Arcware side
-- "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "0.1.7"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5": "0.4.8"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5": "0.4.8"
-### 1.0.11
-- reduced logging verbosity of pixel streaming infrastructure to not spam console
-### 1.0.10
-- Storing initialized WebSDK in global variable after calling ArcwareInit to return existing object on consecutive calls.
-  This prevents double websocket connections and potential failures to connect to stream
-### 1.0.9
-- Fixed peerDependencies in package.json
-### 1.0.0
-This version was created with the support of Tensorworks and is now sourcing from upstream packages
-- "@epicgames-ps/lib-pixelstreamingcommon-ue5.5": "0.1.7"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ue5.5": "^0.4.8"
-- "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.5": "^0.4.8"
-#### Added
-- Support for Versions 5.1 and higher
-- Support for controllers
-- Experimental support for VR streaming
-#### Fixed
-- Random freezes on streams
-#### Deprecated
-- Support for Unreal 4.27 (fall back to WebRTC Plugin)
-- Support for Unreal 5.0.3.0 (fall back to WebRTC Plugin)
-### 0.1.\* (Initial Release)
-<!-- - Upcoming changes or improvements that are currently in development can be listed here.
-### [Version Number] - Release Date
-#### Added
-- List of new features or additions to the WebSDK in this release.
-#### Changed
-- Updates to existing features or overall improvements to the WebSDK.
-#### Deprecated
-- Features that are planned to be removed in future releases.
-#### Removed
-- Features or functionalities that have been removed from the WebSDK.
-#### Fixed
-- Bug fixes and corrections made in this release.
-### [Previous Version Number] - Previous Release Date
-- Changes for previous versions follow the same format. -->
+Our changelog moved to the documentation: [CHANGELOG](https://docs.arcware.cloud/web-integration/new-websdk/changelog)
 # LICENSE
 MIT License
-Copyright 2023 Arcware GmbH
+Copyright 2026 Arcware GmbH
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
@@ -286,51 +49,3 @@ This software inherits code from several other libraries, namely:
 Here's a summary of these [Dependency Licenses](https://www.npmjs.com/package/@arcware-cloud/pixelstreaming-websdk?activeTab=code)/DEPENDENCY_LICENSE.md.
 We appreciate the contributions of these libraries, as they are essential in supporting our development efforts.
-<!-- # Configuration Options
-When creating a new instance of `ArcwareConfig`, you provide an object with two main properties: `initialSettings` and `settings`.
-####
-`initialSettings`
-This property is an object that defines the initial environment and behavior of the Pixel Streaming session. Here's a breakdown of the options used in the example:
-- `ss`: This is the URL to the signalling server, which is essential for establishing the WebRTC connection. It is typically provided by your environment configuration.
-- `StartVideoMuted`: A boolean that, when set to `true`, starts the video in a muted state.
-- `AutoConnect`: If `true`, the client will automatically attempt to connect to the Pixel Streaming session as soon as possible.
-- `AutoPlayVideo`: When set to `true`, the video will automatically play as soon as it's ready.
-####
-`settings`
-The `settings` property is an object containing various configuration options that tailor the user interface and interaction capabilities of the streaming session:
-- `shareId`: An identifier used for sharing sessions. \*Required
-- `session`: The session ID, which can be used for session management and reconnection.
-- `token`: An authentication token, if required by your backend.
-- `infoButton`: A boolean to toggle the visibility of an information button in the UI.
-- `micButton`: A boolean to control the display of a microphone toggle button.
-- `audioButton`: A boolean to show or hide the audio control button.
-- `fullscreenButton`: A boolean to enable a fullscreen toggle button.
-- `settingsButton`: A boolean to add a settings button to the UI.
-- `connectionStrengthIcon`: A boolean to display an icon indicating the connection strength.
-###
-Initialization Process
-After configuring `ArcwareConfig`, you create an instance of `ArcwarePixelStreaming` by passing the configuration object. This instance is responsible for managing the streaming session and handling user interactions.
-    const pixelStreamingInstance =  new  ArcwarePixelStreaming(config);
-Once initialized, `pixelStreamingInstance` can be used to interact with the streaming session. For example, you can retrieve the application's response or emit UI interactions:
-    const application =  new  ArcwareApplication({
-        stream: pixelStreamingInstance,
-    });
-- ` application.getApplicationResponse(``string``) `: This method can be called to get a response from the application, which might include status updates or other messages.
-- `application.emitUIInteraction(descriptor:` ` object | string``) `: This method allows you to send UI interaction events to the streaming application, such as button presses or command inputs. -->

package/index.cjs CHANGED Viewed

@@ -22985,6 +22985,7 @@ class ArcwareApplication extends lib_pixelstreamingfrontend_ui_ue5_5_1.Applicati
         this.createAudioToggleButton();
         this.createMicToggleButton();
         this.createStopButton();
+        this.applyCustomStyling();
         this.applyArcwareStyles();
         this.videoElementParent = (_b = this === null || this === void 0 ? void 0 : this.stream) === null || _b === void 0 ? void 0 : _b.videoElementParent;
         this.parentElement = (_c = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _c === void 0 ? void 0 : _c.parentElement;
@@ -23171,6 +23172,37 @@ class ArcwareApplication extends lib_pixelstreamingfrontend_ui_ue5_5_1.Applicati
             }
         }
     }
+    applyCustomStyling(preset) {
+        var _b;
+        const resolved = preset !== null && preset !== void 0 ? preset : {
+            position: "Bottom-Right",
+            orientation: "Vertical",
+            order_reverse: false,
+        };
+        const videoElementParent = (_b = this === null || this === void 0 ? void 0 : this.stream) === null || _b === void 0 ? void 0 : _b.videoElementParent;
+        const playerUI = videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.parentElement;
+        if (!playerUI)
+            return;
+        const uiFeatures = playerUI.querySelector("#uiFeatures");
+        if (!uiFeatures)
+            return;
+        // position
+        uiFeatures.classList.add(ArcwarePixelStreamingApplicationStyles_1.CONTROLS_CLASSES.uiFeatures.buttons_position[resolved.position]);
+        // orientation
+        uiFeatures.classList.add(ArcwarePixelStreamingApplicationStyles_1.CONTROLS_CLASSES.uiFeatures.buttons_orientation[resolved.orientation]);
+        // order reverse
+        if (resolved.order_reverse) {
+            uiFeatures.classList.add(ArcwarePixelStreamingApplicationStyles_1.CONTROLS_CLASSES.uiFeatures.buttons_reverse);
+        }
+        // exception - moving 'connection indicator' icon
+        if (resolved.position === "Bottom-Left") {
+            const connection = document.getElementById("connection");
+            if (connection) {
+                connection.style.right = "10px";
+                connection.style.left = "auto";
+            }
+        }
+    }
     uiDefaultButtonVisibilty(buttonType, id) {
         var _b, _c, _d;
         if (this === null || this === void 0 ? void 0 : this.parentElement) {
@@ -23391,6 +23423,7 @@ const ArcwareSettingsSchema_1 = __webpack_require__(9913);
 const whiteLabelling_1 = __webpack_require__(5292);
 const ZWhiteLabel_1 = __webpack_require__(1938);
 const EventHandler_1 = __webpack_require__(3916);
+lib_pixelstreamingfrontend_ue5_5_1.Logger.InitLogging(2, false);
 /** Default arcware signalling endpoint. */
 exports.DefaultUrl = `wss://signalling-client.ragnarok.arcware.cloud`;
 function deepEqual(a, b) {
@@ -23449,7 +23482,7 @@ class ArcwareConfig extends lib_pixelstreamingfrontend_ue5_5_1.Config {
         if (!config.initialSettings.ss)
             config.initialSettings.ss = exports.DefaultUrl;
         super(config);
-        this.VERSION = "1.3.32";
+        this.VERSION = "1.3.39";
         this.whiteLabellingChanged = new EventHandler_1.EventHandler();
         this.signallingWlURL = "https://signalling-client.arcware.cloud/whiteLabel/";
         if (config.envName) {
@@ -25670,7 +25703,22 @@ tslib_1.__exportStar(__webpack_require__(6125), exports);
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ArcwareStyles = void 0;
+exports.ArcwareStyles = exports.CONTROLS_CLASSES = void 0;
+exports.CONTROLS_CLASSES = {
+    uiFeatures: {
+        buttons_position: {
+            "Top-Left": "controls__position_tl",
+            "Top-Right": "controls__position_tr",
+            "Bottom-Left": "controls__position_bl",
+            "Bottom-Right": "controls__position_br",
+        },
+        buttons_orientation: {
+            "Horizontal": "controls__orientation_h",
+            "Vertical": "controls__orientation_v",
+        },
+        buttons_reverse: "controls__order_reverse",
+    }
+};
 exports.ArcwareStyles = {
     customStyles: {
         ":root": {
@@ -25755,18 +25803,63 @@ exports.ArcwareStyles = {
             background: "#18181A"
         },
         "#uiFeatures #controls": {
-            top: "auto",
-            left: "auto",
-            bottom: "10px",
-            right: "20px",
             display: "flex",
             flexDirection: "column-reverse"
         },
+        /* START Custom position */
+        // #controls
+        controls: {
+            gap: "0.5rem",
+            "& > *": {
+                marginBottom: "0 !important",
+            },
+        },
+        // position
+        uiFeatures: {
+            "&.controls__position_tl #controls": {
+                top: "10px",
+                left: "20px",
+                bottom: "auto",
+                right: "auto",
+            },
+            "&.controls__position_tr #controls": {
+                top: "10px",
+                right: "20px",
+                bottom: "auto",
+                left: "auto",
+            },
+            "&.controls__position_bl #controls": {
+                bottom: "10px",
+                left: "20px",
+                top: "auto",
+                right: "auto",
+            },
+            "&.controls__position_br #controls": {
+                bottom: "10px",
+                right: "20px",
+                top: "auto",
+                left: "auto",
+            },
+            // orientation + order
+            "&.controls__orientation_h #controls": {
+                flexDirection: "row",
+            },
+            "&.controls__orientation_h.controls__order_reverse #controls": {
+                flexDirection: "row-reverse",
+            },
+            "&.controls__orientation_v #controls": {
+                flexDirection: "column",
+            },
+            "&.controls__orientation_v.controls__order_reverse #controls": {
+                flexDirection: "column-reverse",
+            },
+        },
+        /* END Custom position */
         "#uiFeatures #connection": {
             bottom: "5px",
             left: "10px",
             width: "2.5rem",
-            heihgt: "2.5rem"
+            height: "2.5rem"
         },
         "#uiFeatures button": {
             backgroundColor: "var(--color12)",

package/index.mjs CHANGED Viewed

@@ -22987,6 +22987,7 @@ class ArcwareApplication extends _epicgames_ps_lib_pixelstreamingfrontend_ui_ue5
         this.createAudioToggleButton();
         this.createMicToggleButton();
         this.createStopButton();
+        this.applyCustomStyling();
         this.applyArcwareStyles();
         this.videoElementParent = (_b = this === null || this === void 0 ? void 0 : this.stream) === null || _b === void 0 ? void 0 : _b.videoElementParent;
         this.parentElement = (_c = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _c === void 0 ? void 0 : _c.parentElement;
@@ -23173,6 +23174,37 @@ class ArcwareApplication extends _epicgames_ps_lib_pixelstreamingfrontend_ui_ue5
             }
         }
     }
+    applyCustomStyling(preset) {
+        var _b;
+        const resolved = preset !== null && preset !== void 0 ? preset : {
+            position: "Bottom-Right",
+            orientation: "Vertical",
+            order_reverse: false,
+        };
+        const videoElementParent = (_b = this === null || this === void 0 ? void 0 : this.stream) === null || _b === void 0 ? void 0 : _b.videoElementParent;
+        const playerUI = videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.parentElement;
+        if (!playerUI)
+            return;
+        const uiFeatures = playerUI.querySelector("#uiFeatures");
+        if (!uiFeatures)
+            return;
+        // position
+        uiFeatures.classList.add(_styles_ArcwarePixelStreamingApplicationStyles__WEBPACK_IMPORTED_MODULE_10__.CONTROLS_CLASSES.uiFeatures.buttons_position[resolved.position]);
+        // orientation
+        uiFeatures.classList.add(_styles_ArcwarePixelStreamingApplicationStyles__WEBPACK_IMPORTED_MODULE_10__.CONTROLS_CLASSES.uiFeatures.buttons_orientation[resolved.orientation]);
+        // order reverse
+        if (resolved.order_reverse) {
+            uiFeatures.classList.add(_styles_ArcwarePixelStreamingApplicationStyles__WEBPACK_IMPORTED_MODULE_10__.CONTROLS_CLASSES.uiFeatures.buttons_reverse);
+        }
+        // exception - moving 'connection indicator' icon
+        if (resolved.position === "Bottom-Left") {
+            const connection = document.getElementById("connection");
+            if (connection) {
+                connection.style.right = "10px";
+                connection.style.left = "auto";
+            }
+        }
+    }
     uiDefaultButtonVisibilty(buttonType, id) {
         var _b, _c, _d;
         if (this === null || this === void 0 ? void 0 : this.parentElement) {
@@ -23388,12 +23420,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1635);
 /* harmony import */ var zod__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2080);
-/* harmony import */ var _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(223);
-/* harmony import */ var _domain_Session__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3266);
-/* harmony import */ var _domain_ArcwareSettingsSchema__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9913);
-/* harmony import */ var _features_whiteLabelling__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5292);
-/* harmony import */ var _features_ZWhiteLabel__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1938);
-/* harmony import */ var _domain_EventHandler__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3916);
+/* harmony import */ var _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(948);
+/* harmony import */ var _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(223);
+/* harmony import */ var _domain_Session__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3266);
+/* harmony import */ var _domain_ArcwareSettingsSchema__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9913);
+/* harmony import */ var _features_whiteLabelling__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5292);
+/* harmony import */ var _features_ZWhiteLabel__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1938);
+/* harmony import */ var _domain_EventHandler__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(3916);
@@ -23402,6 +23435,7 @@ __webpack_require__.r(__webpack_exports__);
+_epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_2__.Logger.InitLogging(2, false);
 /** Default arcware signalling endpoint. */
 const DefaultUrl = `wss://signalling-client.ragnarok.arcware.cloud`;
 function deepEqual(a, b) {
@@ -23412,7 +23446,7 @@ function deepEqual(a, b) {
         return false;
     }
 }
-class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_2__.Config {
+class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_3__.Config {
     /**
      * Can be used to fetch projectId and shareId from the current url.
      * Example:
@@ -23448,7 +23482,7 @@ class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBP
             throw new Error(`ShareId or ProjectId must be specified.`);
         }
         // Validate settings input.
-        const settings = _domain_ArcwareSettingsSchema__WEBPACK_IMPORTED_MODULE_4__.ArcwareSettingsSchema.parse(config.settings);
+        const settings = _domain_ArcwareSettingsSchema__WEBPACK_IMPORTED_MODULE_5__.ArcwareSettingsSchema.parse(config.settings);
         // Setup arcware default settings.
         if (!config.initialSettings)
             config.initialSettings = {};
@@ -23460,17 +23494,17 @@ class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBP
         if (!config.initialSettings.ss)
             config.initialSettings.ss = DefaultUrl;
         super(config);
-        this.VERSION = "1.3.32";
-        this.whiteLabellingChanged = new _domain_EventHandler__WEBPACK_IMPORTED_MODULE_7__.EventHandler();
+        this.VERSION = "1.3.39";
+        this.whiteLabellingChanged = new _domain_EventHandler__WEBPACK_IMPORTED_MODULE_8__.EventHandler();
         this.signallingWlURL = "https://signalling-client.arcware.cloud/whiteLabel/";
         if (config.envName) {
             this.signallingWlURL = `https://signalling-client.${config.envName}.arcware.cloud/whiteLabel/`;
         }
         this.settings = settings;
-        this.session = new _domain_Session__WEBPACK_IMPORTED_MODULE_3__.Session();
+        this.session = new _domain_Session__WEBPACK_IMPORTED_MODULE_4__.Session();
         this._initialSettings = config.initialSettings;
         // Setup arcware default settings.
-        this.setFlagEnabled(_epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_2__.Flags.AFKDetection, true);
+        this.setFlagEnabled(_epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_3__.Flags.AFKDetection, true);
         // IMPORTANT NOTE: The feature BrowserSendOffer is no longer supported in PSInfra 5.5.
         // The offer is now expected to come from UE. Ensure that your signalling server supports this behaviour.
         //this.setFlagEnabled(Flags.BrowserSendOffer, true);
@@ -23480,7 +23514,7 @@ class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBP
             if (qs.has("wl")) {
                 if (qs.get("wl") !== "") {
                     // Retrieve image loading from there
-                    const wlParsed = this.useUrlParams ? (0,_features_whiteLabelling__WEBPACK_IMPORTED_MODULE_5__.readWhiteLabelFromQuery)(qs) : undefined; // respect useUrlParams
+                    const wlParsed = this.useUrlParams ? (0,_features_whiteLabelling__WEBPACK_IMPORTED_MODULE_6__.readWhiteLabelFromQuery)(qs) : undefined; // respect useUrlParams
                     if (wlParsed) {
                         this.settings.whiteLabelling = Object.assign(Object.assign({}, ((_c = this.settings.whiteLabelling) !== null && _c !== void 0 ? _c : {})), wlParsed);
                     }
@@ -23496,7 +23530,7 @@ class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBP
         return (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__awaiter)(this, void 0, void 0, function* () {
             const qs = new URLSearchParams(window.location.search);
             if (qs.get("wl") !== "") {
-                _domain_EventHandler__WEBPACK_IMPORTED_MODULE_7__.EventHandler.Emit(this.whiteLabellingChanged, {
+                _domain_EventHandler__WEBPACK_IMPORTED_MODULE_8__.EventHandler.Emit(this.whiteLabellingChanged, {
                     next: this.settings.whiteLabelling,
                     changed: false
                 });
@@ -23526,14 +23560,14 @@ class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBP
                 catch (_a) {
                     return undefined;
                 }
-                const parsed = _features_ZWhiteLabel__WEBPACK_IMPORTED_MODULE_6__.ZWhiteLabel.safeParse(json);
+                const parsed = _features_ZWhiteLabel__WEBPACK_IMPORTED_MODULE_7__.ZWhiteLabel.safeParse(json);
                 if (!parsed.success)
                     return undefined;
                 // Only apply & emit if it actually changed
                 const prev = this.settings.whiteLabelling;
                 const next = parsed.data;
                 this.settings.whiteLabelling = next;
-                _domain_EventHandler__WEBPACK_IMPORTED_MODULE_7__.EventHandler.Emit(this.whiteLabellingChanged, { next, changed: !deepEqual(prev, next) });
+                _domain_EventHandler__WEBPACK_IMPORTED_MODULE_8__.EventHandler.Emit(this.whiteLabellingChanged, { next, changed: !deepEqual(prev, next) });
                 return parsed.data;
             }
             catch (_b) {
@@ -23595,7 +23629,7 @@ class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBP
         return this._initialSettings;
     }
     modifyInitialSettings(mouseLock) {
-        this.setFlagEnabled(_epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_2__.Flags.HoveringMouseMode, mouseLock);
+        this.setFlagEnabled(_epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_3__.Flags.HoveringMouseMode, mouseLock);
     }
 }
@@ -25715,6 +25749,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   ArcwareInit: () => (/* reexport safe */ _ArcwareInit__WEBPACK_IMPORTED_MODULE_3__.ArcwareInit),
 /* harmony export */   ArcwarePixelStreaming: () => (/* reexport safe */ _ArcwarePixelStreaming__WEBPACK_IMPORTED_MODULE_2__.ArcwarePixelStreaming),
 /* harmony export */   ArcwareStyles: () => (/* reexport safe */ _styles_ArcwarePixelStreamingApplicationStyles__WEBPACK_IMPORTED_MODULE_4__.ArcwareStyles),
+/* harmony export */   CONTROLS_CLASSES: () => (/* reexport safe */ _styles_ArcwarePixelStreamingApplicationStyles__WEBPACK_IMPORTED_MODULE_4__.CONTROLS_CLASSES),
 /* harmony export */   DefaultUrl: () => (/* reexport safe */ _ArcwareConfig__WEBPACK_IMPORTED_MODULE_1__.DefaultUrl),
 /* harmony export */   WebsocketState: () => (/* reexport safe */ _ArcwarePixelStreaming__WEBPACK_IMPORTED_MODULE_2__.WebsocketState)
 /* harmony export */ });
@@ -25737,8 +25772,24 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ArcwareStyles: () => (/* binding */ ArcwareStyles)
+/* harmony export */   ArcwareStyles: () => (/* binding */ ArcwareStyles),
+/* harmony export */   CONTROLS_CLASSES: () => (/* binding */ CONTROLS_CLASSES)
 /* harmony export */ });
+const CONTROLS_CLASSES = {
+    uiFeatures: {
+        buttons_position: {
+            "Top-Left": "controls__position_tl",
+            "Top-Right": "controls__position_tr",
+            "Bottom-Left": "controls__position_bl",
+            "Bottom-Right": "controls__position_br",
+        },
+        buttons_orientation: {
+            "Horizontal": "controls__orientation_h",
+            "Vertical": "controls__orientation_v",
+        },
+        buttons_reverse: "controls__order_reverse",
+    }
+};
 const ArcwareStyles = {
     customStyles: {
         ":root": {
@@ -25823,18 +25874,63 @@ const ArcwareStyles = {
             background: "#18181A"
         },
         "#uiFeatures #controls": {
-            top: "auto",
-            left: "auto",
-            bottom: "10px",
-            right: "20px",
             display: "flex",
             flexDirection: "column-reverse"
         },
+        /* START Custom position */
+        // #controls
+        controls: {
+            gap: "0.5rem",
+            "& > *": {
+                marginBottom: "0 !important",
+            },
+        },
+        // position
+        uiFeatures: {
+            "&.controls__position_tl #controls": {
+                top: "10px",
+                left: "20px",
+                bottom: "auto",
+                right: "auto",
+            },
+            "&.controls__position_tr #controls": {
+                top: "10px",
+                right: "20px",
+                bottom: "auto",
+                left: "auto",
+            },
+            "&.controls__position_bl #controls": {
+                bottom: "10px",
+                left: "20px",
+                top: "auto",
+                right: "auto",
+            },
+            "&.controls__position_br #controls": {
+                bottom: "10px",
+                right: "20px",
+                top: "auto",
+                left: "auto",
+            },
+            // orientation + order
+            "&.controls__orientation_h #controls": {
+                flexDirection: "row",
+            },
+            "&.controls__orientation_h.controls__order_reverse #controls": {
+                flexDirection: "row-reverse",
+            },
+            "&.controls__orientation_v #controls": {
+                flexDirection: "column",
+            },
+            "&.controls__orientation_v.controls__order_reverse #controls": {
+                flexDirection: "column-reverse",
+            },
+        },
+        /* END Custom position */
         "#uiFeatures #connection": {
             bottom: "5px",
             left: "10px",
             width: "2.5rem",
-            heihgt: "2.5rem"
+            height: "2.5rem"
         },
         "#uiFeatures button": {
             backgroundColor: "var(--color12)",
@@ -32527,6 +32623,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   ArcwareInit: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_2__.ArcwareInit),
 /* harmony export */   ArcwarePixelStreaming: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_2__.ArcwarePixelStreaming),
 /* harmony export */   ArcwareStyles: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_2__.ArcwareStyles),
+/* harmony export */   CONTROLS_CLASSES: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_2__.CONTROLS_CLASSES),
 /* harmony export */   CandidatePairStats: () => (/* reexport safe */ _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_0__.CandidatePairStats),
 /* harmony export */   CandidateStat: () => (/* reexport safe */ _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_0__.CandidateStat),
 /* harmony export */   Config: () => (/* reexport safe */ _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBPACK_IMPORTED_MODULE_0__.Config),
@@ -32653,6 +32750,7 @@ const __webpack_exports__ArcwareConfig = __webpack_exports__.ArcwareConfig;
 const __webpack_exports__ArcwareInit = __webpack_exports__.ArcwareInit;
 const __webpack_exports__ArcwarePixelStreaming = __webpack_exports__.ArcwarePixelStreaming;
 const __webpack_exports__ArcwareStyles = __webpack_exports__.ArcwareStyles;
+const __webpack_exports__CONTROLS_CLASSES = __webpack_exports__.CONTROLS_CLASSES;
 const __webpack_exports__CandidatePairStats = __webpack_exports__.CandidatePairStats;
 const __webpack_exports__CandidateStat = __webpack_exports__.CandidateStat;
 const __webpack_exports__Config = __webpack_exports__.Config;
@@ -32757,4 +32855,4 @@ const __webpack_exports__isNumericId = __webpack_exports__.isNumericId;
 const __webpack_exports__isOptionId = __webpack_exports__.isOptionId;
 const __webpack_exports__isTextId = __webpack_exports__.isTextId;
 const __webpack_exports__overrideLogger = __webpack_exports__.overrideLogger;
-export { __webpack_exports__AFKOverlay as AFKOverlay, __webpack_exports__ActionOverlay as ActionOverlay, __webpack_exports__AfkLogic as AfkLogic, __webpack_exports__AfkTimedOutEvent as AfkTimedOutEvent, __webpack_exports__AfkWarningActivateEvent as AfkWarningActivateEvent, __webpack_exports__AfkWarningDeactivateEvent as AfkWarningDeactivateEvent, __webpack_exports__AfkWarningUpdateEvent as AfkWarningUpdateEvent, __webpack_exports__AggregatedStats as AggregatedStats, __webpack_exports__Application as Application, __webpack_exports__ArcwareApplication as ArcwareApplication, __webpack_exports__ArcwareConfig as ArcwareConfig, __webpack_exports__ArcwareInit as ArcwareInit, __webpack_exports__ArcwarePixelStreaming as ArcwarePixelStreaming, __webpack_exports__ArcwareStyles as ArcwareStyles, __webpack_exports__CandidatePairStats as CandidatePairStats, __webpack_exports__CandidateStat as CandidateStat, __webpack_exports__Config as Config, __webpack_exports__ConfigUI as ConfigUI, __webpack_exports__ConnectOverlay as ConnectOverlay, __webpack_exports__ControlSchemeType as ControlSchemeType, __webpack_exports__DataChannelCloseEvent as DataChannelCloseEvent, __webpack_exports__DataChannelErrorEvent as DataChannelErrorEvent, __webpack_exports__DataChannelLatencyTestRecord as DataChannelLatencyTestRecord, __webpack_exports__DataChannelLatencyTestResponseEvent as DataChannelLatencyTestResponseEvent, __webpack_exports__DataChannelLatencyTestResultEvent as DataChannelLatencyTestResultEvent, __webpack_exports__DataChannelOpenEvent as DataChannelOpenEvent, __webpack_exports__DataChannelStats as DataChannelStats, __webpack_exports__DefaultUrl as DefaultUrl, __webpack_exports__DisconnectOverlay as DisconnectOverlay, __webpack_exports__EncoderSettings as EncoderSettings, __webpack_exports__ErrorOverlay as ErrorOverlay, __webpack_exports__EventEmitter as EventEmitter, __webpack_exports__Flags as Flags, __webpack_exports__FrameTimingInfo as FrameTimingInfo, __webpack_exports__HideFreezeFrameEvent as HideFreezeFrameEvent, __webpack_exports__InboundAudioStats as InboundAudioStats, __webpack_exports__InboundVideoStats as InboundVideoStats, __webpack_exports__InfoOverlay as InfoOverlay, __webpack_exports__InitialSettings as InitialSettings, __webpack_exports__InitialSettingsEvent as InitialSettingsEvent, __webpack_exports__InputCoordTranslator as InputCoordTranslator, __webpack_exports__KeepaliveMonitor as KeepaliveMonitor, __webpack_exports__LatencyCalculatedEvent as LatencyCalculatedEvent, __webpack_exports__LatencyCalculator as LatencyCalculator, __webpack_exports__LatencyInfo as LatencyInfo, __webpack_exports__LatencyTestResultEvent as LatencyTestResultEvent, __webpack_exports__LatencyTestResults as LatencyTestResults, __webpack_exports__LoadFreezeFrameEvent as LoadFreezeFrameEvent, __webpack_exports__LogLevel as LogLevel, __webpack_exports__Logger as Logger, __webpack_exports__MessageDirection as MessageDirection, __webpack_exports__MessageHelpers as MessageHelpers, __webpack_exports__MessageRegistry as MessageRegistry, __webpack_exports__Messages as Messages, __webpack_exports__NumericParameters as NumericParameters, __webpack_exports__OptionParameters as OptionParameters, __webpack_exports__OutboundRTPStats as OutboundRTPStats, __webpack_exports__OverlayBase as OverlayBase, __webpack_exports__PixelStreaming as PixelStreaming, __webpack_exports__PixelStreamingApplicationStyle as PixelStreamingApplicationStyle, __webpack_exports__PixelStreamingEventEmitter as PixelStreamingEventEmitter, __webpack_exports__PixelStreamingSettings as PixelStreamingSettings, __webpack_exports__PlayOverlay as PlayOverlay, __webpack_exports__PlayStreamErrorEvent as PlayStreamErrorEvent, __webpack_exports__PlayStreamEvent as PlayStreamEvent, __webpack_exports__PlayStreamRejectedEvent as PlayStreamRejectedEvent, __webpack_exports__PlayerCountEvent as PlayerCountEvent, __webpack_exports__RemoteOutboundRTPStats as RemoteOutboundRTPStats, __webpack_exports__SDPUtils as SDPUtils, __webpack_exports__SettingBase as SettingBase, __webpack_exports__SettingFlag as SettingFlag, __webpack_exports__SettingNumber as SettingNumber, __webpack_exports__SettingOption as SettingOption, __webpack_exports__SettingText as SettingText, __webpack_exports__SettingUIBase as SettingUIBase, __webpack_exports__SettingUIFlag as SettingUIFlag, __webpack_exports__SettingUINumber as SettingUINumber, __webpack_exports__SettingUIOption as SettingUIOption, __webpack_exports__SettingUIText as SettingUIText, __webpack_exports__SettingsChangedEvent as SettingsChangedEvent, __webpack_exports__ShowOnScreenKeyboardEvent as ShowOnScreenKeyboardEvent, __webpack_exports__SignallingProtocol as SignallingProtocol, __webpack_exports__StatsReceivedEvent as StatsReceivedEvent, __webpack_exports__StreamLoadingEvent as StreamLoadingEvent, __webpack_exports__StreamPreConnectEvent as StreamPreConnectEvent, __webpack_exports__StreamPreDisconnectEvent as StreamPreDisconnectEvent, __webpack_exports__StreamReconnectEvent as StreamReconnectEvent, __webpack_exports__StreamerIDChangedMessageEvent as StreamerIDChangedMessageEvent, __webpack_exports__StreamerListMessageEvent as StreamerListMessageEvent, __webpack_exports__SubscribeFailedEvent as SubscribeFailedEvent, __webpack_exports__TextOverlay as TextOverlay, __webpack_exports__TextParameters as TextParameters, __webpack_exports__UIElementCreationMode as UIElementCreationMode, __webpack_exports__VideoEncoderAvgQPEvent as VideoEncoderAvgQPEvent, __webpack_exports__VideoInitializedEvent as VideoInitializedEvent, __webpack_exports__WebRTCSettings as WebRTCSettings, __webpack_exports__WebRtcAutoConnectEvent as WebRtcAutoConnectEvent, __webpack_exports__WebRtcConnectedEvent as WebRtcConnectedEvent, __webpack_exports__WebRtcConnectingEvent as WebRtcConnectingEvent, __webpack_exports__WebRtcDisconnectedEvent as WebRtcDisconnectedEvent, __webpack_exports__WebRtcFailedEvent as WebRtcFailedEvent, __webpack_exports__WebRtcPlayerController as WebRtcPlayerController, __webpack_exports__WebRtcSdpAnswerEvent as WebRtcSdpAnswerEvent, __webpack_exports__WebRtcSdpEvent as WebRtcSdpEvent, __webpack_exports__WebRtcSdpOfferEvent as WebRtcSdpOfferEvent, __webpack_exports__WebRtcTCPRelayDetectedEvent as WebRtcTCPRelayDetectedEvent, __webpack_exports__WebSocketTransport as WebSocketTransport, __webpack_exports__WebSocketTransportNJS as WebSocketTransportNJS, __webpack_exports__WebXRController as WebXRController, __webpack_exports__WebsocketState as WebsocketState, __webpack_exports__XrFrameEvent as XrFrameEvent, __webpack_exports__XrSessionEndedEvent as XrSessionEndedEvent, __webpack_exports__XrSessionStartedEvent as XrSessionStartedEvent, __webpack_exports__isFlagId as isFlagId, __webpack_exports__isNumericId as isNumericId, __webpack_exports__isOptionId as isOptionId, __webpack_exports__isTextId as isTextId, __webpack_exports__overrideLogger as overrideLogger };
+export { __webpack_exports__AFKOverlay as AFKOverlay, __webpack_exports__ActionOverlay as ActionOverlay, __webpack_exports__AfkLogic as AfkLogic, __webpack_exports__AfkTimedOutEvent as AfkTimedOutEvent, __webpack_exports__AfkWarningActivateEvent as AfkWarningActivateEvent, __webpack_exports__AfkWarningDeactivateEvent as AfkWarningDeactivateEvent, __webpack_exports__AfkWarningUpdateEvent as AfkWarningUpdateEvent, __webpack_exports__AggregatedStats as AggregatedStats, __webpack_exports__Application as Application, __webpack_exports__ArcwareApplication as ArcwareApplication, __webpack_exports__ArcwareConfig as ArcwareConfig, __webpack_exports__ArcwareInit as ArcwareInit, __webpack_exports__ArcwarePixelStreaming as ArcwarePixelStreaming, __webpack_exports__ArcwareStyles as ArcwareStyles, __webpack_exports__CONTROLS_CLASSES as CONTROLS_CLASSES, __webpack_exports__CandidatePairStats as CandidatePairStats, __webpack_exports__CandidateStat as CandidateStat, __webpack_exports__Config as Config, __webpack_exports__ConfigUI as ConfigUI, __webpack_exports__ConnectOverlay as ConnectOverlay, __webpack_exports__ControlSchemeType as ControlSchemeType, __webpack_exports__DataChannelCloseEvent as DataChannelCloseEvent, __webpack_exports__DataChannelErrorEvent as DataChannelErrorEvent, __webpack_exports__DataChannelLatencyTestRecord as DataChannelLatencyTestRecord, __webpack_exports__DataChannelLatencyTestResponseEvent as DataChannelLatencyTestResponseEvent, __webpack_exports__DataChannelLatencyTestResultEvent as DataChannelLatencyTestResultEvent, __webpack_exports__DataChannelOpenEvent as DataChannelOpenEvent, __webpack_exports__DataChannelStats as DataChannelStats, __webpack_exports__DefaultUrl as DefaultUrl, __webpack_exports__DisconnectOverlay as DisconnectOverlay, __webpack_exports__EncoderSettings as EncoderSettings, __webpack_exports__ErrorOverlay as ErrorOverlay, __webpack_exports__EventEmitter as EventEmitter, __webpack_exports__Flags as Flags, __webpack_exports__FrameTimingInfo as FrameTimingInfo, __webpack_exports__HideFreezeFrameEvent as HideFreezeFrameEvent, __webpack_exports__InboundAudioStats as InboundAudioStats, __webpack_exports__InboundVideoStats as InboundVideoStats, __webpack_exports__InfoOverlay as InfoOverlay, __webpack_exports__InitialSettings as InitialSettings, __webpack_exports__InitialSettingsEvent as InitialSettingsEvent, __webpack_exports__InputCoordTranslator as InputCoordTranslator, __webpack_exports__KeepaliveMonitor as KeepaliveMonitor, __webpack_exports__LatencyCalculatedEvent as LatencyCalculatedEvent, __webpack_exports__LatencyCalculator as LatencyCalculator, __webpack_exports__LatencyInfo as LatencyInfo, __webpack_exports__LatencyTestResultEvent as LatencyTestResultEvent, __webpack_exports__LatencyTestResults as LatencyTestResults, __webpack_exports__LoadFreezeFrameEvent as LoadFreezeFrameEvent, __webpack_exports__LogLevel as LogLevel, __webpack_exports__Logger as Logger, __webpack_exports__MessageDirection as MessageDirection, __webpack_exports__MessageHelpers as MessageHelpers, __webpack_exports__MessageRegistry as MessageRegistry, __webpack_exports__Messages as Messages, __webpack_exports__NumericParameters as NumericParameters, __webpack_exports__OptionParameters as OptionParameters, __webpack_exports__OutboundRTPStats as OutboundRTPStats, __webpack_exports__OverlayBase as OverlayBase, __webpack_exports__PixelStreaming as PixelStreaming, __webpack_exports__PixelStreamingApplicationStyle as PixelStreamingApplicationStyle, __webpack_exports__PixelStreamingEventEmitter as PixelStreamingEventEmitter, __webpack_exports__PixelStreamingSettings as PixelStreamingSettings, __webpack_exports__PlayOverlay as PlayOverlay, __webpack_exports__PlayStreamErrorEvent as PlayStreamErrorEvent, __webpack_exports__PlayStreamEvent as PlayStreamEvent, __webpack_exports__PlayStreamRejectedEvent as PlayStreamRejectedEvent, __webpack_exports__PlayerCountEvent as PlayerCountEvent, __webpack_exports__RemoteOutboundRTPStats as RemoteOutboundRTPStats, __webpack_exports__SDPUtils as SDPUtils, __webpack_exports__SettingBase as SettingBase, __webpack_exports__SettingFlag as SettingFlag, __webpack_exports__SettingNumber as SettingNumber, __webpack_exports__SettingOption as SettingOption, __webpack_exports__SettingText as SettingText, __webpack_exports__SettingUIBase as SettingUIBase, __webpack_exports__SettingUIFlag as SettingUIFlag, __webpack_exports__SettingUINumber as SettingUINumber, __webpack_exports__SettingUIOption as SettingUIOption, __webpack_exports__SettingUIText as SettingUIText, __webpack_exports__SettingsChangedEvent as SettingsChangedEvent, __webpack_exports__ShowOnScreenKeyboardEvent as ShowOnScreenKeyboardEvent, __webpack_exports__SignallingProtocol as SignallingProtocol, __webpack_exports__StatsReceivedEvent as StatsReceivedEvent, __webpack_exports__StreamLoadingEvent as StreamLoadingEvent, __webpack_exports__StreamPreConnectEvent as StreamPreConnectEvent, __webpack_exports__StreamPreDisconnectEvent as StreamPreDisconnectEvent, __webpack_exports__StreamReconnectEvent as StreamReconnectEvent, __webpack_exports__StreamerIDChangedMessageEvent as StreamerIDChangedMessageEvent, __webpack_exports__StreamerListMessageEvent as StreamerListMessageEvent, __webpack_exports__SubscribeFailedEvent as SubscribeFailedEvent, __webpack_exports__TextOverlay as TextOverlay, __webpack_exports__TextParameters as TextParameters, __webpack_exports__UIElementCreationMode as UIElementCreationMode, __webpack_exports__VideoEncoderAvgQPEvent as VideoEncoderAvgQPEvent, __webpack_exports__VideoInitializedEvent as VideoInitializedEvent, __webpack_exports__WebRTCSettings as WebRTCSettings, __webpack_exports__WebRtcAutoConnectEvent as WebRtcAutoConnectEvent, __webpack_exports__WebRtcConnectedEvent as WebRtcConnectedEvent, __webpack_exports__WebRtcConnectingEvent as WebRtcConnectingEvent, __webpack_exports__WebRtcDisconnectedEvent as WebRtcDisconnectedEvent, __webpack_exports__WebRtcFailedEvent as WebRtcFailedEvent, __webpack_exports__WebRtcPlayerController as WebRtcPlayerController, __webpack_exports__WebRtcSdpAnswerEvent as WebRtcSdpAnswerEvent, __webpack_exports__WebRtcSdpEvent as WebRtcSdpEvent, __webpack_exports__WebRtcSdpOfferEvent as WebRtcSdpOfferEvent, __webpack_exports__WebRtcTCPRelayDetectedEvent as WebRtcTCPRelayDetectedEvent, __webpack_exports__WebSocketTransport as WebSocketTransport, __webpack_exports__WebSocketTransportNJS as WebSocketTransportNJS, __webpack_exports__WebXRController as WebXRController, __webpack_exports__WebsocketState as WebsocketState, __webpack_exports__XrFrameEvent as XrFrameEvent, __webpack_exports__XrSessionEndedEvent as XrSessionEndedEvent, __webpack_exports__XrSessionStartedEvent as XrSessionStartedEvent, __webpack_exports__isFlagId as isFlagId, __webpack_exports__isNumericId as isNumericId, __webpack_exports__isOptionId as isOptionId, __webpack_exports__isTextId as isTextId, __webpack_exports__overrideLogger as overrideLogger };

package/index.umd.cjs CHANGED Viewed

@@ -22995,6 +22995,7 @@ class ArcwareApplication extends lib_pixelstreamingfrontend_ui_ue5_5_1.Applicati
         this.createAudioToggleButton();
         this.createMicToggleButton();
         this.createStopButton();
+        this.applyCustomStyling();
         this.applyArcwareStyles();
         this.videoElementParent = (_b = this === null || this === void 0 ? void 0 : this.stream) === null || _b === void 0 ? void 0 : _b.videoElementParent;
         this.parentElement = (_c = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _c === void 0 ? void 0 : _c.parentElement;
@@ -23181,6 +23182,37 @@ class ArcwareApplication extends lib_pixelstreamingfrontend_ui_ue5_5_1.Applicati
             }
         }
     }
+    applyCustomStyling(preset) {
+        var _b;
+        const resolved = preset !== null && preset !== void 0 ? preset : {
+            position: "Bottom-Right",
+            orientation: "Vertical",
+            order_reverse: false,
+        };
+        const videoElementParent = (_b = this === null || this === void 0 ? void 0 : this.stream) === null || _b === void 0 ? void 0 : _b.videoElementParent;
+        const playerUI = videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.parentElement;
+        if (!playerUI)
+            return;
+        const uiFeatures = playerUI.querySelector("#uiFeatures");
+        if (!uiFeatures)
+            return;
+        // position
+        uiFeatures.classList.add(ArcwarePixelStreamingApplicationStyles_1.CONTROLS_CLASSES.uiFeatures.buttons_position[resolved.position]);
+        // orientation
+        uiFeatures.classList.add(ArcwarePixelStreamingApplicationStyles_1.CONTROLS_CLASSES.uiFeatures.buttons_orientation[resolved.orientation]);
+        // order reverse
+        if (resolved.order_reverse) {
+            uiFeatures.classList.add(ArcwarePixelStreamingApplicationStyles_1.CONTROLS_CLASSES.uiFeatures.buttons_reverse);
+        }
+        // exception - moving 'connection indicator' icon
+        if (resolved.position === "Bottom-Left") {
+            const connection = document.getElementById("connection");
+            if (connection) {
+                connection.style.right = "10px";
+                connection.style.left = "auto";
+            }
+        }
+    }
     uiDefaultButtonVisibilty(buttonType, id) {
         var _b, _c, _d;
         if (this === null || this === void 0 ? void 0 : this.parentElement) {
@@ -23401,6 +23433,7 @@ const ArcwareSettingsSchema_1 = __webpack_require__(9913);
 const whiteLabelling_1 = __webpack_require__(5292);
 const ZWhiteLabel_1 = __webpack_require__(1938);
 const EventHandler_1 = __webpack_require__(3916);
+lib_pixelstreamingfrontend_ue5_5_1.Logger.InitLogging(2, false);
 /** Default arcware signalling endpoint. */
 exports.DefaultUrl = `wss://signalling-client.ragnarok.arcware.cloud`;
 function deepEqual(a, b) {
@@ -23459,7 +23492,7 @@ class ArcwareConfig extends lib_pixelstreamingfrontend_ue5_5_1.Config {
         if (!config.initialSettings.ss)
             config.initialSettings.ss = exports.DefaultUrl;
         super(config);
-        this.VERSION = "1.3.32";
+        this.VERSION = "1.3.39";
         this.whiteLabellingChanged = new EventHandler_1.EventHandler();
         this.signallingWlURL = "https://signalling-client.arcware.cloud/whiteLabel/";
         if (config.envName) {
@@ -25680,7 +25713,22 @@ tslib_1.__exportStar(__webpack_require__(6125), exports);
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ArcwareStyles = void 0;
+exports.ArcwareStyles = exports.CONTROLS_CLASSES = void 0;
+exports.CONTROLS_CLASSES = {
+    uiFeatures: {
+        buttons_position: {
+            "Top-Left": "controls__position_tl",
+            "Top-Right": "controls__position_tr",
+            "Bottom-Left": "controls__position_bl",
+            "Bottom-Right": "controls__position_br",
+        },
+        buttons_orientation: {
+            "Horizontal": "controls__orientation_h",
+            "Vertical": "controls__orientation_v",
+        },
+        buttons_reverse: "controls__order_reverse",
+    }
+};
 exports.ArcwareStyles = {
     customStyles: {
         ":root": {
@@ -25765,18 +25813,63 @@ exports.ArcwareStyles = {
             background: "#18181A"
         },
         "#uiFeatures #controls": {
-            top: "auto",
-            left: "auto",
-            bottom: "10px",
-            right: "20px",
             display: "flex",
             flexDirection: "column-reverse"
         },
+        /* START Custom position */
+        // #controls
+        controls: {
+            gap: "0.5rem",
+            "& > *": {
+                marginBottom: "0 !important",
+            },
+        },
+        // position
+        uiFeatures: {
+            "&.controls__position_tl #controls": {
+                top: "10px",
+                left: "20px",
+                bottom: "auto",
+                right: "auto",
+            },
+            "&.controls__position_tr #controls": {
+                top: "10px",
+                right: "20px",
+                bottom: "auto",
+                left: "auto",
+            },
+            "&.controls__position_bl #controls": {
+                bottom: "10px",
+                left: "20px",
+                top: "auto",
+                right: "auto",
+            },
+            "&.controls__position_br #controls": {
+                bottom: "10px",
+                right: "20px",
+                top: "auto",
+                left: "auto",
+            },
+            // orientation + order
+            "&.controls__orientation_h #controls": {
+                flexDirection: "row",
+            },
+            "&.controls__orientation_h.controls__order_reverse #controls": {
+                flexDirection: "row-reverse",
+            },
+            "&.controls__orientation_v #controls": {
+                flexDirection: "column",
+            },
+            "&.controls__orientation_v.controls__order_reverse #controls": {
+                flexDirection: "column-reverse",
+            },
+        },
+        /* END Custom position */
         "#uiFeatures #connection": {
             bottom: "5px",
             left: "10px",
             width: "2.5rem",
-            heihgt: "2.5rem"
+            height: "2.5rem"
         },
         "#uiFeatures button": {
             backgroundColor: "var(--color12)",

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@arcware-cloud/pixelstreaming-websdk",
   "description": "WebSDK for easy implementation of pixel streaming with Arcware Cloud Services. Heavily based on the '@epicgames-ps' library.",
-  "version": "1.3.32",
+  "version": "1.3.39",
   "type": "commonjs",
   "main": "./index.cjs",
   "types": "./types/index.d.ts",

package/types/lib/ArcwareApplication.d.ts CHANGED Viewed

@@ -29,6 +29,7 @@ export declare class ArcwareApplication extends Application {
     private createAudioToggleButton;
     private createMicToggleButton;
     private createStopButton;
+    private applyCustomStyling;
     private uiDefaultButtonVisibilty;
     private preventDefaultKeyboardEvents;
     private autoPlayHandler;

package/types/lib/ArcwareConfig.d.ts CHANGED Viewed

@@ -29,7 +29,7 @@ export declare class ArcwareConfig extends Config {
     readonly session: Session;
     readonly settings: Settings;
     private _initialSettings;
-    readonly VERSION = "1.3.32";
+    readonly VERSION = "1.3.39";
     readonly whiteLabellingChanged: EventHandler<{
         next: WhiteLabel;
         changed: boolean;

package/types/lib/styles/ArcwarePixelStreamingApplicationStyles.d.ts CHANGED Viewed

@@ -1,3 +1,10 @@
+export declare const CONTROLS_CLASSES: {
+    uiFeatures: {
+        buttons_position: Record<'Top-Left' | 'Top-Right' | 'Bottom-Left' | 'Bottom-Right', string>;
+        buttons_orientation: Record<'Horizontal' | 'Vertical', string>;
+        buttons_reverse: string;
+    };
+};
 export declare const ArcwareStyles: {
     customStyles: {
         ":root": {
@@ -85,18 +92,58 @@ export declare const ArcwareStyles: {
             background: string;
         };
         "#uiFeatures #controls": {
-            top: string;
-            left: string;
-            bottom: string;
-            right: string;
             display: string;
             flexDirection: string;
         };
+        controls: {
+            gap: string;
+            "& > *": {
+                marginBottom: string;
+            };
+        };
+        uiFeatures: {
+            "&.controls__position_tl #controls": {
+                top: string;
+                left: string;
+                bottom: string;
+                right: string;
+            };
+            "&.controls__position_tr #controls": {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            "&.controls__position_bl #controls": {
+                bottom: string;
+                left: string;
+                top: string;
+                right: string;
+            };
+            "&.controls__position_br #controls": {
+                bottom: string;
+                right: string;
+                top: string;
+                left: string;
+            };
+            "&.controls__orientation_h #controls": {
+                flexDirection: string;
+            };
+            "&.controls__orientation_h.controls__order_reverse #controls": {
+                flexDirection: string;
+            };
+            "&.controls__orientation_v #controls": {
+                flexDirection: string;
+            };
+            "&.controls__orientation_v.controls__order_reverse #controls": {
+                flexDirection: string;
+            };
+        };
         "#uiFeatures #connection": {
             bottom: string;
             left: string;
             width: string;
-            heihgt: string;
+            height: string;
         };
         "#uiFeatures button": {
             backgroundColor: string;