@scalemule/gallop 0.0.1

package/dist/chunk-QTV4W7FA.js

@@ -0,0 +1,2886 @@
+import { EventEmitter } from './chunk-SQPWH6EI.js';
+import Hls from 'hls.js';
+
+// src/constants.ts
+var DEFAULT_THEME = {
+  colorPrimary: "#635bff",
+  colorSecondary: "#8b5cf6",
+  colorText: "#ffffff",
+  colorBackground: "rgba(24, 24, 32, 0.92)",
+  colorBuffered: "rgba(255, 255, 255, 0.22)",
+  colorProgress: "#635bff",
+  controlBarBackground: "rgba(0, 0, 0, 0.65)",
+  controlBarHeight: "44px",
+  borderRadius: "8px",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontSize: "13px",
+  iconSize: "22px"
+};
+var DEFAULT_CONFIG = {
+  autoplay: false,
+  loop: false,
+  muted: false,
+  aspectRatio: "16:9",
+  apiBaseUrl: "https://api.scalemule.com"
+};
+var SPEED_PRESETS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+var SEEK_STEP = 5;
+var SEEK_STEP_LARGE = 10;
+var VOLUME_STEP = 0.05;
+var CONTROLS_HIDE_DELAY = 3e3;
+var DOUBLE_TAP_DELAY = 300;
+var HLS_DEFAULT_CONFIG = {
+  maxBufferLength: 30,
+  maxMaxBufferLength: 60,
+  startLevel: -1,
+  capLevelToPlayerSize: true,
+  progressive: true
+};
+
+// src/core/PlayerState.ts
+var VALID_TRANSITIONS = {
+  idle: ["loading"],
+  loading: ["ready", "error"],
+  ready: ["playing", "paused", "error"],
+  playing: ["paused", "buffering", "ended", "error", "loading"],
+  paused: ["playing", "buffering", "ended", "error", "loading"],
+  buffering: ["playing", "paused", "error", "ended"],
+  ended: ["playing", "loading", "idle"],
+  error: ["loading", "idle"]
+};
+var PlayerState = class {
+  constructor(onChange) {
+    this._status = "idle";
+    this.onChange = onChange;
+  }
+  get status() {
+    return this._status;
+  }
+  transition(next) {
+    if (next === this._status) return false;
+    const allowed = VALID_TRANSITIONS[this._status];
+    if (!allowed.includes(next)) {
+      return false;
+    }
+    const prev = this._status;
+    this._status = next;
+    this.onChange?.(next, prev);
+    return true;
+  }
+  reset() {
+    const prev = this._status;
+    this._status = "idle";
+    if (prev !== "idle") {
+      this.onChange?.("idle", prev);
+    }
+  }
+  get isPlaying() {
+    return this._status === "playing";
+  }
+  get isPaused() {
+    return this._status === "paused";
+  }
+  get isBuffering() {
+    return this._status === "buffering";
+  }
+  get isEnded() {
+    return this._status === "ended";
+  }
+};
+var HLSJSEngine = class {
+  constructor(auth, hlsConfigOverrides) {
+    this.hls = null;
+    this.video = null;
+    this.levels = [];
+    this.listeners = /* @__PURE__ */ new Map();
+    this.statsTimer = null;
+    this.apiKey = auth?.apiKey;
+    this.embedToken = auth?.embedToken;
+    this.hlsConfigOverrides = hlsConfigOverrides;
+  }
+  load(url, videoElement) {
+    this.destroy();
+    this.video = videoElement;
+    let sourceOrigin = null;
+    try {
+      sourceOrigin = new URL(url, window.location.href).origin;
+    } catch {
+    }
+    const config = {
+      ...HLS_DEFAULT_CONFIG,
+      ...this.hlsConfigOverrides
+    };
+    if (this.apiKey || this.embedToken) {
+      const apiKey = this.apiKey;
+      const embedToken = this.embedToken;
+      config.xhrSetup = (xhr, requestUrl) => {
+        try {
+          const u = new URL(requestUrl, url);
+          const isTrustedOrigin = sourceOrigin !== null && u.origin === sourceOrigin;
+          if (apiKey && isTrustedOrigin) {
+            xhr.setRequestHeader("X-API-Key", apiKey);
+          } else if (embedToken && isTrustedOrigin) {
+            u.searchParams.set("token", embedToken);
+            xhr.open("GET", u.toString(), true);
+          }
+        } catch {
+        }
+      };
+    }
+    this.hls = new Hls(config);
+    this.hls.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
+      this.levels = data.levels.map((level, index) => ({
+        index,
+        height: level.height,
+        width: level.width,
+        bitrate: level.bitrate,
+        label: `${level.height}p`,
+        active: index === this.hls.currentLevel
+      }));
+      this.fire("qualitylevels", this.levels);
+    });
+    this.hls.on(Hls.Events.LEVEL_SWITCHED, (_event, data) => {
+      this.levels = this.levels.map((level) => ({
+        ...level,
+        active: level.index === data.level
+      }));
+      const activeLevel = this.levels[data.level];
+      if (activeLevel) {
+        this.fire("qualitychange", activeLevel);
+      }
+      this.fireStats({
+        kind: "level_switch",
+        level: data.level,
+        bandwidthEstimate: this.hls?.bandwidthEstimate
+      });
+    });
+    this.hls.on(Hls.Events.ERROR, (_event, data) => {
+      this.fireStats({
+        kind: "hls_error",
+        fatal: data.fatal,
+        errorType: data.type,
+        errorDetails: data.details,
+        bandwidthEstimate: this.hls?.bandwidthEstimate
+      });
+      if (data.fatal) {
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            this.hls.startLoad();
+            break;
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            this.hls.recoverMediaError();
+            break;
+          default:
+            this.fire("error", {
+              code: data.type,
+              message: data.details || "Fatal playback error"
+            });
+            break;
+        }
+      }
+    });
+    this.hls.on(Hls.Events.FRAG_BUFFERED, (_event, data) => {
+      this.fire("buffering", false);
+      const stats = data ?? {};
+      const loadStart = stats.stats?.loading?.start ?? 0;
+      const loadEnd = stats.stats?.loading?.end ?? 0;
+      this.fireStats({
+        kind: "fragment",
+        bandwidthEstimate: this.hls?.bandwidthEstimate,
+        fragmentDuration: stats.frag?.duration,
+        fragmentSizeBytes: stats.stats?.total,
+        fragmentLoadMs: loadEnd > loadStart ? loadEnd - loadStart : void 0
+      });
+    });
+    this.hls.on(Hls.Events.FRAG_LOADED, (_event, data) => {
+      const response = data.networkDetails;
+      if (response && typeof response.getResponseHeader === "function") {
+        this.fireStats({
+          kind: "fragment",
+          cdnNode: response.getResponseHeader("X-Amz-Cf-Pop") || response.getResponseHeader("X-Edge-Location") || void 0,
+          cdnCacheStatus: response.getResponseHeader("X-Cache") || void 0,
+          cdnRequestID: response.getResponseHeader("X-Amz-Cf-Id") || void 0,
+          bandwidthEstimate: this.hls?.bandwidthEstimate
+        });
+      }
+    });
+    this.hls.loadSource(url);
+    this.hls.attachMedia(videoElement);
+    this.statsTimer = setInterval(() => {
+      if (!this.video) return;
+      const v = this.video;
+      if (typeof v.getVideoPlaybackQuality === "function") {
+        const quality = v.getVideoPlaybackQuality();
+        this.fireStats({
+          kind: "periodic",
+          droppedFrames: quality.droppedVideoFrames,
+          totalFrames: quality.totalVideoFrames,
+          bandwidthEstimate: this.hls?.bandwidthEstimate
+        });
+      } else if (typeof v.webkitDroppedFrameCount === "number") {
+        this.fireStats({
+          kind: "periodic",
+          droppedFrames: v.webkitDroppedFrameCount,
+          bandwidthEstimate: this.hls?.bandwidthEstimate
+        });
+      }
+    }, 1e4);
+  }
+  destroy() {
+    if (this.statsTimer) {
+      clearInterval(this.statsTimer);
+      this.statsTimer = null;
+    }
+    if (this.hls) {
+      this.hls.destroy();
+      this.hls = null;
+    }
+    this.video = null;
+    this.levels = [];
+  }
+  getQualityLevels() {
+    return this.levels;
+  }
+  setQualityLevel(index) {
+    if (this.hls) {
+      this.hls.currentLevel = index;
+    }
+  }
+  getCurrentQuality() {
+    return this.hls?.currentLevel ?? -1;
+  }
+  isAutoQuality() {
+    return this.hls?.autoLevelEnabled ?? true;
+  }
+  setAutoQuality() {
+    if (this.hls) {
+      this.hls.currentLevel = -1;
+    }
+  }
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(callback);
+  }
+  off(event, callback) {
+    this.listeners.get(event)?.delete(callback);
+  }
+  fire(event, ...args) {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    for (const cb of set) {
+      cb(...args);
+    }
+  }
+  fireStats(stats) {
+    this.fire("stats", { ...stats, statsSource: "hlsjs" });
+  }
+};
+
+// src/engine/NativeHLSEngine.ts
+var NativeHLSEngine = class {
+  constructor() {
+    this.video = null;
+    this.listeners = /* @__PURE__ */ new Map();
+    this.statsTimer = null;
+    this.lastResourceIndex = 0;
+    this.sourceHost = null;
+  }
+  load(url, videoElement) {
+    this.destroy();
+    this.video = videoElement;
+    try {
+      const parsed = new URL(url, window.location.href);
+      this.sourceHost = parsed.host;
+    } catch {
+      this.sourceHost = null;
+    }
+    videoElement.src = url;
+    videoElement.addEventListener("loadedmetadata", () => {
+      this.fire("qualitylevels", []);
+    });
+    videoElement.addEventListener("error", () => {
+      const err = videoElement.error;
+      this.fire("error", {
+        code: `MEDIA_ERR_${err?.code ?? 0}`,
+        message: err?.message ?? "Native playback error"
+      });
+    });
+    this.statsTimer = setInterval(() => {
+      this.scavengeStats();
+    }, 1e4);
+  }
+  destroy() {
+    if (this.statsTimer) {
+      clearInterval(this.statsTimer);
+      this.statsTimer = null;
+    }
+    if (this.video) {
+      this.video.removeAttribute("src");
+      this.video.load();
+      this.video = null;
+    }
+  }
+  scavengeStats() {
+    if (!this.video) return;
+    const v = this.video;
+    let droppedFrames;
+    let totalFrames;
+    if (typeof v.getVideoPlaybackQuality === "function") {
+      const q = v.getVideoPlaybackQuality();
+      droppedFrames = q.droppedVideoFrames;
+      totalFrames = q.totalVideoFrames;
+    } else if (typeof v.webkitDroppedFrameCount === "number") {
+      droppedFrames = v.webkitDroppedFrameCount;
+    }
+    if (typeof performance !== "undefined" && typeof performance.getEntriesByType === "function") {
+      const resources = performance.getEntriesByType("resource");
+      for (let i = this.lastResourceIndex; i < resources.length; i++) {
+        const res = resources[i];
+        if (!this.isVideoFragment(res.name)) continue;
+        const isCrossOrigin = this.sourceHost !== null && !res.name.includes(window.location.host);
+        const taoAvailable = !isCrossOrigin || res.transferSize > 0 || res.responseStart > 0;
+        this.fire("stats", {
+          kind: "fragment",
+          statsSource: "native_resource_timing",
+          fragmentLoadMs: Math.round(res.duration),
+          fragmentSizeBytes: taoAvailable && res.transferSize > 0 ? res.transferSize : void 0,
+          bandwidthEstimate: taoAvailable && res.transferSize > 0 && res.duration > 0 ? Math.round(res.transferSize * 8 / (res.duration / 1e3)) : void 0,
+          taoAvailable
+        });
+      }
+      this.lastResourceIndex = resources.length;
+    }
+    this.fire("stats", {
+      kind: "periodic",
+      statsSource: "native_resource_timing",
+      droppedFrames,
+      totalFrames
+    });
+  }
+  isVideoFragment(url) {
+    if (this.sourceHost) {
+      try {
+        const parsed = new URL(url, window.location.href);
+        if (parsed.host !== this.sourceHost) return false;
+      } catch {
+        return false;
+      }
+    }
+    const path = url.split("?")[0];
+    return path.endsWith(".ts") || path.endsWith(".m4s") || path.endsWith(".m4v") || path.includes("/seg-") || path.includes("/segment");
+  }
+  getQualityLevels() {
+    return [];
+  }
+  setQualityLevel(_index) {
+  }
+  getCurrentQuality() {
+    return -1;
+  }
+  isAutoQuality() {
+    return true;
+  }
+  setAutoQuality() {
+  }
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(callback);
+  }
+  off(event, callback) {
+    this.listeners.get(event)?.delete(callback);
+  }
+  fire(event, ...args) {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    for (const cb of set) {
+      cb(...args);
+    }
+  }
+};
+
+// src/utils/device.ts
+function supportsNativeHLS() {
+  if (typeof document === "undefined") return false;
+  const video = document.createElement("video");
+  return video.canPlayType("application/vnd.apple.mpegurl") !== "";
+}
+function supportsFullscreen() {
+  if (typeof document === "undefined") return false;
+  const el2 = document.documentElement;
+  return !!(el2.requestFullscreen || el2.webkitRequestFullscreen);
+}
+
+// src/engine/engineFactory.ts
+function createEngine(auth, hlsConfig) {
+  const authOpts = typeof auth === "string" ? { apiKey: auth } : auth ?? {};
+  if (Hls.isSupported()) {
+    return new HLSJSEngine(authOpts, hlsConfig);
+  }
+  if (supportsNativeHLS()) {
+    return new NativeHLSEngine();
+  }
+  throw new Error("HLS playback is not supported in this browser");
+}
+
+// src/api/ScaleMuleClient.ts
+var ScaleMuleClient = class {
+  constructor(optionsOrKey, baseUrl) {
+    if (typeof optionsOrKey === "string") {
+      this.apiKey = optionsOrKey;
+      this.baseUrl = (baseUrl ?? DEFAULT_CONFIG.apiBaseUrl).replace(/\/$/, "");
+    } else {
+      this.apiKey = optionsOrKey.apiKey;
+      this.embedToken = optionsOrKey.embedToken;
+      this.baseUrl = (optionsOrKey.baseUrl ?? DEFAULT_CONFIG.apiBaseUrl).replace(/\/$/, "");
+    }
+  }
+  buildUrl(path) {
+    const url = new URL(`${this.baseUrl}${path}`);
+    if (this.embedToken) {
+      url.searchParams.set("token", this.embedToken);
+    }
+    return url.toString();
+  }
+  getHeaders() {
+    const headers = { "Accept": "application/json" };
+    if (this.apiKey) {
+      headers["X-API-Key"] = this.apiKey;
+    }
+    return headers;
+  }
+  async getVideoMetadata(videoId) {
+    const path = this.embedToken ? `/v1/videos/embed/${videoId}/metadata` : `/v1/videos/${videoId}`;
+    const response = await fetch(this.buildUrl(path), {
+      headers: this.getHeaders()
+    });
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`Failed to load video ${videoId}: ${response.status} ${text}`);
+    }
+    const data = await response.json();
+    return {
+      id: data.id,
+      title: data.title ?? "",
+      duration: data.duration ?? 0,
+      poster: data.poster_url ?? data.thumbnail_url,
+      playlistUrl: data.playlist_url,
+      qualities: (data.qualities ?? []).map((q, i) => ({
+        index: i,
+        height: q.height,
+        width: q.width,
+        bitrate: q.bitrate,
+        label: `${q.height}p`,
+        active: false
+      }))
+    };
+  }
+  async trackPlayback(videoId, payload, options) {
+    const path = this.embedToken ? `/v1/videos/embed/${videoId}/track` : `/v1/videos/${videoId}/track`;
+    const response = await fetch(this.buildUrl(path), {
+      method: "POST",
+      headers: {
+        ...this.getHeaders(),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(payload),
+      keepalive: options?.keepalive ?? false
+    });
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`Failed to track playback for ${videoId}: ${response.status} ${text}`);
+    }
+  }
+};
+
+// src/ui/IconSet.ts
+var stroke = (d) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">${d}</svg>`;
+var fill = (d) => `<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">${d}</svg>`;
+var Icons = {
+  play: fill('<path d="M6.906 4.537A.6.6 0 0 0 6 5.053v13.894a.6.6 0 0 0 .906.516l11.723-6.947a.6.6 0 0 0 0-1.032L6.906 4.537Z"/>'),
+  pause: fill('<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>'),
+  volumeHigh: stroke('<path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>'),
+  volumeLow: stroke('<path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>'),
+  volumeMuted: stroke('<path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>'),
+  fullscreen: stroke('<path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>'),
+  fullscreenExit: stroke('<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>'),
+  settings: stroke('<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>'),
+  chevronLeft: stroke('<polyline points="15 18 9 12 15 6"/>'),
+  check: stroke('<polyline points="20 6 9 17 4 12"/>')
+};
+
+// src/utils/dom.ts
+function el(tag, attrs, children) {
+  const element = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      element.setAttribute(key, value);
+    }
+  }
+  return element;
+}
+function svgIcon(svgContent, className) {
+  const wrapper = document.createElement("span");
+  wrapper.className = "gallop-icon";
+  wrapper.innerHTML = svgContent;
+  wrapper.setAttribute("aria-hidden", "true");
+  return wrapper;
+}
+
+// src/ui/ProgressBar.ts
+var ProgressBar = class {
+  constructor(player) {
+    this.dragging = false;
+    this.onMouseDown = (e) => {
+      e.preventDefault();
+      this.dragging = true;
+      this.seekToPosition(e.clientX);
+      const onMove = (ev) => this.seekToPosition(ev.clientX);
+      const onUp = () => {
+        this.dragging = false;
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    };
+    this.onTouchStart = (e) => {
+      e.preventDefault();
+      this.dragging = true;
+      const touch = e.touches[0];
+      this.seekToPosition(touch.clientX);
+      const onMove = (ev) => this.seekToPosition(ev.touches[0].clientX);
+      const onEnd = () => {
+        this.dragging = false;
+        document.removeEventListener("touchmove", onMove);
+        document.removeEventListener("touchend", onEnd);
+      };
+      document.addEventListener("touchmove", onMove);
+      document.addEventListener("touchend", onEnd);
+    };
+    this.player = player;
+    this.element = document.createElement("div");
+    this.element.className = "gallop-progress-container";
+    this.bar = document.createElement("div");
+    this.bar.className = "gallop-progress-bar";
+    this.buffered = document.createElement("div");
+    this.buffered.className = "gallop-progress-buffered";
+    this.played = document.createElement("div");
+    this.played.className = "gallop-progress-played";
+    this.thumb = document.createElement("div");
+    this.thumb.className = "gallop-progress-thumb";
+    this.bar.appendChild(this.buffered);
+    this.bar.appendChild(this.played);
+    this.bar.appendChild(this.thumb);
+    this.element.appendChild(this.bar);
+    this.element.addEventListener("mousedown", this.onMouseDown);
+    this.element.addEventListener("touchstart", this.onTouchStart, { passive: false });
+  }
+  update(currentTime, duration, bufferedRanges) {
+    if (this.dragging || !duration) return;
+    const pct = currentTime / duration * 100;
+    this.played.style.width = `${pct}%`;
+    this.thumb.style.left = `${pct}%`;
+    if (bufferedRanges.length > 0) {
+      const bufferedEnd = bufferedRanges.end(bufferedRanges.length - 1);
+      this.buffered.style.width = `${bufferedEnd / duration * 100}%`;
+    }
+  }
+  seekToPosition(clientX) {
+    const rect = this.bar.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const time = pct * this.player.duration;
+    this.player.seek(time);
+    this.played.style.width = `${pct * 100}%`;
+    this.thumb.style.left = `${pct * 100}%`;
+  }
+  destroy() {
+    this.element.removeEventListener("mousedown", this.onMouseDown);
+    this.element.removeEventListener("touchstart", this.onTouchStart);
+  }
+};
+
+// src/ui/VolumeControl.ts
+var VolumeControl = class {
+  constructor(player) {
+    this.onSliderMouseDown = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.setVolumeFromX(e.clientX);
+      const onMove = (ev) => this.setVolumeFromX(ev.clientX);
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    };
+    this.player = player;
+    this.element = document.createElement("div");
+    this.element.className = "gallop-volume";
+    this.muteBtn = document.createElement("button");
+    this.muteBtn.className = "gallop-btn";
+    this.muteBtn.setAttribute("aria-label", "Mute");
+    this.iconHigh = svgIcon(Icons.volumeHigh);
+    this.iconLow = svgIcon(Icons.volumeLow);
+    this.iconMuted = svgIcon(Icons.volumeMuted);
+    this.muteBtn.appendChild(this.iconHigh);
+    this.muteBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      player.toggleMute();
+    });
+    this.sliderWrap = document.createElement("div");
+    this.sliderWrap.className = "gallop-volume-slider-wrap";
+    this.slider = document.createElement("div");
+    this.slider.className = "gallop-volume-slider";
+    this.fill = document.createElement("div");
+    this.fill.className = "gallop-volume-fill";
+    this.fill.style.width = `${player.volume * 100}%`;
+    this.slider.appendChild(this.fill);
+    this.sliderWrap.appendChild(this.slider);
+    this.element.appendChild(this.muteBtn);
+    this.element.appendChild(this.sliderWrap);
+    this.slider.addEventListener("mousedown", this.onSliderMouseDown);
+  }
+  update(volume, muted) {
+    const effectiveVolume = muted ? 0 : volume;
+    this.fill.style.width = `${effectiveVolume * 100}%`;
+    this.muteBtn.innerHTML = "";
+    if (muted || volume === 0) {
+      this.muteBtn.appendChild(this.iconMuted.cloneNode(true));
+    } else if (volume < 0.5) {
+      this.muteBtn.appendChild(this.iconLow.cloneNode(true));
+    } else {
+      this.muteBtn.appendChild(this.iconHigh.cloneNode(true));
+    }
+  }
+  setVolumeFromX(clientX) {
+    const rect = this.slider.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    this.player.volume = pct;
+    if (this.player.muted && pct > 0) {
+      this.player.muted = false;
+    }
+  }
+  destroy() {
+    this.slider.removeEventListener("mousedown", this.onSliderMouseDown);
+  }
+};
+
+// src/utils/time.ts
+function formatTime(seconds) {
+  if (!isFinite(seconds) || seconds < 0) return "0:00";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) {
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  }
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/ui/TimeDisplay.ts
+var TimeDisplay = class {
+  constructor() {
+    this.currentTime = 0;
+    this.duration = 0;
+    this.element = document.createElement("span");
+    this.element.className = "gallop-time";
+    this.render();
+  }
+  update(currentTime, duration) {
+    this.currentTime = currentTime;
+    this.duration = duration;
+    this.render();
+  }
+  render() {
+    this.element.textContent = `${formatTime(this.currentTime)} / ${formatTime(this.duration)}`;
+  }
+};
+
+// src/ui/SettingsMenu.ts
+var SettingsMenu = class {
+  constructor(player) {
+    this.currentView = "main";
+    this.qualityLevels = [];
+    this.player = player;
+    this.button = document.createElement("button");
+    this.button.className = "gallop-btn";
+    this.button.setAttribute("aria-label", "Settings");
+    this.button.appendChild(svgIcon(Icons.settings));
+    this.button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.element = document.createElement("div");
+    this.element.className = "gallop-settings-menu";
+    this.element.hidden = true;
+    this.element.addEventListener("click", (e) => e.stopPropagation());
+    this.renderMain();
+  }
+  setQualityLevels(levels) {
+    this.qualityLevels = levels;
+    if (this.currentView === "quality") {
+      this.renderQuality();
+    } else if (this.currentView === "main") {
+      this.renderMain();
+    }
+  }
+  toggle() {
+    if (this.element.hidden) {
+      this.currentView = "main";
+      this.renderMain();
+      this.element.hidden = false;
+    } else {
+      this.element.hidden = true;
+    }
+  }
+  close() {
+    this.element.hidden = true;
+    this.currentView = "main";
+  }
+  renderMain() {
+    this.element.innerHTML = "";
+    const qualityItem = this.createItem("Quality", this.getQualityLabel());
+    qualityItem.addEventListener("click", () => {
+      this.currentView = "quality";
+      this.renderQuality();
+    });
+    const speedItem = this.createItem("Speed", this.getSpeedLabel());
+    speedItem.addEventListener("click", () => {
+      this.currentView = "speed";
+      this.renderSpeed();
+    });
+    this.element.appendChild(qualityItem);
+    this.element.appendChild(speedItem);
+  }
+  renderQuality() {
+    this.element.innerHTML = "";
+    const header = this.createHeader("Quality");
+    this.element.appendChild(header);
+    const autoItem = this.createSelectItem(
+      "Auto",
+      this.player.isAutoQuality()
+    );
+    autoItem.addEventListener("click", () => {
+      this.player.setAutoQuality();
+      this.close();
+    });
+    this.element.appendChild(autoItem);
+    const sorted = [...this.qualityLevels].sort((a, b) => b.height - a.height);
+    for (const level of sorted) {
+      const item = this.createSelectItem(
+        level.label,
+        !this.player.isAutoQuality() && level.index === this.player.getCurrentQuality()
+      );
+      item.addEventListener("click", () => {
+        this.player.setQualityLevel(level.index);
+        this.close();
+      });
+      this.element.appendChild(item);
+    }
+  }
+  renderSpeed() {
+    this.element.innerHTML = "";
+    const header = this.createHeader("Speed");
+    this.element.appendChild(header);
+    for (const speed of SPEED_PRESETS) {
+      const label = speed === 1 ? "Normal" : `${speed}x`;
+      const item = this.createSelectItem(label, this.player.playbackRate === speed);
+      item.addEventListener("click", () => {
+        this.player.playbackRate = speed;
+        this.close();
+      });
+      this.element.appendChild(item);
+    }
+  }
+  createItem(label, value) {
+    const item = document.createElement("div");
+    item.className = "gallop-settings-item";
+    const labelEl = document.createElement("span");
+    labelEl.textContent = label;
+    const valueEl = document.createElement("span");
+    valueEl.className = "gallop-settings-value";
+    valueEl.textContent = value;
+    item.appendChild(labelEl);
+    item.appendChild(valueEl);
+    return item;
+  }
+  createSelectItem(label, active) {
+    const item = document.createElement("div");
+    item.className = "gallop-settings-item" + (active ? " gallop-settings-item-active" : "");
+    if (active) {
+      item.appendChild(svgIcon(Icons.check));
+    } else {
+      const spacer = document.createElement("span");
+      spacer.className = "gallop-icon";
+      item.appendChild(spacer);
+    }
+    const labelEl = document.createElement("span");
+    labelEl.textContent = label;
+    item.appendChild(labelEl);
+    return item;
+  }
+  createHeader(title) {
+    const header = document.createElement("div");
+    header.className = "gallop-settings-header";
+    header.appendChild(svgIcon(Icons.chevronLeft));
+    const text = document.createElement("span");
+    text.textContent = title;
+    header.appendChild(text);
+    header.addEventListener("click", () => {
+      this.currentView = "main";
+      this.renderMain();
+    });
+    return header;
+  }
+  getQualityLabel() {
+    if (this.player.isAutoQuality()) {
+      const current2 = this.player.getCurrentQuality();
+      const level2 = this.qualityLevels.find((l) => l.index === current2);
+      return level2 ? `Auto (${level2.height}p)` : "Auto";
+    }
+    const current = this.player.getCurrentQuality();
+    const level = this.qualityLevels.find((l) => l.index === current);
+    return level?.label ?? "Auto";
+  }
+  getSpeedLabel() {
+    const rate = this.player.playbackRate;
+    return rate === 1 ? "Normal" : `${rate}x`;
+  }
+};
+
+// src/ui/Controls.ts
+var Controls = class {
+  constructor(player, wrapper) {
+    this.fullscreenBtn = null;
+    this.hideTimer = null;
+    this.onActivity = () => {
+      this.showControls();
+      this.startHideTimer();
+    };
+    this.player = player;
+    this.wrapper = wrapper;
+    this.element = document.createElement("div");
+    this.element.className = "gallop-controls";
+    this.playIcon = svgIcon(Icons.play);
+    this.pauseIcon = svgIcon(Icons.pause);
+    this.fsEnterIcon = svgIcon(Icons.fullscreen);
+    this.fsExitIcon = svgIcon(Icons.fullscreenExit);
+    this.progressBar = new ProgressBar(player);
+    const row = document.createElement("div");
+    row.className = "gallop-controls-row";
+    this.playPauseBtn = document.createElement("button");
+    this.playPauseBtn.className = "gallop-btn";
+    this.playPauseBtn.setAttribute("aria-label", "Play");
+    this.playPauseBtn.appendChild(this.playIcon.cloneNode(true));
+    this.playPauseBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      player.togglePlay();
+    });
+    row.appendChild(this.playPauseBtn);
+    this.timeDisplay = new TimeDisplay();
+    row.appendChild(this.timeDisplay.element);
+    row.appendChild(this.progressBar.element);
+    this.volumeControl = new VolumeControl(player);
+    row.appendChild(this.volumeControl.element);
+    this.settingsMenu = new SettingsMenu(player);
+    const settingsWrap = document.createElement("div");
+    settingsWrap.style.position = "relative";
+    settingsWrap.appendChild(this.settingsMenu.element);
+    settingsWrap.appendChild(this.settingsMenu.button);
+    row.appendChild(settingsWrap);
+    if (supportsFullscreen()) {
+      this.fullscreenBtn = document.createElement("button");
+      this.fullscreenBtn.className = "gallop-btn";
+      this.fullscreenBtn.setAttribute("aria-label", "Fullscreen");
+      this.fullscreenBtn.appendChild(this.fsEnterIcon.cloneNode(true));
+      this.fullscreenBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        player.toggleFullscreen();
+      });
+      row.appendChild(this.fullscreenBtn);
+    }
+    this.element.appendChild(row);
+    this.bindEvents();
+    this.startHideTimer();
+  }
+  bindEvents() {
+    this.player.on("timeupdate", ({ currentTime, duration }) => {
+      this.timeDisplay.update(currentTime, duration);
+      this.progressBar.update(currentTime, duration, this.player.buffered);
+    });
+    this.player.on("volumechange", ({ volume, muted }) => {
+      this.volumeControl.update(volume, muted);
+    });
+    this.player.on("play", () => this.updatePlayPause(true));
+    this.player.on("pause", () => this.updatePlayPause(false));
+    this.player.on("ended", () => this.updatePlayPause(false));
+    this.player.on("qualitylevels", ({ levels }) => {
+      this.settingsMenu.setQualityLevels(levels);
+    });
+    this.player.on("fullscreenchange", ({ isFullscreen }) => {
+      if (this.fullscreenBtn) {
+        this.fullscreenBtn.innerHTML = "";
+        this.fullscreenBtn.appendChild(
+          isFullscreen ? this.fsExitIcon.cloneNode(true) : this.fsEnterIcon.cloneNode(true)
+        );
+      }
+    });
+    this.wrapper.addEventListener("mousemove", this.onActivity);
+    this.wrapper.addEventListener("mouseenter", this.onActivity);
+    this.wrapper.addEventListener("mouseleave", () => this.hideControls());
+    this.wrapper.addEventListener("click", (e) => {
+      if (e.target === this.player.getVideoElement() || e.target === this.wrapper) {
+        this.player.togglePlay();
+        this.settingsMenu.close();
+      }
+    });
+  }
+  updatePlayPause(playing) {
+    this.playPauseBtn.innerHTML = "";
+    this.playPauseBtn.appendChild(
+      playing ? this.pauseIcon.cloneNode(true) : this.playIcon.cloneNode(true)
+    );
+    this.playPauseBtn.setAttribute("aria-label", playing ? "Pause" : "Play");
+  }
+  showControls() {
+    this.element.classList.remove("gallop-controls-hidden");
+    this.wrapper.style.cursor = "";
+  }
+  hideControls() {
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+    this.element.classList.add("gallop-controls-hidden");
+    this.wrapper.style.cursor = "none";
+  }
+  startHideTimer() {
+    if (this.hideTimer) clearTimeout(this.hideTimer);
+    this.hideTimer = setTimeout(() => this.hideControls(), CONTROLS_HIDE_DELAY);
+  }
+  destroy() {
+    if (this.hideTimer) clearTimeout(this.hideTimer);
+    this.progressBar.destroy();
+    this.volumeControl.destroy();
+    this.wrapper.removeEventListener("mousemove", this.onActivity);
+  }
+};
+
+// src/ui/BigPlayButton.ts
+var BigPlayButton = class {
+  constructor(onClick) {
+    this.element = document.createElement("button");
+    this.element.className = "gallop-big-play";
+    this.element.setAttribute("aria-label", "Play");
+    this.element.appendChild(svgIcon(Icons.play));
+    this.element.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+  }
+  setVisible(visible) {
+    this.element.hidden = !visible;
+  }
+};
+
+// src/ui/LoadingSpinner.ts
+var LoadingSpinner = class {
+  constructor() {
+    this.element = document.createElement("div");
+    this.element.className = "gallop-spinner";
+    this.element.hidden = true;
+    this.element.setAttribute("role", "status");
+    this.element.setAttribute("aria-label", "Loading");
+    const ring = document.createElement("div");
+    ring.className = "gallop-spinner-ring";
+    this.element.appendChild(ring);
+  }
+  setVisible(visible) {
+    this.element.hidden = !visible;
+  }
+};
+
+// src/ui/ErrorOverlay.ts
+var ErrorOverlay = class {
+  constructor(onRetry) {
+    this.element = document.createElement("div");
+    this.element.className = "gallop-error";
+    this.element.hidden = true;
+    this.messageEl = document.createElement("div");
+    this.messageEl.className = "gallop-error-message";
+    this.messageEl.textContent = "An error occurred during playback.";
+    this.element.appendChild(this.messageEl);
+    const retryBtn = document.createElement("button");
+    retryBtn.className = "gallop-error-retry";
+    retryBtn.textContent = "Retry";
+    retryBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onRetry();
+    });
+    this.element.appendChild(retryBtn);
+  }
+  setVisible(visible) {
+    this.element.hidden = !visible;
+  }
+  setMessage(message) {
+    this.messageEl.textContent = message;
+  }
+};
+
+// src/ui/PosterImage.ts
+var PosterImage = class {
+  constructor() {
+    this.element = document.createElement("div");
+    this.element.className = "gallop-poster";
+    this.element.hidden = true;
+  }
+  show(url) {
+    this.element.style.backgroundImage = `url("${url.replace(/"/g, '\\"')}")`;
+    this.element.hidden = false;
+  }
+  hide() {
+    this.element.hidden = true;
+  }
+};
+
+// src/ui/ContextMenu.ts
+var ContextMenu = class {
+  constructor(wrapper, pageUrl) {
+    this.wrapper = wrapper;
+    this.onHide = null;
+    this.handleContextMenu = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const rect = this.wrapper.getBoundingClientRect();
+      let x = e.clientX - rect.left;
+      let y = e.clientY - rect.top;
+      this.element.hidden = false;
+      const menuRect = this.element.getBoundingClientRect();
+      if (x + menuRect.width > rect.width) {
+        x = rect.width - menuRect.width - 4;
+      }
+      if (y + menuRect.height > rect.height) {
+        y = rect.height - menuRect.height - 4;
+      }
+      this.element.style.left = `${Math.max(4, x)}px`;
+      this.element.style.top = `${Math.max(4, y)}px`;
+    };
+    this.handleDocumentClick = () => {
+      this.hide();
+    };
+    this.handleDocumentContext = (e) => {
+      if (!this.wrapper.contains(e.target)) {
+        this.hide();
+      }
+    };
+    const resolvedUrl = pageUrl || window.location.href;
+    this.items = [
+      {
+        label: "About ScaleMule Gallop",
+        action: () => {
+          window.open("https://www.scalemule.com/gallop", "_blank", "noopener");
+        }
+      },
+      {
+        label: "Report a problem",
+        action: () => {
+          const encoded = encodeURIComponent(resolvedUrl);
+          window.open(
+            `https://www.scalemule.com/gallop/report?url=${encoded}`,
+            "_blank",
+            "noopener"
+          );
+        }
+      },
+      {
+        label: "Copy link",
+        action: () => {
+          navigator.clipboard?.writeText(resolvedUrl).catch(() => {
+            const input = document.createElement("input");
+            input.value = resolvedUrl;
+            document.body.appendChild(input);
+            input.select();
+            document.execCommand("copy");
+            document.body.removeChild(input);
+          });
+        }
+      }
+    ];
+    this.element = el("div", { class: "gallop-context-menu" });
+    this.element.hidden = true;
+    for (const item of this.items) {
+      const row = el("div", { class: "gallop-context-menu-item" });
+      row.textContent = item.label;
+      row.addEventListener("click", (e) => {
+        e.stopPropagation();
+        item.action();
+        this.hide();
+      });
+      this.element.appendChild(row);
+    }
+    this.wrapper.addEventListener("contextmenu", this.handleContextMenu);
+    document.addEventListener("click", this.handleDocumentClick);
+    document.addEventListener("contextmenu", this.handleDocumentContext);
+  }
+  hide() {
+    this.element.hidden = true;
+  }
+  destroy() {
+    this.wrapper.removeEventListener("contextmenu", this.handleContextMenu);
+    document.removeEventListener("click", this.handleDocumentClick);
+    document.removeEventListener("contextmenu", this.handleDocumentContext);
+    this.element.remove();
+  }
+};
+
+// src/theme/ThemeManager.ts
+var PROP_MAP = {
+  colorPrimary: "--gallop-color-primary",
+  colorSecondary: "--gallop-color-secondary",
+  colorText: "--gallop-color-text",
+  colorBackground: "--gallop-color-background",
+  colorBuffered: "--gallop-color-buffered",
+  colorProgress: "--gallop-color-progress",
+  controlBarBackground: "--gallop-control-bar-bg",
+  controlBarHeight: "--gallop-control-bar-height",
+  borderRadius: "--gallop-border-radius",
+  fontFamily: "--gallop-font-family",
+  fontSize: "--gallop-font-size",
+  iconSize: "--gallop-icon-size"
+};
+var ThemeManager = class {
+  constructor(theme) {
+    this.theme = theme;
+  }
+  apply(element) {
+    for (const [key, cssVar] of Object.entries(PROP_MAP)) {
+      const value = this.theme[key];
+      if (value) {
+        element.style.setProperty(cssVar, value);
+      }
+    }
+  }
+  update(overrides, element) {
+    this.theme = { ...this.theme, ...overrides };
+    this.apply(element);
+  }
+};
+
+// src/input/KeyboardManager.ts
+var KeyboardManager = class {
+  constructor(player) {
+    this.player = player;
+    this.handler = (e) => {
+      const wrapper = player.getWrapperElement();
+      if (!wrapper.contains(document.activeElement) && document.activeElement !== wrapper) {
+        return;
+      }
+      const tag = e.target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      switch (e.key) {
+        case " ":
+        case "k":
+          e.preventDefault();
+          player.togglePlay();
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          player.seekBackward(SEEK_STEP);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          player.seekForward(SEEK_STEP);
+          break;
+        case "j":
+          e.preventDefault();
+          player.seekBackward(SEEK_STEP_LARGE);
+          break;
+        case "l":
+          e.preventDefault();
+          player.seekForward(SEEK_STEP_LARGE);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          player.volume = Math.min(1, player.volume + VOLUME_STEP);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          player.volume = Math.max(0, player.volume - VOLUME_STEP);
+          break;
+        case "m":
+          e.preventDefault();
+          player.toggleMute();
+          break;
+        case "f":
+          e.preventDefault();
+          player.toggleFullscreen();
+          break;
+        case "0":
+        case "Home":
+          e.preventDefault();
+          player.seek(0);
+          break;
+        case "End":
+          e.preventDefault();
+          player.seek(player.duration);
+          break;
+        case "1":
+        case "2":
+        case "3":
+        case "4":
+        case "5":
+        case "6":
+        case "7":
+        case "8":
+        case "9": {
+          e.preventDefault();
+          const pct = parseInt(e.key) / 10;
+          player.seek(player.duration * pct);
+          break;
+        }
+        case "<":
+          e.preventDefault();
+          this.cycleSpeed(-1);
+          break;
+        case ">":
+          e.preventDefault();
+          this.cycleSpeed(1);
+          break;
+      }
+    };
+    document.addEventListener("keydown", this.handler);
+  }
+  cycleSpeed(direction) {
+    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    const current = this.player.playbackRate;
+    const idx = speeds.indexOf(current);
+    const next = idx + direction;
+    if (next >= 0 && next < speeds.length) {
+      this.player.playbackRate = speeds[next];
+    }
+  }
+  destroy() {
+    document.removeEventListener("keydown", this.handler);
+  }
+};
+
+// src/input/TouchManager.ts
+var TouchManager = class {
+  constructor(player, wrapper) {
+    this.lastTapTime = 0;
+    this.lastTapX = 0;
+    this.tapTimeout = null;
+    this.player = player;
+    this.wrapper = wrapper;
+    this.handler = (e) => {
+      const target = e.target;
+      if (target.closest(".gallop-controls") || target.closest(".gallop-big-play")) {
+        return;
+      }
+      const touch = e.changedTouches[0];
+      const now = Date.now();
+      const timeDiff = now - this.lastTapTime;
+      if (timeDiff < DOUBLE_TAP_DELAY) {
+        if (this.tapTimeout) {
+          clearTimeout(this.tapTimeout);
+          this.tapTimeout = null;
+        }
+        const rect = wrapper.getBoundingClientRect();
+        const x = touch.clientX - rect.left;
+        const halfWidth = rect.width / 2;
+        if (x < halfWidth) {
+          player.seekBackward(SEEK_STEP_LARGE);
+        } else {
+          player.seekForward(SEEK_STEP_LARGE);
+        }
+      } else {
+        this.tapTimeout = setTimeout(() => {
+          player.togglePlay();
+          this.tapTimeout = null;
+        }, DOUBLE_TAP_DELAY);
+      }
+      this.lastTapTime = now;
+      this.lastTapX = touch.clientX;
+    };
+    wrapper.addEventListener("touchend", this.handler);
+  }
+  destroy() {
+    this.wrapper.removeEventListener("touchend", this.handler);
+    if (this.tapTimeout) clearTimeout(this.tapTimeout);
+  }
+};
+
+// src/theme/styles.ts
+var PLAYER_STYLES = `
+/* ===== Gallop Player \u2014 ScaleMule Video Player ===== */
+
+/* --- Foundation --- */
+.gallop-player {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  background: #000;
+  overflow: hidden;
+  border-radius: var(--gallop-border-radius, 8px);
+  font-family: var(--gallop-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-size: var(--gallop-font-size, 13px);
+  color: #fff;
+  user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+  line-height: 1.4;
+}
+
+.gallop-player * {
+  box-sizing: border-box;
+}
+
+.gallop-player.gallop-fullscreen {
+  border-radius: 0;
+  width: 100vw;
+  height: 100vh;
+  max-width: none;
+  aspect-ratio: auto !important;
+}
+
+.gallop-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* --- Icon base --- */
+.gallop-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--gallop-icon-size, 22px);
+  height: var(--gallop-icon-size, 22px);
+  flex-shrink: 0;
+}
+.gallop-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ===================================================
+   BIG PLAY BUTTON \u2014 Signature rounded-rect with gradient
+   =================================================== */
+.gallop-big-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 104px;
+  height: 72px;
+  background: var(--gallop-color-primary, #635bff);
+  border: none;
+  border-radius: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  opacity: 0.92;
+  transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
+  z-index: 4;
+  padding: 0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.gallop-big-play:hover {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1.06);
+  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
+}
+
+.gallop-big-play .gallop-icon {
+  width: 40px;
+  height: 40px;
+  margin-left: 4px;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
+}
+
+.gallop-big-play[hidden] {
+  display: none;
+}
+
+/* When controls are visible during pause, dim the big play button slightly */
+.gallop-player[data-status="paused"] .gallop-big-play {
+  opacity: 0.85;
+}
+
+/* ===================================================
+   LOADING SPINNER \u2014 Brand-colored ring
+   =================================================== */
+.gallop-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 48px;
+  height: 48px;
+  z-index: 3;
+}
+.gallop-spinner[hidden] { display: none; }
+
+.gallop-spinner-ring {
+  width: 100%;
+  height: 100%;
+  border: 3px solid rgba(255, 255, 255, 0.15);
+  border-top-color: var(--gallop-color-primary, #635bff);
+  border-radius: 50%;
+  animation: gallop-spin 0.8s linear infinite;
+}
+
+@keyframes gallop-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ===================================================
+   POSTER IMAGE
+   =================================================== */
+.gallop-poster {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: opacity 0.4s ease;
+}
+.gallop-poster[hidden] { display: none; }
+
+/* ===================================================
+   ERROR OVERLAY
+   =================================================== */
+.gallop-error {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  background: rgba(0, 0, 0, 0.88);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+.gallop-error[hidden] { display: none; }
+
+.gallop-error-message {
+  font-size: 15px;
+  color: rgba(255, 255, 255, 0.75);
+  text-align: center;
+  max-width: 80%;
+}
+
+.gallop-error-retry {
+  padding: 10px 28px;
+  background: var(--gallop-color-primary, #635bff);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.gallop-error-retry:hover {
+  transform: scale(1.04);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+/* ===================================================
+   CONTROL BAR \u2014 Floating rounded pill
+   =================================================== */
+.gallop-controls {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  right: 10px;
+  z-index: 10;
+  background: var(--gallop-control-bar-bg, rgba(0, 0, 0, 0.65));
+  border-radius: 22px;
+  padding: 0;
+  opacity: 1;
+  transition: opacity 0.35s ease;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* Hide controls during active playback (not paused/idle/ready/ended) */
+.gallop-player:not(:hover):not(:focus-within):not([data-status="paused"]):not([data-status="idle"]):not([data-status="ready"]):not([data-status="ended"]) .gallop-controls.gallop-controls-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Also hide big play button during active playback when controls hidden */
+.gallop-player:not(:hover):not(:focus-within)[data-status="playing"] .gallop-big-play {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.35s ease;
+}
+
+.gallop-controls-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--gallop-control-bar-height, 44px);
+  padding: 0 6px 0 8px;
+}
+
+/* --- Control Buttons --- */
+.gallop-btn {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s, transform 0.15s;
+  position: relative;
+}
+.gallop-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  transform: scale(1.05);
+}
+
+/* ===================================================
+   PROGRESS BAR \u2014 Thick, bold, TikTok-inspired
+   =================================================== */
+.gallop-progress-container {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.gallop-progress-bar {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  transition: height 0.15s ease;
+}
+
+.gallop-progress-container:hover .gallop-progress-bar {
+  height: 6px;
+}
+
+.gallop-progress-buffered {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.22);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.gallop-progress-played {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--gallop-color-progress, var(--gallop-color-primary, #635bff));
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.gallop-progress-thumb {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border: 2px solid var(--gallop-color-primary, #635bff);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.15s, transform 0.15s;
+  pointer-events: none;
+}
+
+.gallop-progress-container:hover .gallop-progress-thumb {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+/* ===================================================
+   VOLUME
+   =================================================== */
+.gallop-volume {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.gallop-volume-slider-wrap {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+.gallop-volume:hover .gallop-volume-slider-wrap,
+.gallop-volume-slider-wrap.gallop-volume-expanded {
+  width: 64px;
+}
+
+.gallop-volume-slider {
+  width: 64px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.18);
+  border-radius: 2px;
+  position: relative;
+  cursor: pointer;
+}
+.gallop-volume-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* ===================================================
+   TIME DISPLAY
+   =================================================== */
+.gallop-time {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.85);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  min-width: 40px;
+  letter-spacing: 0.02em;
+}
+
+/* Spacer */
+.gallop-spacer { flex: 1; }
+
+/* ===================================================
+   SETTINGS MENU
+   =================================================== */
+.gallop-settings-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 8px;
+  min-width: 200px;
+  background: var(--gallop-color-background, rgba(24, 24, 32, 0.92));
+  border-radius: 12px;
+  padding: 6px 0;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  z-index: 20;
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+.gallop-settings-menu[hidden] { display: none; }
+
+.gallop-settings-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.9);
+}
+.gallop-settings-header .gallop-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.gallop-settings-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background 0.12s;
+  font-size: 13px;
+  gap: 12px;
+  color: rgba(255, 255, 255, 0.8);
+}
+.gallop-settings-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.gallop-settings-item-active .gallop-icon {
+  color: var(--gallop-color-primary, #635bff);
+}
+
+.gallop-settings-value {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+}
+
+/* ===================================================
+   CONTEXT MENU
+   =================================================== */
+.gallop-context-menu {
+  position: absolute;
+  z-index: 30;
+  min-width: 180px;
+  background: var(--gallop-color-background, rgba(24, 24, 32, 0.94));
+  border-radius: 10px;
+  padding: 4px 0;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+}
+.gallop-context-menu[hidden] { display: none; }
+
+.gallop-context-menu-item {
+  padding: 9px 14px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  transition: background 0.12s;
+  white-space: nowrap;
+}
+.gallop-context-menu-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* ===================================================
+   GALLOP BRANDING WATERMARK
+   =================================================== */
+.gallop-brand {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  background: rgba(0, 0, 0, 0.35);
+  border-radius: 6px;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  pointer-events: none;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: rgba(255, 255, 255, 0.7);
+  text-transform: uppercase;
+}
+
+.gallop-brand-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--gallop-color-primary, #635bff);
+  flex-shrink: 0;
+}
+
+/* Show branding on hover */
+.gallop-player:hover .gallop-brand,
+.gallop-player:focus-within .gallop-brand,
+.gallop-player[data-status="paused"] .gallop-brand,
+.gallop-player[data-status="idle"] .gallop-brand,
+.gallop-player[data-status="ready"] .gallop-brand,
+.gallop-player[data-status="ended"] .gallop-brand {
+  opacity: 1;
+  pointer-events: auto;
+}
+`;
+
+// src/analytics/AnalyticsCollector.ts
+var DEFAULTS = {
+  flushIntervalMs: 3e3,
+  maxBatchSize: 20,
+  maxQueueSize: 300,
+  progressIntervalSeconds: 10
+};
+var AnalyticsCollector = class {
+  constructor(options) {
+    this.queue = [];
+    this.flushTimer = null;
+    this.flushing = false;
+    this.destroyed = false;
+    this.playRequestedAtMs = null;
+    this.ttffMs = null;
+    this.firstFrameSeen = false;
+    this.lastProgressPosition = 0;
+    this.maxPositionSeen = 0;
+    this.watchedSeconds = 0;
+    this.lastHeartbeatPosition = 0;
+    this.bufferStartedAtMs = null;
+    this.totalBufferMs = 0;
+    this.startupQuality = null;
+    this.qualitySwitches = 0;
+    this.lastQuality = null;
+    this.lastEngineStats = null;
+    this.cdnNode = null;
+    this.cdnCacheStatus = null;
+    this.cdnRequestID = null;
+    this.initialDroppedFrames = null;
+    this.droppedFrames = 0;
+    this.isVisible = true;
+    this.observer = null;
+    this.onPlay = () => this.handlePlay();
+    this.onPause = () => this.handlePause();
+    this.onEnded = () => this.handleEnded();
+    this.onSeeked = ({ time }) => this.handleSeeked(time);
+    this.onTimeUpdate = ({ currentTime }) => this.handleTimeUpdate(currentTime);
+    this.onBuffering = ({ isBuffering }) => this.handleBuffering(isBuffering);
+    this.onQualityChange = ({ level }) => this.handleQualityChange(level);
+    this.onError = ({ code, message }) => this.handleError(code, message);
+    this.onVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        this.enqueue("pause", this.player.currentTime, { event_subtype: "document_hidden" }, true);
+        void this.flush(true);
+      }
+    };
+    this.onPageHide = () => {
+      this.enqueue("pause", this.player.currentTime, { event_subtype: "pagehide" }, true);
+      void this.flush(true);
+    };
+    this.client = options.client;
+    this.player = options.player;
+    this.videoId = options.videoId;
+    this.config = options.config ?? {};
+    this.sessionId = this.config.sessionId ?? createSessionId();
+    this.bind();
+    this.start();
+    this.initVisibilityTracking();
+  }
+  setVideoId(videoId) {
+    this.videoId = videoId;
+  }
+  onEngineStats(stats) {
+    this.lastEngineStats = stats;
+    if (stats.cdnNode) this.cdnNode = stats.cdnNode;
+    if (stats.cdnCacheStatus) this.cdnCacheStatus = stats.cdnCacheStatus;
+    if (stats.cdnRequestID) this.cdnRequestID = stats.cdnRequestID;
+    if (stats.kind === "periodic" && stats.droppedFrames !== void 0) {
+      if (this.initialDroppedFrames === null) {
+        this.initialDroppedFrames = stats.droppedFrames;
+      } else {
+        this.droppedFrames = stats.droppedFrames - this.initialDroppedFrames;
+      }
+    }
+  }
+  trackEvent(eventType, timestampSeconds, metadata = {}, urgent = false) {
+    this.enqueue(eventType, timestampSeconds, metadata, urgent);
+  }
+  async destroy() {
+    if (this.destroyed) return;
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    this.unbind();
+    if (this.bufferStartedAtMs !== null) {
+      const durationMs = Date.now() - this.bufferStartedAtMs;
+      this.totalBufferMs += Math.max(0, durationMs);
+      this.bufferStartedAtMs = null;
+    }
+    this.enqueue("pause", this.player.currentTime, { event_subtype: "destroy" }, true);
+    await this.flush(true);
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+      this.flushTimer = null;
+    }
+    this.destroyed = true;
+  }
+  bind() {
+    this.player.on("play", this.onPlay);
+    this.player.on("pause", this.onPause);
+    this.player.on("ended", this.onEnded);
+    this.player.on("seeked", this.onSeeked);
+    this.player.on("timeupdate", this.onTimeUpdate);
+    this.player.on("buffering", this.onBuffering);
+    this.player.on("qualitychange", this.onQualityChange);
+    this.player.on("error", this.onError);
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", this.onVisibilityChange);
+    }
+    if (typeof window !== "undefined") {
+      window.addEventListener("pagehide", this.onPageHide);
+    }
+  }
+  unbind() {
+    this.player.off("play", this.onPlay);
+    this.player.off("pause", this.onPause);
+    this.player.off("ended", this.onEnded);
+    this.player.off("seeked", this.onSeeked);
+    this.player.off("timeupdate", this.onTimeUpdate);
+    this.player.off("buffering", this.onBuffering);
+    this.player.off("qualitychange", this.onQualityChange);
+    this.player.off("error", this.onError);
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.onVisibilityChange);
+    }
+    if (typeof window !== "undefined") {
+      window.removeEventListener("pagehide", this.onPageHide);
+    }
+  }
+  start() {
+    this.flushTimer = setInterval(() => {
+      void this.flush(false);
+    }, this.config.flushIntervalMs ?? DEFAULTS.flushIntervalMs);
+  }
+  handlePlay() {
+    this.playRequestedAtMs = Date.now();
+    this.enqueue("play", this.player.currentTime);
+  }
+  handlePause() {
+    this.enqueue("pause", this.player.currentTime);
+    void this.flush(false);
+  }
+  handleEnded() {
+    this.enqueue("complete", this.player.currentTime, {
+      completion_ratio: safeRatio(this.player.currentTime, this.player.duration)
+    }, true);
+    void this.flush(false);
+  }
+  handleSeeked(time) {
+    this.lastProgressPosition = time;
+    this.maxPositionSeen = Math.max(this.maxPositionSeen, time);
+    this.enqueue("seek", time);
+  }
+  handleTimeUpdate(currentTime) {
+    if (!Number.isFinite(currentTime)) {
+      return;
+    }
+    if (!this.firstFrameSeen && this.playRequestedAtMs !== null) {
+      this.firstFrameSeen = true;
+      this.ttffMs = Math.max(0, Date.now() - this.playRequestedAtMs);
+    }
+    if (this.lastProgressPosition > 0) {
+      const delta = currentTime - this.lastProgressPosition;
+      if (delta > 0 && delta < 5) {
+        this.watchedSeconds += delta;
+      }
+    }
+    this.lastProgressPosition = currentTime;
+    this.maxPositionSeen = Math.max(this.maxPositionSeen, currentTime);
+    const progressInterval = this.config.progressIntervalSeconds ?? DEFAULTS.progressIntervalSeconds;
+    if (Math.abs(currentTime - this.lastHeartbeatPosition) >= progressInterval) {
+      this.lastHeartbeatPosition = currentTime;
+      this.enqueue("play", currentTime, { event_subtype: "heartbeat" });
+    }
+  }
+  initVisibilityTracking() {
+    if (this.config.trackVisibility === false || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    this.observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const wasVisible = this.isVisible;
+        this.isVisible = entry.isIntersecting;
+        if (wasVisible !== this.isVisible) {
+          this.enqueue("play", this.player.currentTime, {
+            event_subtype: "visibility_change",
+            is_visible: this.isVisible,
+            intersection_ratio: round(entry.intersectionRatio, 3)
+          });
+        }
+      }
+    }, { threshold: [0, 0.25, 0.5, 0.75, 1] });
+    const el2 = this.player.getWrapperElement();
+    if (el2) {
+      this.observer.observe(el2);
+    }
+  }
+  handleBuffering(isBuffering) {
+    if (isBuffering) {
+      if (this.bufferStartedAtMs !== null) return;
+      this.bufferStartedAtMs = Date.now();
+      this.enqueue("buffer", this.player.currentTime, { buffering_state: "start" });
+      return;
+    }
+    if (this.bufferStartedAtMs === null) return;
+    const durationMs = Math.max(0, Date.now() - this.bufferStartedAtMs);
+    this.totalBufferMs += durationMs;
+    this.bufferStartedAtMs = null;
+    this.enqueue("buffer", this.player.currentTime, {
+      buffering_state: "end",
+      buffering_duration_ms: Math.round(durationMs)
+    });
+  }
+  handleQualityChange(level) {
+    const label = level.label || `${level.height}p`;
+    if (!this.startupQuality) {
+      this.startupQuality = label;
+    }
+    if (this.lastQuality && this.lastQuality !== label) {
+      this.qualitySwitches += 1;
+    }
+    this.lastQuality = label;
+    this.enqueue("play", this.player.currentTime, {
+      event_subtype: "quality_change",
+      quality_label: label,
+      quality_bitrate: level.bitrate,
+      quality_height: level.height,
+      quality_width: level.width
+    });
+  }
+  handleError(code, message) {
+    this.enqueue("error", this.player.currentTime, {
+      error_code: code,
+      error_message: message,
+      error_classification: classifyError(code, this.lastEngineStats)
+    }, true);
+    void this.flush(false);
+  }
+  enqueue(eventType, timestampSeconds, metadata = {}, urgent = false) {
+    if (!this.videoId) {
+      return;
+    }
+    const quality = this.resolveQuality();
+    const payload = {
+      session_id: this.sessionId,
+      event_type: eventType,
+      timestamp_seconds: Number.isFinite(timestampSeconds) ? round(timestampSeconds, 3) : void 0,
+      quality: quality ?? void 0,
+      metadata: this.buildMetadata(metadata)
+    };
+    this.queue.push(payload);
+    const maxQueue = this.config.maxQueueSize ?? DEFAULTS.maxQueueSize;
+    if (this.queue.length > maxQueue) {
+      this.queue.splice(0, this.queue.length - maxQueue);
+    }
+    if (this.config.debug) {
+      console.debug("[Gallop analytics] queued event", payload);
+    }
+    if (urgent) {
+      void this.flush(false);
+    }
+  }
+  async flush(keepalive) {
+    if (this.flushing || this.queue.length === 0) {
+      return;
+    }
+    this.flushing = true;
+    const maxBatchSize = this.config.maxBatchSize ?? DEFAULTS.maxBatchSize;
+    try {
+      while (this.queue.length > 0) {
+        const batch = this.queue.splice(0, maxBatchSize);
+        for (let i = 0; i < batch.length; i++) {
+          try {
+            await this.client.trackPlayback(this.videoId, batch[i], { keepalive });
+          } catch (err) {
+            if (this.config.debug) {
+              console.warn("[Gallop analytics] failed to send event", { event: batch[i], err });
+            }
+            this.queue.unshift(...batch.slice(i));
+            return;
+          }
+        }
+      }
+    } finally {
+      this.flushing = false;
+    }
+  }
+  buildMetadata(overrides) {
+    const watchSeconds = round(this.watchedSeconds, 3);
+    const currentTime = round(this.player.currentTime, 3);
+    const duration = round(this.player.duration, 3);
+    const rebufferRatio = safeRatio(this.totalBufferMs / 1e3, this.watchedSeconds);
+    const buffered = this.player.buffered;
+    let bufferDepth = 0;
+    for (let i = 0; i < buffered.length; i++) {
+      if (currentTime >= buffered.start(i) && currentTime <= buffered.end(i)) {
+        bufferDepth = buffered.end(i) - currentTime;
+        break;
+      }
+    }
+    const metadata = {
+      ...this.config.metadata ?? {},
+      ...overrides,
+      current_time_seconds: currentTime,
+      duration_seconds: duration,
+      watched_seconds: watchSeconds,
+      max_position_seconds: round(this.maxPositionSeen, 3),
+      watch_through_ratio: safeRatio(this.maxPositionSeen, this.player.duration),
+      completion_ratio: safeRatio(this.player.currentTime, this.player.duration),
+      ttff_ms: this.ttffMs,
+      total_buffer_ms: Math.round(this.totalBufferMs),
+      rebuffer_ratio: rebufferRatio,
+      buffer_depth_seconds: round(bufferDepth, 3),
+      quality_switches: this.qualitySwitches,
+      startup_quality: this.startupQuality,
+      dropped_frames: this.droppedFrames,
+      is_visible: this.isVisible,
+      cdn_node: this.cdnNode,
+      cdn_cache_status: this.cdnCacheStatus,
+      cdn_request_id: this.cdnRequestID,
+      playback_rate: this.player.playbackRate,
+      muted: this.player.muted,
+      volume: round(this.player.volume, 3),
+      status: this.player.status,
+      viewport_width: typeof window !== "undefined" ? window.innerWidth : void 0,
+      viewport_height: typeof window !== "undefined" ? window.innerHeight : void 0,
+      device_pixel_ratio: typeof window !== "undefined" ? window.devicePixelRatio : void 0,
+      hls_bandwidth_estimate_bps: this.lastEngineStats?.bandwidthEstimate,
+      hls_stats_kind: this.lastEngineStats?.kind,
+      hls_level: this.lastEngineStats?.level,
+      hls_fragment_duration: this.lastEngineStats?.fragmentDuration,
+      hls_fragment_size_bytes: this.lastEngineStats?.fragmentSizeBytes,
+      hls_fragment_load_ms: this.lastEngineStats?.fragmentLoadMs,
+      hls_error_type: this.lastEngineStats?.errorType,
+      hls_error_details: this.lastEngineStats?.errorDetails,
+      hls_error_fatal: this.lastEngineStats?.fatal,
+      stats_source: this.lastEngineStats?.statsSource,
+      tao_available: this.lastEngineStats?.taoAvailable
+    };
+    if (this.config.includeNetworkInfo ?? true) {
+      const networkInfo = getNetworkInfo();
+      metadata.connection_effective_type = networkInfo.effectiveType;
+      metadata.connection_downlink_mbps = networkInfo.downlink;
+      metadata.connection_rtt_ms = networkInfo.rtt;
+      metadata.connection_save_data = networkInfo.saveData;
+    }
+    if (this.config.includeDeviceInfo ?? true) {
+      metadata.user_agent = typeof navigator !== "undefined" ? navigator.userAgent : void 0;
+      metadata.language = typeof navigator !== "undefined" ? navigator.language : void 0;
+      metadata.platform = typeof navigator !== "undefined" ? navigator.platform : void 0;
+      metadata.device_memory_gb = typeof navigator !== "undefined" ? navigator.deviceMemory : void 0;
+      metadata.hardware_concurrency = typeof navigator !== "undefined" ? navigator.hardwareConcurrency : void 0;
+      metadata.screen_width = typeof screen !== "undefined" ? screen.width : void 0;
+      metadata.screen_height = typeof screen !== "undefined" ? screen.height : void 0;
+    }
+    return removeUndefined(metadata);
+  }
+  resolveQuality() {
+    const active = this.player.getQualityLevels().find((level) => level.active);
+    if (active) {
+      return active.label || `${active.height}p`;
+    }
+    if (this.lastQuality) {
+      return this.lastQuality;
+    }
+    const currentIndex = this.player.getCurrentQuality();
+    if (currentIndex >= 0) {
+      return `level_${currentIndex}`;
+    }
+    return null;
+  }
+};
+function getNetworkInfo() {
+  if (typeof navigator === "undefined") {
+    return {};
+  }
+  const connection = navigator.connection;
+  if (!connection) {
+    return {};
+  }
+  return {
+    effectiveType: connection.effectiveType,
+    downlink: connection.downlink,
+    rtt: connection.rtt,
+    saveData: connection.saveData
+  };
+}
+function classifyError(code, stats) {
+  const lowered = code.toLowerCase();
+  if (lowered.includes("network") || stats?.errorType?.toLowerCase().includes("network")) {
+    return "network";
+  }
+  if (lowered.includes("media") || stats?.errorType?.toLowerCase().includes("media")) {
+    return "media";
+  }
+  return "unknown";
+}
+function createSessionId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `sess_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+}
+function round(value, digits) {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  const factor = 10 ** digits;
+  return Math.round(value * factor) / factor;
+}
+function safeRatio(numerator, denominator) {
+  if (!Number.isFinite(numerator) || !Number.isFinite(denominator) || denominator <= 0) {
+    return 0;
+  }
+  return round(numerator / denominator, 4);
+}
+function removeUndefined(metadata) {
+  return Object.fromEntries(
+    Object.entries(metadata).filter(([, value]) => value !== void 0)
+  );
+}
+
+// src/utils/csp.ts
+function resolveNonce(explicitNonce) {
+  if (explicitNonce) return explicitNonce;
+  if (typeof document !== "undefined" && document.currentScript instanceof HTMLScriptElement && document.currentScript.nonce) {
+    return document.currentScript.nonce;
+  }
+  if (typeof document !== "undefined") {
+    const el2 = document.querySelector("script[nonce], style[nonce]");
+    if (el2) {
+      return el2.nonce || el2.getAttribute("nonce") || void 0;
+    }
+  }
+  return void 0;
+}
+function detectCSPFailure(styleEl, onFailure) {
+  if (typeof document === "undefined") return;
+  const violationHandler = (e) => {
+    if (e.blockedURI === "inline" || e.violatedDirective.startsWith("style-src")) {
+      onFailure(`CSP blocked style injection: ${e.violatedDirective}`);
+      cleanup();
+    }
+  };
+  document.addEventListener("securitypolicyviolation", violationHandler);
+  requestAnimationFrame(() => {
+    const testEl = styleEl.parentElement?.querySelector(".gallop-player");
+    if (testEl) {
+      const computed = getComputedStyle(testEl);
+      if (computed.position === "static") {
+        onFailure("CSP may have blocked style injection (computed style mismatch)");
+        cleanup();
+      }
+    }
+  });
+  setTimeout(() => {
+    if (!styleEl.sheet) {
+      onFailure("Style sheet not applied (sheet is null)");
+      cleanup();
+    }
+  }, 100);
+  const cleanup = () => {
+    document.removeEventListener("securitypolicyviolation", violationHandler);
+  };
+  setTimeout(cleanup, 2e3);
+}
+
+// src/debug/DebugOverlay.ts
+var DebugOverlay = class {
+  constructor(parent, config, getDiagnostics) {
+    this.parent = parent;
+    this.config = config;
+    this.getDiagnostics = getDiagnostics;
+    this.isExpanded = false;
+    this.container = document.createElement("div");
+    this.container.className = "gallop-debug-overlay";
+    this.container.setAttribute("aria-hidden", "true");
+    this.container.style.cssText = `
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 9999;
+      background: rgba(0, 0, 0, 0.8);
+      color: #00ff00;
+      font-family: monospace;
+      font-size: 10px;
+      padding: 5px;
+      border-radius: 3px;
+      pointer-events: auto;
+      max-width: 300px;
+      max-height: 80%;
+      overflow-y: auto;
+      border: 1px solid #333;
+    `;
+    this.contentEl = document.createElement("div");
+    this.container.appendChild(this.contentEl);
+    const toggleBtn = document.createElement("div");
+    toggleBtn.textContent = "[DEBUG]";
+    toggleBtn.style.cursor = "pointer";
+    toggleBtn.onclick = () => this.toggle();
+    this.container.insertBefore(toggleBtn, this.contentEl);
+    this.parent.appendChild(this.container);
+    this.update();
+    setInterval(() => this.update(), 1e3);
+  }
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+    this.container.setAttribute("aria-hidden", (!this.isExpanded).toString());
+    if (this.isExpanded) {
+      this.container.setAttribute("role", "log");
+    } else {
+      this.container.removeAttribute("role");
+    }
+    this.update();
+  }
+  update() {
+    if (!this.isExpanded) {
+      this.contentEl.innerHTML = "";
+      this.container.style.width = "auto";
+      return;
+    }
+    const diag = this.getDiagnostics();
+    const html = `
+      <div style="margin-top: 5px; border-top: 1px solid #444; padding-top: 5px;">
+        <strong>System</strong><br>
+        v: ${this.config.version}<br>
+        mode: ${this.config.mode}<br>
+        engine: ${this.config.engineType}<br>
+        nonce: ${this.config.nonceStatus}<br>
+        csp: ${this.config.cspStatus}<br>
+        conn: ${this.config.connectionState || "n/a"}<br>
+      </div>
+      <div style="margin-top: 5px; border-top: 1px solid #444; padding-top: 5px;">
+        <strong>Performance</strong><br>
+        bitrate: ${(diag.bitrate / 1e6).toFixed(2)} Mbps<br>
+        buffer: ${diag.bufferLength.toFixed(1)}s<br>
+        fps: ${diag.fps}<br>
+        dropped: ${diag.droppedFrames}<br>
+      </div>
+      <div style="margin-top: 5px; border-top: 1px solid #444; padding-top: 5px;">
+        <button onclick="navigator.clipboard.writeText(JSON.stringify(window.GallopDiagnostics))" style="font-size: 9px; cursor: pointer;">
+          Copy JSON Diagnostics
+        </button>
+      </div>
+    `;
+    this.contentEl.innerHTML = html;
+    window.GallopDiagnostics = diag;
+  }
+  destroy() {
+    this.container.remove();
+  }
+};
+
+// src/version.ts
+var GALLOP_VERSION = "0.0.1";
+
+// src/core/GallopPlayerCore.ts
+var GallopPlayerCore = class extends EventEmitter {
+  constructor(container, config = {}) {
+    super();
+    this.engine = null;
+    this.client = null;
+    this.controls = null;
+    this.bigPlayButton = null;
+    this.loadingSpinner = null;
+    this.errorOverlay = null;
+    this.posterImage = null;
+    this.contextMenu = null;
+    this.keyboardManager = null;
+    this.touchManager = null;
+    this.analyticsCollector = null;
+    this.styleEl = null;
+    this.debugOverlay = null;
+    this.cspStatus = "pending";
+    this.nonceStatus = "none";
+    this.destroyed = false;
+    this.engineStats = null;
+    this.container = container;
+    this.config = config;
+    this.state = new PlayerState((status) => {
+      this.emit("statuschange", { status });
+      this.updateUIState();
+    });
+    this.themeManager = new ThemeManager({ ...DEFAULT_THEME, ...config.theme });
+    if (config.apiKey || config.embedToken) {
+      this.client = new ScaleMuleClient({
+        apiKey: config.apiKey,
+        embedToken: config.embedToken,
+        baseUrl: config.apiBaseUrl
+      });
+    }
+    this.createDOM();
+    this.bindVideoEvents();
+    if (config.controls !== false) {
+      this.mountUI();
+    }
+    if (config.keyboard !== false) {
+      this.keyboardManager = new KeyboardManager(this);
+    }
+    if (config.touch !== false) {
+      this.touchManager = new TouchManager(this, this.wrapper);
+    }
+    this.initializeAnalytics();
+    if (this.config.debug) {
+      this.initializeDebugOverlay();
+    }
+    if (config.videoId && this.client) {
+      void this.loadVideoById(config.videoId);
+    } else if (config.src) {
+      void this.loadSource(config.src);
+    }
+  }
+  // --- DOM Setup ---
+  createDOM() {
+    this.styleEl = document.createElement("style");
+    const nonce = resolveNonce(this.config.nonce);
+    if (nonce) {
+      this.styleEl.nonce = nonce;
+      this.nonceStatus = this.config.nonce ? "explicit" : "auto";
+    }
+    this.styleEl.textContent = PLAYER_STYLES;
+    this.container.appendChild(this.styleEl);
+    detectCSPFailure(this.styleEl, (msg) => {
+      this.cspStatus = "blocked";
+      this.emit("error", { code: "CSP_BLOCKED", message: msg });
+    });
+    if (this.cspStatus === "pending") {
+      this.cspStatus = "applied";
+    }
+    this.wrapper = document.createElement("div");
+    this.wrapper.className = "gallop-player";
+    this.wrapper.setAttribute("tabindex", "0");
+    this.themeManager.apply(this.wrapper);
+    const aspectRatio = this.config.aspectRatio ?? DEFAULT_CONFIG.aspectRatio;
+    const [w, h] = aspectRatio.split(":").map(Number);
+    if (w && h) {
+      this.wrapper.style.aspectRatio = `${w} / ${h}`;
+    }
+    this.video = document.createElement("video");
+    this.video.className = "gallop-video";
+    this.video.playsInline = true;
+    this.video.preload = "metadata";
+    if (this.config.muted ?? DEFAULT_CONFIG.muted) {
+      this.video.muted = true;
+    }
+    if (this.config.loop ?? DEFAULT_CONFIG.loop) {
+      this.video.loop = true;
+    }
+    this.wrapper.appendChild(this.video);
+    this.container.appendChild(this.wrapper);
+  }
+  mountUI() {
+    this.posterImage = new PosterImage();
+    this.wrapper.appendChild(this.posterImage.element);
+    this.bigPlayButton = new BigPlayButton(() => this.togglePlay());
+    this.wrapper.appendChild(this.bigPlayButton.element);
+    this.loadingSpinner = new LoadingSpinner();
+    this.wrapper.appendChild(this.loadingSpinner.element);
+    this.errorOverlay = new ErrorOverlay(() => this.retry());
+    this.wrapper.appendChild(this.errorOverlay.element);
+    this.controls = new Controls(this, this.wrapper);
+    this.wrapper.appendChild(this.controls.element);
+    this.contextMenu = new ContextMenu(this.wrapper, this.config.pageUrl);
+    this.wrapper.appendChild(this.contextMenu.element);
+    const brand = document.createElement("div");
+    brand.className = "gallop-brand";
+    const dot = document.createElement("span");
+    dot.className = "gallop-brand-dot";
+    brand.appendChild(dot);
+    brand.appendChild(document.createTextNode("Gallop"));
+    this.wrapper.appendChild(brand);
+    if (this.config.poster) {
+      this.posterImage.show(this.config.poster);
+    }
+  }
+  bindVideoEvents() {
+    const v = this.video;
+    v.addEventListener("play", () => {
+      this.state.transition("playing");
+      this.emit("play");
+    });
+    v.addEventListener("pause", () => {
+      if (!this.state.isEnded) {
+        this.state.transition("paused");
+        this.emit("pause");
+      }
+    });
+    v.addEventListener("ended", () => {
+      this.state.transition("ended");
+      this.emit("ended");
+    });
+    v.addEventListener("timeupdate", () => {
+      this.emit("timeupdate", {
+        currentTime: v.currentTime,
+        duration: v.duration
+      });
+    });
+    v.addEventListener("volumechange", () => {
+      this.emit("volumechange", {
+        volume: v.volume,
+        muted: v.muted
+      });
+    });
+    v.addEventListener("waiting", () => {
+      this.state.transition("buffering");
+      this.emit("buffering", { isBuffering: true });
+    });
+    v.addEventListener("playing", () => {
+      this.state.transition("playing");
+      this.emit("buffering", { isBuffering: false });
+    });
+    v.addEventListener("canplay", () => {
+      if (this.state.status === "loading") {
+        this.state.transition("ready");
+        this.emit("ready");
+        if (this.config.autoplay ?? DEFAULT_CONFIG.autoplay) {
+          this.play();
+        }
+      }
+    });
+    v.addEventListener("error", () => {
+      const err = v.error;
+      this.state.transition("error");
+      this.emit("error", {
+        code: `MEDIA_ERR_${err?.code ?? 0}`,
+        message: err?.message ?? "Playback error"
+      });
+    });
+    v.addEventListener("ratechange", () => {
+      this.emit("ratechange", { rate: v.playbackRate });
+    });
+  }
+  // --- Loading ---
+  async loadVideoById(videoId) {
+    if (!this.client) {
+      this.emit("error", { code: "NO_API_KEY", message: "API key required to load video by ID" });
+      return;
+    }
+    this.state.transition("loading");
+    this.analyticsCollector?.setVideoId(videoId);
+    try {
+      const metadata = await this.client.getVideoMetadata(videoId);
+      if (metadata.poster && this.posterImage) {
+        this.posterImage.show(metadata.poster);
+      }
+      this.loadSource(metadata.playlistUrl);
+    } catch (err) {
+      this.state.transition("error");
+      this.emit("error", {
+        code: "API_ERROR",
+        message: err instanceof Error ? err.message : "Failed to load video"
+      });
+    }
+  }
+  loadSource(url) {
+    this.state.transition("loading");
+    try {
+      this.engine?.destroy();
+      this.engine = createEngine(
+        { apiKey: this.config.apiKey, embedToken: this.config.embedToken },
+        this.config.hlsConfig
+      );
+      this.engine.on("qualitylevels", (levels) => {
+        this.emit("qualitylevels", { levels });
+      });
+      this.engine.on("qualitychange", (level) => {
+        this.emit("qualitychange", { level });
+      });
+      this.engine.on("error", (err) => {
+        const e = err;
+        this.state.transition("error");
+        this.emit("error", e);
+      });
+      this.engine.on("stats", (stats) => {
+        const s = stats;
+        this.engineStats = s;
+        this.analyticsCollector?.onEngineStats(s);
+        this.emit("enginestats", { stats: s });
+      });
+      this.engine.load(url, this.video);
+      if (this.config.startTime) {
+        this.video.currentTime = this.config.startTime;
+      }
+      return Promise.resolve();
+    } catch (err) {
+      this.state.transition("error");
+      this.emit("error", {
+        code: "ENGINE_ERROR",
+        message: err instanceof Error ? err.message : "Failed to initialize player"
+      });
+      return Promise.reject(err);
+    }
+  }
+  // --- Diagnostics & Debug ---
+  getDiagnostics() {
+    return {
+      version: GALLOP_VERSION,
+      mode: "inline",
+      engineType: this.engine?.constructor.name || "none",
+      bitrate: this.engineStats?.bandwidthEstimate || 0,
+      bufferLength: this.getBufferLength(),
+      fps: this.engineStats?.totalFrames || 0,
+      // Simplified
+      droppedFrames: this.engineStats?.droppedFrames || 0,
+      totalFrames: this.engineStats?.totalFrames || 0,
+      status: this.state.status,
+      isMuted: this.video.muted,
+      volume: this.video.volume,
+      playbackRate: this.video.playbackRate,
+      currentTime: this.video.currentTime,
+      duration: this.video.duration,
+      nonceStatus: this.nonceStatus,
+      cspStatus: this.cspStatus
+    };
+  }
+  getBufferLength() {
+    const time = this.video.currentTime;
+    const buffered = this.video.buffered;
+    for (let i = 0; i < buffered.length; i++) {
+      if (time >= buffered.start(i) && time <= buffered.end(i)) {
+        return buffered.end(i) - time;
+      }
+    }
+    return 0;
+  }
+  async query(key) {
+    switch (key) {
+      case "currentTime":
+        return this.video.currentTime;
+      case "duration":
+        return this.video.duration;
+      case "volume":
+        return this.video.volume;
+      case "muted":
+        return this.video.muted;
+      case "playbackRate":
+        return this.video.playbackRate;
+      case "status":
+        return this.state.status;
+      case "isFullscreen":
+        return this.isFullscreen;
+      case "currentQuality":
+        return this.getCurrentQuality();
+      case "qualityLevels":
+        return this.getQualityLevels();
+      case "diagnostics":
+        return this.getDiagnostics();
+      default:
+        return Promise.reject(new Error(`Unknown query key: ${key}`));
+    }
+  }
+  initializeDebugOverlay() {
+    const diag = this.getDiagnostics();
+    this.debugOverlay = new DebugOverlay(
+      this.wrapper,
+      {
+        version: diag.version,
+        mode: diag.mode,
+        engineType: diag.engineType,
+        nonceStatus: diag.nonceStatus,
+        cspStatus: diag.cspStatus
+      },
+      () => this.getDiagnostics()
+    );
+  }
+  retry() {
+    if (this.config.videoId && this.client) {
+      void this.loadVideoById(this.config.videoId);
+    } else if (this.config.src) {
+      void this.loadSource(this.config.src);
+    }
+  }
+  // --- Playback Controls ---
+  async play() {
+    try {
+      this.posterImage?.hide();
+      await this.video.play();
+    } catch (err) {
+      if (err instanceof Error) {
+        if (err.name === "NotAllowedError") {
+          this.analyticsCollector?.trackEvent("error", this.currentTime, {
+            event_subtype: "autoplay_blocked",
+            error_code: "AUTOPLAY_BLOCKED",
+            error_message: err.message
+          });
+        }
+        if (err.name !== "AbortError") {
+          this.emit("error", { code: "PLAY_FAILED", message: err.message });
+        }
+      }
+    }
+  }
+  pause() {
+    this.video.pause();
+    return Promise.resolve();
+  }
+  togglePlay() {
+    if (this.video.paused || this.video.ended) {
+      return this.play();
+    } else {
+      return this.pause();
+    }
+  }
+  seek(time) {
+    const t = clamp(time, 0, this.duration);
+    this.video.currentTime = t;
+    this.emit("seeked", { time: t });
+    return Promise.resolve();
+  }
+  seekForward(seconds = 5) {
+    void this.seek(this.currentTime + seconds);
+  }
+  seekBackward(seconds = 5) {
+    void this.seek(this.currentTime - seconds);
+  }
+  // --- Volume ---
+  get volume() {
+    return this.video.volume;
+  }
+  set volume(v) {
+    this.video.volume = clamp(v, 0, 1);
+  }
+  get muted() {
+    return this.video.muted;
+  }
+  set muted(m) {
+    this.video.muted = m;
+  }
+  toggleMute() {
+    this.video.muted = !this.video.muted;
+  }
+  // --- Time ---
+  get currentTime() {
+    return this.video.currentTime;
+  }
+  get duration() {
+    return this.video.duration || 0;
+  }
+  get paused() {
+    return this.video.paused;
+  }
+  get buffered() {
+    return this.video.buffered;
+  }
+  // --- Quality ---
+  getQualityLevels() {
+    return this.engine?.getQualityLevels() ?? [];
+  }
+  setQualityLevel(index) {
+    this.engine?.setQualityLevel(index);
+    return Promise.resolve();
+  }
+  setAutoQuality() {
+    this.engine?.setAutoQuality();
+    return Promise.resolve();
+  }
+  isAutoQuality() {
+    return this.engine?.isAutoQuality() ?? true;
+  }
+  getCurrentQuality() {
+    return this.engine?.getCurrentQuality() ?? -1;
+  }
+  // --- Playback Rate ---
+  get playbackRate() {
+    return this.video.playbackRate;
+  }
+  set playbackRate(rate) {
+    if (SPEED_PRESETS.includes(rate)) {
+      this.video.playbackRate = rate;
+    }
+  }
+  // --- Fullscreen ---
+  async toggleFullscreen() {
+    const fsEl = document.fullscreenElement ?? document.webkitFullscreenElement;
+    if (fsEl) {
+      await this.exitFullscreen();
+    } else {
+      await this.enterFullscreen();
+    }
+  }
+  async enterFullscreen() {
+    const el2 = this.wrapper;
+    try {
+      if (el2.requestFullscreen) {
+        await el2.requestFullscreen();
+      } else if (el2.webkitRequestFullscreen) {
+        await el2.webkitRequestFullscreen();
+      }
+      this.wrapper.classList.add("gallop-fullscreen");
+      this.emit("fullscreenchange", { isFullscreen: true });
+    } catch {
+    }
+  }
+  async exitFullscreen() {
+    const doc = document;
+    try {
+      if (document.exitFullscreen) {
+        await document.exitFullscreen();
+      } else if (doc.webkitExitFullscreen) {
+        await doc.webkitExitFullscreen();
+      }
+      this.wrapper.classList.remove("gallop-fullscreen");
+      this.emit("fullscreenchange", { isFullscreen: false });
+    } catch {
+    }
+  }
+  get isFullscreen() {
+    const fsEl = document.fullscreenElement ?? document.webkitFullscreenElement;
+    return fsEl === this.wrapper;
+  }
+  // --- State ---
+  get status() {
+    return this.state.status;
+  }
+  getVideoElement() {
+    return this.video;
+  }
+  getWrapperElement() {
+    return this.wrapper;
+  }
+  // --- UI Updates ---
+  updateUIState() {
+    const status = this.state.status;
+    this.bigPlayButton?.setVisible(status === "idle" || status === "ready" || status === "paused" || status === "ended");
+    this.loadingSpinner?.setVisible(status === "loading" || status === "buffering");
+    this.errorOverlay?.setVisible(status === "error");
+    if (status === "playing") {
+      this.posterImage?.hide();
+    }
+    this.wrapper.setAttribute("data-status", status);
+  }
+  // --- Cleanup ---
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.keyboardManager?.destroy();
+    this.touchManager?.destroy();
+    this.contextMenu?.destroy();
+    this.controls?.destroy();
+    void this.analyticsCollector?.destroy();
+    this.engine?.destroy();
+    this.state.reset();
+    this.emit("destroy");
+    this.removeAllListeners();
+    this.wrapper.remove();
+    this.styleEl?.remove();
+  }
+  initializeAnalytics() {
+    const analyticsConfig = this.config.analytics;
+    const enabled = analyticsConfig?.enabled ?? true;
+    if (!enabled || !this.client) {
+      return;
+    }
+    const videoId = analyticsConfig?.videoId ?? this.config.videoId;
+    if (!videoId) {
+      if (analyticsConfig?.debug) {
+        console.warn("[Gallop analytics] disabled: no videoId available");
+      }
+      return;
+    }
+    this.analyticsCollector = new AnalyticsCollector({
+      client: this.client,
+      player: this,
+      videoId,
+      config: analyticsConfig
+    });
+  }
+};
+
+export { GALLOP_VERSION, GallopPlayerCore };