@arcware-cloud/pixelstreaming-websdk 1.3.33 → 1.3.39

package/index.cjs

@@ -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) {
@@ -23450,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.33";
+        this.VERSION = "1.3.39";
         this.whiteLabellingChanged = new EventHandler_1.EventHandler();
         this.signallingWlURL = "https://signalling-client.arcware.cloud/whiteLabel/";
         if (config.envName) {
@@ -25671,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": {
@@ -25756,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

@@ -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) {
@@ -23462,7 +23494,7 @@ class ArcwareConfig extends _epicgames_ps_lib_pixelstreamingfrontend_ue5_5__WEBP
         if (!config.initialSettings.ss)
             config.initialSettings.ss = DefaultUrl;
         super(config);
-        this.VERSION = "1.3.33";
+        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) {
@@ -25717,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 */ });
@@ -25739,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": {
@@ -25825,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)",
@@ -32529,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),
@@ -32655,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;
@@ -32759,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

@@ -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) {
@@ -23460,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.33";
+        this.VERSION = "1.3.39";
         this.whiteLabellingChanged = new EventHandler_1.EventHandler();
         this.signallingWlURL = "https://signalling-client.arcware.cloud/whiteLabel/";
         if (config.envName) {
@@ -25681,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": {
@@ -25766,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

@@ -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.33",
+  "version": "1.3.39",
   "type": "commonjs",
   "main": "./index.cjs",
   "types": "./types/index.d.ts",

package/types/lib/ArcwareApplication.d.ts

@@ -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

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

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

@@ -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;