@lingxia/elements 0.5.0

package/dist/video.js

@@ -0,0 +1,741 @@
+import { sendNativeComponentMessage, registerNativeComponentHandler, addNativeComponentLayoutInvalidationListener } from "./nativecomponent.js";
+import { measureElement } from "./dom.js";
+import { ensureComponentId, NativeComponentUpdateState, iOSNativeComponentHelper } from "./component.js";
+import { isAndroid, isHarmony, isIOS } from "./platform.js";
+const HARMONY_PROPS_PREFIX = "data:application/json,";
+// Component implementation
+export class LxVideoElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.componentId = null;
+        this.mounted = false;
+        this.updateState = new NativeComponentUpdateState();
+        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.rawHandlers = {};
+        this._pageBindings = {};
+    }
+    static get observedAttributes() {
+        return [
+            "id",
+            "src",
+            "poster",
+            "object-fit",
+            "rotate",
+            "autoplay",
+            "loop",
+            "muted",
+            "controls",
+            "progress-bar",
+            "live",
+            "volume",
+            "qualities",
+            "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);
+        }
+    }
+    get pageBindings() {
+        return this._pageBindings;
+    }
+    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 rotate(value) {
+        const normalized = this.parseRotateValue(value);
+        if (normalized === undefined) {
+            this.removeAttribute("rotate");
+            return;
+        }
+        this.setAttribute("rotate", String(normalized));
+    }
+    get rotate() {
+        return this.parseRotateValue(this.getAttribute("rotate"));
+    }
+    connectedCallback() {
+        // React may set custom-element properties before upgrade; replay through setters.
+        this.upgradeProperty("pageBindings");
+        this.upgradeProperty("rotate");
+        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");
+        this.componentId = ensureComponentId(this, "lx-video", this.componentId);
+        if (!this.componentId) {
+            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);
+            }
+        });
+        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();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        this.updateState.reset();
+        if (this.componentId && !isHarmony()) {
+            sendNativeComponentMessage({
+                action: "component.unmount",
+                id: this.componentId
+            });
+        }
+        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.rawHandlers = {};
+    }
+    attributeChangedCallback(name) {
+        if (name === "id") {
+            const prev = this.componentId;
+            this.componentId = ensureComponentId(this, "lx-video", this.componentId);
+            if (prev && this.componentId !== prev) {
+                this.mounted = false;
+                this.updateState.reset();
+            }
+        }
+        if (!this.isConnected)
+            return;
+        // Keep rotate/object-fit updates immediate across all native platforms.
+        const forcePropsUpdate = name === "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);
+    }
+    isEventListener(value) {
+        if (typeof value === "function")
+            return true;
+        if (!value || typeof value !== "object")
+            return false;
+        return typeof value.handleEvent === "function";
+    }
+    setEventHandler(name, value) {
+        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];
+            delete this.rawHandlers[name];
+        }
+    }
+    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
+    ensurePlaceholderStyle() {
+        if (!this.style.display)
+            this.style.display = "block";
+        if (!this.style.position)
+            this.style.position = "relative"; // Needed for iOS scroll container
+        if (!this.style.backgroundColor)
+            this.style.backgroundColor = "black";
+        if (!this.style.aspectRatio)
+            this.style.aspectRatio = "16 / 9";
+    }
+    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 rawRotate = this.getAttribute("rotate");
+        const validRotate = this.parseRotateValue(rawRotate);
+        const pageFuncBindings = this._pageBindings;
+        const dataset = this.collectDataset();
+        const clearProps = [];
+        if (rawRotate === null || validRotate === undefined) {
+            clearProps.push("rotate");
+        }
+        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,
+            rotate: validRotate,
+            ...(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 });
+        }
+        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);
+        }
+        (_a = this.removeLayoutInvalidationListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.removeLayoutInvalidationListener = undefined;
+        this.stopSizeObserver();
+        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();
+        });
+    }
+    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")) {
+        customElements.define("lx-video", LxVideoElement);
+    }
+}