@arcware-cloud/pixelstreaming-websdk 1.3.9 → 1.3.11

package/README.md

@@ -80,6 +80,11 @@ For more detailed examples and advanced usage, please refer to our documentation
 
 # Changelog
 
+### 1.3.11
+
+- 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

package/index.cjs.js

@@ -23420,7 +23420,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.9";
+        this.VERSION = "1.3.11";
         this.settings = settings;
         this.session = new Session_1.Session();
         this._initialSettings = config.initialSettings;
@@ -23536,7 +23536,7 @@ function ArcwareInit({ shareId, projectId }, configuration, forceRefresh = false
         useUrlParams: (configuration === null || configuration === void 0 ? void 0 : configuration.useUrlParams) === true,
         initialSettings: Object.assign({ ss: ArcwareConfig_1.DefaultUrl, AutoConnect: false, StartVideoMuted: true, AutoPlayVideo: true, KeyboardInput: true, MouseInput: true, GamepadInput: true, TouchInput: true, XRControllerInput: true, UseMic: true, SuppressBrowserKeys: true, FakeMouseWithTouches: false, ForceMonoAudio: false, HoveringMouse: true }, configuration === null || configuration === void 0 ? void 0 : configuration.initialSettings),
         settings: Object.assign({ shareId,
-            projectId, fullscreenButton: true, audioButton: true, stopButton: false, infoButton: false, micButton: false, settingsButton: false, connectionStrengthIcon: false, connectionIdentifierLoggingDisabled: undefined, errorHandler: undefined, loveLetterHandler: undefined, loveLetterLogging: undefined, queueHandler: undefined, sessionIdHandler: undefined, startHeight: undefined, startWidth: undefined }, configuration === null || configuration === void 0 ? void 0 : configuration.settings)
+            projectId, fullscreenButton: true, audioButton: true, stopButton: false, infoButton: false, micButton: false, settingsButton: false, connectionStrengthIcon: false, connectionIdentifierLoggingDisabled: undefined, errorHandler: undefined, loveLetterHandler: undefined, loveLetterLogging: undefined, queueHandler: undefined, sessionIdHandler: undefined, startHeight: undefined, startWidth: undefined, orientationZoom: undefined }, configuration === null || configuration === void 0 ? void 0 : configuration.settings)
     });
     const PixelStreaming = new ArcwarePixelStreaming_1.ArcwarePixelStreaming(Config);
     const Application = new ArcwareApplication_1.ArcwareApplication({ stream: PixelStreaming });
@@ -23573,6 +23573,7 @@ const ArcwareLogoLoader_1 = __webpack_require__(6469);
 const MicrophoneOverlay_1 = __webpack_require__(3613);
 const ConnectionIdentifier_1 = __webpack_require__(5999);
 const DiagnosticsCollector_1 = __webpack_require__(8429);
+const common_1 = __webpack_require__(2483);
 class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStreaming {
     resetInitGuardsAndHooks() {
         this.videoInitializedSent = false;
@@ -24102,15 +24103,16 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
         }
     }
     handleResolutionChange() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!(this === null || this === void 0 ? void 0 : this.streamInfo) || !(this === null || this === void 0 ? void 0 : this.webRtcController) || !((_b = (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.videoPlayer) === null || _b === void 0 ? void 0 : _b.getVideoElement())) {
             return;
         }
         const resolution = (_d = (_c = this === null || this === void 0 ? void 0 : this.streamInfo) === null || _c === void 0 ? void 0 : _c.streamInfo) === null || _d === void 0 ? void 0 : _d.resolution;
         const unrealVersion = (_g = (_f = (_e = this === null || this === void 0 ? void 0 : this.streamInfo) === null || _e === void 0 ? void 0 : _e.streamInfo) === null || _f === void 0 ? void 0 : _f.meta) === null || _g === void 0 ? void 0 : _g.version;
+        const orientationZoom = (_h = this.config.settings) === null || _h === void 0 ? void 0 : _h.orientationZoom;
         if (resolution && (resolution === null || resolution === void 0 ? void 0 : resolution.dynamic)) {
             setTimeout(() => {
-                var _a;
+                var _a, _b, _c;
                 const { videoPlayer } = this === null || this === void 0 ? void 0 : this.webRtcController;
                 const videoElementParent = videoPlayer === null || videoPlayer === void 0 ? void 0 : videoPlayer.getVideoParentElement();
                 const browserWidth = videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.getBoundingClientRect().width;
@@ -24127,10 +24129,32 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
                     limitedHeight = maxHeight;
                     limitedWidth = maxHeight * aspectRatio;
                 }
+                // width: clientWidth * Math.max(window.devicePixelRatio, 1)  - for retina device, 1 is min upscale factor
+                const newRes = (0, common_1.capScale)({
+                    width: browserWidth * Math.max(window.devicePixelRatio, 1.25),
+                    height: browserHeight * Math.max(window.devicePixelRatio, 1.25),
+                }, {
+                    width: maxWidth,
+                    height: maxHeight,
+                });
+                // Zoom level for orientation change if provided
+                if (orientationZoom) {
+                    if (newRes.width < newRes.height) {
+                        if (orientationZoom.hasOwnProperty('portrait'))
+                            (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.emitUIInteraction({
+                                zoom: orientationZoom.portrait
+                            });
+                    }
+                    else if (orientationZoom.hasOwnProperty('landscape')) {
+                        (_b = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _b === void 0 ? void 0 : _b.emitUIInteraction({
+                            zoom: orientationZoom.landscape
+                        });
+                    }
+                }
                 if (videoPlayer) {
                     if (!unrealVersion || (unrealVersion === null || unrealVersion === void 0 ? void 0 : unrealVersion.startsWith("4.27"))) {
                         const descriptor = { Console: `r.setres ${Math.round(limitedWidth)}x${Math.round(limitedHeight)}w` };
-                        (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.emitUIInteraction(descriptor);
+                        (_c = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _c === void 0 ? void 0 : _c.emitUIInteraction(descriptor);
                     }
                     else {
                         videoPlayer.onMatchViewportResolutionCallback(Math.round(limitedWidth), Math.round(limitedHeight));
@@ -24316,11 +24340,14 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
         }
     }
     injectCustomUI() {
-        var _a;
-        const customUI = document === null || document === void 0 ? void 0 : document.getElementById("stream-ui");
-        const videoElementParent = (_a = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (customUI && videoElementParent)
-            videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.appendChild(customUI);
+        (0, common_1.waitForElement)('#stream-ui')
+            .then(el => {
+            var _a;
+            const videoElementParent = (_a = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _a === void 0 ? void 0 : _a.parentElement;
+            if (videoElementParent) {
+                videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.appendChild(el);
+            }
+        });
     }
 }
 exports.ArcwarePixelStreaming = ArcwarePixelStreaming;
@@ -24384,7 +24411,12 @@ exports.ArcwareSettingsSchema = zod_1.z.object({
     /** Width with which instance should be started */
     startWidth: zod_1.z.number().optional(),
     /** Height with which instance should be started */
-    startHeight: zod_1.z.number().optional()
+    startHeight: zod_1.z.number().optional(),
+    /** Zoom functionality */
+    orientationZoom: zod_1.z.object({
+        landscape: zod_1.z.number(),
+        portrait: zod_1.z.number(),
+    }).strict().optional()
 });
 
 
@@ -25182,7 +25214,7 @@ exports.DiagnosticsCollector = DiagnosticsCollector;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.normalizeType = exports.randomHash = exports.extFromMime = exports.sanitizeFilename = exports.truncateByBytes = exports.parseUnknownToObject = void 0;
+exports.capScale = exports.waitForElement = exports.normalizeType = exports.randomHash = exports.extFromMime = exports.sanitizeFilename = exports.truncateByBytes = exports.parseUnknownToObject = void 0;
 /** Conservative normalizer: accepts object, strict JSON string, or JSON-ish like {foo: "bar"} */
 function parseUnknownToObject(input, opts = { allowJsonish: true }) {
     if (input && typeof input === "object")
@@ -25281,6 +25313,47 @@ function normalizeType(v) {
     return typeof v === "string" ? v.trim().toLowerCase() : "";
 }
 exports.normalizeType = normalizeType;
+function waitForElement(selector, { root = document, timeout = 3000 } = {}) {
+    return new Promise((resolve) => {
+        const existing = root.querySelector(selector);
+        if (existing)
+            return resolve(existing);
+        const observer = new MutationObserver(() => {
+            const el = root.querySelector(selector);
+            if (el) {
+                clearTimeout(timer);
+                observer.disconnect();
+                resolve(el); // fires once
+            }
+        });
+        observer.observe(root.documentElement || root, { childList: true, subtree: true });
+        const timer = setTimeout(() => {
+            observer.disconnect();
+        }, timeout);
+    });
+}
+exports.waitForElement = waitForElement;
+function capScale(size, max) {
+    const result = { width: 0, height: 0 };
+    /* result.width = size.width > max.width ? max.width : size.width;
+    result.height = size.height > max.height ? max.height : size.height; */
+    result.width = Math.floor(size.width);
+    result.height = Math.floor(size.height);
+    if (result.height > max.height) {
+        const heightScale = max.height / result.height;
+        result.height = max.height;
+        result.width *= heightScale;
+    }
+    if (result.width > max.width) {
+        const heightScale = max.width / result.width;
+        result.width = max.width;
+        result.height *= heightScale;
+    }
+    result.width = (result.width % 2) + result.width;
+    result.height = (result.height % 2) + result.height;
+    return result;
+}
+exports.capScale = capScale;
 
 
 /***/ }),

package/index.esm.js

@@ -23428,7 +23428,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.9";
+        this.VERSION = "1.3.11";
         this.settings = settings;
         this.session = new _domain_Session__WEBPACK_IMPORTED_MODULE_0__.Session();
         this._initialSettings = config.initialSettings;
@@ -23547,7 +23547,7 @@ function ArcwareInit({ shareId, projectId }, configuration, forceRefresh = false
         useUrlParams: (configuration === null || configuration === void 0 ? void 0 : configuration.useUrlParams) === true,
         initialSettings: Object.assign({ ss: _ArcwareConfig__WEBPACK_IMPORTED_MODULE_0__.DefaultUrl, AutoConnect: false, StartVideoMuted: true, AutoPlayVideo: true, KeyboardInput: true, MouseInput: true, GamepadInput: true, TouchInput: true, XRControllerInput: true, UseMic: true, SuppressBrowserKeys: true, FakeMouseWithTouches: false, ForceMonoAudio: false, HoveringMouse: true }, configuration === null || configuration === void 0 ? void 0 : configuration.initialSettings),
         settings: Object.assign({ shareId,
-            projectId, fullscreenButton: true, audioButton: true, stopButton: false, infoButton: false, micButton: false, settingsButton: false, connectionStrengthIcon: false, connectionIdentifierLoggingDisabled: undefined, errorHandler: undefined, loveLetterHandler: undefined, loveLetterLogging: undefined, queueHandler: undefined, sessionIdHandler: undefined, startHeight: undefined, startWidth: undefined }, configuration === null || configuration === void 0 ? void 0 : configuration.settings)
+            projectId, fullscreenButton: true, audioButton: true, stopButton: false, infoButton: false, micButton: false, settingsButton: false, connectionStrengthIcon: false, connectionIdentifierLoggingDisabled: undefined, errorHandler: undefined, loveLetterHandler: undefined, loveLetterLogging: undefined, queueHandler: undefined, sessionIdHandler: undefined, startHeight: undefined, startWidth: undefined, orientationZoom: undefined }, configuration === null || configuration === void 0 ? void 0 : configuration.settings)
     });
     const PixelStreaming = new _ArcwarePixelStreaming__WEBPACK_IMPORTED_MODULE_1__.ArcwarePixelStreaming(Config);
     const Application = new _ArcwareApplication__WEBPACK_IMPORTED_MODULE_2__.ArcwareApplication({ stream: PixelStreaming });
@@ -23581,11 +23581,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _domain_EventHandler__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3379);
 /* harmony import */ var _domain_Stats__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9764);
 /* harmony import */ var _domain_debounce__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9580);
-/* harmony import */ var _ui_LoveLetters__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(4572);
-/* harmony import */ var _ui_ArcwareLogoLoader__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(6469);
+/* harmony import */ var _ui_LoveLetters__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(4572);
+/* harmony import */ var _ui_ArcwareLogoLoader__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(6469);
 /* harmony import */ var _ui_MicrophoneOverlay__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3613);
 /* harmony import */ var _domain_ConnectionIdentifier__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5999);
 /* harmony import */ var _features_DiagnosticsCollector__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8429);
+/* harmony import */ var _features_common__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(2483);
+
 
 
 
@@ -24127,15 +24129,16 @@ class ArcwarePixelStreaming extends _epicgames_ps_lib_pixelstreamingfrontend_ue5
         }
     }
     handleResolutionChange() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!(this === null || this === void 0 ? void 0 : this.streamInfo) || !(this === null || this === void 0 ? void 0 : this.webRtcController) || !((_b = (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.videoPlayer) === null || _b === void 0 ? void 0 : _b.getVideoElement())) {
             return;
         }
         const resolution = (_d = (_c = this === null || this === void 0 ? void 0 : this.streamInfo) === null || _c === void 0 ? void 0 : _c.streamInfo) === null || _d === void 0 ? void 0 : _d.resolution;
         const unrealVersion = (_g = (_f = (_e = this === null || this === void 0 ? void 0 : this.streamInfo) === null || _e === void 0 ? void 0 : _e.streamInfo) === null || _f === void 0 ? void 0 : _f.meta) === null || _g === void 0 ? void 0 : _g.version;
+        const orientationZoom = (_h = this.config.settings) === null || _h === void 0 ? void 0 : _h.orientationZoom;
         if (resolution && (resolution === null || resolution === void 0 ? void 0 : resolution.dynamic)) {
             setTimeout(() => {
-                var _a;
+                var _a, _b, _c;
                 const { videoPlayer } = this === null || this === void 0 ? void 0 : this.webRtcController;
                 const videoElementParent = videoPlayer === null || videoPlayer === void 0 ? void 0 : videoPlayer.getVideoParentElement();
                 const browserWidth = videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.getBoundingClientRect().width;
@@ -24152,10 +24155,32 @@ class ArcwarePixelStreaming extends _epicgames_ps_lib_pixelstreamingfrontend_ue5
                     limitedHeight = maxHeight;
                     limitedWidth = maxHeight * aspectRatio;
                 }
+                // width: clientWidth * Math.max(window.devicePixelRatio, 1)  - for retina device, 1 is min upscale factor
+                const newRes = (0,_features_common__WEBPACK_IMPORTED_MODULE_12__.capScale)({
+                    width: browserWidth * Math.max(window.devicePixelRatio, 1.25),
+                    height: browserHeight * Math.max(window.devicePixelRatio, 1.25),
+                }, {
+                    width: maxWidth,
+                    height: maxHeight,
+                });
+                // Zoom level for orientation change if provided
+                if (orientationZoom) {
+                    if (newRes.width < newRes.height) {
+                        if (orientationZoom.hasOwnProperty('portrait'))
+                            (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.emitUIInteraction({
+                                zoom: orientationZoom.portrait
+                            });
+                    }
+                    else if (orientationZoom.hasOwnProperty('landscape')) {
+                        (_b = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _b === void 0 ? void 0 : _b.emitUIInteraction({
+                            zoom: orientationZoom.landscape
+                        });
+                    }
+                }
                 if (videoPlayer) {
                     if (!unrealVersion || (unrealVersion === null || unrealVersion === void 0 ? void 0 : unrealVersion.startsWith("4.27"))) {
                         const descriptor = { Console: `r.setres ${Math.round(limitedWidth)}x${Math.round(limitedHeight)}w` };
-                        (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.emitUIInteraction(descriptor);
+                        (_c = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _c === void 0 ? void 0 : _c.emitUIInteraction(descriptor);
                     }
                     else {
                         videoPlayer.onMatchViewportResolutionCallback(Math.round(limitedWidth), Math.round(limitedHeight));
@@ -24215,7 +24240,7 @@ class ArcwarePixelStreaming extends _epicgames_ps_lib_pixelstreamingfrontend_ue5
     }
     initLoveLettersContainer() {
         var _a;
-        const logoLoader = new _ui_ArcwareLogoLoader__WEBPACK_IMPORTED_MODULE_12__.ArcwareLogoLoader();
+        const logoLoader = new _ui_ArcwareLogoLoader__WEBPACK_IMPORTED_MODULE_13__.ArcwareLogoLoader();
         if (!this.loveLettersContainer) {
             const loveLettersContainer = document === null || document === void 0 ? void 0 : document.createElement("div");
             const { videoPlayer } = this === null || this === void 0 ? void 0 : this.webRtcController;
@@ -24252,7 +24277,7 @@ class ArcwarePixelStreaming extends _epicgames_ps_lib_pixelstreamingfrontend_ue5
         if (letter !== undefined) {
             const formattedLoveLetter = letter === null || letter === void 0 ? void 0 : letter.replace(/LL: |\.$/g, "");
             (_a = this === null || this === void 0 ? void 0 : this.loveLettersList) === null || _a === void 0 ? void 0 : _a.push(formattedLoveLetter);
-            const loveLettersBox = new _ui_LoveLetters__WEBPACK_IMPORTED_MODULE_13__.LoveLetters();
+            const loveLettersBox = new _ui_LoveLetters__WEBPACK_IMPORTED_MODULE_14__.LoveLetters();
             loveLettersBox === null || loveLettersBox === void 0 ? void 0 : loveLettersBox.addLetter(formattedLoveLetter, (_b = this === null || this === void 0 ? void 0 : this.loveLettersList) === null || _b === void 0 ? void 0 : _b.length);
             setTimeout(() => {
                 this.processLoveLetterQueue();
@@ -24341,11 +24366,14 @@ class ArcwarePixelStreaming extends _epicgames_ps_lib_pixelstreamingfrontend_ue5
         }
     }
     injectCustomUI() {
-        var _a;
-        const customUI = document === null || document === void 0 ? void 0 : document.getElementById("stream-ui");
-        const videoElementParent = (_a = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (customUI && videoElementParent)
-            videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.appendChild(customUI);
+        (0,_features_common__WEBPACK_IMPORTED_MODULE_12__.waitForElement)('#stream-ui')
+            .then(el => {
+            var _a;
+            const videoElementParent = (_a = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _a === void 0 ? void 0 : _a.parentElement;
+            if (videoElementParent) {
+                videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.appendChild(el);
+            }
+        });
     }
 }
 
@@ -24411,7 +24439,12 @@ const ArcwareSettingsSchema = zod__WEBPACK_IMPORTED_MODULE_1__.z.object({
     /** Width with which instance should be started */
     startWidth: zod__WEBPACK_IMPORTED_MODULE_1__.z.number().optional(),
     /** Height with which instance should be started */
-    startHeight: zod__WEBPACK_IMPORTED_MODULE_1__.z.number().optional()
+    startHeight: zod__WEBPACK_IMPORTED_MODULE_1__.z.number().optional(),
+    /** Zoom functionality */
+    orientationZoom: zod__WEBPACK_IMPORTED_MODULE_1__.z.object({
+        landscape: zod__WEBPACK_IMPORTED_MODULE_1__.z.number(),
+        portrait: zod__WEBPACK_IMPORTED_MODULE_1__.z.number(),
+    }).strict().optional()
 });
 
 
@@ -25219,12 +25252,14 @@ class DiagnosticsCollector {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "capScale": () => (/* binding */ capScale),
 /* harmony export */   "extFromMime": () => (/* binding */ extFromMime),
 /* harmony export */   "normalizeType": () => (/* binding */ normalizeType),
 /* harmony export */   "parseUnknownToObject": () => (/* binding */ parseUnknownToObject),
 /* harmony export */   "randomHash": () => (/* binding */ randomHash),
 /* harmony export */   "sanitizeFilename": () => (/* binding */ sanitizeFilename),
-/* harmony export */   "truncateByBytes": () => (/* binding */ truncateByBytes)
+/* harmony export */   "truncateByBytes": () => (/* binding */ truncateByBytes),
+/* harmony export */   "waitForElement": () => (/* binding */ waitForElement)
 /* harmony export */ });
 /** Conservative normalizer: accepts object, strict JSON string, or JSON-ish like {foo: "bar"} */
 function parseUnknownToObject(input, opts = { allowJsonish: true }) {
@@ -25318,6 +25353,45 @@ function randomHash() {
 function normalizeType(v) {
     return typeof v === "string" ? v.trim().toLowerCase() : "";
 }
+function waitForElement(selector, { root = document, timeout = 3000 } = {}) {
+    return new Promise((resolve) => {
+        const existing = root.querySelector(selector);
+        if (existing)
+            return resolve(existing);
+        const observer = new MutationObserver(() => {
+            const el = root.querySelector(selector);
+            if (el) {
+                clearTimeout(timer);
+                observer.disconnect();
+                resolve(el); // fires once
+            }
+        });
+        observer.observe(root.documentElement || root, { childList: true, subtree: true });
+        const timer = setTimeout(() => {
+            observer.disconnect();
+        }, timeout);
+    });
+}
+function capScale(size, max) {
+    const result = { width: 0, height: 0 };
+    /* result.width = size.width > max.width ? max.width : size.width;
+    result.height = size.height > max.height ? max.height : size.height; */
+    result.width = Math.floor(size.width);
+    result.height = Math.floor(size.height);
+    if (result.height > max.height) {
+        const heightScale = max.height / result.height;
+        result.height = max.height;
+        result.width *= heightScale;
+    }
+    if (result.width > max.width) {
+        const heightScale = max.width / result.width;
+        result.width = max.width;
+        result.height *= heightScale;
+    }
+    result.width = (result.width % 2) + result.width;
+    result.height = (result.height % 2) + result.height;
+    return result;
+}
 
 
 /***/ }),

package/index.umd.js

@@ -23430,7 +23430,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.9";
+        this.VERSION = "1.3.11";
         this.settings = settings;
         this.session = new Session_1.Session();
         this._initialSettings = config.initialSettings;
@@ -23546,7 +23546,7 @@ function ArcwareInit({ shareId, projectId }, configuration, forceRefresh = false
         useUrlParams: (configuration === null || configuration === void 0 ? void 0 : configuration.useUrlParams) === true,
         initialSettings: Object.assign({ ss: ArcwareConfig_1.DefaultUrl, AutoConnect: false, StartVideoMuted: true, AutoPlayVideo: true, KeyboardInput: true, MouseInput: true, GamepadInput: true, TouchInput: true, XRControllerInput: true, UseMic: true, SuppressBrowserKeys: true, FakeMouseWithTouches: false, ForceMonoAudio: false, HoveringMouse: true }, configuration === null || configuration === void 0 ? void 0 : configuration.initialSettings),
         settings: Object.assign({ shareId,
-            projectId, fullscreenButton: true, audioButton: true, stopButton: false, infoButton: false, micButton: false, settingsButton: false, connectionStrengthIcon: false, connectionIdentifierLoggingDisabled: undefined, errorHandler: undefined, loveLetterHandler: undefined, loveLetterLogging: undefined, queueHandler: undefined, sessionIdHandler: undefined, startHeight: undefined, startWidth: undefined }, configuration === null || configuration === void 0 ? void 0 : configuration.settings)
+            projectId, fullscreenButton: true, audioButton: true, stopButton: false, infoButton: false, micButton: false, settingsButton: false, connectionStrengthIcon: false, connectionIdentifierLoggingDisabled: undefined, errorHandler: undefined, loveLetterHandler: undefined, loveLetterLogging: undefined, queueHandler: undefined, sessionIdHandler: undefined, startHeight: undefined, startWidth: undefined, orientationZoom: undefined }, configuration === null || configuration === void 0 ? void 0 : configuration.settings)
     });
     const PixelStreaming = new ArcwarePixelStreaming_1.ArcwarePixelStreaming(Config);
     const Application = new ArcwareApplication_1.ArcwareApplication({ stream: PixelStreaming });
@@ -23583,6 +23583,7 @@ const ArcwareLogoLoader_1 = __webpack_require__(6469);
 const MicrophoneOverlay_1 = __webpack_require__(3613);
 const ConnectionIdentifier_1 = __webpack_require__(5999);
 const DiagnosticsCollector_1 = __webpack_require__(8429);
+const common_1 = __webpack_require__(2483);
 class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStreaming {
     resetInitGuardsAndHooks() {
         this.videoInitializedSent = false;
@@ -24112,15 +24113,16 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
         }
     }
     handleResolutionChange() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!(this === null || this === void 0 ? void 0 : this.streamInfo) || !(this === null || this === void 0 ? void 0 : this.webRtcController) || !((_b = (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.videoPlayer) === null || _b === void 0 ? void 0 : _b.getVideoElement())) {
             return;
         }
         const resolution = (_d = (_c = this === null || this === void 0 ? void 0 : this.streamInfo) === null || _c === void 0 ? void 0 : _c.streamInfo) === null || _d === void 0 ? void 0 : _d.resolution;
         const unrealVersion = (_g = (_f = (_e = this === null || this === void 0 ? void 0 : this.streamInfo) === null || _e === void 0 ? void 0 : _e.streamInfo) === null || _f === void 0 ? void 0 : _f.meta) === null || _g === void 0 ? void 0 : _g.version;
+        const orientationZoom = (_h = this.config.settings) === null || _h === void 0 ? void 0 : _h.orientationZoom;
         if (resolution && (resolution === null || resolution === void 0 ? void 0 : resolution.dynamic)) {
             setTimeout(() => {
-                var _a;
+                var _a, _b, _c;
                 const { videoPlayer } = this === null || this === void 0 ? void 0 : this.webRtcController;
                 const videoElementParent = videoPlayer === null || videoPlayer === void 0 ? void 0 : videoPlayer.getVideoParentElement();
                 const browserWidth = videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.getBoundingClientRect().width;
@@ -24137,10 +24139,32 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
                     limitedHeight = maxHeight;
                     limitedWidth = maxHeight * aspectRatio;
                 }
+                // width: clientWidth * Math.max(window.devicePixelRatio, 1)  - for retina device, 1 is min upscale factor
+                const newRes = (0, common_1.capScale)({
+                    width: browserWidth * Math.max(window.devicePixelRatio, 1.25),
+                    height: browserHeight * Math.max(window.devicePixelRatio, 1.25),
+                }, {
+                    width: maxWidth,
+                    height: maxHeight,
+                });
+                // Zoom level for orientation change if provided
+                if (orientationZoom) {
+                    if (newRes.width < newRes.height) {
+                        if (orientationZoom.hasOwnProperty('portrait'))
+                            (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.emitUIInteraction({
+                                zoom: orientationZoom.portrait
+                            });
+                    }
+                    else if (orientationZoom.hasOwnProperty('landscape')) {
+                        (_b = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _b === void 0 ? void 0 : _b.emitUIInteraction({
+                            zoom: orientationZoom.landscape
+                        });
+                    }
+                }
                 if (videoPlayer) {
                     if (!unrealVersion || (unrealVersion === null || unrealVersion === void 0 ? void 0 : unrealVersion.startsWith("4.27"))) {
                         const descriptor = { Console: `r.setres ${Math.round(limitedWidth)}x${Math.round(limitedHeight)}w` };
-                        (_a = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _a === void 0 ? void 0 : _a.emitUIInteraction(descriptor);
+                        (_c = this === null || this === void 0 ? void 0 : this.webRtcController) === null || _c === void 0 ? void 0 : _c.emitUIInteraction(descriptor);
                     }
                     else {
                         videoPlayer.onMatchViewportResolutionCallback(Math.round(limitedWidth), Math.round(limitedHeight));
@@ -24326,11 +24350,14 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
         }
     }
     injectCustomUI() {
-        var _a;
-        const customUI = document === null || document === void 0 ? void 0 : document.getElementById("stream-ui");
-        const videoElementParent = (_a = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (customUI && videoElementParent)
-            videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.appendChild(customUI);
+        (0, common_1.waitForElement)('#stream-ui')
+            .then(el => {
+            var _a;
+            const videoElementParent = (_a = this === null || this === void 0 ? void 0 : this.videoElementParent) === null || _a === void 0 ? void 0 : _a.parentElement;
+            if (videoElementParent) {
+                videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.appendChild(el);
+            }
+        });
     }
 }
 exports.ArcwarePixelStreaming = ArcwarePixelStreaming;
@@ -24394,7 +24421,12 @@ exports.ArcwareSettingsSchema = zod_1.z.object({
     /** Width with which instance should be started */
     startWidth: zod_1.z.number().optional(),
     /** Height with which instance should be started */
-    startHeight: zod_1.z.number().optional()
+    startHeight: zod_1.z.number().optional(),
+    /** Zoom functionality */
+    orientationZoom: zod_1.z.object({
+        landscape: zod_1.z.number(),
+        portrait: zod_1.z.number(),
+    }).strict().optional()
 });
 
 
@@ -25192,7 +25224,7 @@ exports.DiagnosticsCollector = DiagnosticsCollector;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.normalizeType = exports.randomHash = exports.extFromMime = exports.sanitizeFilename = exports.truncateByBytes = exports.parseUnknownToObject = void 0;
+exports.capScale = exports.waitForElement = exports.normalizeType = exports.randomHash = exports.extFromMime = exports.sanitizeFilename = exports.truncateByBytes = exports.parseUnknownToObject = void 0;
 /** Conservative normalizer: accepts object, strict JSON string, or JSON-ish like {foo: "bar"} */
 function parseUnknownToObject(input, opts = { allowJsonish: true }) {
     if (input && typeof input === "object")
@@ -25291,6 +25323,47 @@ function normalizeType(v) {
     return typeof v === "string" ? v.trim().toLowerCase() : "";
 }
 exports.normalizeType = normalizeType;
+function waitForElement(selector, { root = document, timeout = 3000 } = {}) {
+    return new Promise((resolve) => {
+        const existing = root.querySelector(selector);
+        if (existing)
+            return resolve(existing);
+        const observer = new MutationObserver(() => {
+            const el = root.querySelector(selector);
+            if (el) {
+                clearTimeout(timer);
+                observer.disconnect();
+                resolve(el); // fires once
+            }
+        });
+        observer.observe(root.documentElement || root, { childList: true, subtree: true });
+        const timer = setTimeout(() => {
+            observer.disconnect();
+        }, timeout);
+    });
+}
+exports.waitForElement = waitForElement;
+function capScale(size, max) {
+    const result = { width: 0, height: 0 };
+    /* result.width = size.width > max.width ? max.width : size.width;
+    result.height = size.height > max.height ? max.height : size.height; */
+    result.width = Math.floor(size.width);
+    result.height = Math.floor(size.height);
+    if (result.height > max.height) {
+        const heightScale = max.height / result.height;
+        result.height = max.height;
+        result.width *= heightScale;
+    }
+    if (result.width > max.width) {
+        const heightScale = max.width / result.width;
+        result.width = max.width;
+        result.height *= heightScale;
+    }
+    result.width = (result.width % 2) + result.width;
+    result.height = (result.height % 2) + result.height;
+    return result;
+}
+exports.capScale = capScale;
 
 
 /***/ }),

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.9",
+  "version": "1.3.11",
   "type": "commonjs",
   "main": "./index.umd.js",
   "module": "./index.umd.js",

package/types/lib/ArcwareConfig.d.ts

@@ -26,7 +26,7 @@ export declare class ArcwareConfig extends Config {
     readonly session: Session;
     readonly settings: Settings;
     private _initialSettings;
-    readonly VERSION = "1.3.9";
+    readonly VERSION = "1.3.11";
     constructor(config: ArcwareConfigParams);
     /** Setup connection string. */
     get urlFlags(): string;

package/types/lib/domain/ArcwareSettingsSchema.d.ts

@@ -123,6 +123,17 @@ export declare const ArcwareSettingsSchema: z.ZodObject<{
     startWidth: z.ZodOptional<z.ZodNumber>;
     /** Height with which instance should be started */
     startHeight: z.ZodOptional<z.ZodNumber>;
+    /** Zoom functionality */
+    orientationZoom: z.ZodOptional<z.ZodObject<{
+        landscape: z.ZodNumber;
+        portrait: z.ZodNumber;
+    }, "strict", z.ZodTypeAny, {
+        landscape?: number;
+        portrait?: number;
+    }, {
+        landscape?: number;
+        portrait?: number;
+    }>>;
 }, "strip", z.ZodTypeAny, {
     session?: string;
     token?: string;
@@ -164,6 +175,10 @@ export declare const ArcwareSettingsSchema: z.ZodObject<{
     connectionIdentifierLoggingDisabled?: boolean;
     startWidth?: number;
     startHeight?: number;
+    orientationZoom?: {
+        landscape?: number;
+        portrait?: number;
+    };
 }, {
     session?: string;
     token?: string;
@@ -205,5 +220,9 @@ export declare const ArcwareSettingsSchema: z.ZodObject<{
     connectionIdentifierLoggingDisabled?: boolean;
     startWidth?: number;
     startHeight?: number;
+    orientationZoom?: {
+        landscape?: number;
+        portrait?: number;
+    };
 }>;
 export type Settings = z.infer<typeof ArcwareSettingsSchema>;

package/types/lib/features/common.d.ts

@@ -1,3 +1,4 @@
+import { Size } from "@arcware-cloud/shared/signalling-communication";
 /** Conservative normalizer: accepts object, strict JSON string, or JSON-ish like {foo: "bar"} */
 export declare function parseUnknownToObject(input: unknown, opts?: {
     allowJsonish?: boolean;
@@ -11,3 +12,8 @@ export declare function extFromMime(mime: string): string;
 /** Short random fallback */
 export declare function randomHash(): string;
 export declare function normalizeType(v: unknown): string;
+export declare function waitForElement(selector: string, { root, timeout }?: {
+    root?: Document;
+    timeout?: number;
+}): Promise<any>;
+export declare function capScale(size: Size, max: Size): Size;