@lingxia/elements 0.6.3 → 0.7.0

package/src/native_component_wrapper_shared.ts

@@ -1,5 +1,6 @@
 import type { NavigatorEnvVersion, NavigatorOpenType, NavigatorTarget } from "./navigator.js";
 import type { NavigatorQuery } from "./navigator.js";
+import type { LxMediaSwiperItem } from "./media_swiper.js";
 import type { LxVideoQuality } from "./video.js";
 
 export function appendDataAttrs(
@@ -250,3 +251,72 @@ export function buildVideoNativeAttrs(
   appendPassthroughAttrs(extraAttrs, extraNativeAttrs);
   return { ...result, ...extraNativeAttrs };
 }
+
+export const MEDIA_SWIPER_DOM_EVENT_MAP = {
+  onChange: "change",
+  onTransitionEnd: "transitionend",
+  onEndReached: "endreached",
+  onTap: "tap",
+  onVideoEnded: "videoended",
+  onError: "error",
+} as const;
+
+export interface MediaSwiperNativeAttrOptions {
+  id?: string;
+  items?: LxMediaSwiperItem[];
+  index?: number;
+  initialIndex?: number;
+  loop?: boolean;
+  autoplay?: boolean;
+  interval?: number;
+  animation?: "slide" | "none";
+  animationDuration?: number;
+  direction?: "horizontal" | "vertical";
+  contentRotate?: 0 | 90 | 180 | 270;
+  objectFit?: "cover" | "contain" | "fill" | "fit";
+  controls?: boolean;
+  muted?: boolean;
+  dots?: boolean | { color?: string; activeColor?: string };
+  swipeEnabled?: boolean;
+  peek?: number | { previous?: number; next?: number };
+}
+
+export function buildMediaSwiperNativeAttrs(
+  options: MediaSwiperNativeAttrOptions,
+  extraAttrs: Record<string, unknown> = {}
+): Record<string, string | number> {
+  const result: Record<string, string | number> = {};
+  const explicitId = typeof options.id === "string" ? options.id.trim() : "";
+
+  if (explicitId.length > 0) result.id = explicitId;
+  if (Array.isArray(options.items)) result.items = JSON.stringify(options.items);
+  if (typeof options.index === "number") result.index = options.index;
+  if (typeof options.initialIndex === "number") result["initial-index"] = options.initialIndex;
+  if (options.loop) result.loop = "";
+  if (options.autoplay) result.autoplay = "";
+  if (typeof options.interval === "number") result.interval = options.interval;
+  if (options.animation) result.animation = options.animation;
+  if (typeof options.animationDuration === "number") result["animation-duration"] = options.animationDuration;
+  if (options.direction) result.direction = options.direction;
+  if (typeof options.contentRotate === "number") result["content-rotate"] = options.contentRotate;
+  if (options.objectFit) result["object-fit"] = options.objectFit;
+  if (options.controls) result.controls = "";
+  if (options.muted === false) result.muted = "false";
+  if (options.muted === true) result.muted = "";
+  if (options.dots === true) result.dots = "";
+  if (options.dots && typeof options.dots === "object") result.dots = JSON.stringify(options.dots);
+  if (options.swipeEnabled === false) result["swipe-enabled"] = "false";
+  if (typeof options.peek === "number" && options.peek > 0) {
+    result.peek = options.peek;
+  } else if (options.peek && typeof options.peek === "object") {
+    const previous = Math.max(0, Number(options.peek.previous) || 0);
+    const next = Math.max(0, Number(options.peek.next) || 0);
+    if (previous > 0 || next > 0) {
+      result.peek = JSON.stringify({ previous, next });
+    }
+  }
+
+  const extraNativeAttrs: Record<string, string> = {};
+  appendPassthroughAttrs(extraAttrs, extraNativeAttrs);
+  return { ...result, ...extraNativeAttrs };
+}

package/src/video.ts

@@ -18,7 +18,7 @@ export type LxVideoAttributes = {
   src?: string;
   poster?: string;
   objectFit?: "cover" | "contain" | "fill" | "fit";
-  rotate?: 0 | 90 | 180 | 270;
+  contentRotate?: 0 | 90 | 180 | 270;
   autoplay?: boolean;
   loop?: boolean;
   muted?: boolean;
@@ -67,7 +67,7 @@ export class LxVideoElement extends HTMLElement {
       "src",
       "poster",
       "object-fit",
-      "rotate",
+      "content-rotate",
       "autoplay",
       "loop",
       "muted",
@@ -151,6 +151,18 @@ export class LxVideoElement extends HTMLElement {
     return this._pageBindings;
   }
 
+  set src(value: string | null | undefined) {
+    if (value == null) {
+      this.removeAttribute("src");
+      return;
+    }
+    this.setAttribute("src", String(value));
+  }
+
+  get src(): string | null {
+    return this.getAttribute("src");
+  }
+
   private dataAttrToDatasetKey(attr: string): string {
     const raw = attr.slice(5).trim();
     if (!raw) return "";
@@ -186,23 +198,24 @@ export class LxVideoElement extends HTMLElement {
     self[propName] = value;
   }
 
-  set rotate(value: unknown) {
+  set contentRotate(value: unknown) {
     const normalized = this.parseRotateValue(value);
     if (normalized === undefined) {
-      this.removeAttribute("rotate");
+      this.removeAttribute("content-rotate");
       return;
     }
-    this.setAttribute("rotate", String(normalized));
+    this.setAttribute("content-rotate", String(normalized));
   }
 
-  get rotate(): 0 | 90 | 180 | 270 | undefined {
-    return this.parseRotateValue(this.getAttribute("rotate"));
+  get contentRotate(): 0 | 90 | 180 | 270 | undefined {
+    return this.parseRotateValue(this.getAttribute("content-rotate"));
   }
 
   connectedCallback() {
     // React may set custom-element properties before upgrade; replay through setters.
     this.upgradeProperty("pageBindings");
-    this.upgradeProperty("rotate");
+    this.upgradeProperty("contentRotate");
+    this.upgradeProperty("src");
     this.upgradeProperty("onplayrequest");
     this.upgradeProperty("onplay");
     this.upgradeProperty("onplaying");
@@ -301,8 +314,8 @@ export class LxVideoElement extends HTMLElement {
       }
     }
     if (!this.isConnected) return;
-    // Keep rotate/object-fit updates immediate across all native platforms.
-    const forcePropsUpdate = name === "rotate" || name === "object-fit" || name === "objectfit";
+    // 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;
@@ -430,13 +443,13 @@ export class LxVideoElement extends HTMLElement {
       ? (progressBarAttr !== null && progressBarAttr !== "false")
       : (progressBarAttr !== "false");
 
-    const rawRotate = this.getAttribute("rotate");
-    const validRotate = this.parseRotateValue(rawRotate);
+    const rawContentRotate = this.getAttribute("content-rotate");
+    const validContentRotate = this.parseRotateValue(rawContentRotate);
     const pageFuncBindings = this._pageBindings;
     const dataset = this.collectDataset();
     const clearProps: string[] = [];
-    if (rawRotate === null || validRotate === undefined) {
-      clearProps.push("rotate");
+    if (rawContentRotate === null || validContentRotate === undefined) {
+      clearProps.push("contentRotate");
     }
     if (rawObjectFit == null || objectFit === undefined) {
       clearProps.push("objectFit");
@@ -453,7 +466,7 @@ export class LxVideoElement extends HTMLElement {
       live: isLive,
       volume: !Number.isNaN(volume ?? NaN) ? volume : undefined,
       objectFit,
-      rotate: validRotate,
+      contentRotate: validContentRotate,
       ...(clearProps.length > 0 ? { __clearProps: clearProps } : {}),
       qualities,
       playbackRates,