@aranova/tracking-react 1.18.0 → 1.19.0

package/dist/client.js

@@ -34,10 +34,15 @@ __export(client_exports, {
   AdPlatformTracking: () => AdPlatformTracking,
   BookingHandoffLink: () => BookingHandoffLink,
   ConsentBanner: () => ConsentBanner,
+  DEFAULT_VIDEO_CHECKPOINTS: () => DEFAULT_VIDEO_CHECKPOINTS,
   GoogleAdsTracking: () => GoogleAdsTracking,
   PhoneField: () => PhoneField,
+  TrackedVideo: () => TrackedVideo,
+  TrackedVideoStage: () => TrackedVideoStage,
   createLeadFormSubmit: () => createLeadFormSubmit,
   createTracking: () => createTracking,
+  streamManifestUrl: () => streamManifestUrl,
+  streamPosterUrl: () => streamPosterUrl,
   useBookingHandoffUrl: () => useBookingHandoffUrl,
   useBookingIntegration: () => useBookingIntegration,
   useBookingSlots: () => useBookingSlots,
@@ -48,6 +53,7 @@ __export(client_exports, {
   useGclid: () => useGclid,
   usePhoneConfig: () => usePhoneConfig,
   usePhoneField: () => usePhoneField,
+  useTrackedVideoConfig: () => useTrackedVideoConfig,
   useTrackingParams: () => useTrackingParams
 });
 module.exports = __toCommonJS(client_exports);
@@ -307,7 +313,8 @@ var TRACKING_CAPABILITIES = [
   "form_capture",
   "phone_click_capture",
   "phone_fields",
-  "typed_form_submit"
+  "typed_form_submit",
+  "video_tracking"
 ];
 var CAPABILITY_DOM_ATTRIBUTE = "data-aranova-capability";
 var registered = /* @__PURE__ */ new Set();
@@ -1088,8 +1095,48 @@ function parseTrigger(value) {
   if (typeof t.threshold_seconds === "number") spec.threshold_seconds = t.threshold_seconds;
   if (typeof t.page_threshold === "number") spec.page_threshold = t.page_threshold;
   if (typeof t.page_name === "string") spec.page_name = t.page_name;
+  if (t.metric === "percent" || t.metric === "seconds") spec.metric = t.metric;
+  if (typeof t.threshold === "number") spec.threshold = t.threshold;
+  if (typeof t.video_id === "string" || t.video_id === null) spec.video_id = t.video_id;
   return spec;
 }
+function parseVideoEntry(fallbackKey2, entry) {
+  const key = typeof entry.key === "string" && entry.key ? entry.key : fallbackKey2;
+  if (!key) return null;
+  const host = typeof entry.host === "string" ? entry.host : "";
+  const title = typeof entry.title === "string" && entry.title ? entry.title : key;
+  const sourcesRaw = isRecord(entry.sources) ? entry.sources : null;
+  const desktop = sourcesRaw && typeof sourcesRaw.desktop === "string" ? sourcesRaw.desktop : typeof entry.desktop_uid === "string" ? entry.desktop_uid : "";
+  if (!host || !desktop) return null;
+  const mobile = sourcesRaw && typeof sourcesRaw.mobile === "string" ? sourcesRaw.mobile : typeof entry.mobile_uid === "string" ? entry.mobile_uid : null;
+  const posterTime = typeof entry.poster_time === "number" ? entry.poster_time : typeof entry.poster_time_s === "number" ? entry.poster_time_s : 4;
+  return {
+    key,
+    title,
+    host,
+    sources: { desktop, mobile },
+    poster_time: posterTime,
+    duration_s: typeof entry.duration_s === "number" ? entry.duration_s : null
+  };
+}
+function parseVideos(value) {
+  const out = {};
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      if (!isRecord(item)) continue;
+      const parsed = parseVideoEntry("", item);
+      if (parsed) out[parsed.key] = parsed;
+    }
+    return out;
+  }
+  if (!isRecord(value)) return out;
+  for (const [key, entry] of Object.entries(value)) {
+    if (!isRecord(entry)) continue;
+    const parsed = parseVideoEntry(key, entry);
+    if (parsed) out[parsed.key] = parsed;
+  }
+  return out;
+}
 function parseConversionConfig(raw) {
   if (!raw || typeof raw !== "object") return null;
   const obj = raw;
@@ -1140,7 +1187,8 @@ function parseConversionConfig(raw) {
     goals,
     linked_hostnames: Array.isArray(obj.linked_hostnames) ? obj.linked_hostnames.filter((h) => typeof h === "string" && h.length > 0) : [],
     integrations: parseIntegrations(obj.integrations),
-    lead_forms: parseLeadForms(obj.lead_forms)
+    lead_forms: parseLeadForms(obj.lead_forms),
+    videos: parseVideos(obj.videos)
   };
 }
 function parseLeadForms(value) {
@@ -1386,6 +1434,21 @@ function automaticThresholdMet(goal, eventType, metadata) {
     case "form_start":
     case "phone_click":
       return true;
+    case "video_play":
+      return trigger.video_id == null || hasStringField(metadata, "video_id") && metadata.video_id === trigger.video_id;
+    case "video_progress": {
+      if (trigger.video_id != null && (!hasStringField(metadata, "video_id") || metadata.video_id !== trigger.video_id)) {
+        return false;
+      }
+      if (typeof trigger.threshold !== "number") return false;
+      if (trigger.metric === "seconds") {
+        return hasNumberField(metadata, "watched_s") && metadata.watched_s >= trigger.threshold;
+      }
+      if (trigger.metric === "percent") {
+        return hasNumberField(metadata, "max_percent") && metadata.max_percent >= trigger.threshold || hasNumberField(metadata, "watched_percent") && metadata.watched_percent >= trigger.threshold;
+      }
+      return false;
+    }
     default:
       return false;
   }
@@ -1422,6 +1485,9 @@ var RETRY_BASE_MS = 5e3;
 var RETRY_MAX_MS = 5 * 6e4;
 var runtimes = /* @__PURE__ */ new Map();
 var configuredIds = /* @__PURE__ */ new Set();
+var EMPTY_GOALS = [];
+var EMPTY_STRINGS = [];
+var EMPTY_VIDEOS = {};
 var scriptLoad = null;
 var jsInitialized = false;
 function cacheKey2(url) {
@@ -1612,11 +1678,11 @@ var TrackingConfigRuntime = class {
     void this.flush();
   }
   listGoals() {
-    return this.current?.goals ?? [];
+    return this.current?.goals ?? EMPTY_GOALS;
   }
   /** Sibling hostnames for the linker — read from the cached object even while unconfirmed. */
   linkedHostnames() {
-    return this.current?.linked_hostnames ?? [];
+    return this.current?.linked_hostnames ?? EMPTY_STRINGS;
   }
   /**
    * Integration blocks, from the cached object even while unconfirmed: the booking fallback
@@ -1629,6 +1695,14 @@ var TrackingConfigRuntime = class {
   leadForms() {
     return this.current?.lead_forms ?? null;
   }
+  /** Configured Cloudflare Stream tracked videos for this site. */
+  videos() {
+    return this.current?.videos ?? EMPTY_VIDEOS;
+  }
+  /** Look up one configured Cloudflare Stream tracked video by key. */
+  getVideo(key) {
+    return this.current?.videos?.[key] ?? null;
+  }
   async revalidateNow() {
     try {
       const headers = {};
@@ -1785,6 +1859,16 @@ var TrackingConfigRuntime = class {
         this.scheduleRetry();
         return;
       }
+      if (outcome === "fired" && typeof window !== "undefined" && typeof window.fbq === "function") {
+        try {
+          window.fbq("trackCustom", item.key, {
+            ...value != null ? { value } : {},
+            ...currency ? { currency } : {},
+            ...item.transactionId ? { transaction_id: item.transactionId } : {}
+          });
+        } catch {
+        }
+      }
       this.conversionQueue.shift();
     }
   }
@@ -1928,12 +2012,24 @@ function createConversionAutoFire(store) {
       const firing = goal.firing;
       const cents = firing.value_cents ?? null;
       const currency = firing.currency ?? null;
-      fireConversionWithConsent({
+      const value = cents != null && currency ? fromMinor(cents, currency) : null;
+      const outcome = fireConversionWithConsent({
         sendTo: firing.send_to,
-        value: cents != null && currency ? fromMinor(cents, currency) : null,
+        value,
         currency,
         transactionId
       });
+      if (outcome === "fired" && typeof window !== "undefined" && typeof window.fbq === "function") {
+        try {
+          window.fbq("trackCustom", goal.key, {
+            event_type: eventType,
+            ...value != null ? { value } : {},
+            ...currency ? { currency } : {},
+            transaction_id: transactionId
+          });
+        } catch {
+        }
+      }
     }
   }
   return {
@@ -2066,6 +2162,18 @@ var EVENT_SEMANTICS = {
     category: "page",
     outcomeRole: "navigation",
     clientVisibility: "simple"
+  },
+  video_play: {
+    label: "Video played",
+    category: "engagement",
+    outcomeRole: "engagement",
+    clientVisibility: "simple"
+  },
+  video_progress: {
+    label: "Video watched",
+    category: "engagement",
+    outcomeRole: "engagement",
+    clientVisibility: "detailed"
   }
 };
 function getEventSemantics(eventName) {
@@ -2653,14 +2761,31 @@ function createTrackingClient(config) {
       metadata: input.metadata ?? null,
       occurred_at: occurredAt
     });
-    if (queue.length >= maxQueueSize || input.eventType === "form_details" || getEventSemantics(input.eventType)?.outcomeRole === "lead") {
+    const triggerReason = input.metadata?.trigger;
+    const isUrgentVideoEvent = input.eventType === "video_play" || input.eventType === "video_progress" && (triggerReason === "ended" || triggerReason === "goal" || triggerReason === "checkpoint");
+    if (queue.length >= maxQueueSize || input.eventType === "form_details" || getEventSemantics(input.eventType)?.outcomeRole === "lead" || isUrgentVideoEvent) {
       void flush();
     } else {
       scheduleFlush();
     }
   }
+  const beforeUnloadListeners = /* @__PURE__ */ new Set();
+  let runningBeforeUnload = false;
   function flushOnUnload() {
     if (destroyed) return;
+    if (!runningBeforeUnload && beforeUnloadListeners.size > 0) {
+      runningBeforeUnload = true;
+      try {
+        for (const listener of beforeUnloadListeners) {
+          try {
+            listener();
+          } catch {
+          }
+        }
+      } finally {
+        runningBeforeUnload = false;
+      }
+    }
     bufferQueued();
     clearScheduledFlush();
     if (pending.length === 0) return;
@@ -2681,6 +2806,12 @@ function createTrackingClient(config) {
     trackEvent,
     flush,
     flushBeacon: flushOnUnload,
+    onBeforeUnload: (listener) => {
+      beforeUnloadListeners.add(listener);
+      return () => {
+        beforeUnloadListeners.delete(listener);
+      };
+    },
     getSessionId: () => sessionId,
     getVisitorId: () => visitorId,
     destroy: () => {
@@ -2691,6 +2822,7 @@ function createTrackingClient(config) {
       destroyed = true;
       clearScheduledFlush();
       queue = [];
+      beforeUnloadListeners.clear();
       if (typeof window !== "undefined") {
         window.removeEventListener("pagehide", flushOnUnload);
         window.removeEventListener("visibilitychange", onVisibilityChange);
@@ -2991,6 +3123,86 @@ var timeOnSiteConfigSchema = z15.strictObject({
   thresholdSeconds: z15.int().check(z15.positive())
 });
 
+// ../tracking-core/src/events/video.ts
+var z16 = __toESM(require("zod/mini"));
+
+// ../tracking-core/src/video-ranges.ts
+var VIDEO_ID_MAX_LENGTH = 64;
+var VIDEO_ID_PATTERN = /^[A-Za-z0-9_-]+$/;
+function roundVideoSeconds(value) {
+  if (!Number.isFinite(value) || value < 0) return 0;
+  return Math.round(value * 100) / 100;
+}
+function mergeVideoRanges(ranges, epsilonSeconds = 0.25) {
+  const valid2 = ranges.filter((r) => Number.isFinite(r.start_s) && Number.isFinite(r.end_s) && r.end_s > r.start_s).map((r) => ({
+    start_s: roundVideoSeconds(r.start_s),
+    end_s: roundVideoSeconds(r.end_s)
+  })).filter((r) => r.end_s - r.start_s >= 0.05).sort((a, b) => a.start_s - b.start_s || a.end_s - b.end_s);
+  if (valid2.length === 0) return [];
+  const merged = [{ ...valid2[0] }];
+  for (let i = 1; i < valid2.length; i += 1) {
+    const cur = valid2[i];
+    const last = merged[merged.length - 1];
+    if (cur.start_s <= last.end_s + epsilonSeconds) {
+      last.end_s = roundVideoSeconds(Math.max(last.end_s, cur.end_s));
+    } else {
+      merged.push({ ...cur });
+    }
+  }
+  return merged;
+}
+function sumVideoRangesSeconds(ranges, durationSeconds = 0) {
+  const merged = mergeVideoRanges(ranges);
+  const raw = merged.reduce((acc, r) => acc + Math.max(0, r.end_s - r.start_s), 0);
+  const clamped = durationSeconds > 0 ? Math.min(raw, durationSeconds) : raw;
+  return roundVideoSeconds(clamped);
+}
+
+// ../tracking-core/src/events/video.ts
+var videoIdSchema = z16.string().check(z16.minLength(1), z16.maxLength(VIDEO_ID_MAX_LENGTH), z16.regex(VIDEO_ID_PATTERN));
+var videoVariantSchema = z16.enum(["16x9", "9x16"]);
+var videoProgressTriggerReasonSchema = z16.enum([
+  "checkpoint",
+  "goal",
+  "pause",
+  "seek",
+  "ended",
+  "page_exit"
+]);
+var videoRangeSchema = z16.strictObject({
+  start_s: z16.number().check(z16.gte(0)),
+  end_s: z16.number().check(z16.gte(0))
+});
+var videoPlayMetadataSchema = z16.strictObject({
+  video_id: videoIdSchema,
+  variant: videoVariantSchema,
+  current_s: z16.number().check(z16.gte(0)),
+  duration_s: z16.number().check(z16.gte(0)),
+  play_sequence: z16.int().check(z16.gte(1)),
+  page: z16.strictObject({
+    path: z16.string()
+  })
+});
+var videoPlayConfigSchema = z16.strictObject({});
+var videoProgressMetadataSchema = z16.strictObject({
+  video_id: videoIdSchema,
+  variant: videoVariantSchema,
+  trigger: videoProgressTriggerReasonSchema,
+  current_s: z16.number().check(z16.gte(0)),
+  furthest_s: z16.number().check(z16.gte(0)),
+  watched_s: z16.number().check(z16.gte(0)),
+  duration_s: z16.number().check(z16.gte(0)),
+  max_percent: z16.int().check(z16.gte(0), z16.lte(100)),
+  watched_percent: z16.int().check(z16.gte(0), z16.lte(100)),
+  play_count: z16.int().check(z16.gte(1)),
+  seek_count: z16.int().check(z16.gte(0)),
+  ranges: z16.array(videoRangeSchema),
+  page: z16.strictObject({
+    path: z16.string()
+  })
+});
+var videoProgressConfigSchema = z16.strictObject({});
+
 // ../tracking-core/src/events/registry.ts
 var EVENT_REGISTRY = {
   // --- automatic triggers ---
@@ -3057,6 +3269,18 @@ var EVENT_REGISTRY = {
     metadataSchema: siteLinkArrivalMetadataSchema,
     configSchema: siteLinkArrivalConfigSchema
   },
+  video_play: {
+    kind: "automatic",
+    semantics: EVENT_SEMANTICS.video_play,
+    metadataSchema: videoPlayMetadataSchema,
+    configSchema: videoPlayConfigSchema
+  },
+  video_progress: {
+    kind: "automatic",
+    semantics: EVENT_SEMANTICS.video_progress,
+    metadataSchema: videoProgressMetadataSchema,
+    configSchema: videoProgressConfigSchema
+  },
   // --- manual triggers ---
   form_submit: {
     kind: "manual",
@@ -3157,6 +3381,17 @@ function currentPath2() {
 
 // ../tracking-core/src/ingest-typed.ts
 var clientSettings = /* @__PURE__ */ new WeakMap();
+var latestTrackingConfig;
+var latestRawClient = null;
+function setDefaultTrackingConfig(ref) {
+  if (ref) latestTrackingConfig = ref;
+}
+function getActiveTrackingEnv() {
+  return {
+    rawClient: latestRawClient,
+    trackingConfig: latestTrackingConfig
+  };
+}
 function typedClientSettings(client) {
   return clientSettings.get(client) ?? {};
 }
@@ -3187,7 +3422,9 @@ function createTypedClient(raw, registry, options = {}) {
     getSessionId: raw.getSessionId.bind(raw),
     getVisitorId: raw.getVisitorId.bind(raw)
   };
-  clientSettings.set(client, options);
+  latestRawClient = raw;
+  if (options.trackingConfig) latestTrackingConfig = options.trackingConfig;
+  clientSettings.set(client, { ...options, rawClient: raw });
   return client;
 }
 
@@ -3705,6 +3942,9 @@ function attachPageExit(client) {
     emitSegment(currentPath4, true);
   }
   const unsubscribeNav = onHistoryChange(onNavigate);
+  const unsubscribeBeforeUnload = client.onBeforeUnload?.(() => {
+    emitSegment(currentPath4, false);
+  });
   window.addEventListener("scroll", onScroll, { passive: true });
   document.addEventListener("visibilitychange", onVisibilityChange);
   window.addEventListener("pagehide", onPageHide);
@@ -3713,6 +3953,7 @@ function attachPageExit(client) {
     if (rafId !== null) cancelAnimationFrame(rafId);
     gate.cancel();
     unsubscribeNav();
+    unsubscribeBeforeUnload?.();
     window.removeEventListener("scroll", onScroll);
     document.removeEventListener("visibilitychange", onVisibilityChange);
     window.removeEventListener("pagehide", onPageHide);
@@ -3882,7 +4123,7 @@ function attachPhoneClickCapture(client, config) {
 }
 
 // ../tracking-core/src/lead-forms/lead-forms.gen.ts
-var z16 = __toESM(require("zod/mini"));
+var z17 = __toESM(require("zod/mini"));
 var LEAD_FORM_REGISTRY_VERSION = 2;
 var LEAD_FORM_ROLES = [
   "given_name",
@@ -3908,28 +4149,28 @@ var LEAD_FORM_ROLES = [
   "attribution"
 ];
 var leadFormPrimitiveSchemas = /* @__PURE__ */ (() => ({
-  string: z16.string().check(z16.maxLength(120)),
-  text: z16.string().check(z16.maxLength(2e3)),
-  enum: z16.string().check(z16.regex(/^[a-z0-9-]{1,48}$/)),
-  multi_enum: z16.array(z16.string().check(z16.regex(/^[a-z0-9-]{1,48}$/))).check(z16.maxLength(10)),
-  bool: z16.boolean(),
-  date: z16.string().check(z16.regex(/^\d{4}-\d{2}-\d{2}$/)),
-  time_window: z16.strictObject({
-    start: z16.string().check(z16.regex(/^([01]\d|2[0-3]):[0-5]\d$/)),
-    end: z16.nullable(z16.string().check(z16.regex(/^([01]\d|2[0-3]):[0-5]\d$/))),
-    label: z16.optional(z16.string().check(z16.maxLength(60)))
+  string: z17.string().check(z17.maxLength(120)),
+  text: z17.string().check(z17.maxLength(2e3)),
+  enum: z17.string().check(z17.regex(/^[a-z0-9-]{1,48}$/)),
+  multi_enum: z17.array(z17.string().check(z17.regex(/^[a-z0-9-]{1,48}$/))).check(z17.maxLength(10)),
+  bool: z17.boolean(),
+  date: z17.string().check(z17.regex(/^\d{4}-\d{2}-\d{2}$/)),
+  time_window: z17.strictObject({
+    start: z17.string().check(z17.regex(/^([01]\d|2[0-3]):[0-5]\d$/)),
+    end: z17.nullable(z17.string().check(z17.regex(/^([01]\d|2[0-3]):[0-5]\d$/))),
+    label: z17.optional(z17.string().check(z17.maxLength(60)))
   }),
-  phone: z16.string().check(z16.regex(/^\+[1-9]\d{6,14}$/)),
-  email: z16.string().check(z16.maxLength(320), z16.regex(/^[^\s@]+@[^\s@]+$/)),
-  address: z16.strictObject({
-    line1: z16.string().check(z16.maxLength(120)),
-    line2: z16.optional(z16.string().check(z16.maxLength(120))),
-    city: z16.optional(z16.string().check(z16.maxLength(120))),
-    region: z16.optional(z16.string().check(z16.maxLength(120))),
-    postal_code: z16.optional(z16.string().check(z16.maxLength(120))),
-    country: z16.optional(z16.string().check(z16.maxLength(120)))
+  phone: z17.string().check(z17.regex(/^\+[1-9]\d{6,14}$/)),
+  email: z17.string().check(z17.maxLength(320), z17.regex(/^[^\s@]+@[^\s@]+$/)),
+  address: z17.strictObject({
+    line1: z17.string().check(z17.maxLength(120)),
+    line2: z17.optional(z17.string().check(z17.maxLength(120))),
+    city: z17.optional(z17.string().check(z17.maxLength(120))),
+    region: z17.optional(z17.string().check(z17.maxLength(120))),
+    postal_code: z17.optional(z17.string().check(z17.maxLength(120))),
+    country: z17.optional(z17.string().check(z17.maxLength(120)))
   }),
-  number: z16.number()
+  number: z17.number()
 }))();
 var LEAD_FORM_ROLE_SPECS = {
   given_name: { primitive: "string", smsLabel: "", contactIdentity: true },
@@ -4501,7 +4742,7 @@ function GoogleAdsTracking(props) {
 var import_react6 = require("react");
 
 // package.json
-var version = "1.18.0";
+var version = "1.19.0";
 
 // ../tracking-core/src/phone-react.tsx
 var import_react5 = require("react");
@@ -4612,6 +4853,7 @@ function createTracking(options) {
     trackingConfig
   } = options;
   registerCapability("base_tracking");
+  setDefaultTrackingConfig(trackingConfig);
   if (trackingConfig) registerCapability("conversion_goals_auto");
   if (!apiKey || !endpoint) {
     if (apiKey || endpoint) {
@@ -4879,15 +5121,1422 @@ function useBookingSubmit(bookings, options = {}) {
   const status = submitting ? "submitting" : outcome?.status ?? "idle";
   return { status, outcome, booked, submit, updateBooking, reset };
 }
+
+// ../tracking-core/src/video-react.tsx
+var import_react8 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_VIDEO_CHECKPOINTS = [25, 50, 75, 90, 100];
+var streamManifestUrl = (host, uid) => `https://${host}/${uid}/manifest/video.m3u8`;
+var streamPosterUrl = (host, uid, time = 4) => `https://${host}/${uid}/thumbnails/thumbnail.jpg?time=${time}s`;
+var TV_SKIN_STYLE_ATTR = "data-aranova-tv-skin";
+var TV_SKIN_CSS = `
+.tv-skin {
+  container-type: inline-size;
+  position: relative;
+  overflow: hidden;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: #0a0e1a;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
+}
+.tv-skin-desktop {
+  display: none;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}
+.tv-skin-mobile {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  aspect-ratio: 9 / 16;
+  width: 100%;
+  max-width: 420px;
+}
+@media (min-width: 768px) {
+  .tv-skin-desktop {
+    display: block;
+  }
+  .tv-skin-mobile {
+    display: none;
+  }
+}
+.tv-skin media-controller {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  --media-primary-color: #ffffff;
+  --media-text-color: rgba(255, 255, 255, 0.82);
+  --media-icon-color: #ffffff;
+  --media-secondary-color: transparent;
+  --media-control-background: transparent;
+  --media-control-hover-background: transparent;
+  --media-control-padding: 0;
+  --media-control-height: 40px;
+  --media-tooltip-display: none;
+  --media-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  --media-font-size: 11.5px;
+  --media-focus-box-shadow: 0 0 0 2px #74a0ff;
+  --media-button-icon-width: 20px;
+  --media-button-icon-height: 20px;
+  --media-range-padding: 0;
+  --media-range-bar-color: #ffffff;
+  --media-range-track-background: rgba(255, 255, 255, 0.25);
+  --media-range-track-border-radius: 3px;
+  --media-time-range-buffered-color: transparent;
+  --media-time-range-hover-display: none;
+  --media-preview-time-background: transparent;
+  --media-range-thumb-background: #ffffff;
+  --media-range-thumb-width: 12px;
+  --media-range-thumb-height: 12px;
+  --media-range-thumb-opacity: 0;
+}
+.tv-skin media-controller::part(vertical-layer),
+.tv-skin media-controller::part(centered-layer) {
+  background: transparent;
+}
+.tv-chrome {
+  position: absolute;
+  inset: auto 0 0 0;
+  padding-top: 56px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
+  transition: opacity 0.25s ease;
+}
+.tv-skin media-controller[userinactive]:not([mediapaused]) .tv-chrome {
+  opacity: 0;
+  pointer-events: none;
+}
+.tv-row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+}
+.tv-spacer {
+  flex: 1 1 auto;
+}
+.tv-ctl,
+.tv-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.tv-ctl:hover,
+.tv-btn:hover {
+  background: transparent;
+  color: #ffffff;
+}
+.tv-ctl:focus-visible,
+.tv-btn:focus-visible,
+.tv-menu-item:focus-visible {
+  outline: 2px solid #74a0ff;
+  outline-offset: -4px;
+  box-shadow: none;
+}
+.tv-time {
+  width: auto;
+  padding: 0 4px 0 6px;
+  background: transparent;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  --media-control-background: transparent;
+}
+.tv-time-cur {
+  display: none;
+}
+.tv-seek {
+  display: block;
+  width: 100%;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+  border: 0;
+  --media-range-track-height: 3px;
+  --media-control-background: transparent;
+  --media-control-hover-background: transparent;
+}
+.tv-seek:hover,
+.tv-seek:focus-visible {
+  --media-range-track-height: 6px;
+  --media-range-thumb-opacity: 1;
+}
+.tv-vol {
+  display: flex;
+  align-items: center;
+}
+.tv-volrange {
+  width: 64px;
+  height: 40px;
+  margin-right: 4px;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: scaleX(0.75);
+  transform-origin: right center;
+  background: transparent;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  --media-control-background: transparent;
+  --media-range-track-height: 3px;
+}
+.tv-vol:hover .tv-volrange,
+.tv-vol:focus-within .tv-volrange {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scaleX(1);
+}
+@media (hover: none) {
+  .tv-volrange {
+    display: none;
+  }
+}
+@container (max-width: 479px) {
+  .tv-vol,
+  .tv-time-full {
+    display: none;
+  }
+  .tv-time-cur {
+    display: inline-flex;
+  }
+}
+@container (max-width: 767px) {
+  .tv-theater {
+    display: none;
+  }
+}
+.tv-menu-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.tv-menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  z-index: 5;
+  width: 136px;
+  max-height: 232px;
+  margin: 0;
+  padding: 4px 0;
+  overflow-y: auto;
+  list-style: none;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), rgba(10, 14, 26, 0.55);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.35);
+}
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .tv-menu {
+    -webkit-backdrop-filter: blur(16px) saturate(140%);
+    backdrop-filter: blur(16px) saturate(140%);
+  }
+}
+.tv-menu-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 32px;
+  align-items: center;
+  padding: 0 12px 0 24px;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.75);
+  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+.tv-menu-item:hover,
+.tv-menu-item:focus-visible {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  outline: none;
+}
+.tv-menu-item[aria-checked='true'] {
+  color: #ffffff;
+  font-weight: 600;
+}
+.tv-menu-item[aria-checked='true']::before {
+  content: '';
+  position: absolute;
+  left: 12px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+.tv-menu-sub {
+  margin-left: 4px;
+  font-size: 11.5px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.55);
+}
+.tv-menu-note {
+  height: 20px;
+  padding: 0 12px 0 24px;
+  color: rgba(255, 255, 255, 0.55);
+  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+  font-size: 11.5px;
+  line-height: 20px;
+}
+.tv-poster-overlay {
+  position: absolute;
+  inset: 0;
+}
+.tv-poster-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.tv-play-trigger {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: filter 0.2s ease;
+}
+.tv-play-trigger:hover {
+  filter: brightness(1.1);
+}
+.tv-play-trigger:focus-visible {
+  outline: 2px solid #74a0ff;
+  outline-offset: -4px;
+}
+.tv-play-pill {
+  display: flex;
+  width: 64px;
+  height: 64px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 2px solid rgba(255, 255, 255, 0.72);
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  transition: transform 0.3s ease;
+}
+.tv-play-trigger:hover .tv-play-pill {
+  transform: scale(1.05);
+}
+`;
+function ensureTvSkinStyles() {
+  if (typeof document === "undefined") return;
+  if (document.querySelector(`style[${TV_SKIN_STYLE_ATTR}]`)) return;
+  const style = document.createElement("style");
+  style.setAttribute(TV_SKIN_STYLE_ATTR, "1");
+  style.textContent = TV_SKIN_CSS;
+  document.head.append(style);
+}
+function IconPlay({
+  slot,
+  size = 20,
+  filled = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      slot,
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: filled ? "currentColor" : "none",
+      stroke: "currentColor",
+      strokeWidth: filled ? 0 : 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: filled ? { marginLeft: 3 } : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "6 3 20 12 6 21 6 3" })
+    }
+  );
+}
+function IconPause({ slot }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      slot,
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" })
+      ]
+    }
+  );
+}
+function IconVolumeHigh({ slot }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      slot,
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+      ]
+    }
+  );
+}
+function IconVolumeLow({ slot }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      slot,
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+      ]
+    }
+  );
+}
+function IconVolumeOff({ slot }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      slot,
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "22", y1: "9", x2: "16", y2: "15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "16", y1: "9", x2: "22", y2: "15" })
+      ]
+    }
+  );
+}
+function IconSettings() {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  );
+}
+function IconTheaterExpand() {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
+function IconTheaterShrink() {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "4 14 10 14 10 20" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "20 10 14 10 14 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
+function IconFullscreenEnter({ slot }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      slot,
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+      ]
+    }
+  );
+}
+function IconFullscreenExit({ slot }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      slot,
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
+      ]
+    }
+  );
+}
+var EMPTY_GOALS2 = [];
+function serverVideoSnapshot() {
+  return null;
+}
+function serverGoalsSnapshot() {
+  return EMPTY_GOALS2;
+}
+function useTrackedVideoConfig(videoKey, trackingConfig, fallbackConfig) {
+  registerCapability("video_tracking");
+  const effectiveRef = trackingConfig ?? getActiveTrackingEnv().trackingConfig;
+  const subscribe = (0, import_react8.useCallback)(
+    (listener) => effectiveRef ? getTrackingConfigRuntime(effectiveRef).subscribe(listener) : () => {
+    },
+    [effectiveRef]
+  );
+  const live = (0, import_react8.useSyncExternalStore)(
+    subscribe,
+    () => effectiveRef && videoKey ? getTrackingConfigRuntime(effectiveRef).getVideo(videoKey) : null,
+    serverVideoSnapshot
+  );
+  return live ?? fallbackConfig ?? null;
+}
+function useActiveVideoGoals(videoId, trackingConfig) {
+  const effectiveRef = trackingConfig ?? getActiveTrackingEnv().trackingConfig;
+  const subscribe = (0, import_react8.useCallback)(
+    (listener) => effectiveRef ? getTrackingConfigRuntime(effectiveRef).subscribe(listener) : () => {
+    },
+    [effectiveRef]
+  );
+  const goals = (0, import_react8.useSyncExternalStore)(
+    subscribe,
+    () => effectiveRef ? getTrackingConfigRuntime(effectiveRef).listGoals() : EMPTY_GOALS2,
+    serverGoalsSnapshot
+  );
+  return (0, import_react8.useMemo)(() => {
+    const out = [];
+    for (const goal of goals) {
+      if (goal.kind !== "event" || !goal.trigger) continue;
+      if (goal.trigger.event_type !== "video_progress") continue;
+      if (goal.trigger.video_id && goal.trigger.video_id !== videoId) continue;
+      const metric = goal.trigger.metric;
+      const threshold = goal.trigger.threshold;
+      if ((metric === "percent" || metric === "seconds") && typeof threshold === "number") {
+        out.push({ key: goal.key, metric, threshold });
+      }
+    }
+    return out;
+  }, [goals, videoId]);
+}
+function renditionsOf(h) {
+  const best = /* @__PURE__ */ new Map();
+  h.levels.forEach((l, index) => {
+    const px = Math.min(l.width || Infinity, l.height || Infinity);
+    if (!Number.isFinite(px)) return;
+    const cur = best.get(px);
+    if (!cur || l.bitrate > cur.bitrate) best.set(px, { height: px, index, bitrate: l.bitrate });
+  });
+  return [...best.values()].sort((a, b) => b.height - a.height).map(({ height, index }) => ({ height, index }));
+}
+var MEDIA_CHROME_CDN_URL = "https://cdn.jsdelivr.net/npm/media-chrome@4/+esm";
+var HLS_JS_CDN_URL = "https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js";
+var defaultLibsPromise = null;
+function loadScriptOnce(src, attr, isModule = false) {
+  if (typeof document === "undefined") return Promise.resolve();
+  const existing = document.querySelector(`script[${attr}]`);
+  if (existing) return Promise.resolve();
+  return new Promise((resolve) => {
+    const s = document.createElement("script");
+    if (isModule) s.type = "module";
+    s.async = true;
+    s.src = src;
+    s.setAttribute(attr, "1");
+    s.addEventListener("load", () => resolve(), { once: true });
+    s.addEventListener("error", () => resolve(), { once: true });
+    document.head.append(s);
+    if (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) {
+      setTimeout(resolve, 0);
+    }
+  });
+}
+function loadDefaultPlayerLibs() {
+  if (typeof window === "undefined") return Promise.resolve({});
+  if (defaultLibsPromise) return defaultLibsPromise;
+  defaultLibsPromise = Promise.all([
+    typeof customElements !== "undefined" && customElements.get("media-controller") ? Promise.resolve() : loadScriptOnce(MEDIA_CHROME_CDN_URL, "data-aranova-media-chrome", true),
+    window.Hls ? Promise.resolve() : loadScriptOnce(HLS_JS_CDN_URL, "data-aranova-hls-js", false)
+  ]).then(() => ({
+    hls: window.Hls
+  }));
+  return defaultLibsPromise;
+}
+function Cut({
+  id,
+  variant,
+  uid,
+  host,
+  title,
+  posterTime,
+  posterUrl,
+  renderPoster,
+  theater,
+  onTheaterChange,
+  autoExpandOnPlay,
+  checkpoints,
+  videoGoals,
+  client,
+  loadPlayerLibs,
+  className,
+  ...cb
+}) {
+  const root = (0, import_react8.useRef)(null);
+  const video = (0, import_react8.useRef)(null);
+  const hls = (0, import_react8.useRef)(null);
+  const lastTime = (0, import_react8.useRef)(0);
+  const seekFrom = (0, import_react8.useRef)(0);
+  const cbRef = (0, import_react8.useRef)(cb);
+  cbRef.current = cb;
+  const clientRef = (0, import_react8.useRef)(client);
+  clientRef.current = client;
+  const goalsRef = (0, import_react8.useRef)(videoGoals);
+  goalsRef.current = videoGoals;
+  const rangesRef = (0, import_react8.useRef)([]);
+  const activeSegmentStartRef = (0, import_react8.useRef)(null);
+  const furthestSecondsRef = (0, import_react8.useRef)(0);
+  const maxPercentRef = (0, import_react8.useRef)(0);
+  const durationRef = (0, import_react8.useRef)(0);
+  const playCountRef = (0, import_react8.useRef)(0);
+  const seekCountRef = (0, import_react8.useRef)(0);
+  const firedCheckpointsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Set());
+  const firedGoalsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Set());
+  const dirtySinceLastEmitRef = (0, import_react8.useRef)(false);
+  const [started, setStarted] = (0, import_react8.useState)(false);
+  const [ready, setReady] = (0, import_react8.useState)(false);
+  const [playing, setPlaying] = (0, import_react8.useState)(false);
+  const [renditions, setRenditions] = (0, import_react8.useState)([]);
+  const [selected, setSelected] = (0, import_react8.useState)("auto");
+  const [live, setLive] = (0, import_react8.useState)(null);
+  const [menu, setMenu] = (0, import_react8.useState)(false);
+  const [pending, setPending] = (0, import_react8.useState)(null);
+  const pendingRef = (0, import_react8.useRef)(null);
+  const wrap = (0, import_react8.useRef)(null);
+  const gear = (0, import_react8.useRef)(null);
+  const selectedRef = (0, import_react8.useRef)("auto");
+  const pendingTimer = (0, import_react8.useRef)(null);
+  const liveRef = (0, import_react8.useRef)(null);
+  const videoId = `${id}-${variant}`;
+  const getCurrentRanges = (0, import_react8.useCallback)(() => {
+    const v = video.current;
+    const cur = v ? v.currentTime : lastTime.current;
+    const list = [...rangesRef.current];
+    if (activeSegmentStartRef.current !== null && cur > activeSegmentStartRef.current) {
+      list.push({
+        start_s: activeSegmentStartRef.current,
+        end_s: cur
+      });
+    }
+    return mergeVideoRanges(list);
+  }, []);
+  const commitActiveSegment = (0, import_react8.useCallback)((endTime) => {
+    const end = endTime ?? video.current?.currentTime ?? lastTime.current;
+    if (activeSegmentStartRef.current !== null && end > activeSegmentStartRef.current) {
+      rangesRef.current = mergeVideoRanges([
+        ...rangesRef.current,
+        { start_s: activeSegmentStartRef.current, end_s: end }
+      ]);
+    }
+    activeSegmentStartRef.current = null;
+  }, []);
+  const snap = (0, import_react8.useCallback)(() => {
+    const v = video.current;
+    const currentTime = roundVideoSeconds(v?.currentTime ?? lastTime.current);
+    const rawDuration = v?.duration;
+    const duration = typeof rawDuration === "number" && Number.isFinite(rawDuration) && rawDuration > 0 ? roundVideoSeconds(rawDuration) : durationRef.current;
+    if (duration > 0) durationRef.current = duration;
+    if (currentTime > furthestSecondsRef.current) {
+      furthestSecondsRef.current = currentTime;
+    }
+    const ranges = getCurrentRanges();
+    const watchedSeconds = sumVideoRangesSeconds(ranges, duration);
+    const watchedPercent = duration > 0 ? Math.min(100, Math.round(watchedSeconds / duration * 100)) : 0;
+    const curPercent = duration > 0 ? Math.min(100, Math.round(furthestSecondsRef.current / duration * 100)) : 0;
+    if (curPercent > maxPercentRef.current) {
+      maxPercentRef.current = curPercent;
+    }
+    return {
+      id,
+      videoId,
+      variant,
+      currentTime,
+      duration,
+      watchedSeconds,
+      watchedPercent,
+      maxPercent: maxPercentRef.current,
+      ranges
+    };
+  }, [getCurrentRanges, id, variant, videoId]);
+  const emitProgress = (0, import_react8.useCallback)(
+    (trigger, snapshotOverride) => {
+      const activeClient = clientRef.current ?? getActiveTrackingEnv().rawClient;
+      if (!activeClient || playCountRef.current <= 0) return;
+      const s = snapshotOverride ?? snap();
+      if (s.ranges.length === 0 && s.currentTime <= 0 && trigger !== "ended") return;
+      dirtySinceLastEmitRef.current = false;
+      const path = typeof window === "undefined" ? "/" : window.location.pathname;
+      activeClient.trackEvent({
+        eventType: "video_progress",
+        metadata: {
+          video_id: id,
+          variant,
+          trigger,
+          current_s: s.currentTime,
+          furthest_s: roundVideoSeconds(furthestSecondsRef.current),
+          watched_s: s.watchedSeconds,
+          duration_s: s.duration,
+          max_percent: s.maxPercent,
+          watched_percent: s.watchedPercent,
+          play_count: playCountRef.current,
+          seek_count: seekCountRef.current,
+          ranges: s.ranges,
+          page: { path }
+        }
+      });
+    },
+    [id, snap, variant]
+  );
+  const clearPending = () => {
+    if (pendingTimer.current) clearTimeout(pendingTimer.current);
+    pendingTimer.current = null;
+    pendingRef.current = null;
+    setPending(null);
+  };
+  (0, import_react8.useEffect)(() => {
+    ensureTvSkinStyles();
+    registerCapability("video_tracking");
+    return () => {
+      if (pendingTimer.current) clearTimeout(pendingTimer.current);
+      hls.current?.destroy();
+      hls.current = null;
+    };
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    if (!started || typeof window === "undefined") return;
+    const flushExitProgress = (useBeacon) => {
+      if (playCountRef.current <= 0 || !dirtySinceLastEmitRef.current) return;
+      commitActiveSegment();
+      emitProgress("page_exit");
+      if (useBeacon) {
+        const activeClient2 = clientRef.current ?? getActiveTrackingEnv().rawClient;
+        activeClient2?.flushBeacon();
+      }
+    };
+    const activeClient = clientRef.current ?? getActiveTrackingEnv().rawClient;
+    const unsubscribeBeforeUnload = activeClient?.onBeforeUnload?.(() => {
+      flushExitProgress(false);
+    });
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        flushExitProgress(true);
+      }
+    };
+    const onPageHide = () => {
+      flushExitProgress(true);
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("pagehide", onPageHide);
+    return () => {
+      unsubscribeBeforeUnload?.();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      window.removeEventListener("pagehide", onPageHide);
+    };
+  }, [started, commitActiveSegment, emitProgress]);
+  (0, import_react8.useEffect)(() => {
+    if (!started) return;
+    let was = false;
+    const report = (fullscreen) => {
+      if (fullscreen === was) return;
+      was = fullscreen;
+      cbRef.current.onFullscreenChange?.({ ...snap(), fullscreen });
+    };
+    const onDoc = () => {
+      const el = root.current;
+      const fe = document.fullscreenElement ?? document.webkitFullscreenElement;
+      report(Boolean(el && fe && el.contains(fe)));
+    };
+    const v = video.current;
+    const begin = () => report(true);
+    const end = () => report(false);
+    document.addEventListener("fullscreenchange", onDoc);
+    document.addEventListener("webkitfullscreenchange", onDoc);
+    v?.addEventListener("webkitbeginfullscreen", begin);
+    v?.addEventListener("webkitendfullscreen", end);
+    return () => {
+      document.removeEventListener("fullscreenchange", onDoc);
+      document.removeEventListener("webkitfullscreenchange", onDoc);
+      v?.removeEventListener("webkitbeginfullscreen", begin);
+      v?.removeEventListener("webkitendfullscreen", end);
+    };
+  }, [started, snap]);
+  (0, import_react8.useEffect)(() => {
+    if (!menu) return;
+    const outside = (e) => {
+      if (wrap.current && !wrap.current.contains(e.target)) setMenu(false);
+    };
+    document.addEventListener("pointerdown", outside);
+    return () => document.removeEventListener("pointerdown", outside);
+  }, [menu]);
+  const closeMenu = (refocus) => {
+    setMenu(false);
+    if (refocus) gear.current?.focus();
+  };
+  const onMenuKey = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      closeMenu(true);
+    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const items = [
+        ...wrap.current?.querySelectorAll('[role="menuitemradio"]') ?? []
+      ];
+      const i = items.indexOf(document.activeElement);
+      items[(i + (e.key === "ArrowDown" ? 1 : items.length - 1)) % items.length]?.focus();
+    }
+  };
+  const emitQuality = (from, to, source) => cbRef.current.onQualityChange?.({ ...snap(), from, to, source });
+  const start = async () => {
+    const v = video.current;
+    if (!v || started) return;
+    setStarted(true);
+    if (variant === "16x9" && autoExpandOnPlay) {
+      onTheaterChange?.(true);
+    }
+    const src = streamManifestUrl(host, uid);
+    try {
+      const loaded = await (loadPlayerLibs ? loadPlayerLibs() : loadDefaultPlayerLibs());
+      setReady(true);
+      const rawHls = (loaded && typeof loaded === "object" && "hls" in loaded ? loaded.hls : null) ?? (typeof window !== "undefined" ? window.Hls : void 0);
+      const HlsLib = rawHls && typeof rawHls === "object" && "default" in rawHls ? rawHls.default : rawHls;
+      if (!HlsLib || !HlsLib.isSupported()) {
+        v.src = src;
+      } else {
+        const h = new HlsLib({ capLevelToPlayerSize: true });
+        hls.current = h;
+        h.on(HlsLib.Events.MANIFEST_PARSED, () => setRenditions(renditionsOf(h)));
+        h.on(HlsLib.Events.LEVEL_SWITCHED, (_e, data) => {
+          const lv = h.levels[data.level];
+          const height = lv ? Math.min(lv.width || Infinity, lv.height || Infinity) : null;
+          const from = liveRef.current;
+          liveRef.current = height;
+          setLive(height);
+          const want = pendingRef.current;
+          if (want !== null && want === height) clearPending();
+          if (selectedRef.current === "auto" && height && from && from !== height) {
+            emitQuality(from, height, "auto");
+          }
+        });
+        h.on(HlsLib.Events.ERROR, () => clearPending());
+        h.loadSource(src);
+        h.attachMedia(v);
+      }
+    } catch {
+      setReady(true);
+      v.src = src;
+    }
+    try {
+      await v.play();
+    } catch {
+    }
+  };
+  const pick = (q) => {
+    const h = hls.current;
+    const from = selectedRef.current;
+    setMenu(false);
+    if (!h || q === from) return;
+    if (q === "auto") h.nextLevel = -1;
+    else {
+      const r = renditions.find((x) => x.height === q);
+      if (r) h.nextLevel = r.index;
+    }
+    selectedRef.current = q;
+    setSelected(q);
+    clearPending();
+    if (typeof q === "number" && q !== liveRef.current) {
+      pendingRef.current = q;
+      setPending(q);
+      pendingTimer.current = setTimeout(clearPending, 4e3);
+    }
+    emitQuality(from, q, "manual");
+  };
+  const qualityLabel = selected === "auto" ? live ? `Auto (${live}p)` : "Auto" : `${selected}p`;
+  const resolvedPosterUrl = posterUrl ?? streamPosterUrl(host, uid, posterTime);
+  const posterWidth = variant === "16x9" ? 1280 : 720;
+  const posterHeight = variant === "16x9" ? 720 : 1280;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ref: root,
+      className: `tv-skin ${variant === "16x9" ? "tv-skin-desktop" : "tv-skin-mobile"} ${className ?? ""}`,
+      "data-video-id": videoId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("media-controller", { class: "absolute inset-0 block", autohide: menu ? "-1" : "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "video",
+            {
+              ref: video,
+              slot: "media",
+              style: { width: "100%", height: "100%", backgroundColor: "#000", objectFit: "contain" },
+              preload: "none",
+              playsInline: true,
+              title,
+              "aria-label": title,
+              "data-video-id": videoId,
+              onPlay: () => {
+                const v = video.current;
+                const cur = roundVideoSeconds(v?.currentTime ?? 0);
+                activeSegmentStartRef.current = cur;
+                playCountRef.current += 1;
+                dirtySinceLastEmitRef.current = true;
+                const s = snap();
+                const activeClient = clientRef.current ?? getActiveTrackingEnv().rawClient;
+                if (activeClient) {
+                  const path = typeof window === "undefined" ? "/" : window.location.pathname;
+                  activeClient.trackEvent({
+                    eventType: "video_play",
+                    metadata: {
+                      video_id: id,
+                      variant,
+                      current_s: s.currentTime,
+                      duration_s: s.duration,
+                      play_sequence: playCountRef.current,
+                      page: { path }
+                    }
+                  });
+                }
+                cbRef.current.onPlay?.(s);
+              },
+              onPlaying: () => setPlaying(true),
+              onPause: () => {
+                const v = video.current;
+                if (v?.ended) return;
+                commitActiveSegment(v?.currentTime);
+                const s = snap();
+                emitProgress("pause", s);
+                cbRef.current.onPause?.(s);
+              },
+              onEnded: () => {
+                const v = video.current;
+                const dur = typeof v?.duration === "number" && Number.isFinite(v.duration) ? v.duration : durationRef.current;
+                commitActiveSegment(dur > 0 ? dur : v?.currentTime);
+                maxPercentRef.current = 100;
+                const s = snap();
+                if (!firedCheckpointsRef.current.has(100) && checkpoints.includes(100)) {
+                  firedCheckpointsRef.current.add(100);
+                  cbRef.current.onCheckpoint?.({ ...s, checkpoint: 100 });
+                }
+                emitProgress("ended", s);
+                cbRef.current.onEnded?.(s);
+              },
+              onWaiting: () => cbRef.current.onWaiting?.(snap()),
+              onTimeUpdate: () => {
+                const v = video.current;
+                if (v && !v.seeking) {
+                  if (activeSegmentStartRef.current === null && !v.paused) {
+                    activeSegmentStartRef.current = lastTime.current;
+                  }
+                  lastTime.current = v.currentTime;
+                  dirtySinceLastEmitRef.current = true;
+                }
+                const s = snap();
+                let hitCheckpoint = false;
+                let hitGoal = false;
+                for (const goal of goalsRef.current) {
+                  if (firedGoalsRef.current.has(goal.key)) continue;
+                  const met = goal.metric === "seconds" ? s.watchedSeconds >= goal.threshold : s.watchedPercent >= goal.threshold;
+                  if (met) {
+                    firedGoalsRef.current.add(goal.key);
+                    hitGoal = true;
+                  }
+                }
+                const newlyFiredCheckpoints = [];
+                for (const cp of checkpoints) {
+                  if (firedCheckpointsRef.current.has(cp)) continue;
+                  if (s.watchedPercent >= cp || s.maxPercent >= cp) {
+                    firedCheckpointsRef.current.add(cp);
+                    newlyFiredCheckpoints.push(cp);
+                    hitCheckpoint = true;
+                  }
+                }
+                if (hitCheckpoint || hitGoal) {
+                  commitActiveSegment(v?.currentTime);
+                  if (v && !v.paused) activeSegmentStartRef.current = v.currentTime;
+                  const emittedSnap = snap();
+                  emitProgress(hitCheckpoint ? "checkpoint" : "goal", emittedSnap);
+                  for (const cp of newlyFiredCheckpoints) {
+                    cbRef.current.onCheckpoint?.({ ...emittedSnap, checkpoint: cp });
+                  }
+                }
+                cbRef.current.onTimeUpdate?.(s);
+              },
+              onSeeking: () => {
+                seekFrom.current = lastTime.current;
+                commitActiveSegment(seekFrom.current);
+              },
+              onSeeked: () => {
+                const v = video.current;
+                const to = roundVideoSeconds(v?.currentTime ?? 0);
+                const from = roundVideoSeconds(seekFrom.current);
+                lastTime.current = to;
+                if (v && !v.paused) {
+                  activeSegmentStartRef.current = to;
+                }
+                if (Math.abs(to - from) >= 1) {
+                  seekCountRef.current += 1;
+                  const s = snap();
+                  emitProgress("seek", s);
+                  cbRef.current.onSeek?.({ ...s, from, to });
+                }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("track", { kind: "captions" })
+            }
+          ),
+          ready && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("media-loading-indicator", { slot: "centered-chrome" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tv-chrome", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tv-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("media-play-button", { class: "tv-ctl", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconPlay, { slot: "play" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconPause, { slot: "pause" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("media-time-display", { class: "tv-time tv-time-full", showduration: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("media-time-display", { class: "tv-time tv-time-cur" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "tv-spacer" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tv-vol", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("media-mute-button", { class: "tv-ctl", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconVolumeHigh, { slot: "high" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconVolumeLow, { slot: "medium" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconVolumeLow, { slot: "low" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconVolumeOff, { slot: "off" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("media-volume-range", { class: "tv-volrange" })
+                ] }),
+                renditions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tv-menu-wrap", ref: wrap, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "button",
+                    {
+                      ref: gear,
+                      type: "button",
+                      className: "tv-btn",
+                      "aria-haspopup": "menu",
+                      "aria-expanded": menu,
+                      "aria-label": `Settings, quality ${qualityLabel}`,
+                      title: "Settings",
+                      onClick: () => setMenu((m) => !m),
+                      onKeyDown: onMenuKey,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSettings, {})
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { role: "status", className: "sr-only", children: pending !== null ? `Switching to ${pending}p` : "" }),
+                  menu && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    "ul",
+                    {
+                      role: "menu",
+                      "aria-label": "Quality",
+                      className: "tv-menu",
+                      onKeyDown: onMenuKey,
+                      children: [
+                        ["auto", ...renditions.map((r) => r.height)].map(
+                          (q) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              role: "menuitemradio",
+                              "aria-checked": selected === q,
+                              className: "tv-menu-item",
+                              onClick: () => pick(q),
+                              children: q === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                                "Auto",
+                                live ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "tv-menu-sub", children: [
+                                  " ",
+                                  live,
+                                  "p"
+                                ] }) : null
+                              ] }) : `${q}p`
+                            }
+                          ) }, String(q))
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { "aria-hidden": "true", className: "tv-menu-note", children: pending !== null ? `Switching to ${pending}p\u2026` : "" })
+                      ]
+                    }
+                  )
+                ] }),
+                variant === "16x9" && onTheaterChange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "tv-btn tv-theater",
+                    "aria-pressed": theater,
+                    "aria-label": theater ? "Shrink the player" : "Expand the player",
+                    title: theater ? "Shrink" : "Expand",
+                    onClick: () => onTheaterChange(!theater),
+                    children: theater ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconTheaterShrink, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconTheaterExpand, {})
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("media-fullscreen-button", { class: "tv-ctl", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconFullscreenEnter, { slot: "enter" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconFullscreenExit, { slot: "exit" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("media-time-range", { class: "tv-seek" })
+            ] })
+          ] })
+        ] }),
+        !playing && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tv-poster-overlay", children: [
+          renderPoster ? renderPoster({
+            src: resolvedPosterUrl,
+            variant,
+            title,
+            width: posterWidth,
+            height: posterHeight
+          }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "img",
+            {
+              src: resolvedPosterUrl,
+              alt: "",
+              width: posterWidth,
+              height: posterHeight,
+              loading: "lazy",
+              decoding: "async",
+              className: "tv-poster-img"
+            }
+          ),
+          !started && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: start,
+              "aria-label": `Play video: ${title}`,
+              className: "tv-play-trigger",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "tv-play-pill", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconPlay, { size: 26, filled: true }) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function TrackedVideo(props) {
+  const {
+    id,
+    video,
+    host,
+    sources,
+    title,
+    posterTime,
+    posterUrl,
+    renderPoster,
+    theater: controlledTheater,
+    defaultTheater = false,
+    onTheaterChange,
+    expandMode = "inline",
+    autoExpandOnPlay = true,
+    expandedMaxWidth = 1100,
+    checkpoints = DEFAULT_VIDEO_CHECKPOINTS,
+    trackingConfig,
+    fallbackConfig,
+    client = null,
+    loadPlayerLibs,
+    className = "",
+    style,
+    ...callbacks
+  } = props;
+  const videoKey = id ?? video ?? fallbackConfig?.key ?? "";
+  const r2Video = useTrackedVideoConfig(videoKey || void 0, trackingConfig, fallbackConfig);
+  const videoGoals = useActiveVideoGoals(videoKey, trackingConfig);
+  const [internalTheater, setInternalTheater] = (0, import_react8.useState)(defaultTheater);
+  const isTheaterControlled = controlledTheater !== void 0;
+  const activeTheater = isTheaterControlled ? controlledTheater : internalTheater;
+  const handleTheaterChange = (0, import_react8.useCallback)(
+    (next) => {
+      if (!isTheaterControlled) {
+        setInternalTheater(next);
+      }
+      onTheaterChange?.(next);
+    },
+    [isTheaterControlled, onTheaterChange]
+  );
+  const resolvedHost = host ?? r2Video?.host ?? "";
+  const desktopUid = sources?.desktop ?? r2Video?.sources.desktop ?? "";
+  const mobileUid = sources?.mobile ?? r2Video?.sources.mobile ?? desktopUid;
+  const resolvedTitle = title ?? r2Video?.title ?? videoKey;
+  const resolvedPosterTime = posterTime ?? r2Video?.poster_time ?? r2Video?.poster_time_s ?? 4;
+  if (!videoKey || !resolvedHost || !desktopUid) {
+    return null;
+  }
+  const showTheaterControl = expandMode !== "none" && (expandMode === "theater" || Boolean(onTheaterChange));
+  const wrapperStyle = !isTheaterControlled && expandMode === "theater" && activeTheater ? {
+    maxWidth: typeof expandedMaxWidth === "number" ? `${expandedMaxWidth}px` : expandedMaxWidth,
+    marginLeft: "auto",
+    marginRight: "auto",
+    width: "100%",
+    transition: "max-width 360ms cubic-bezier(0.2, 0.7, 0.2, 1)",
+    ...style
+  } : style;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, style: wrapperStyle, "data-tracked-video": videoKey, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Cut,
+      {
+        ...callbacks,
+        id: videoKey,
+        variant: "16x9",
+        uid: desktopUid,
+        host: resolvedHost,
+        title: resolvedTitle,
+        posterTime: resolvedPosterTime,
+        posterUrl,
+        renderPoster,
+        theater: activeTheater,
+        onTheaterChange: showTheaterControl ? handleTheaterChange : void 0,
+        autoExpandOnPlay,
+        checkpoints,
+        videoGoals,
+        client,
+        loadPlayerLibs
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Cut,
+      {
+        ...callbacks,
+        id: videoKey,
+        variant: "9x16",
+        uid: mobileUid || desktopUid,
+        host: resolvedHost,
+        title: resolvedTitle,
+        posterTime: resolvedPosterTime,
+        posterUrl,
+        renderPoster,
+        theater: false,
+        onTheaterChange: void 0,
+        autoExpandOnPlay: false,
+        checkpoints,
+        videoGoals,
+        client,
+        loadPlayerLibs
+      }
+    )
+  ] });
+}
+var STAGE_DURATION_MS = 360;
+var STAGE_EASE = "cubic-bezier(0.2, 0.7, 0.2, 1)";
+function TrackedVideoStage({
+  video,
+  children,
+  expandedMaxWidth = 1100,
+  collapsedTextMaxWidth = 760,
+  className = ""
+}) {
+  const [theater, setTheater] = (0, import_react8.useState)(video.defaultTheater ?? false);
+  const videoBox = (0, import_react8.useRef)(null);
+  const textBox = (0, import_react8.useRef)(null);
+  const first = (0, import_react8.useRef)(null);
+  const activeTheater = video.theater !== void 0 ? video.theater : theater;
+  const change = (0, import_react8.useCallback)(
+    (next) => {
+      if (next === activeTheater) return;
+      if (next && typeof window !== "undefined" && !window.matchMedia("(min-width: 768px)").matches) {
+        return;
+      }
+      if (videoBox.current && textBox.current) {
+        first.current = {
+          v: videoBox.current.getBoundingClientRect(),
+          t: textBox.current.getBoundingClientRect()
+        };
+      }
+      if (video.theater === void 0) {
+        setTheater(next);
+      }
+      video.onTheaterChange?.(next);
+    },
+    [activeTheater, video]
+  );
+  (0, import_react8.useLayoutEffect)(() => {
+    if (typeof window === "undefined") return;
+    const f = first.current;
+    const vb = videoBox.current;
+    const tb = textBox.current;
+    first.current = null;
+    if (!f || !vb || !tb) return;
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const lv = vb.getBoundingClientRect();
+    const lt = tb.getBoundingClientRect();
+    if (!reduce && typeof vb.animate === "function" && lv.width > 0) {
+      const s = f.v.width / lv.width;
+      vb.animate(
+        [
+          {
+            transformOrigin: "top left",
+            transform: `translate(${f.v.left - lv.left}px, ${f.v.top - lv.top}px) scale(${s})`
+          },
+          { transformOrigin: "top left", transform: "none" }
+        ],
+        { duration: STAGE_DURATION_MS, easing: STAGE_EASE }
+      );
+      tb.animate(
+        [
+          {
+            transform: `translate(${f.t.left - lt.left}px, ${f.t.top - lt.top}px)`,
+            opacity: 0.4
+          },
+          { transform: "none", opacity: 1 }
+        ],
+        { duration: STAGE_DURATION_MS, easing: STAGE_EASE }
+      );
+    }
+    if (lv.top < 80 || lv.bottom > window.innerHeight - 24) {
+      const top = window.scrollY + lv.top - Math.max(96, (window.innerHeight - lv.height) / 2);
+      window.scrollTo({ top, behavior: reduce ? "auto" : "smooth" });
+    }
+  }, [activeTheater]);
+  const maxVideoWidthCss = typeof expandedMaxWidth === "number" ? `${expandedMaxWidth}px` : expandedMaxWidth;
+  const maxTextWidthCss = typeof collapsedTextMaxWidth === "number" ? `${collapsedTextMaxWidth}px` : collapsedTextMaxWidth;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: activeTheater ? `grid gap-10 md:gap-12 ${className}` : `grid items-start gap-10 lg:grid-cols-[1fr_1fr] lg:gap-16 ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            ref: textBox,
+            className: activeTheater ? "md:order-2" : "",
+            style: activeTheater ? { maxWidth: maxTextWidthCss } : void 0,
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            ref: videoBox,
+            className: activeTheater ? "md:order-1 md:mx-auto md:w-full" : "",
+            style: activeTheater ? { maxWidth: maxVideoWidthCss, width: "100%" } : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              TrackedVideo,
+              {
+                ...video,
+                theater: activeTheater,
+                onTheaterChange: change,
+                className: video.className ?? "w-full"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AdPlatformTracking,
   BookingHandoffLink,
   ConsentBanner,
+  DEFAULT_VIDEO_CHECKPOINTS,
   GoogleAdsTracking,
   PhoneField,
+  TrackedVideo,
+  TrackedVideoStage,
   createLeadFormSubmit,
   createTracking,
+  streamManifestUrl,
+  streamPosterUrl,
   useBookingHandoffUrl,
   useBookingIntegration,
   useBookingSlots,
@@ -4898,6 +6547,7 @@ function useBookingSubmit(bookings, options = {}) {
   useGclid,
   usePhoneConfig,
   usePhoneField,
+  useTrackedVideoConfig,
   useTrackingParams
 });
 //# sourceMappingURL=client.js.map