@lingxia/elements 0.15.0 → 0.16.0

package/dist/video.js

@@ -1,47 +1,21 @@
-import { sendNativeComponentMessage, registerNativeComponentHandler, addNativeComponentLayoutInvalidationListener } from "./nativecomponent.js";
-import { measureElement } from "./dom.js";
-import { ensureComponentId, NativeComponentUpdateState, iOSNativeComponentHelper } from "./component.js";
-import { isAndroid, isHarmony, isIOS, isWindows } from "./platform.js";
-const HARMONY_PROPS_PREFIX = "data:application/json,";
-// Component implementation
+import { normalizeVideoEventDetail } from "./video-events.js";
+import { ensureComponentId } from "./component.js";
+import { registerNativeComponentHandler } from "./nativecomponent.js";
+import { findInlineNativeRoot } from "./inline-native/structure.js";
+/**
+ * The DOM leaf for an inline-native video.
+ *
+ * Rendering, geometry and lifecycle are owned by the nearest LxNativeRoot.
+ * A bare lx-video is invalid and deliberately has no legacy overlay path.
+ */
 export class LxVideoElement extends HTMLElement {
     constructor() {
         super(...arguments);
         this.componentId = null;
-        this.mounted = false;
-        this.updateState = new NativeComponentUpdateState();
-        this.winSettleFrame = null;
-        this.pendingLayoutFrame = null;
-        this.boundUpdatePosition = this.updatePosition.bind(this);
-        this._handlers = {};
-        this.pendingHarmonyRetryTimer = null;
-        this.pendingHarmonyRetryCount = 0;
-        this.iOSBootstrapFrame = null;
-        this.iOSBootstrapRemaining = 0;
-        this.forceHarmonyEmbedRecreate = false;
-        this.resizeEventListener = {
-            handleEvent: () => this.boundUpdatePosition(),
-        };
-        this.iOSScrollEventListener = {
-            handleEvent: () => this.boundUpdatePosition(),
-        };
-        this.scrollSettleFrame = null;
-        // Scroll events do not bubble, so a plain window listener misses inner
-        // scroll containers; the capture phase sees them all. Any ancestor
-        // scrolling moves the element's document rect, so re-measure (coalesced
-        // to one update per frame; decide() dedups unchanged rects).
-        this.containerScrollListener = {
-            handleEvent: () => {
-                if (this.scrollSettleFrame !== null)
-                    return;
-                this.scrollSettleFrame = requestAnimationFrame(() => {
-                    this.scrollSettleFrame = null;
-                    this.updatePosition();
-                });
-            },
-        };
+        this.islandPlaybackIdle = false;
+        this.handlers = {};
         this.rawHandlers = {};
-        this._pageBindings = {};
+        this.bindings = {};
     }
     static get observedAttributes() {
         return [
@@ -58,796 +32,247 @@ export class LxVideoElement extends HTMLElement {
             "live",
             "volume",
             "qualities",
-            "playback-rates"
+            "playback-rates",
         ];
     }
-    parseRotateValue(value) {
-        const parsed = (() => {
-            if (typeof value === "number") {
-                return Number.isInteger(value) ? value : NaN;
-            }
-            if (typeof value === "string") {
-                const normalized = value.trim();
-                if (!/^(0|90|180|270)$/.test(normalized))
-                    return NaN;
-                return Number(normalized);
-            }
-            return NaN;
-        })();
-        if (parsed === 0 || parsed === 90 || parsed === 180 || parsed === 270) {
-            return parsed;
-        }
-        return undefined;
-    }
-    parseObjectFitValue(value) {
-        if (typeof value !== "string")
-            return undefined;
-        const normalized = value.trim().toLowerCase();
-        if (normalized === "cover" ||
-            normalized === "contain" ||
-            normalized === "fill" ||
-            normalized === "fit") {
-            return normalized;
-        }
-        return undefined;
-    }
     set pageBindings(bindings) {
-        this._pageBindings = bindings !== null && bindings !== void 0 ? bindings : {};
-        if (this.isConnected) {
-            this.mountOrUpdate(true);
-        }
+        this.bindings = bindings !== null && bindings !== void 0 ? bindings : {};
+        if (this.isConnected)
+            this.requestRootCompile();
     }
     get pageBindings() {
-        return this._pageBindings;
+        return this.bindings;
+    }
+    get pageFuncBindings() {
+        return this.bindings;
+    }
+    get pageFuncBindingsJson() {
+        return JSON.stringify(this.bindings);
     }
     set src(value) {
         if (value == null) {
             this.removeAttribute("src");
-            return;
         }
-        this.setAttribute("src", String(value));
+        else {
+            this.setAttribute("src", String(value));
+        }
     }
     get src() {
         return this.getAttribute("src");
     }
-    dataAttrToDatasetKey(attr) {
-        const raw = attr.slice(5).trim();
-        if (!raw)
-            return "";
-        const parts = raw.split("-").filter(Boolean);
-        if (parts.length === 0)
-            return "";
-        return parts
-            .map((segment, index) => {
-            if (index === 0)
-                return segment.toLowerCase();
-            return segment.charAt(0).toUpperCase() + segment.slice(1);
-        })
-            .join("");
-    }
-    collectDataset() {
-        const dataset = {};
-        const attrs = this.getAttributeNames();
-        for (const attr of attrs) {
-            if (!attr.startsWith("data-"))
-                continue;
-            const key = this.dataAttrToDatasetKey(attr);
-            if (!key)
-                continue;
-            const value = this.getAttribute(attr);
-            if (value == null)
-                continue;
-            dataset[key] = value;
-        }
-        return dataset;
-    }
-    upgradeProperty(propName) {
-        const self = this;
-        if (!Object.prototype.hasOwnProperty.call(self, propName))
-            return;
-        const value = self[propName];
-        delete self[propName];
-        self[propName] = value;
-    }
     set contentRotate(value) {
         const normalized = this.parseRotateValue(value);
         if (normalized === undefined) {
             this.removeAttribute("content-rotate");
-            return;
         }
-        this.setAttribute("content-rotate", String(normalized));
+        else {
+            this.setAttribute("content-rotate", String(normalized));
+        }
     }
     get contentRotate() {
         return this.parseRotateValue(this.getAttribute("content-rotate"));
     }
     connectedCallback() {
-        // React may set custom-element properties before upgrade; replay through setters.
-        this.upgradeProperty("pageBindings");
-        this.upgradeProperty("contentRotate");
-        this.upgradeProperty("src");
-        this.upgradeProperty("onplayrequest");
-        this.upgradeProperty("onplay");
-        this.upgradeProperty("onplaying");
-        this.upgradeProperty("onpause");
-        this.upgradeProperty("onstop");
-        this.upgradeProperty("onended");
-        this.upgradeProperty("ontimeupdate");
-        this.upgradeProperty("onloadedmetadata");
-        this.upgradeProperty("onfullscreenchange");
-        this.upgradeProperty("onwaiting");
-        this.upgradeProperty("onqualitychange");
-        this.upgradeProperty("onratechange");
+        for (const property of [
+            "pageBindings",
+            "contentRotate",
+            "src",
+            "onplayrequest",
+            "onplay",
+            "onplaying",
+            "onpause",
+            "onstop",
+            "onended",
+            "ontimeupdate",
+            "onloadedmetadata",
+            "onfullscreenchange",
+            "onwaiting",
+            "onqualitychange",
+            "onratechange",
+        ]) {
+            this.upgradeProperty(property);
+        }
         this.componentId = ensureComponentId(this, "lx-video", this.componentId);
-        if (!this.componentId) {
+        this.registerEventBridge();
+        if (!findInlineNativeRoot(this)) {
+            queueMicrotask(() => {
+                if (!this.isConnected || findInlineNativeRoot(this))
+                    return;
+                this.dispatchEvent(new CustomEvent("error", {
+                    detail: {
+                        code: "NATIVE_ROOT_INVALID_STRUCTURE",
+                        message: "LxVideo must be a direct child of LxNativeRoot",
+                    },
+                }));
+            });
+            this.ensurePlaceholderStyle();
             return;
         }
-        this.unregister = registerNativeComponentHandler(this.componentId, (message) => {
-            // Handle component events from native
-            if (message.event) {
-                // Normalize detail based on event type
-                let detail = message.detail || message.payload || {};
-                // Ensure common state events have empty detail if not provided
-                if (['playrequest', 'play', 'playing', 'pause', 'stop', 'ended', 'waiting'].includes(message.event)) {
-                    if (Object.keys(detail).length === 0)
-                        detail = {};
-                }
-                const ev = new CustomEvent(message.event, {
-                    detail: detail,
-                    bubbles: true,
-                    cancelable: false
-                });
-                this.dispatchEvent(ev);
+        if (this.hasAttribute("autoplay")) {
+            const latchAutoplay = () => {
+                if (!this.isConnected || this.islandPlaybackIdle || !this.hasAttribute("autoplay"))
+                    return;
+                this.setAttribute("data-lx-playing", "true");
+            };
+            if (typeof requestAnimationFrame === "function") {
+                requestAnimationFrame(latchAutoplay);
             }
-        });
-        this.ensurePlaceholderStyle();
-        // Setup iOS native component rendering helper (no-op on other platforms)
-        this.iOSHelper = new iOSNativeComponentHelper(this, this.componentId);
-        this.iOSHelper.setup();
-        this.startAttrObserver();
-        // iOS bootstrap:
-        // avoid hardcoded timeout; run an immediate mount plus a few frame-based refreshes.
-        if (isIOS()) {
-            this.mountOrUpdate(true);
-            this.startTracking();
-            this.scheduleIOSBootstrapFrames();
-        }
-        else {
-            this.mountOrUpdate();
-            this.startTracking();
-            // Windows only: the WebView2 surface is created at an intermediate size
-            // and resized to its final content bounds shortly after this element
-            // mounts, which reflows the page and moves the element. Unlike the other
-            // platforms' webviews, WebView2 doesn't reliably fire the resize /
-            // ResizeObserver that would make us re-report, and an early update can be
-            // lost in the bridge transport during page load — so the native overlay
-            // can stay pinned at the mount-time rect. Re-measure + re-report across the
-            // settle window to land the final position. No-op on every other platform.
-            if (isWindows()) {
-                this.scheduleWindowsMountSettle();
+            else {
+                queueMicrotask(latchAutoplay);
             }
         }
+        this.ensurePlaceholderStyle();
     }
     disconnectedCallback() {
         var _a;
-        this.updateState.reset();
-        if (this.componentId && !isHarmony()) {
-            sendNativeComponentMessage({
-                action: "component.unmount",
-                id: this.componentId
-            });
+        (_a = this.unregister) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unregister = undefined;
+        for (const [name, handler] of Object.entries(this.handlers)) {
+            this.removeEventListener(name, handler);
         }
-        this.stopTracking();
-        if (this.unregister) {
-            this.unregister();
-            this.unregister = undefined;
-        }
-        if (this.harmonyEmbed && this.contains(this.harmonyEmbed)) {
-            this.removeChild(this.harmonyEmbed);
-        }
-        this.harmonyEmbed = undefined;
-        this.lastHarmonyProps = undefined;
-        // Cleanup iOS helper
-        (_a = this.iOSHelper) === null || _a === void 0 ? void 0 : _a.cleanup();
-        this.iOSHelper = undefined;
-        this.stopAttrObserver();
-        // Cleanup manually attached property handlers
-        Object.keys(this._handlers).forEach(name => {
-            this.removeEventListener(name, this._handlers[name]);
-        });
-        this._handlers = {};
+        this.handlers = {};
         this.rawHandlers = {};
     }
     attributeChangedCallback(name) {
-        if (name === "id") {
-            const prev = this.componentId;
+        if (name === "id" && this.isConnected) {
+            const previous = this.componentId;
             this.componentId = ensureComponentId(this, "lx-video", this.componentId);
-            if (prev && this.componentId !== prev) {
-                this.mounted = false;
-                this.updateState.reset();
-            }
+            if (previous !== this.componentId)
+                this.registerEventBridge();
         }
-        if (!this.isConnected)
-            return;
-        if (name === "poster" || name === "object-fit" || name === "objectfit") {
+        if (name === "poster" || name === "object-fit") {
             this.syncPosterPlaceholder();
         }
-        // Keep content-rotate/object-fit updates immediate across all native platforms.
-        const forcePropsUpdate = name === "content-rotate" || name === "object-fit" || name === "objectfit";
-        if (isHarmony() && forcePropsUpdate) {
-            // Bridge callbacks can race on Harmony; force a deterministic embed recreate for visual props.
-            this.forceHarmonyEmbedRecreate = true;
-        }
-        this.mountOrUpdate(forcePropsUpdate);
+    }
+    registerEventBridge() {
+        var _a;
+        (_a = this.unregister) === null || _a === void 0 ? void 0 : _a.call(this);
+        if (!this.componentId)
+            return;
+        this.unregister = registerNativeComponentHandler(this.componentId, (message) => {
+            if (!message.event)
+                return;
+            const detail = normalizeVideoEventDetail(message.event, message.detail || message.payload || {});
+            if (message.event === "playing" || message.event === "play") {
+                this.islandPlaybackIdle = false;
+                this.setAttribute("data-lx-playing", "true");
+            }
+            else if (["pause", "stop", "ended"].includes(message.event)) {
+                this.islandPlaybackIdle = true;
+                this.removeAttribute("data-lx-playing");
+            }
+            this.dispatchEvent(new CustomEvent(message.event, {
+                detail,
+                bubbles: true,
+                cancelable: false,
+            }));
+        });
+    }
+    requestRootCompile() {
+        var _a;
+        const root = findInlineNativeRoot(this);
+        void ((_a = root === null || root === void 0 ? void 0 : root.retry) === null || _a === void 0 ? void 0 : _a.call(root));
+    }
+    upgradeProperty(property) {
+        const self = this;
+        if (!Object.prototype.hasOwnProperty.call(self, property))
+            return;
+        const value = self[property];
+        delete self[property];
+        self[property] = value;
+    }
+    parseRotateValue(value) {
+        const parsed = typeof value === "number"
+            ? value
+            : typeof value === "string" && /^(0|90|180|270)$/.test(value.trim())
+                ? Number(value)
+                : Number.NaN;
+        return parsed === 0 || parsed === 90 || parsed === 180 || parsed === 270
+            ? parsed
+            : undefined;
+    }
+    parseObjectFitValue(value) {
+        if (typeof value !== "string")
+            return undefined;
+        const normalized = value.trim().toLowerCase();
+        return normalized === "cover" ||
+            normalized === "contain" ||
+            normalized === "fill" ||
+            normalized === "fit"
+            ? normalized
+            : undefined;
     }
     isEventListener(value) {
-        if (typeof value === "function")
-            return true;
-        if (!value || typeof value !== "object")
-            return false;
-        return typeof value.handleEvent === "function";
+        return (typeof value === "function" ||
+            (!!value &&
+                typeof value === "object" &&
+                typeof value.handleEvent === "function"));
     }
     setEventHandler(name, value) {
-        const current = this._handlers[name];
-        if (current) {
+        const current = this.handlers[name];
+        if (current)
             this.removeEventListener(name, current);
-        }
-        if (this.isEventListener(value)) {
-            const listener = typeof value === "function"
-                ? { handleEvent: value }
-                : value;
-            this._handlers[name] = listener;
-            this.rawHandlers[name] = value;
-            this.addEventListener(name, listener);
-        }
-        else {
-            delete this._handlers[name];
+        if (!this.isEventListener(value)) {
+            delete this.handlers[name];
             delete this.rawHandlers[name];
+            return;
         }
+        const listener = typeof value === "function" ? { handleEvent: value } : value;
+        this.handlers[name] = listener;
+        this.rawHandlers[name] = value;
+        this.addEventListener(name, listener);
     }
     getEventHandler(name) {
-        return (this.rawHandlers[name] || null);
-    }
-    // Standard Media Events for React Props (e.g. <lx-video onPlay={...} />)
-    set onplayrequest(cb) { this.setEventHandler('playrequest', cb); }
-    get onplayrequest() { return this.getEventHandler('playrequest'); }
-    set onplay(cb) { this.setEventHandler('play', cb); }
-    get onplay() { return this.getEventHandler('play'); }
-    set onplaying(cb) { this.setEventHandler('playing', cb); }
-    get onplaying() { return this.getEventHandler('playing'); }
-    set onpause(cb) { this.setEventHandler('pause', cb); }
-    get onpause() { return this.getEventHandler('pause'); }
-    set onstop(cb) { this.setEventHandler('stop', cb); }
-    get onstop() { return this.getEventHandler('stop'); }
-    set onended(cb) { this.setEventHandler('ended', cb); }
-    get onended() { return this.getEventHandler('ended'); }
-    set ontimeupdate(cb) { this.setEventHandler('timeupdate', cb); }
-    get ontimeupdate() { return this.getEventHandler('timeupdate'); }
-    // Note: onerror is inherited from HTMLElement with OnErrorEventHandler type.
-    // Use addEventListener('error', handler) for error events instead.
-    set onloadedmetadata(cb) { this.setEventHandler('loadedmetadata', cb); }
-    get onloadedmetadata() { return this.getEventHandler('loadedmetadata'); }
-    set onfullscreenchange(cb) { this.setEventHandler('fullscreenchange', cb); }
-    get onfullscreenchange() { return this.getEventHandler('fullscreenchange'); }
-    set onwaiting(cb) { this.setEventHandler('waiting', cb); }
-    get onwaiting() { return this.getEventHandler('waiting'); }
-    set onqualitychange(cb) { this.setEventHandler('qualitychange', cb); }
-    get onqualitychange() { return this.getEventHandler('qualitychange'); }
-    set onratechange(cb) { this.setEventHandler('ratechange', cb); }
-    get onratechange() { return this.getEventHandler('ratechange'); }
-    // Internal
+        return this.rawHandlers[name] || null;
+    }
+    set onplayrequest(value) { this.setEventHandler("playrequest", value); }
+    get onplayrequest() { return this.getEventHandler("playrequest"); }
+    set onplay(value) { this.setEventHandler("play", value); }
+    get onplay() { return this.getEventHandler("play"); }
+    set onplaying(value) { this.setEventHandler("playing", value); }
+    get onplaying() { return this.getEventHandler("playing"); }
+    set onpause(value) { this.setEventHandler("pause", value); }
+    get onpause() { return this.getEventHandler("pause"); }
+    set onstop(value) { this.setEventHandler("stop", value); }
+    get onstop() { return this.getEventHandler("stop"); }
+    set onended(value) { this.setEventHandler("ended", value); }
+    get onended() { return this.getEventHandler("ended"); }
+    set ontimeupdate(value) { this.setEventHandler("timeupdate", value); }
+    get ontimeupdate() { return this.getEventHandler("timeupdate"); }
+    set onloadedmetadata(value) { this.setEventHandler("loadedmetadata", value); }
+    get onloadedmetadata() { return this.getEventHandler("loadedmetadata"); }
+    set onfullscreenchange(value) { this.setEventHandler("fullscreenchange", value); }
+    get onfullscreenchange() { return this.getEventHandler("fullscreenchange"); }
+    set onwaiting(value) { this.setEventHandler("waiting", value); }
+    get onwaiting() { return this.getEventHandler("waiting"); }
+    set onqualitychange(value) { this.setEventHandler("qualitychange", value); }
+    get onqualitychange() { return this.getEventHandler("qualitychange"); }
+    set onratechange(value) { this.setEventHandler("ratechange", value); }
+    get onratechange() { return this.getEventHandler("ratechange"); }
     ensurePlaceholderStyle() {
         if (!this.style.display)
             this.style.display = "block";
         if (!this.style.position)
-            this.style.position = "relative"; // Needed for iOS scroll container
+            this.style.position = "relative";
         if (!this.style.backgroundColor)
             this.style.backgroundColor = "black";
         if (!this.style.aspectRatio)
             this.style.aspectRatio = "16 / 9";
         this.syncPosterPlaceholder();
     }
-    /// The poster doubles as the element's CSS background: on platforms
-    /// where the native layer hides while no media is presented (Windows:
-    /// initial state, after stop, on error), the placeholder shows it.
     syncPosterPlaceholder() {
-        var _a;
         const poster = this.getAttribute("poster");
         if (!poster) {
             this.style.backgroundImage = "";
             return;
         }
-        const objectFit = this.parseObjectFitValue((_a = this.getAttribute("object-fit")) !== null && _a !== void 0 ? _a : this.getAttribute("objectfit"));
+        const objectFit = this.parseObjectFitValue(this.getAttribute("object-fit"));
         const size = objectFit === "cover" ? "cover" : objectFit === "fill" ? "100% 100%" : "contain";
         this.style.backgroundImage = `url("${poster.replace(/"/g, '\\"')}")`;
         this.style.backgroundSize = size;
         this.style.backgroundPosition = "center";
         this.style.backgroundRepeat = "no-repeat";
     }
-    collectProps() {
-        var _a;
-        const volumeAttr = this.getAttribute("volume");
-        const volume = volumeAttr != null ? parseFloat(volumeAttr) : undefined;
-        const rawObjectFit = (_a = this.getAttribute("object-fit")) !== null && _a !== void 0 ? _a : this.getAttribute("objectfit");
-        const objectFit = this.parseObjectFitValue(rawObjectFit);
-        // JSON-encoded arrays (React wrapper sets these via JSON.stringify)
-        const qualitiesAttr = this.getAttribute("qualities");
-        let qualities;
-        if (qualitiesAttr) {
-            try {
-                const parsed = JSON.parse(qualitiesAttr);
-                if (Array.isArray(parsed)) {
-                    qualities = parsed.filter((q) => q && typeof q === "object" && typeof q.label === "string");
-                }
-            }
-            catch { }
-        }
-        // Parse playbackRates array from JSON attribute
-        const playbackRatesAttr = this.getAttribute("playback-rates");
-        let playbackRates;
-        if (playbackRatesAttr) {
-            try {
-                const parsed = JSON.parse(playbackRatesAttr);
-                if (Array.isArray(parsed)) {
-                    playbackRates = parsed.filter((n) => typeof n === "number");
-                }
-            }
-            catch { }
-        }
-        const isLive = this.hasAttribute("live");
-        // When live, default progressBar to false unless explicitly enabled.
-        const progressBarAttr = this.getAttribute("progress-bar");
-        const progressBar = isLive
-            ? (progressBarAttr !== null && progressBarAttr !== "false")
-            : (progressBarAttr !== "false");
-        const rawContentRotate = this.getAttribute("content-rotate");
-        const validContentRotate = this.parseRotateValue(rawContentRotate);
-        const pageFuncBindings = this._pageBindings;
-        const dataset = this.collectDataset();
-        const clearProps = [];
-        if (rawContentRotate === null || validContentRotate === undefined) {
-            clearProps.push("contentRotate");
-        }
-        if (rawObjectFit == null || objectFit === undefined) {
-            clearProps.push("objectFit");
-        }
-        return {
-            src: this.getAttribute("src") || undefined,
-            poster: this.getAttribute("poster") || undefined,
-            autoplay: this.hasAttribute("autoplay"),
-            loop: this.hasAttribute("loop"),
-            muted: this.hasAttribute("muted"),
-            controls: this.hasAttribute("controls"),
-            progressBar,
-            live: isLive,
-            volume: !Number.isNaN(volume !== null && volume !== void 0 ? volume : NaN) ? volume : undefined,
-            objectFit,
-            contentRotate: validContentRotate,
-            ...(clearProps.length > 0 ? { __clearProps: clearProps } : {}),
-            qualities,
-            playbackRates,
-            dataset,
-            datasetJson: JSON.stringify(dataset),
-            pageFuncBindings,
-            pageFuncBindingsJson: JSON.stringify(pageFuncBindings)
-        };
-    }
-    shouldRefreshForAttribute(name) {
-        const normalized = name.trim().toLowerCase();
-        return normalized.startsWith("data-");
-    }
-    startAttrObserver() {
-        if (typeof MutationObserver === "undefined" || this.attrObserver) {
-            return;
-        }
-        this.attrObserver = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                const attrName = mutation.attributeName;
-                if (!attrName || !this.shouldRefreshForAttribute(attrName)) {
-                    continue;
-                }
-                this.mountOrUpdate(true);
-                break;
-            }
-        });
-        this.attrObserver.observe(this, { attributes: true });
-    }
-    stopAttrObserver() {
-        if (!this.attrObserver) {
-            return;
-        }
-        this.attrObserver.disconnect();
-        this.attrObserver = undefined;
-    }
-    measureForNative() {
-        const measured = measureElement(this);
-        if (!isIOS()) {
-            return measured;
-        }
-        const rect = this.getBoundingClientRect();
-        return {
-            rect: {
-                x: rect.left,
-                y: rect.top,
-                width: rect.width,
-                height: rect.height
-            },
-            cornerRadius: measured.cornerRadius
-        };
-    }
-    mountOrUpdate(forceUpdate = false) {
-        var _a;
-        if (isHarmony()) {
-            this.mountOrUpdateHarmony(forceUpdate);
-            return;
-        }
-        if (!this.componentId)
-            return;
-        const { rect, cornerRadius } = this.measureForNative();
-        const hasSize = rect.width > 0 && rect.height > 0;
-        if (!hasSize) {
-            // Defer and try again once layout stabilizes; only needed before first mount
-            if (!this.mounted) {
-                this.scheduleMountRetry();
-            }
-            return;
-        }
-        const props = this.collectProps();
-        if (cornerRadius !== undefined) {
-            props.cornerRadius = cornerRadius;
-        }
-        const zIndex = parseFloat(this.style.zIndex || "0") || 0;
-        const decision = this.updateState.decide(rect, props, zIndex, !this.mounted || forceUpdate);
-        if (!decision.shouldSend)
-            return;
-        const payload = {
-            action: this.mounted ? "component.update" : "component.mount",
-            id: this.componentId,
-            type: "video.native",
-            rect,
-            zIndex,
-            ...(cornerRadius !== undefined ? { cornerRadius } : {})
-        };
-        // Enhance payload with platform-specific data (iOS scroll container rect)
-        (_a = this.iOSHelper) === null || _a === void 0 ? void 0 : _a.enhancePayload(payload);
-        // Only include props when they changed or on first mount
-        if (decision.propsChanged || !this.mounted) {
-            payload.props = props;
-        }
-        sendNativeComponentMessage(payload);
-        this.mounted = true;
-    }
-    updatePosition() {
-        var _a;
-        if (isHarmony()) {
-            this.mountOrUpdateHarmony();
-            return;
-        }
-        if (!this.mounted || !this.componentId)
-            return;
-        const { rect, cornerRadius } = this.measureForNative();
-        if (!rect.width || !rect.height)
-            return;
-        const zIndex = parseFloat(this.style.zIndex || "0") || 0;
-        const decision = this.updateState.decide(rect, null, zIndex);
-        if (!decision.shouldSend)
-            return;
-        const payload = {
-            action: "component.update",
-            id: this.componentId,
-            rect,
-            zIndex
-        };
-        // Keep iOS scroll-container metadata on update so native side can still
-        // promote fallback overlay into WKChildScrollView when it becomes available.
-        (_a = this.iOSHelper) === null || _a === void 0 ? void 0 : _a.enhancePayload(payload);
-        if (cornerRadius !== undefined) {
-            payload.cornerRadius = cornerRadius;
-        }
-        sendNativeComponentMessage(payload);
-    }
-    /**
-     * Start tracking component size changes.
-     */
-    startTracking() {
-        window.addEventListener("resize", this.resizeEventListener);
-        if (isIOS()) {
-            window.addEventListener("scroll", this.iOSScrollEventListener, { passive: true });
-        }
-        else if (isWindows()) {
-            window.addEventListener("scroll", this.containerScrollListener, {
-                capture: true,
-                passive: true,
-            });
-        }
-        if (isAndroid()) {
-            this.removeLayoutInvalidationListener = addNativeComponentLayoutInvalidationListener(this.resizeEventListener);
-        }
-        this.startSizeObserver();
-        this.updatePosition();
-    }
-    stopTracking() {
-        var _a;
-        window.removeEventListener("resize", this.resizeEventListener);
-        if (isIOS()) {
-            window.removeEventListener("scroll", this.iOSScrollEventListener);
-        }
-        else if (isWindows()) {
-            window.removeEventListener("scroll", this.containerScrollListener, { capture: true });
-        }
-        (_a = this.removeLayoutInvalidationListener) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.removeLayoutInvalidationListener = undefined;
-        this.stopSizeObserver();
-        if (this.scrollSettleFrame !== null) {
-            cancelAnimationFrame(this.scrollSettleFrame);
-            this.scrollSettleFrame = null;
-        }
-        if (this.winSettleFrame !== null) {
-            cancelAnimationFrame(this.winSettleFrame);
-            this.winSettleFrame = null;
-        }
-        if (this.pendingLayoutFrame !== null) {
-            cancelAnimationFrame(this.pendingLayoutFrame);
-            this.pendingLayoutFrame = null;
-        }
-        if (this.pendingHarmonyRetryTimer !== null) {
-            clearTimeout(this.pendingHarmonyRetryTimer);
-            this.pendingHarmonyRetryTimer = null;
-        }
-        if (this.iOSBootstrapFrame !== null) {
-            cancelAnimationFrame(this.iOSBootstrapFrame);
-            this.iOSBootstrapFrame = null;
-        }
-        this.iOSBootstrapRemaining = 0;
-        this.pendingHarmonyProps = undefined;
-        this.pendingHarmonyRetryCount = 0;
-    }
-    startSizeObserver() {
-        if (typeof ResizeObserver === "undefined") {
-            // ResizeObserver unavailable: retry mount on next frame.
-            this.scheduleMountRetry();
-            return;
-        }
-        if (this.resizeObserver)
-            return;
-        this.resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.target !== this)
-                    continue;
-                const { width, height } = entry.contentRect;
-                if (!width || !height)
-                    continue;
-                if (this.mounted) {
-                    this.updatePosition();
-                }
-                else {
-                    this.mountOrUpdate();
-                }
-            }
-        });
-        this.resizeObserver.observe(this);
-    }
-    stopSizeObserver() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = undefined;
-        }
-    }
-    scheduleMountRetry() {
-        if (this.pendingLayoutFrame !== null || this.mounted)
-            return;
-        this.pendingLayoutFrame = requestAnimationFrame(() => {
-            this.pendingLayoutFrame = null;
-            this.mountOrUpdate();
-        });
-    }
-    scheduleWindowsMountSettle() {
-        if (typeof requestAnimationFrame === "undefined")
-            return;
-        if (this.winSettleFrame !== null)
-            return;
-        // Re-measure across the page-load / WebView2-resize settle window. The
-        // reflow that moves this element can land well after mount, so keep checking
-        // until the rect has been stable for a while; decide() dedups, so updates
-        // only fire when the rect changes.
-        let lastKey = "";
-        let stable = 0;
-        let elapsed = 0;
-        const tick = () => {
-            this.winSettleFrame = null;
-            if (!this.isConnected)
-                return;
-            // Force the re-send (don't dedup): an early update can be lost in the
-            // bridge transport during page load, and once the element has settled a
-            // dedup'd re-measure sees "no change" and never re-delivers it. Forcing
-            // each frame re-delivers the current rect until it lands.
-            this.mountOrUpdate(true);
-            const r = this.getBoundingClientRect();
-            const key = `${Math.round(r.top)}:${Math.round(r.width)}`;
-            if (key === lastKey) {
-                stable += 1;
-            }
-            else {
-                stable = 0;
-                lastKey = key;
-            }
-            elapsed += 1;
-            // Keep re-sending until the layout has held steady for a while (so a late
-            // settle is still caught), capped so it never runs unbounded.
-            if (stable < 12 && elapsed < 180) {
-                this.winSettleFrame = requestAnimationFrame(tick);
-            }
-        };
-        this.winSettleFrame = requestAnimationFrame(tick);
-    }
-    scheduleIOSBootstrapFrames() {
-        if (!isIOS())
-            return;
-        // Keep a short frame-based bootstrap window so late-created WKChildScrollView
-        // can still receive mount/update without relying on hardcoded millisecond delay.
-        this.iOSBootstrapRemaining = 8;
-        const tick = () => {
-            if (!this.isConnected) {
-                this.iOSBootstrapFrame = null;
-                this.iOSBootstrapRemaining = 0;
-                return;
-            }
-            this.mountOrUpdate(true);
-            this.iOSBootstrapRemaining -= 1;
-            if (this.iOSBootstrapRemaining <= 0) {
-                this.iOSBootstrapFrame = null;
-                return;
-            }
-            this.iOSBootstrapFrame = requestAnimationFrame(tick);
-        };
-        this.iOSBootstrapFrame = requestAnimationFrame(tick);
-    }
-    mountOrUpdateHarmony(forceUpdate = false) {
-        if (!this.componentId)
-            return;
-        const { rect, cornerRadius } = measureElement(this);
-        const hasSize = rect.width > 0 && rect.height > 0;
-        if (!hasSize) {
-            if (!this.mounted) {
-                this.scheduleMountRetry();
-            }
-            return;
-        }
-        const props = this.collectProps();
-        if (cornerRadius !== undefined) {
-            props.cornerRadius = cornerRadius;
-        }
-        const zIndex = parseFloat(this.style.zIndex || "0") || 0;
-        const decision = this.updateState.decide(rect, props, zIndex, !this.mounted || forceUpdate);
-        if (!decision.shouldSend)
-            return;
-        this.ensureHarmonyEmbed(rect, props, cornerRadius, this.forceHarmonyEmbedRecreate);
-        this.forceHarmonyEmbedRecreate = false;
-        this.mounted = true;
-    }
-    ensureHarmonyEmbed(rect, props, cornerRadius, forceRecreate = false) {
-        const createEmbed = () => {
-            const embed = document.createElement("embed");
-            embed.setAttribute("type", "native/video");
-            embed.setAttribute("width", `${rect.width}`);
-            embed.setAttribute("height", `${rect.height}`);
-            embed.setAttribute("id", this.componentId);
-            embed.setAttribute("data-lx-component-id", this.componentId);
-            embed.style.display = "block";
-            embed.style.width = "100%";
-            embed.style.height = "100%";
-            embed.style.border = "none";
-            if (cornerRadius !== undefined) {
-                embed.style.borderRadius = `${cornerRadius}px`;
-                embed.style.overflow = "hidden";
-            }
-            const encodedProps = this.encodeHarmonyProps(props);
-            embed.setAttribute("src", encodedProps);
-            this.lastHarmonyProps = encodedProps;
-            return embed;
-        };
-        if (forceRecreate && this.harmonyEmbed) {
-            const oldEmbed = this.harmonyEmbed;
-            this.harmonyEmbed = undefined;
-            if (this.contains(oldEmbed)) {
-                this.removeChild(oldEmbed);
-            }
-            this.lastHarmonyProps = undefined;
-            const recreated = createEmbed();
-            this.appendChild(recreated);
-            this.harmonyEmbed = recreated;
-            this.pushHarmonyPropsUpdate(props);
-            this.pendingHarmonyRetryCount = 0;
-            return;
-        }
-        // Create embed element only once - ArkWeb triggers DESTROY+CREATE on attribute changes
-        if (!this.harmonyEmbed) {
-            const embed = createEmbed();
-            this.pushHarmonyPropsUpdate(props);
-            this.appendChild(embed);
-            this.harmonyEmbed = embed;
-            return;
-        }
-        // Only update props when they changed.
-        const encodedProps = this.encodeHarmonyProps(props);
-        if (encodedProps !== this.lastHarmonyProps) {
-            const pushed = this.pushHarmonyPropsUpdate(props);
-            if (pushed) {
-                this.lastHarmonyProps = encodedProps;
-                this.pendingHarmonyProps = undefined;
-                this.pendingHarmonyRetryCount = 0;
-            }
-            else {
-                this.scheduleHarmonyPropsRetry(props);
-            }
-        }
-        // Ensure embed element matches latest corner radius for clipping
-        if (cornerRadius !== undefined && this.harmonyEmbed.style.borderRadius !== `${cornerRadius}px`) {
-            this.harmonyEmbed.style.borderRadius = `${cornerRadius}px`;
-            this.harmonyEmbed.style.overflow = "hidden";
-        }
-    }
-    encodeHarmonyProps(props) {
-        try {
-            const payload = { componentId: this.componentId, ...props };
-            return `${HARMONY_PROPS_PREFIX}${encodeURIComponent(JSON.stringify(payload))}`;
-        }
-        catch (_e) {
-            return `${HARMONY_PROPS_PREFIX}%7B%7D`;
-        }
-    }
-    pushHarmonyPropsUpdate(props) {
-        if (!this.componentId || !isHarmony())
-            return false;
-        try {
-            const proxy = window.LingXiaProxy;
-            const updateFn = proxy === null || proxy === void 0 ? void 0 : proxy.nativeComponentUpdate;
-            if (typeof updateFn !== "function") {
-                return false;
-            }
-            const payload = JSON.stringify({ componentId: this.componentId, ...props });
-            try {
-                updateFn.call(proxy, payload);
-                return true;
-            }
-            catch {
-                try {
-                    updateFn.call(proxy, this.componentId, payload);
-                    return true;
-                }
-                catch {
-                    return false;
-                }
-            }
-        }
-        catch (error) {
-            return false;
-        }
-    }
-    scheduleHarmonyPropsRetry(props) {
-        this.pendingHarmonyProps = { ...props };
-        if (this.pendingHarmonyRetryTimer !== null) {
-            return;
-        }
-        this.pendingHarmonyRetryTimer = window.setTimeout(() => {
-            this.pendingHarmonyRetryTimer = null;
-            if (!this.isConnected || !this.pendingHarmonyProps) {
-                return;
-            }
-            const pendingProps = this.pendingHarmonyProps;
-            const pushed = this.pushHarmonyPropsUpdate(pendingProps);
-            if (pushed) {
-                this.lastHarmonyProps = this.encodeHarmonyProps(pendingProps);
-                this.pendingHarmonyProps = undefined;
-                this.pendingHarmonyRetryCount = 0;
-            }
-            else {
-                this.pendingHarmonyRetryCount += 1;
-                if (this.pendingHarmonyRetryCount < 20) {
-                    this.scheduleHarmonyPropsRetry(pendingProps);
-                }
-            }
-        }, 100);
-    }
 }
 export function registerVideoComponent() {
     if (!customElements.get("lx-video")) {