@rosettadash/web-components 0.1.0 → 0.1.3

package/browser/media.js

@@ -1,37 +1,56 @@
 // packages/core/src/lib/media/equirect-filter.ts
-function buildEquirectFlatCropFilter(options) {
+function buildEquirectFlatCropFilter(options, reverse = false) {
   const cropX = Math.max(0, Math.round(options.cropX));
   const cropY = Math.max(0, Math.round(options.cropY));
   const cropWidth = Math.max(2, Math.round(options.cropWidth));
   const cropHeight = Math.max(2, Math.round(options.cropHeight));
   const outputWidth = Math.max(2, Math.round(options.outputWidth));
   const outputHeight = Math.max(2, Math.round(options.outputHeight));
-  return `crop=${cropWidth}:${cropHeight}:${cropX}:${cropY},scale=${outputWidth}:${outputHeight}`;
+  const filter = `crop=${cropWidth}:${cropHeight}:${cropX}:${cropY},scale=${outputWidth}:${outputHeight}`;
+  return reverse ? `${filter},reverse` : filter;
 }
-function buildEquirectRectilinearFilter(options) {
-  const yaw = Number(options.yaw) || 0;
-  const pitch = Number(options.pitch) || 0;
-  const roll = Number(options.roll ?? 0) || 0;
+function roundAngle(value) {
+  return Math.round(value * 10) / 10;
+}
+function buildEquirectRectilinearFilter(options, reverse = false) {
+  const yaw = roundAngle(Number(options.yaw) || 0);
+  const pitch = roundAngle(Number(options.pitch) || 0);
+  const roll = roundAngle(Number(options.roll ?? 0) || 0);
   const horizontalFov = Math.max(1, Number(options.horizontalFov) || 90);
   const outputWidth = Math.max(2, Math.round(options.outputWidth));
   const outputHeight = Math.max(2, Math.round(options.outputHeight));
-  return [
+  const filter = [
     `v360=input=equirect:output=rectilinear:yaw=${yaw}:pitch=${pitch}:roll=${roll}:d_fov=${horizontalFov}`,
     `scale=${outputWidth}:${outputHeight}`
   ].join(",");
+  return reverse ? `${filter},reverse` : filter;
 }
 function buildEquirectExtractFilter(mode, options) {
+  const reverse = Boolean(options.reverse);
   if (mode === "rectilinear") {
-    return buildEquirectRectilinearFilter({
-      yaw: options.yaw ?? 0,
-      pitch: options.pitch ?? 0,
-      roll: options.roll ?? 0,
-      horizontalFov: options.horizontalFov ?? 90,
+    return buildEquirectRectilinearFilter(
+      {
+        yaw: options.yaw ?? 0,
+        pitch: options.pitch ?? 0,
+        roll: options.roll ?? 0,
+        horizontalFov: options.horizontalFov ?? 90,
+        outputWidth: options.outputWidth,
+        outputHeight: options.outputHeight
+      },
+      reverse
+    );
+  }
+  return buildEquirectFlatCropFilter(
+    {
+      cropX: options.cropX ?? DEFAULT_EQUIRECT_FLAT_CROP.cropX,
+      cropY: options.cropY ?? DEFAULT_EQUIRECT_FLAT_CROP.cropY,
+      cropWidth: options.cropWidth ?? DEFAULT_EQUIRECT_FLAT_CROP.cropWidth,
+      cropHeight: options.cropHeight ?? DEFAULT_EQUIRECT_FLAT_CROP.cropHeight,
       outputWidth: options.outputWidth,
       outputHeight: options.outputHeight
-    });
-  }
-  return buildEquirectFlatCropFilter(options);
+    },
+    reverse
+  );
 }
 var DEFAULT_EQUIRECT_SOURCE = { width: 4096, height: 2048 };
 var DEFAULT_EQUIRECT_FLAT_CROP = {
@@ -55,6 +74,9 @@ function defineRosettaElement(tagName, ctor, options) {
   }
 }
 function readNumber(value, fallback) {
+  if (value === null || value === void 0 || value === "") {
+    return fallback;
+  }
   const next = Number(value);
   return Number.isFinite(next) ? next : fallback;
 }
@@ -72,9 +94,13 @@ function loadTextResource(relativePath, baseUrl) {
     return cached;
   }
   const promise = (async () => {
-    const response = await fetch(url);
+    const fetchUrl = new URL(relativePath, baseUrl);
+    if (relativePath.endsWith(".css")) {
+      fetchUrl.searchParams.set("raw", "");
+    }
+    const response = await fetch(fetchUrl);
     if (!response.ok) {
-      throw new Error(`Failed to load ${url.href}: ${response.status}`);
+      throw new Error(`Failed to load ${fetchUrl.href}: ${response.status}`);
     }
     return response.text();
   })();
@@ -98,6 +124,9 @@ var SHADOW_ELEMENT_DIRS = {
   "rd-link-list": "visual/link-list",
   "rd-video-source": "visual/media/video-source",
   "rd-equirect-viewport": "visual/media/equirect-viewport",
+  "rd-youtube-embed": "visual/media/youtube-embed",
+  "rd-app-language-select": "domain/i18n/app-language-select",
+  "rd-geo-map": "visual/display/geo-map",
   "rd-wasm-media": "wasm/wasm-media",
   "rd-component-name": "catalog/component-name"
 };
@@ -157,6 +186,9 @@ var RdVideoSourceElement = class extends HTMLElement {
     this.resourcesReady = null;
     this.changeListener = null;
   }
+  static get observedAttributes() {
+    return ["label", "accept", "source-width", "source-height", "presentation", "hint"];
+  }
   connectedCallback() {
     if (!this.shadowRoot) {
       this.attachShadow({ mode: "open" });
@@ -171,6 +203,11 @@ var RdVideoSourceElement = class extends HTMLElement {
     this.changeListener = null;
     this.inputEl = null;
   }
+  attributeChangedCallback() {
+    if (this.resourcesReady) {
+      void this.resourcesReady.then(() => this.paint());
+    }
+  }
   setProperty(name, value) {
     this[name] = value;
     if (this.resourcesReady) {
@@ -192,6 +229,12 @@ var RdVideoSourceElement = class extends HTMLElement {
   get sourceHeight() {
     return readNumber(this.getAttribute("source-height"), DEFAULT_EQUIRECT_SOURCE.height);
   }
+  get presentation() {
+    return readString(this.getAttribute("presentation"), "default");
+  }
+  get hint() {
+    return readString(this.getAttribute("hint"), "");
+  }
   async mountShadow() {
     const root = this.shadowRoot;
     if (!root || root.querySelector(".video-source")) {
@@ -206,6 +249,7 @@ var RdVideoSourceElement = class extends HTMLElement {
     this.inputEl = root.querySelector('[data-ref="input"]');
     this.changeListener = () => this.handleFileSelected();
     this.inputEl?.addEventListener("change", this.changeListener);
+    this.paint();
   }
   paint() {
     const root = this.shadowRoot;
@@ -214,11 +258,46 @@ var RdVideoSourceElement = class extends HTMLElement {
     }
     const labelEl = root.querySelector('[data-ref="label"]');
     const metaEl = root.querySelector('[data-ref="meta"]');
+    const rootEl = root.querySelector('[data-ref="root"]');
+    const headerEl = root.querySelector('[data-ref="header"]');
+    const uploadEl = root.querySelector('[data-ref="upload"]');
+    const uploadDefaultEl = root.querySelector('[data-ref="upload-default"]');
+    const uploadAuthoringEl = root.querySelector('[data-ref="upload-authoring"]');
+    const uploadFrameEl = root.querySelector('[data-ref="upload-frame"]');
+    const nameEl = root.querySelector('[data-ref="file-name"]');
+    const hintEl = root.querySelector('[data-ref="hint"]');
+    const isAuthoringSource = this.presentation === "authoring-source";
+    const isAuthoringFrame = this.presentation === "authoring-frame";
+    const isAuthoring = isAuthoringSource || isAuthoringFrame;
+    rootEl?.classList.toggle("video-source--authoring", isAuthoringSource);
+    rootEl?.classList.toggle("video-source--authoring-frame", isAuthoringFrame);
+    if (headerEl instanceof HTMLElement) {
+      headerEl.hidden = isAuthoring;
+    }
+    if (nameEl instanceof HTMLElement) {
+      nameEl.hidden = isAuthoringFrame;
+    }
+    if (uploadEl instanceof HTMLElement) {
+      uploadEl.classList.toggle("video-source__upload--authoring", isAuthoringSource);
+      uploadEl.classList.toggle("video-source__upload--authoring-frame", isAuthoringFrame);
+    }
+    if (uploadDefaultEl instanceof HTMLElement) {
+      uploadDefaultEl.hidden = isAuthoring;
+    }
+    if (uploadAuthoringEl instanceof HTMLElement) {
+      uploadAuthoringEl.hidden = !isAuthoringSource;
+    }
+    if (uploadFrameEl instanceof HTMLElement) {
+      uploadFrameEl.hidden = !isAuthoringFrame;
+    }
+    if (hintEl) {
+      hintEl.textContent = this.hint;
+    }
     if (labelEl) {
       labelEl.textContent = this.label;
     }
     if (metaEl) {
-      metaEl.textContent = `${this.sourceWidth}\xD7${this.sourceHeight}`;
+      metaEl.textContent = isAuthoring ? "" : `${this.sourceWidth}\xD7${this.sourceHeight}`;
     }
     const input = root.querySelector('[data-ref="input"]');
     if (input) {
@@ -231,29 +310,62 @@ var RdVideoSourceElement = class extends HTMLElement {
       return;
     }
     const nameEl = this.shadowRoot?.querySelector('[data-ref="file-name"]');
-    if (nameEl) {
+    if (nameEl && this.presentation !== "authoring-frame") {
       nameEl.textContent = file.name;
     }
-    const metadata = {
-      name: file.name,
-      sourceWidth: this.sourceWidth,
-      sourceHeight: this.sourceHeight,
-      size: file.size
-    };
-    this.dispatchEvent(
-      new CustomEvent("video-file", {
-        detail: { file, metadata },
-        bubbles: true,
-        composed: true
-      })
-    );
-    this.dispatchEvent(
-      new CustomEvent("metadata", {
-        detail: metadata,
-        bubbles: true,
-        composed: true
-      })
-    );
+    void this.probeVideoDimensions(file).then(({ width, height }) => {
+      if (width > 0 && height > 0) {
+        this.setAttribute("source-width", String(width));
+        this.setAttribute("source-height", String(height));
+        const metaEl = this.shadowRoot?.querySelector('[data-ref="meta"]');
+        const isAuthoring = this.presentation === "authoring-source" || this.presentation === "authoring-frame";
+        if (metaEl && !isAuthoring) {
+          metaEl.textContent = `${width}\xD7${height}`;
+        }
+        const nameElAfter = this.shadowRoot?.querySelector('[data-ref="file-name"]');
+        if (nameElAfter && this.presentation === "authoring-source") {
+          nameElAfter.textContent = `${file.name} (${width}\xD7${height})`;
+        }
+      }
+      const metadata = {
+        name: file.name,
+        sourceWidth: width > 0 ? width : this.sourceWidth,
+        sourceHeight: height > 0 ? height : this.sourceHeight,
+        size: file.size
+      };
+      this.dispatchEvent(
+        new CustomEvent("video-file", {
+          detail: { file, metadata },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.dispatchEvent(
+        new CustomEvent("metadata", {
+          detail: metadata,
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+  }
+  probeVideoDimensions(file) {
+    return new Promise((resolve) => {
+      const url = URL.createObjectURL(file);
+      const video = document.createElement("video");
+      video.preload = "metadata";
+      video.onloadedmetadata = () => {
+        const width = video.videoWidth;
+        const height = video.videoHeight;
+        URL.revokeObjectURL(url);
+        resolve({ width, height });
+      };
+      video.onerror = () => {
+        URL.revokeObjectURL(url);
+        resolve({ width: 0, height: 0 });
+      };
+      video.src = url;
+    });
   }
 };
 RdVideoSourceElement.tagName = DB_VIDEO_SOURCE_TAG;
@@ -467,18 +579,328 @@ function registerRdEquirectViewport() {
   defineRosettaElement(RdEquirectViewportElement.tagName, RdEquirectViewportElement);
 }
 
+// packages/web-components/src/visual/media/youtube-embed/parse-youtube-id.ts
+function parseYouTubeVideoId(input) {
+  if (!input?.trim()) {
+    return null;
+  }
+  const trimmed = input.trim();
+  if (/^[a-zA-Z0-9_-]{11}$/.test(trimmed)) {
+    return trimmed;
+  }
+  try {
+    const url = new URL(trimmed);
+    const host = url.hostname.replace(/^www\./, "");
+    if (host === "youtu.be") {
+      return url.pathname.slice(1).split("/")[0] || null;
+    }
+    if (host.includes("youtube.com") || host.includes("youtube-nocookie.com")) {
+      const fromQuery = url.searchParams.get("v");
+      if (fromQuery) {
+        return fromQuery;
+      }
+      const embedMatch = url.pathname.match(/\/embed\/([^/?]+)/);
+      if (embedMatch?.[1]) {
+        return embedMatch[1];
+      }
+      const shortsMatch = url.pathname.match(/\/shorts\/([^/?]+)/);
+      if (shortsMatch?.[1]) {
+        return shortsMatch[1];
+      }
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+function buildYouTubeEmbedUrl(videoId, params = {}) {
+  const search = new URLSearchParams();
+  if (params.start != null && params.start > 0) {
+    search.set("start", String(Math.floor(params.start)));
+  }
+  if (params.autoplay) {
+    search.set("autoplay", "1");
+  }
+  if (params.mute) {
+    search.set("mute", "1");
+  }
+  if (params.controls === false) {
+    search.set("controls", "0");
+  }
+  search.set("rel", "0");
+  search.set("modestbranding", "1");
+  const query = search.toString();
+  return `https://www.youtube-nocookie.com/embed/${encodeURIComponent(videoId)}${query ? `?${query}` : ""}`;
+}
+
+// packages/web-components/src/visual/media/youtube-embed/rd-youtube-embed.ts
+var DB_YOUTUBE_EMBED_TAG = "rd-youtube-embed";
+var RdYoutubeEmbedElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.resourcesReady = null;
+  }
+  static get observedAttributes() {
+    return ["video-id", "url", "start", "autoplay", "mute", "controls", "embed-title"];
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.resourcesReady = this.mountShadow();
+    void this.resourcesReady.then(() => this.paint());
+  }
+  attributeChangedCallback() {
+    if (this.shadowRoot && this.resourcesReady) {
+      void this.resourcesReady.then(() => this.paint());
+    }
+  }
+  setProperty(name, value) {
+    this[name] = value;
+    if (this.resourcesReady) {
+      void this.resourcesReady.then(() => this.paint());
+    }
+  }
+  whenReady() {
+    return this.resourcesReady ?? Promise.resolve();
+  }
+  get videoId() {
+    return readString(this.getAttribute("video-id"), "");
+  }
+  set videoId(value) {
+    if (value) {
+      this.setAttribute("video-id", value);
+    } else {
+      this.removeAttribute("video-id");
+    }
+  }
+  get url() {
+    return readString(this.getAttribute("url"), "");
+  }
+  set url(value) {
+    if (value) {
+      this.setAttribute("url", value);
+    } else {
+      this.removeAttribute("url");
+    }
+  }
+  get start() {
+    return readNumber(this.getAttribute("start"), 0);
+  }
+  get autoplay() {
+    return this.hasAttribute("autoplay");
+  }
+  get mute() {
+    return this.hasAttribute("mute");
+  }
+  get controls() {
+    return !this.hasAttribute("controls") || this.getAttribute("controls") !== "false";
+  }
+  get embedTitle() {
+    return readString(this.getAttribute("embed-title"), "YouTube video");
+  }
+  set embedTitle(value) {
+    if (value) {
+      this.setAttribute("embed-title", value);
+    } else {
+      this.removeAttribute("embed-title");
+    }
+  }
+  async mountShadow() {
+    const root = this.shadowRoot;
+    if (!root || root.querySelector('[data-ref="root"]')) {
+      return;
+    }
+    const pair = await loadShadowPairForTag(
+      DB_YOUTUBE_EMBED_TAG,
+      "./rd-youtube-embed.html",
+      "./rd-youtube-embed.css"
+    );
+    applyShadowMount(root, pair);
+  }
+  resolveVideoId() {
+    return parseYouTubeVideoId(this.videoId) ?? parseYouTubeVideoId(this.url);
+  }
+  paint() {
+    const root = this.shadowRoot;
+    if (!root) {
+      return;
+    }
+    const iframe = root.querySelector('[data-ref="iframe"]');
+    const empty = root.querySelector('[data-ref="empty"]');
+    if (!iframe || !empty) {
+      return;
+    }
+    const id = this.resolveVideoId();
+    if (!id) {
+      iframe.removeAttribute("src");
+      iframe.hidden = true;
+      empty.hidden = false;
+      return;
+    }
+    iframe.hidden = false;
+    empty.hidden = true;
+    iframe.title = this.embedTitle;
+    iframe.credentialless = true;
+    iframe.src = buildYouTubeEmbedUrl(id, {
+      start: this.start,
+      autoplay: this.autoplay,
+      mute: this.mute,
+      controls: this.controls
+    });
+  }
+};
+RdYoutubeEmbedElement.tagName = DB_YOUTUBE_EMBED_TAG;
+function registerRdYoutubeEmbed() {
+  ensureShadowBase(DB_YOUTUBE_EMBED_TAG);
+  defineRosettaElement(DB_YOUTUBE_EMBED_TAG, RdYoutubeEmbedElement);
+}
+
+// packages/web-components/src/lib/parse-link-items.ts
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// packages/web-components/src/lib/rosetta-atom-element.ts
+var RosettaAtomElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.eventsWired = false;
+  }
+  connectedCallback() {
+    this.paint();
+    if (!this.eventsWired) {
+      this.wireEvents();
+      this.eventsWired = true;
+    }
+  }
+  attributeChangedCallback(_name) {
+    if (this.isConnected) {
+      this.paint();
+    }
+  }
+  /** Complex props (arrays/objects) synced from framework hosts via setProperty. */
+  setProperty(name, value) {
+    this[name] = value;
+    if (value === void 0 || value === null) {
+      this.removeAttribute(name);
+    } else if (typeof value === "object") {
+      this.setAttribute(name, JSON.stringify(value));
+    } else {
+      this.setAttribute(name, String(value));
+    }
+    if (this.isConnected) {
+      this.paint();
+    }
+  }
+  whenReady() {
+    return Promise.resolve();
+  }
+  paint() {
+    const preserved = this.preserveLightDomChildren();
+    this.innerHTML = this.buildMarkup();
+    this.restoreLightDomChildren(preserved);
+    this.afterPaint();
+  }
+  preserveLightDomChildren() {
+    const slot = this.querySelector('[data-ref="slot"]');
+    if (slot) {
+      return [...slot.childNodes];
+    }
+    return [...this.childNodes];
+  }
+  restoreLightDomChildren(nodes) {
+    const slot = this.querySelector('[data-ref="slot"]');
+    if (!slot) {
+      return;
+    }
+    for (const node of nodes) {
+      slot.appendChild(node);
+    }
+  }
+  wireEvents() {
+  }
+  afterPaint() {
+  }
+  readAttr(name, fallback = "") {
+    return readString(this.getAttribute(name), fallback);
+  }
+  readBoolAttr(name, fallback = false) {
+    if (!this.hasAttribute(name)) {
+      return fallback;
+    }
+    const raw = this.getAttribute(name);
+    if (raw === "" || raw === "true") {
+      return true;
+    }
+    if (raw === "false") {
+      return false;
+    }
+    return fallback;
+  }
+  readNumAttr(name, fallback) {
+    return readNumber(this.getAttribute(name), fallback);
+  }
+  parseJsonAttr(name, fallback) {
+    const raw = this.getAttribute(name);
+    if (!raw) {
+      return fallback;
+    }
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return fallback;
+    }
+  }
+  esc(value) {
+    return escapeHtml(value);
+  }
+  dispatchDetail(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+  }
+};
+
+// packages/web-components/src/visual/media/live-capture/rd-live-capture.ts
+var RD_LIVE_CAPTURE_TAG = "rd-live-capture";
+var RdLiveCaptureElement = class extends RosettaAtomElement {
+  static get observedAttributes() {
+    return ["label"];
+  }
+  buildMarkup() {
+    const label = this.readAttr("label", "Live capture");
+    return `
+      <section class="rd-media-live-capture" data-testid="rd-media-live-capture">
+        <span class="rd-media__label">${this.esc(label)}</span>
+        <button type="button" class="rd-button" data-ref="start">Start camera</button>
+        <div data-ref="slot"></div>
+      </section>`;
+  }
+};
+RdLiveCaptureElement.tagName = RD_LIVE_CAPTURE_TAG;
+function registerRdLiveCapture() {
+  defineRosettaElement(RD_LIVE_CAPTURE_TAG, RdLiveCaptureElement);
+}
+
 // packages/web-components/src/visual/media/index.ts
 function registerRosettaDashMediaElements() {
   registerRdVideoSource();
   registerRdEquirectViewport();
+  registerRdYoutubeEmbed();
+  registerRdLiveCapture();
 }
 export {
   DB_EQUIRECT_VIEWPORT_TAG,
   DB_VIDEO_SOURCE_TAG,
+  DB_YOUTUBE_EMBED_TAG,
+  RD_LIVE_CAPTURE_TAG,
   RdEquirectViewportElement,
+  RdLiveCaptureElement,
   RdVideoSourceElement,
+  RdYoutubeEmbedElement,
   registerRdEquirectViewport,
+  registerRdLiveCapture,
   registerRdVideoSource,
+  registerRdYoutubeEmbed,
   registerRosettaDashMediaElements
 };
 //# sourceMappingURL=media.js.map