@scalemule/gallop 0.0.1

package/dist/element.js

@@ -0,0 +1,340 @@
+import { GALLOP_VERSION, GallopPlayerCore } from './chunk-QTV4W7FA.js';
+import { GallopIframeController } from './chunk-UFFGSURS.js';
+import { EventEmitter } from './chunk-SQPWH6EI.js';
+
+// src/core/GallopPlayerProxy.ts
+var GallopPlayerProxy = class extends EventEmitter {
+  constructor(container, config) {
+    super();
+    this.container = container;
+    this.config = config;
+    this.isSwapping = false;
+    this.backend = new GallopPlayerCore(container, config);
+    this.setupListeners();
+    this.backend.on("error", (err) => {
+      if (err.code === "CSP_BLOCKED" && !this.isSwapping) {
+        this.fallbackToIframe();
+      }
+    });
+  }
+  setupListeners() {
+    const events = [
+      "ready",
+      "play",
+      "pause",
+      "ended",
+      "timeupdate",
+      "volumechange",
+      "qualitychange",
+      "qualitylevels",
+      "buffering",
+      "seeked",
+      "ratechange",
+      "fullscreenchange",
+      "statuschange",
+      "error",
+      "destroy"
+    ];
+    events.forEach((event) => {
+      this.backend.on(event, (data) => {
+        this.emit(event, data);
+      });
+    });
+  }
+  fallbackToIframe() {
+    this.isSwapping = true;
+    console.warn("[Gallop] CSP blocked inline player, falling back to iframe mode");
+    this.emit("error", {
+      code: "BACKEND_SWITCHED",
+      message: "Player backend switched from inline to iframe"
+    });
+    this.backend.destroy();
+    this.backend = new GallopIframeController(this.container, this.config);
+    this.setupListeners();
+    this.emit("system:modefallback", { mode: "iframe" });
+    this.isSwapping = false;
+  }
+  // --- Delegate GallopPlayer Implementation ---
+  get currentTime() {
+    return this.backend.currentTime;
+  }
+  get duration() {
+    return this.backend.duration;
+  }
+  get paused() {
+    return this.backend.paused;
+  }
+  get status() {
+    return this.backend.status;
+  }
+  get isFullscreen() {
+    return this.backend.isFullscreen;
+  }
+  get volume() {
+    return this.backend.volume;
+  }
+  set volume(v) {
+    this.backend.volume = v;
+  }
+  get muted() {
+    return this.backend.muted;
+  }
+  set muted(m) {
+    this.backend.muted = m;
+  }
+  get playbackRate() {
+    return this.backend.playbackRate;
+  }
+  set playbackRate(r) {
+    this.backend.playbackRate = r;
+  }
+  play() {
+    return this.backend.play();
+  }
+  pause() {
+    return this.backend.pause();
+  }
+  seek(time) {
+    return this.backend.seek(time);
+  }
+  setQualityLevel(index) {
+    return this.backend.setQualityLevel(index);
+  }
+  setAutoQuality() {
+    return this.backend.setAutoQuality();
+  }
+  toggleFullscreen() {
+    return this.backend.toggleFullscreen();
+  }
+  getQualityLevels() {
+    return this.backend.getQualityLevels();
+  }
+  getCurrentQuality() {
+    return this.backend.getCurrentQuality();
+  }
+  getDiagnostics() {
+    return this.backend.getDiagnostics();
+  }
+  query(key) {
+    return this.backend.query(key);
+  }
+  destroy() {
+    this.backend.destroy();
+    this.removeAllListeners();
+  }
+};
+
+// src/factory.ts
+var Gallop = {
+  /**
+   * Creates an inline player instance.
+   */
+  createInline(container, config) {
+    return new GallopPlayerCore(container, config);
+  },
+  /**
+   * Creates an iframe-based player instance.
+   */
+  createIframe(container, config) {
+    return new GallopIframeController(container, config);
+  },
+  /**
+   * Unified factory for Gallop Player.
+   * Supports 'inline', 'iframe', and 'auto' modes.
+   */
+  create(container, config) {
+    const mode = config.mode || "inline";
+    switch (mode) {
+      case "iframe":
+        return this.createIframe(container, config);
+      case "inline":
+        return this.createInline(container, config);
+      case "auto":
+        return new GallopPlayerProxy(container, config);
+      default:
+        console.warn(`[Gallop] Unknown mode: ${mode}, falling back to inline`);
+        return this.createInline(container, config);
+    }
+  },
+  version: GALLOP_VERSION
+};
+
+// src/element.ts
+var OBSERVED_ATTRS = [
+  "video-id",
+  "api-key",
+  "embed-token",
+  "mode",
+  "src",
+  "poster",
+  "autoplay",
+  "muted",
+  "loop",
+  "controls",
+  "aspect-ratio",
+  "nonce",
+  "debug"
+];
+var GallopPlayerElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.player = null;
+    this.shadowContainer = null;
+  }
+  static get observedAttributes() {
+    return [...OBSERVED_ATTRS];
+  }
+  connectedCallback() {
+    if (this.player) return;
+    const shadow = this.attachShadow({ mode: "open" });
+    this.shadowContainer = document.createElement("div");
+    this.shadowContainer.style.width = "100%";
+    this.shadowContainer.style.height = "100%";
+    shadow.appendChild(this.shadowContainer);
+    this.initializePlayer();
+  }
+  initializePlayer() {
+    this.player?.destroy();
+    this.player = Gallop.create(this.shadowContainer, this.buildConfig());
+    this.bindEvents();
+  }
+  bindEvents() {
+    if (!this.player) return;
+    const events = [
+      "ready",
+      "play",
+      "pause",
+      "ended",
+      "timeupdate",
+      "volumechange",
+      "qualitychange",
+      "qualitylevels",
+      "buffering",
+      "seeked",
+      "ratechange",
+      "fullscreenchange",
+      "statuschange",
+      "error",
+      "destroy"
+    ];
+    events.forEach((event) => {
+      this.player.on(event, (data) => {
+        this.dispatchEvent(new CustomEvent(`gallop-${event}`, {
+          detail: data,
+          bubbles: false,
+          composed: true
+        }));
+      });
+    });
+  }
+  disconnectedCallback() {
+    this.player?.destroy();
+    this.player = null;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.player) return;
+    const triggerReinit = ["video-id", "api-key", "embed-token", "mode", "src"];
+    if (triggerReinit.includes(name)) {
+      this.initializePlayer();
+    } else {
+      this.updatePlayerProperty(name, newValue);
+    }
+  }
+  updatePlayerProperty(name, value) {
+    if (!this.player) return;
+    switch (name) {
+      case "muted":
+        this.player.muted = value !== null;
+        break;
+    }
+  }
+  buildConfig() {
+    const config = {};
+    config.videoId = this.getAttribute("video-id") || void 0;
+    config.apiKey = this.getAttribute("api-key") || void 0;
+    config.embedToken = this.getAttribute("embed-token") || void 0;
+    config.mode = this.getAttribute("mode") || "inline";
+    config.src = this.getAttribute("src") || void 0;
+    config.poster = this.getAttribute("poster") || void 0;
+    config.autoplay = this.hasAttribute("autoplay");
+    config.muted = this.hasAttribute("muted");
+    config.loop = this.hasAttribute("loop");
+    config.controls = !this.hasAttribute("no-controls");
+    config.aspectRatio = this.getAttribute("aspect-ratio") || void 0;
+    config.nonce = this.getAttribute("nonce") || void 0;
+    config.debug = this.hasAttribute("debug");
+    return config;
+  }
+  // --- Public API Passthrough ---
+  play() {
+    return this.player?.play();
+  }
+  pause() {
+    return this.player?.pause();
+  }
+  seek(time) {
+    return this.player?.seek(time);
+  }
+  setQualityLevel(index) {
+    return this.player?.setQualityLevel(index);
+  }
+  setAutoQuality() {
+    return this.player?.setAutoQuality();
+  }
+  toggleFullscreen() {
+    return this.player?.toggleFullscreen();
+  }
+  getQualityLevels() {
+    return this.player?.getQualityLevels() ?? [];
+  }
+  getCurrentQuality() {
+    return this.player?.getCurrentQuality() ?? -1;
+  }
+  query(key) {
+    return this.player?.query(key);
+  }
+  get currentTime() {
+    return this.player?.currentTime ?? 0;
+  }
+  set currentTime(t) {
+    void this.player?.seek(t);
+  }
+  get duration() {
+    return this.player?.duration ?? 0;
+  }
+  get volume() {
+    return this.player?.volume ?? 1;
+  }
+  set volume(v) {
+    if (this.player) this.player.volume = v;
+  }
+  get muted() {
+    return this.player?.muted ?? false;
+  }
+  set muted(m) {
+    if (this.player) this.player.muted = m;
+  }
+  get playbackRate() {
+    return this.player?.playbackRate ?? 1;
+  }
+  set playbackRate(r) {
+    if (this.player) this.player.playbackRate = r;
+  }
+  get isFullscreen() {
+    return this.player?.isFullscreen ?? false;
+  }
+  get status() {
+    return this.player?.status ?? "loading";
+  }
+  get paused() {
+    return this.player?.paused ?? true;
+  }
+  getDiagnostics() {
+    return this.player?.getDiagnostics();
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("gallop-player")) {
+  customElements.define("gallop-player", GallopPlayerElement);
+}
+
+export { GallopPlayerElement };