@arcware-cloud/pixelstreaming-websdk 1.3.12 → 1.3.15

package/index.umd.js

@@ -23363,10 +23363,13 @@ exports.ArcwareApplication = ArcwareApplication;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ArcwareConfig = exports.DefaultUrl = void 0;
+const tslib_1 = __webpack_require__(655);
 const zod_1 = __webpack_require__(8754);
 const lib_pixelstreamingfrontend_ue5_5_1 = __webpack_require__(693);
 const Session_1 = __webpack_require__(2469);
 const ArcwareSettingsSchema_1 = __webpack_require__(5602);
+const whiteLabelling_1 = __webpack_require__(3545);
+const ZWhiteLabel_1 = __webpack_require__(467);
 /** Default arcware signalling endpoint. */
 exports.DefaultUrl = `wss://signalling-client.ragnarok.arcware.cloud`;
 // The below Logger overrides can likely be removed as PSInfra 5.5 logger supports setting log verbosity
@@ -23409,7 +23412,7 @@ class ArcwareConfig extends lib_pixelstreamingfrontend_ue5_5_1.Config {
         };
     }
     constructor(config) {
-        var _a, _b;
+        var _a, _b, _c;
         const dfToken = new URL(window.location.href).search
             .slice(1)
             .split("&")
@@ -23430,7 +23433,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.12";
+        this.VERSION = "1.3.15";
         this.settings = settings;
         this.session = new Session_1.Session();
         this._initialSettings = config.initialSettings;
@@ -23439,6 +23442,72 @@ class ArcwareConfig extends lib_pixelstreamingfrontend_ue5_5_1.Config {
         // 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);
+        if (this.useUrlParams) {
+            // Get the query string from URL
+            const qs = new URLSearchParams(window.location.search);
+            if (qs.has("wl") && qs.get("wl") !== "") {
+                // Retrieve image loading from there
+                const wlParsed = this.useUrlParams ? (0, whiteLabelling_1.readWhiteLabelFromQuery)(qs) : undefined; // respect useUrlParams
+                if (wlParsed) {
+                    this.settings.whiteLabelling = Object.assign(Object.assign({}, ((_c = this.settings.whiteLabelling) !== null && _c !== void 0 ? _c : {})), wlParsed);
+                }
+            }
+            this.settings.infoButton = qs.has("i") || qs.has("info");
+        }
+    }
+    static getWhiteLabelling(ShareId, URL = "https://signalling-client.arcware.cloud/whiteLabel/") {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const qs = new URLSearchParams(window.location.search);
+            if (qs.has("wl") && qs.get("wl") === "") {
+                // Build final URL safely (trim trailing slashes, encode ShareId)
+                const base = URL.replace(/\/+$/, "");
+                const requestUrl = `${base}/${encodeURIComponent(ShareId)}`;
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 1000);
+                try {
+                    const res = yield fetch(requestUrl, {
+                        method: "GET",
+                        signal: controller.signal,
+                        headers: { Accept: "application/json, text/plain" },
+                        credentials: "omit"
+                    });
+                    if (!res.ok) {
+                        // Non-2xx: treat as “no white label”
+                        return undefined;
+                    }
+                    // We read as text first to detect empty-string payloads
+                    const text = yield res.text();
+                    if (!text || text.trim() === "") {
+                        return undefined;
+                    }
+                    // If there is content, try to parse JSON
+                    let json;
+                    try {
+                        json = JSON.parse(text);
+                    }
+                    catch (_a) {
+                        // Not valid JSON → ignore
+                        return undefined;
+                    }
+                    // Validate against the allowlisted schema
+                    const parsed = ZWhiteLabel_1.ZWhiteLabel.safeParse(json);
+                    if (!parsed.success) {
+                        // Optionally log parsed.error for diagnostics
+                        return undefined;
+                    }
+                    return parsed.data;
+                }
+                catch (err) {
+                    // Abort or network error → treat as “no white label”
+                    // if (err?.name !== "AbortError") console.warn("getWhiteLabelling failed", err);
+                    return undefined;
+                }
+                finally {
+                    clearTimeout(timeoutId);
+                }
+            }
+            return undefined;
+        });
     }
     /** Setup connection string. */
     get urlFlags() {
@@ -23546,7 +23615,14 @@ 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, orientationZoom: 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, whiteLabelling: {
+                splashScreenUrl: undefined,
+                loadingIconFadeMs: undefined,
+                loadingIconUrl: undefined,
+                splashScreenMode: undefined,
+                splashScreenPosition: undefined,
+                splashScreenBgColor: 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 });
@@ -23895,6 +23971,7 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
                 });
             }
         }
+        this.applyBrandingFromSettings();
         this.handleMouseLock();
         this.injectCustomUI();
     }
@@ -24142,12 +24219,12 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
                 // Zoom level for orientation change if provided
                 if (orientationZoom) {
                     if (browserWidth < browserHeight) {
-                        if (orientationZoom.hasOwnProperty('portrait'))
+                        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')) {
+                    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
                         });
@@ -24217,26 +24294,27 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
     initLoveLettersContainer() {
         var _a;
         const logoLoader = new ArcwareLogoLoader_1.ArcwareLogoLoader();
+        this.logoLoader = logoLoader;
         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;
+            const loveLettersContainer = document.createElement("div");
+            this.loveLettersContainer = loveLettersContainer; // keep the ref
+            const { videoPlayer } = this.webRtcController;
             const videoElementParent = videoPlayer.getVideoParentElement();
-            (_a = loveLettersContainer === null || loveLettersContainer === void 0 ? void 0 : loveLettersContainer.classList) === null || _a === void 0 ? void 0 : _a.add("love-letters-box-root");
-            videoElementParent === null || videoElementParent === void 0 ? void 0 : videoElementParent.appendChild(loveLettersContainer);
-            const lettersBlock = document === null || document === void 0 ? void 0 : document.createElement("div");
+            loveLettersContainer.classList.add("love-letters-box-root");
+            videoElementParent.appendChild(loveLettersContainer);
+            const lettersBlock = document.createElement("div");
             lettersBlock.id = "letters-block";
-            const lettersWrapper = document === null || document === void 0 ? void 0 : document.createElement("div");
+            const lettersWrapper = document.createElement("div");
             lettersWrapper.id = "letters-wrapper";
-            if (loveLettersContainer) {
-                lettersBlock === null || lettersBlock === void 0 ? void 0 : lettersBlock.appendChild(logoLoader === null || logoLoader === void 0 ? void 0 : logoLoader.arcwareLogoLoader);
-                loveLettersContainer === null || loveLettersContainer === void 0 ? void 0 : loveLettersContainer.appendChild(lettersBlock);
-                lettersBlock === null || lettersBlock === void 0 ? void 0 : lettersBlock.appendChild(lettersWrapper);
-            }
-            lettersBlock.innerHTML = "";
-            if (lettersBlock) {
-                lettersBlock === null || lettersBlock === void 0 ? void 0 : lettersBlock.appendChild(logoLoader === null || logoLoader === void 0 ? void 0 : logoLoader.arcwareLogoLoader);
-                lettersBlock === null || lettersBlock === void 0 ? void 0 : lettersBlock.appendChild(lettersWrapper);
-            }
+            // append your existing loader root (with SVG) into the lettersBlock
+            const loaderRoot = logoLoader.arcwareLogoLoader; // your existing getter
+            lettersBlock.appendChild(loaderRoot);
+            // ensure the loader knows its host
+            (_a = logoLoader.setHostElement) === null || _a === void 0 ? void 0 : _a.call(logoLoader, loaderRoot);
+            loveLettersContainer.appendChild(lettersBlock);
+            lettersBlock.appendChild(lettersWrapper);
+            // apply current (local) settings immediately
+            this.applyBrandingFromSettings();
         }
     }
     pushLetter(letter) {
@@ -24342,8 +24420,7 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
         }
     }
     injectCustomUI() {
-        (0, common_1.waitForElement)('#stream-ui')
-            .then(el => {
+        (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) {
@@ -24351,6 +24428,80 @@ class ArcwarePixelStreaming extends lib_pixelstreamingfrontend_ue5_5_1.PixelStre
             }
         });
     }
+    applyBrandingFromSettings() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const cfg = ((_b = (_a = this === null || this === void 0 ? void 0 : this.config) === null || _a === void 0 ? void 0 : _a.settings.whiteLabelling) !== null && _b !== void 0 ? _b : {});
+        // Loader image + fade
+        try {
+            if (this.logoLoader) {
+                (_d = (_c = this.logoLoader).setImage) === null || _d === void 0 ? void 0 : _d.call(_c, cfg.loadingIconUrl);
+                (_f = (_e = this.logoLoader).setFade) === null || _f === void 0 ? void 0 : _f.call(_e, cfg.loadingIconFadeMs);
+            }
+        }
+        catch (_q) { }
+        // Pick splash host: loveLettersContainer (preferred) or player parent
+        try {
+            const el = (_m = (_g = this.loveLettersContainer) !== null && _g !== void 0 ? _g : (_l = (_k = (_j = (_h = this.webRtcController) === null || _h === void 0 ? void 0 : _h.videoPlayer) === null || _j === void 0 ? void 0 : _j.getVideoParentElement) === null || _k === void 0 ? void 0 : _k.call(_j)) === null || _l === void 0 ? void 0 : _l.parentElement) !== null && _m !== void 0 ? _m : null;
+            if (!el)
+                return;
+            const s = el.style;
+            // Nuke previous inline styles (longhands only; never touch 'background' shorthand here)
+            s.removeProperty("background-image");
+            s.removeProperty("background-size");
+            s.removeProperty("background-repeat");
+            s.removeProperty("background-position");
+            s.removeProperty("background-color");
+            // Also clear any earlier 'background' inline shorthand that might have been set elsewhere
+            // (we set to 'initial' first, then re-apply longhands)
+            s.setProperty("background", "initial");
+            el.classList.remove("aw-splash");
+            // If neither color nor image is provided, nothing to do
+            const haveColor = !!cfg.splashScreenBgColor;
+            const haveImage = !!cfg.splashScreenUrl;
+            if (!haveColor && !haveImage)
+                return;
+            // Always ensure our class is present when we brand
+            el.classList.add("aw-splash");
+            // Apply color with !important so external 'background: ... !important' can't wipe it
+            const bgColor = (_o = cfg.splashScreenBgColor) !== null && _o !== void 0 ? _o : "var(--color0)";
+            s.setProperty("background-color", bgColor, "important");
+            if (haveImage) {
+                // Mode → size/repeat mapping
+                const mode = ((_p = cfg.splashScreenMode) !== null && _p !== void 0 ? _p : "contain");
+                switch (mode) {
+                    case "contain":
+                        s.backgroundSize = "contain";
+                        s.backgroundRepeat = "no-repeat";
+                        break;
+                    case "cover":
+                        s.backgroundSize = "cover";
+                        s.backgroundRepeat = "no-repeat";
+                        break;
+                    case "stretch":
+                        s.backgroundSize = "100% 100%";
+                        s.backgroundRepeat = "no-repeat";
+                        break;
+                    case "repeat":
+                        s.backgroundSize = "auto"; // intrinsic
+                        s.backgroundRepeat = "repeat";
+                        break;
+                }
+                // Position
+                s.backgroundPosition = cfg.splashScreenPosition || "center center";
+                // Image last (longhand so it won't reset color)
+                // Use quotes to be safe with URLs containing parentheses/spaces
+                s.backgroundImage = `url("${cfg.splashScreenUrl}")`;
+            }
+            else {
+                // No image → ensure any previous image is cleared
+                s.backgroundImage = "none";
+                s.backgroundRepeat = "no-repeat";
+                s.backgroundPosition = "center center";
+                s.backgroundSize = "auto";
+            }
+        }
+        catch (_r) { }
+    }
 }
 exports.ArcwarePixelStreaming = ArcwarePixelStreaming;
 
@@ -24365,6 +24516,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ArcwareSettingsSchema = void 0;
 const zod_1 = __webpack_require__(8754);
 const shared_pixelstreaming_websdk_1 = __webpack_require__(7910);
+const ZWhiteLabel_1 = __webpack_require__(467);
 /** Arcware Settings. */
 exports.ArcwareSettingsSchema = zod_1.z.object({
     /** Overwrites the Session-Tool and uses the provided session instead. */
@@ -24415,10 +24567,15 @@ exports.ArcwareSettingsSchema = zod_1.z.object({
     /** Height with which instance should be started */
     startHeight: zod_1.z.number().optional(),
     /** Zoom functionality */
-    orientationZoom: zod_1.z.object({
+    orientationZoom: zod_1.z
+        .object({
         landscape: zod_1.z.number(),
-        portrait: zod_1.z.number(),
-    }).strict().optional()
+        portrait: zod_1.z.number()
+    })
+        .strict()
+        .optional(),
+    /** Loader customization */
+    whiteLabelling: ZWhiteLabel_1.ZWhiteLabel.optional()
 });
 
 
@@ -25209,6 +25366,40 @@ class DiagnosticsCollector {
 exports.DiagnosticsCollector = DiagnosticsCollector;
 
 
+/***/ }),
+
+/***/ 467:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ZWhiteLabel = void 0;
+const zod_1 = __webpack_require__(8754);
+/** Absolute HTTPS URL (no http) */
+const AbsoluteHttpsUrl = zod_1.z
+    .string()
+    .url()
+    .refine((u) => u.startsWith("https://"), { message: "URL must use https://" });
+/** Relative path (no scheme like http:, data:, javascript:, etc.) */
+const RelativePath = zod_1.z
+    .string()
+    .min(1)
+    .refine((s) => !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(s), { message: "Expected a relative path without a URL scheme" });
+/** Image URL can be absolute (https) or relative (e.g. /assets/logo.png, ./img.png) */
+const ImageUrl = zod_1.z.union([AbsoluteHttpsUrl, RelativePath]);
+/** Strict allowlist for white-label brand fields coming from the URL */
+exports.ZWhiteLabel = zod_1.z
+    .object({
+    loadingIconUrl: ImageUrl.optional(),
+    loadingIconFadeMs: zod_1.z.number().int().positive().optional(),
+    splashScreenUrl: ImageUrl.optional(),
+    splashScreenMode: zod_1.z.enum(["contain", "cover", "stretch", "repeat"]).optional(),
+    splashScreenPosition: zod_1.z.string().optional(),
+    splashScreenBgColor: zod_1.z.string().optional()
+})
+    .strict();
+
+
 /***/ }),
 
 /***/ 2483:
@@ -25337,6 +25528,46 @@ function waitForElement(selector, { root = document, timeout = 3000 } = {}) {
 exports.waitForElement = waitForElement;
 
 
+/***/ }),
+
+/***/ 3545:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.readWhiteLabelFromQuery = void 0;
+const ZWhiteLabel_1 = __webpack_require__(467);
+function decodeBase64OrBase64Url(raw) {
+    const normalized = raw.replace(/-/g, "+").replace(/_/g, "/");
+    const padded = normalized + "===".slice((normalized.length + 3) % 4);
+    if (typeof atob === "function")
+        return atob(padded);
+    // @ts-ignore (Node fallback if this runs server-side)
+    return Buffer.from(padded, "base64").toString("utf-8");
+}
+/** Parse ?wl=... (or ?whitelabel=...) → validated partial settings */
+function readWhiteLabelFromQuery(qs) {
+    try {
+        const raw = qs.get("wl");
+        if (!raw)
+            return undefined;
+        const jsonStr = decodeBase64OrBase64Url(raw);
+        const obj = JSON.parse(jsonStr);
+        const parsed = ZWhiteLabel_1.ZWhiteLabel.safeParse(obj);
+        if (!parsed.success) {
+            //console.warn("[ArcwareConfig] Invalid wl payload:", parsed.error?.flatten?.());
+            return undefined;
+        }
+        return parsed.data;
+    }
+    catch (e) {
+        //console.warn("[ArcwareConfig] Failed to parse wl payload:", e);
+        return undefined;
+    }
+}
+exports.readWhiteLabelFromQuery = readWhiteLabelFromQuery;
+
+
 /***/ }),
 
 /***/ 9399:
@@ -25377,16 +25608,27 @@ exports.ArcwareStyles = {
             "--color11": "rgba(65,0,139,1) !important",
             "--color12": "#222224 !important",
             "--color13": "#f0f0f2 !important",
-            "--colorBoxShadow": "rgba(0, 0, 0, 0.20) !important",
+            "--colorBoxShadow": "rgba(0, 0, 0, 0.20) !important"
+        },
+        ".aw-splash": {
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center center",
+            backgroundSize: "contain",
+            backgroundColor: "var(--color0)"
+        },
+        "@keyframes aw-loader-fade": {
+            from: { opacity: 0.25 },
+            to: { opacity: 1 }
         },
+        /* ---------- /NEW ---------- */
         "#playerUI *": {
-            fontFamily: "system-ui",
+            fontFamily: "system-ui"
         },
         "#shared-stream-container": {
-            boxSizing: "border-box",
+            boxSizing: "border-box"
         },
         "#shared-stream-container::-webkit-scrollbar": {
-            width: "10px",
+            width: "10px"
         },
         "#shared-stream-container::-webkit-scrollbar-track": {
             background: "var(--color13)",
@@ -25395,10 +25637,10 @@ exports.ArcwareStyles = {
             borderTop: "20px solid var(--color0)",
             borderRight: "5px solid var(--color0)",
             borderBottom: "20px solid var(--color0)",
-            borderLeft: "5px solid var(--color0)",
+            borderLeft: "5px solid var(--color0)"
         },
         "#shared-stream-container::-webkit-scrollbar-track-piece": {
-            background: "transparent",
+            background: "transparent"
         },
         "#shared-stream-container::-webkit-scrollbar-thumb": {
             background: "var(--color13)",
@@ -25406,11 +25648,11 @@ exports.ArcwareStyles = {
             borderRight: "2px solid var(--color0)",
             borderLeft: "2px solid var(--color0)",
             transition: "all ease-in-out 0.3s",
-            borderRadius: "7px",
+            borderRadius: "7px"
         },
         "#shared-stream-container::-webkit-scrollbar-thumb:hover": {
             transition: "all ease-in-out 0.3s",
-            background: "var(--color3)",
+            background: "var(--color3)"
         },
         "#playerUI, #videoElementParent": {
             position: "absolute",
@@ -25424,13 +25666,13 @@ exports.ArcwareStyles = {
             left: 0,
             margin: "auto",
             boxSizing: "border-box",
-            pointerEvents: "all",
+            pointerEvents: "all"
         },
         "#streamingVideo": {
             maxWidth: "100%",
             maxHeight: "100%",
             boxSizing: "border-box",
-            background: "#18181A",
+            background: "#18181A"
         },
         "#uiFeatures #controls": {
             top: "auto",
@@ -25438,13 +25680,13 @@ exports.ArcwareStyles = {
             bottom: "10px",
             right: "20px",
             display: "flex",
-            flexDirection: "column-reverse",
+            flexDirection: "column-reverse"
         },
         "#uiFeatures #connection": {
             bottom: "5px",
             left: "10px",
             width: "2.5rem",
-            heihgt: "2.5rem",
+            heihgt: "2.5rem"
         },
         "#uiFeatures button": {
             backgroundColor: "var(--color12)",
@@ -25461,23 +25703,23 @@ exports.ArcwareStyles = {
             alignItems: "center",
             boxShadow: "0px 0px 24px 0px var(--colorBoxShadow)",
             borderRadius: "3px",
-            outline: "none",
+            outline: "none"
         },
         "#uiFeatures button:hover, #uiFeatures button:active": {
             padding: "0 !important",
-            border: "none",
+            border: "none"
         },
         "#uiFeatures button #audioIconMuted, #uiFeatures button #audioIconUnmuted, #uiFeatures button #micIconMuted, #uiFeatures button #micIconUnmuted": {
             width: "31px",
-            height: "28px",
+            height: "28px"
         },
         "#uiFeatures button #maximizeIcon, #uiFeatures button #minimizeIcon": {
             width: "25px",
-            height: "25px",
+            height: "25px"
         },
         "#stopIcon, #playIcon": {
             width: "30px",
-            height: "30px",
+            height: "30px"
         },
         "#uiFeatures button .tooltiptext": {
             right: "125%",
@@ -25486,35 +25728,35 @@ exports.ArcwareStyles = {
             borderRadius: "3px",
             backgroundColor: "var(--color12)",
             width: "95px",
-            visibility: "hidden!important",
+            visibility: "hidden!important"
         },
         "@media (hover: hover) and (pointer: fine)": {
             "#uiFeatures button:hover .tooltiptext": {
-                visibility: "visible!important",
-            },
+                visibility: "visible!important"
+            }
         },
         "#controls>*": {
             marginBottom: "0.5rem",
             display: "block",
             lineHeight: "1.75rem",
             padding: "0.5rem",
-            backgroundColor: "var(--color12)",
+            backgroundColor: "var(--color12)"
         },
         "#uiFeatures #settingsIcon, #uiFeatures #statsIcon": {
             width: "27px",
-            height: "27px",
+            height: "27px"
         },
         ".svgIcon": {
-            fill: "var(--color13)",
+            fill: "var(--color13)"
         },
         "#uiFeatures button:hover .svgIcon, #uiFeatures button:active .svgIcon": {
-            fill: "var(--color12)",
+            fill: "var(--color12)"
         },
         ".tgl-switch .tgl-slider, .tgl-flat:checked+.tgl-slider": {
-            border: "3px solid transparent",
+            border: "3px solid transparent"
         },
         ".tgl-switch .tgl-slider": {
-            background: "none",
+            background: "none"
         },
         ".tgl-switch .tgl-slider::before": {
             content: "''",
@@ -25528,18 +25770,18 @@ exports.ArcwareStyles = {
             top: "0",
             bottom: "0",
             left: "0",
-            right: "0",
+            right: "0"
         },
         ".tgl-switch .tgl-slider::after": {
             height: "13px",
             width: "13px",
             borderRadius: "50%",
             top: "-2px",
-            left: "-1%",
+            left: "-1%"
         },
         ".tgl-flat:checked+.tgl-slider:after": {
             left: "62%",
-            background: "var(--color3)",
+            background: "var(--color3)"
         },
         ".form-control": {
             backgroundColor: "transparent",
@@ -25548,7 +25790,7 @@ exports.ArcwareStyles = {
             color: "var(--color13)",
             textAlign: "left",
             fontFamily: "inherit",
-            padding: "5px 15px ",
+            padding: "5px 15px "
         },
         ".btn-flat": {
             background: "var(--color3)",
@@ -25558,31 +25800,62 @@ exports.ArcwareStyles = {
             cursor: "pointer",
             borderRadius: "4px",
             textTransform: "uppercase",
-            minWidth: "175px",
+            minWidth: "175px"
         },
         ".btn-flat:disabled": {
             background: "var(--color7)",
             borderColor: "var(--color3)",
             color: "var(--color3)",
-            cursor: "default",
+            cursor: "default"
         },
         ".btn-flat:focus": {
-            outline: "none",
+            outline: "none"
         },
         ".arcware-logo-loader": {
             position: "relative",
-            display: "block",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             width: "12.5%",
             height: "12.5%",
+            margin: "0 auto",
+            boxSizing: "border-box"
+        },
+        // image rendering + centering inside the box
+        ".arcware-logo-loader img": {
+            maxWidth: "40%",
+            maxHeight: "40%",
+            objectFit: "contain",
+            objectPosition: "center center",
+            display: "block",
+            margin: 0,
+            verticalAlign: "middle"
+        },
+        // fade stays the same
+        ".arcware-logo-loader.pulse img": {
+            animation: "aw-loader-fade var(--aw-fade,1200ms) ease-in-out infinite alternate"
+        },
+        ".arcware-logo-loader.aw-custom-loader": {
+            width: "auto !important",
+            height: "auto !important"
+        },
+        ".arcware-logo-loader.aw-custom-loader img": {
+            display: "block",
+            width: "auto",
+            height: "auto",
+            maxWidth: "80%",
+            maxHeight: "80%",
+            objectFit: "contain",
+            margin: "0 auto" // ensure horizontal centering inside the loader
         },
         "#playOverlay img#playButton": {
-            width: "5%",
+            width: "5%"
         },
         "#disconnectOverlay, #errorOverlay": {
             textTransform: "initial",
             textAlign: "center",
             fontSize: "20px",
-            lineHeight: 2.5,
+            lineHeight: 2.5
         },
         "#disconnectOverlay .clickableState": {
             textTransform: "initial",
@@ -25592,13 +25865,13 @@ exports.ArcwareStyles = {
             fontSize: "18px",
             border: "1px solid #DAF693",
             margin: "25px auto 0",
-            width: "180px",
+            width: "180px"
         },
         "#afkOverlay": {
             background: "none",
             transition: "all ease-in-out 0.5s",
             opacity: 1,
-            pointerEvents: "initial",
+            pointerEvents: "initial"
         },
         "#afkOverlayInner": {
             textTransform: "initial",
@@ -25607,18 +25880,18 @@ exports.ArcwareStyles = {
             fontSize: "18px",
             width: "360px",
             textAlign: "center",
-            lineHeight: 2.5,
+            lineHeight: 2.5
         },
         "#afkOverlayInner center::first-line": {
             textTransform: "uppercase",
             color: "#FF8461",
             fontWeight: "bold",
-            fontSize: "24px",
+            fontSize: "24px"
         },
         "#afkOverlayInner #afkCountDownNumber": {
             color: "#DAF693",
             fontSize: "26px",
-            lineHeight: "22px",
+            lineHeight: "22px"
         },
         "#afkOverlayInner center .retry-button": {
             textTransform: "initial",
@@ -25628,7 +25901,7 @@ exports.ArcwareStyles = {
             fontSize: "18px",
             border: "1px solid #DAF693",
             margin: "25px auto 0",
-            width: "180px",
+            width: "180px"
         },
         "#connectOverlay #connectButton": {
             textTransform: "initial",
@@ -25638,33 +25911,33 @@ exports.ArcwareStyles = {
             fontSize: "18px",
             border: "1px solid #DAF693",
             margin: "25px auto 0",
-            width: "180px",
+            width: "180px"
         },
         "#connectOverlay .connection-text": {
             textTransform: "initial",
             textAlign: "center",
-            margin: "25px auto 0",
+            margin: "25px auto 0"
         },
         "#connectOverlay .connection-text .title": {
             color: "#ffffff",
             fontSize: "18px",
-            margin: "5px 0",
+            margin: "5px 0"
         },
         "#connectOverlay .connection-text .subtitle": {
             color: "#ffffff",
             opacity: 0.5,
             fontSize: "12px",
-            margin: "10px 0",
+            margin: "10px 0"
         },
         "#infoOverlay.hiddenState": {
-            display: "none",
+            display: "none"
         },
         "#disconnectOverlay, #playOverlay, #errorOverlay, #microphoneOverlay, #connectOverlay": {
             background: "#18181A",
             display: "flex",
             transition: "all ease-in-out 0.5s",
             opacity: 1,
-            pointerEvents: "initial",
+            pointerEvents: "initial"
         },
         "#microphoneOverlay": {
             textTransform: "initial",
@@ -25683,51 +25956,51 @@ exports.ArcwareStyles = {
             justifyContent: "center",
             alignItems: "center",
             flexDirection: "column",
-            zIndex: 99999,
+            zIndex: 99999
         },
         "#microphoneOverlay .title": {
             fontSize: "24px",
             position: "relative",
             marginBottom: "20px",
-            color: "#F0F0F2",
+            color: "#F0F0F2"
         },
         "#microphoneOverlay .title:after": {
             content: "''",
             display: "inline-block",
             animation: "dotty steps(1,end) 1s infinite",
-            position: "absolute",
+            position: "absolute"
         },
         "#microphoneOverlay p": {
             margin: 0,
-            color: "#858588",
+            color: "#858588"
         },
         "#microphoneOverlay svg": {
             height: "65px",
             marginBottom: "15px",
-            marginTop: "-5px",
+            marginTop: "-5px"
         },
         "#microphoneOverlay .svgIcon": {
-            fill: "#DAF693",
+            fill: "#DAF693"
         },
         "#disconnectOverlay.hiddenState, #playOverlay.hiddenState, #errorOverlay.hiddenState, #afkOverlay.hiddenState, #microphoneOverlay.hiddenState": {
             opacity: 0,
-            pointerEvents: "none",
+            pointerEvents: "none"
         },
         "#disconnectOverlay.mic-overlay-is-visible, #errorOverlay.mic-overlay-is-visible, #infoOverlay.mic-overlay-is-visible": {
             opacity: 0,
-            pointerEvents: "none",
+            pointerEvents: "none"
         },
         "#infoOverlay.hiddenState, #connectOverlay.hiddenState": {
-            display: "none",
+            display: "none"
         },
         "#connectOverlay": {
             display: "flex",
             flexDirection: "column-reverse",
             alignItems: "center",
-            justifyContent: "center",
+            justifyContent: "center"
         },
         "#infoOverlay": {
-            display: "none",
+            display: "none"
         },
         ".love-letters-box-root": {
             display: "flex",
@@ -25739,11 +26012,11 @@ exports.ArcwareStyles = {
             alignItems: "center",
             flexDirection: "column",
             background: "#18181A",
-            zIndex: 1,
+            zIndex: 1
         },
         ".love-letters-box-root.fade-out": {
             opacity: 0,
-            transition: "opacity 0.5s",
+            transition: "opacity 0.5s"
         },
         "#letters-block": {
             position: "absolute",
@@ -25760,7 +26033,7 @@ exports.ArcwareStyles = {
             alignItems: "center",
             fontSize: "16px",
             textTransform: "initial",
-            textAlign: "center",
+            textAlign: "center"
         },
         "#letters-wrapper": {
             height: "77px",
@@ -25771,62 +26044,88 @@ exports.ArcwareStyles = {
             alignItems: "center",
             justifyContent: "flex-end",
             marginTop: "10px",
-            paddingBottom: "2px",
+            paddingBottom: "2px"
         },
         "#letters-wrapper p": {
             textAlign: "center",
             lineHeight: 1.25,
-            fontSize: "16px",
+            fontSize: "16px"
         },
         ".letter-animation:nth-last-of-type(1)::after": {
             display: "inline-block",
             animation: "dotty steps(1,end) 1s infinite",
             content: "''",
-            position: "absolute",
+            position: "absolute"
         },
         ".letter-animation": {
             transition: "all 0.5s ease-in-out",
             transformOrigin: "bottom",
-            margin: "0 auto",
+            margin: "0 auto"
         },
         ".letter-animation-enter": {
-            animation: "fadeInUp 0.75s ease-out",
+            animation: "fadeInUp 0.75s ease-out"
         },
         ".letter-animation-exit": {
             opacity: 0,
             scale: 0.9,
             transition: "all ease-in-out 1s",
-            margin: 0,
+            margin: 0
         },
         "@keyframes dotty": {
             "0%": { content: "''" },
             "25%": { content: "'.'" },
             "50%": { content: "'..'" },
             "75%": { content: "'...'" },
-            "100%": { content: "''" },
+            "100%": { content: "''" }
         },
         "@keyframes fadeInUp": {
             from: {
                 opacity: 0,
                 transform: " translateY(5px)",
-                scale: 0.9,
+                scale: 0.9
             },
             to: {
                 opacity: 1,
                 transform: "translateY(0)",
-                scale: 1,
-            },
+                scale: 1
+            }
         },
         ".hidden": {
             display: "none",
-            opacity: 0,
+            opacity: 0
         },
         ".visible": {
             display: "block",
             opacity: 1,
-            transition: "opacity 1s ease-out",
+            transition: "opacity 1s ease-out"
         },
-    },
+        // Make the host a flex centering box
+        ".love-letters-box-root .arcware-logo-loader": {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        // When a custom image is active, ignore the legacy 12.5% box
+        ".love-letters-box-root .arcware-logo-loader.aw-custom-loader": {
+            width: "auto !important",
+            height: "auto !important"
+        },
+        // Size & center the <img> itself (independent of host size)
+        ".love-letters-box-root .arcware-logo-loader.aw-custom-loader img": {
+            display: "block",
+            margin: "0 auto",
+            width: "min(40vmin, 40vw)",
+            height: "auto",
+            objectFit: "contain",
+            objectPosition: "center center"
+        },
+        // (optional) If you prefer the old “percentage of container” behavior:
+        ".love-letters-box-root .arcware-logo-loader.aw-custom-loader img.alt-40pct": {
+            width: "40%",
+            maxWidth: "100%",
+            height: "auto"
+        }
+    }
 };
 
 
@@ -25848,6 +26147,56 @@ class ArcwareLogoLoader {
         arcwareLogoLoader.innerHTML = this.getSvg();
         return arcwareLogoLoader;
     }
+    /** Call this once after you create the wrapper/root that contains the SVG */
+    setHostElement(el) {
+        this._hostEl = el;
+    }
+    /** Swap the loader image at runtime; pass undefined to go back to SVG */
+    setImage(url) {
+        var _a, _b;
+        if (!this._hostEl)
+            return;
+        // lazily create <img> once
+        if (!this._imgEl) {
+            const img = document.createElement("img");
+            img.alt = "Loading";
+            img.style.display = "none"; // hidden until we set a URL
+            this._hostEl.appendChild(img);
+            this._imgEl = img;
+        }
+        if (url && url.trim()) {
+            (_a = this._hostEl) === null || _a === void 0 ? void 0 : _a.classList.add("aw-custom-loader");
+            if (this._imgEl.src !== url)
+                this._imgEl.src = url;
+            // show <img>, hide SVG
+            this._imgEl.style.display = "";
+            const svg = this._hostEl.querySelector("svg");
+            if (svg)
+                svg.style.display = "none";
+        }
+        else {
+            // no url → fall back to SVG
+            (_b = this._hostEl) === null || _b === void 0 ? void 0 : _b.classList.remove("aw-custom-loader");
+            this._imgEl.style.display = "none";
+            const svg = this._hostEl.querySelector("svg");
+            if (svg)
+                svg.style.display = "";
+        }
+    }
+    /** Enable/disable pulsing fade in ms; 0 disables */
+    setFade(ms) {
+        if (!this._hostEl)
+            return;
+        const n = Number(ms) || 0;
+        if (n > 0) {
+            this._hostEl.style.setProperty("--aw-fade", `${n}ms`);
+            this._hostEl.classList.add("pulse"); // uses #aw-loader.pulse styles you added
+        }
+        else {
+            this._hostEl.classList.remove("pulse");
+            this._hostEl.style.removeProperty("--aw-fade");
+        }
+    }
     getSvg() {
         return `
       <svg width="42" height="80" viewBox="0 0 42 80" xmlns="http://www.w3.org/2000/svg">