three-vr-player 0.8.0 → 0.10.0

package/dist/VideoSource-DHj5tBsK.js

@@ -0,0 +1,768 @@
+import * as a from "three";
+function Q(h) {
+  let e = h;
+  try {
+    e = new URL(h).pathname;
+  } catch {
+  }
+  const t = e.toLowerCase();
+  return t.endsWith(".m3u8") ? "hls" : t.endsWith(".mpd") ? "dash" : "progressive";
+}
+const D = {
+  progressive: "/proxy/stream",
+  hls: "/proxy/hls/manifest.m3u8",
+  dash: "/proxy/mpd/manifest.m3u8"
+};
+function Y(h, e) {
+  const t = Q(h);
+  if (!e || !e.url) return { url: h, format: t };
+  const i = e.url.replace(/\/+$/, ""), s = new URLSearchParams();
+  s.set("d", h), e.apiPassword && s.set("api_password", e.apiPassword);
+  for (const [r, n] of Object.entries(e.headers ?? {}))
+    n != null && n !== "" && s.set(`h_${r}`, n);
+  return { url: `${i}${D[t]}?${s.toString()}`, format: t };
+}
+const S = {
+  "180-sbs": { geom: "sphere180", split: "sbs", stereo: !0 },
+  "180-mono": { geom: "sphere180", split: "mono", stereo: !1 },
+  "360-mono": { geom: "sphere360", split: "mono", stereo: !1 },
+  "360-sbs": { geom: "sphere360", split: "sbs", stereo: !0 },
+  "360-tb": { geom: "sphere360", split: "tb", stereo: !0 },
+  // DeoVR-style fisheye (~190°): a dome in front of the viewer, one circle per eye.
+  "fisheye190-sbs": { geom: "fisheye", split: "sbs", stereo: !0 },
+  "fisheye190-mono": { geom: "fisheye", split: "mono", stereo: !1 },
+  "flat-2d": { geom: "plane", split: "mono", stereo: !1, flat: !0, aspect: "full" },
+  "flat-sbs-full": { geom: "plane", split: "sbs", stereo: !0, flat: !0, aspect: "per-eye" },
+  "flat-sbs-half": { geom: "plane", split: "sbs", stereo: !0, flat: !0, aspect: "full" }
+}, G = [
+  { value: "180-sbs", label: "180° SBS (VR180)" },
+  { value: "180-mono", label: "180° Mono" },
+  { value: "360-mono", label: "360° Mono" },
+  { value: "360-sbs", label: "360° SBS" },
+  { value: "360-tb", label: "360° Top-Bottom" },
+  { value: "fisheye190-sbs", label: "Fisheye 190° SBS" },
+  { value: "fisheye190-mono", label: "Fisheye 190° Mono" },
+  { value: "flat-2d", label: "Flat 2D" },
+  { value: "flat-sbs-full", label: "Flat 3D — Full SBS" },
+  { value: "flat-sbs-half", label: "Flat 3D — Half SBS" }
+], V = {
+  "180-sbs": "180° SBS",
+  "180-mono": "180° Mono",
+  "360-mono": "360° Mono",
+  "360-sbs": "360° SBS",
+  "360-tb": "360° TB",
+  "fisheye190-sbs": "Fisheye SBS",
+  "fisheye190-mono": "Fisheye Mono",
+  "flat-2d": "Flat 2D",
+  "flat-sbs-full": "Flat SBS",
+  "flat-sbs-half": "Flat SBS½"
+};
+function Z(h) {
+  var e;
+  return !!((e = S[h]) != null && e.flat);
+}
+function J(h) {
+  const e = String(h).toLowerCase(), t = /(^|[^a-z])(tb|ou|top.?bottom|over.?under)([^a-z]|$)/.test(e), i = /(sbs|side.?by.?side)/.test(e);
+  return /(fisheye|mkx200|rf52|vrca220)/.test(e) ? e.includes("mono") ? "fisheye190-mono" : "fisheye190-sbs" : e.includes("360") ? t ? "360-tb" : i ? "360-sbs" : "360-mono" : e.includes("180") || e.includes("vr180") ? e.includes("mono") ? "180-mono" : "180-sbs" : i ? e.includes("half") ? "flat-sbs-half" : "flat-sbs-full" : null;
+}
+function k(h) {
+  if (!Number.isFinite(h) || h < 0) return "0:00";
+  const e = Math.floor(h % 60), t = Math.floor(h / 60 % 60), i = Math.floor(h / 3600), s = String(e).padStart(2, "0");
+  return i > 0 ? `${i}:${String(t).padStart(2, "0")}:${s}` : `${t}:${s}`;
+}
+const y = 1024, w = 340;
+function O() {
+  const h = y, e = w, t = 48;
+  return {
+    width: h,
+    height: e,
+    // Top-row icon buttons (reticle / eye / door-arrow). Compact so they read as icons, not labels.
+    recenter: { x: 30, y: 26, w: 64, h: 52 },
+    passthrough: { x: 108, y: 26, w: 64, h: 52 },
+    // toggle; shown only for alpha (passthrough) content
+    exit: { x: h - 94, y: 26, w: 64, h: 52 },
+    title: { x: 0, y: 92, w: h, h: 44 },
+    play: { x: h / 2 - 44, y: 150, w: 88, h: 88 },
+    volIcon: { x: t, y: 178, w: 44, h: 44 },
+    volBar: { x: t + 60, y: 192, w: 200, h: 16 },
+    // Projection stepper on the right: ◀ [label] ▶
+    projPrev: { x: 592, y: 178, w: 46, h: 46 },
+    projNext: { x: h - 94, y: 178, w: 46, h: 46 },
+    projLabel: { x: 646, y: 178, w: h - 94 - 646, h: 46 },
+    seekBar: { x: t, y: 286, w: h - t * 2, h: 14 },
+    timeCur: { x: t, y: 262 },
+    timeDur: { x: h - t, y: 262 }
+  };
+}
+const C = (h) => h < 0 ? 0 : h > 1 ? 1 : h;
+function x(h, e, t, i = 0, s = 0) {
+  return e >= h.x - i && e <= h.x + h.w + i && t >= h.y - s && t <= h.y + h.h + s;
+}
+function W(h, e, t = O()) {
+  return x(t.recenter, h, e) ? { region: "recenter" } : x(t.passthrough, h, e) ? { region: "passthrough" } : x(t.exit, h, e) ? { region: "exit" } : x(t.projPrev, h, e) ? { region: "projPrev" } : x(t.projNext, h, e) ? { region: "projNext" } : x(t.play, h, e) ? { region: "play" } : x(t.volIcon, h, e) ? { region: "volume" } : x(t.volBar, h, e, 12, 26) ? { region: "volume", value: C((h - t.volBar.x) / t.volBar.w) } : x(t.seekBar, h, e, 12, 26) ? { region: "seek", value: C((h - t.seekBar.x) / t.seekBar.w) } : null;
+}
+const R = "#4f8cff", P = "#e8eaed", L = "#aab2c0", U = [4, 5], A = 8e3, N = 0.05, _ = 0.02, I = 1500, T = 0.15, q = 0.012, z = 0.012, H = 0.08;
+class X {
+  // re-lock the panel to the head pose for a few frames after summon
+  constructor(e) {
+    this.layout = O(), this.raycaster = new a.Raycaster(), this.tmpMatrix = new a.Matrix4(), this.tmpVec = new a.Vector3(), this.tmpQuat = new a.Quaternion(), this.prevQuat = [], this.prevPos = [], this.revealCooldownUntil = 0, this.grabbing = null, this.grabStartQuat = new a.Quaternion(), this.prevGrabQuat = new a.Quaternion(), this.grabQuat = new a.Quaternion(), this.deltaQuat = new a.Quaternion(), this.grabEuler = new a.Euler(0, 0, 0, "YXZ"), this.controllers = [], this.lasers = [], this.connected = [], this.cleanups = [], this.visible = !1, this.hover = null, this.paintKey = "", this.idleAt = 0, this.togglePrev = !1, this.placeFrames = 0, this.renderer = e.renderer, this.scene = e.scene, this.actions = e.actions, this.canvas = document.createElement("canvas"), this.canvas.width = y, this.canvas.height = w, this.ctx = this.canvas.getContext("2d"), this.texture = new a.CanvasTexture(this.canvas), this.texture.colorSpace = a.SRGBColorSpace, this.texture.minFilter = a.LinearFilter;
+    const t = 1, i = t * w / y;
+    this.panel = new a.Mesh(
+      new a.PlaneGeometry(t, i),
+      new a.MeshBasicMaterial({ map: this.texture, transparent: !0, depthTest: !1, side: a.DoubleSide })
+    ), this.panel.renderOrder = 10, this.panel.frustumCulled = !1, this.panel.visible = !1, this.scene.add(this.panel), this.cursor = new a.Mesh(
+      new a.SphereGeometry(7e-3, 16, 12),
+      new a.MeshBasicMaterial({ color: 16777215, depthTest: !1 })
+    ), this.cursor.renderOrder = 11, this.cursor.frustumCulled = !1, this.cursor.visible = !1, this.scene.add(this.cursor);
+    const s = this.renderer.xr.getSession(), r = s ? Array.from(s.inputSources).filter((n) => n.targetRayMode === "tracked-pointer").length : 0;
+    for (let n = 0; n < 2; n++) {
+      const l = this.renderer.xr.getController(n), o = this.makeLaser();
+      o.visible = !1, l.add(o), this.scene.add(l), this.controllers.push(l), this.lasers.push(o), this.connected.push(n < r);
+      const c = () => this.onSelect(n), f = () => this.onGrabStart(n), u = () => this.onGrabEnd(n), g = (d) => {
+        this.connected[n] = !(d != null && d.data) || d.data.targetRayMode === "tracked-pointer";
+      }, v = () => {
+        this.connected[n] = !1;
+      }, p = l;
+      p.addEventListener("selectstart", c), p.addEventListener("squeezestart", f), p.addEventListener("squeezeend", u), p.addEventListener("connected", g), p.addEventListener("disconnected", v), this.cleanups.push(() => {
+        p.removeEventListener("selectstart", c), p.removeEventListener("squeezestart", f), p.removeEventListener("squeezeend", u), p.removeEventListener("connected", g), p.removeEventListener("disconnected", v);
+      });
+    }
+    this.paint(!0);
+  }
+  makeLaser() {
+    const e = new a.BufferGeometry().setFromPoints([new a.Vector3(0, 0, 0), new a.Vector3(0, 0, -1)]), t = new a.LineBasicMaterial({ color: 5213439, transparent: !0, opacity: 0.8 });
+    return new a.Line(e, t);
+  }
+  /** Called once per frame from the render loop (before renderer.render). */
+  update(e) {
+    if (!this.renderer.xr.getSession()) return;
+    if (this.pollToggle(), this.handleThumbstick(), this.handleGrab(), this.maybeRevealOnMotion(e), !this.visible) {
+      for (const s of this.lasers) s.visible = !1;
+      this.cursor.visible = !1;
+      return;
+    }
+    if (this.placeFrames > 0 && (this.place(), this.placeFrames--), this.idleAt && e > this.idleAt) {
+      this.hide();
+      return;
+    }
+    let t = null, i = null;
+    for (let s = 0; s < this.controllers.length; s++) {
+      const r = this.lasers[s], n = this.controllers[s], l = this.tmpVec.setFromMatrixPosition(n.matrixWorld).lengthSq() > 1e-6;
+      if (!this.connected[s] || !l) {
+        r.visible = !1;
+        continue;
+      }
+      const o = this.rayHit(n);
+      o.point ? (r.visible = !0, r.scale.z = o.distance, i = o.point, o.hit && (t = o.hit.region)) : r.visible = !1;
+    }
+    i ? (this.cursor.position.copy(i), this.cursor.visible = !0) : this.cursor.visible = !1, t && (this.idleAt = e + A), this.hover = t, this.paint(!1);
+  }
+  /** Ray from a controller against the panel: the region under it (if any) and
+   *  how far the laser reaches. */
+  rayHit(e) {
+    this.tmpMatrix.identity().extractRotation(e.matrixWorld), this.raycaster.ray.origin.setFromMatrixPosition(e.matrixWorld), this.raycaster.ray.direction.set(0, 0, -1).applyMatrix4(this.tmpMatrix);
+    const t = this.raycaster.intersectObject(this.panel, !1);
+    if (!t.length) return { hit: null, distance: 5, point: null };
+    const i = t[0];
+    return { hit: i.uv ? W(i.uv.x * y, (1 - i.uv.y) * w, this.layout) : null, distance: i.distance, point: i.point };
+  }
+  onSelect(e) {
+    if (!this.visible || !this.connected[e]) return;
+    const { hit: t } = this.rayHit(this.controllers[e]);
+    if (t) {
+      switch (this.idleAt = E() + A, t.region) {
+        case "play":
+          this.actions.togglePlay();
+          break;
+        case "exit":
+          this.actions.exitVR();
+          break;
+        case "passthrough":
+          this.actions.passthroughAvailable() && this.actions.togglePassthrough();
+          break;
+        case "projPrev":
+          this.actions.cycleProjection(-1);
+          break;
+        case "projNext":
+          this.actions.cycleProjection(1);
+          break;
+        case "recenter":
+          this.actions.recenter(), this.placeFrames = 12;
+          break;
+        case "seek":
+          t.value !== void 0 && this.actions.seekFraction(t.value);
+          break;
+        case "volume":
+          t.value !== void 0 ? this.actions.setVolume(t.value) : this.actions.toggleMute();
+          break;
+      }
+      this.paint(!0);
+    }
+  }
+  /** Re-summon the panel when a connected controller is deliberately moved (and
+   *  we're past the post-hide cooldown). Tracks each controller's pose per frame. */
+  maybeRevealOnMotion(e) {
+    if (this.grabbing === null)
+      for (let t = 0; t < this.controllers.length; t++) {
+        const i = this.controllers[t], s = this.tmpVec.setFromMatrixPosition(i.matrixWorld);
+        if (!this.connected[t] || s.lengthSq() <= 1e-6) continue;
+        const r = this.tmpQuat.setFromRotationMatrix(i.matrixWorld), n = this.prevQuat[t], l = this.prevPos[t];
+        n && l && !this.visible && e > this.revealCooldownUntil && (r.angleTo(n) > N || s.distanceTo(l) > _) && this.show(), this.prevQuat[t] || (this.prevQuat[t] = new a.Quaternion()), this.prevPos[t] || (this.prevPos[t] = new a.Vector3()), this.prevQuat[t].copy(r), this.prevPos[t].copy(s);
+      }
+  }
+  /** Right thumbstick, applied every frame it's held: X zooms the content fov (push right =
+   *  zoom in), Y tilts the content pitch (push up = tilt up). The grip grab-rotate also does
+   *  pitch/yaw; the two coexist. */
+  handleThumbstick() {
+    const e = this.renderer.xr.getSession();
+    if (!e) return;
+    const t = (i) => Math.sign(i) * (Math.abs(i) - T) / (1 - T);
+    for (const i of e.inputSources) {
+      if (i.handedness !== "right" || !i.gamepad) continue;
+      const s = i.gamepad.axes, r = s.length >= 4 ? s[2] ?? 0 : s[0] ?? 0, n = s.length >= 4 ? s[3] ?? 0 : s[1] ?? 0;
+      Math.abs(r) > T && this.actions.adjustZoom(t(r) * q), Math.abs(n) > T && this.actions.adjustTilt(-t(n) * z);
+      break;
+    }
+  }
+  onGrabStart(e) {
+    this.connected[e] && (this.grabbing = e, this.controllers[e].getWorldQuaternion(this.grabStartQuat), this.prevGrabQuat.copy(this.grabStartQuat));
+  }
+  onGrabEnd(e) {
+    this.grabbing === e && (this.grabbing = null, this.revealCooldownUntil = E() + I, this.controllers[e].getWorldQuaternion(this.grabQuat).angleTo(this.grabStartQuat) < H && this.toggle());
+  }
+  /** While the grip is held, apply the controller's frame-to-frame rotation to the
+   *  content's yaw and pitch — a 1:1 grab-and-turn. Roll is ignored. */
+  handleGrab() {
+    if (this.grabbing === null) return;
+    if (!this.connected[this.grabbing]) {
+      this.grabbing = null;
+      return;
+    }
+    const e = this.controllers[this.grabbing].getWorldQuaternion(this.grabQuat);
+    this.deltaQuat.copy(this.prevGrabQuat).invert().premultiply(e), this.grabEuler.setFromQuaternion(this.deltaQuat, "YXZ"), this.actions.adjustYaw(this.grabEuler.y), this.actions.adjustTilt(this.grabEuler.x), this.prevGrabQuat.copy(e);
+  }
+  pollToggle() {
+    const e = this.renderer.xr.getSession();
+    let t = !1;
+    for (const i of (e == null ? void 0 : e.inputSources) ?? []) {
+      const s = i.gamepad;
+      s && U.some((r) => {
+        var n;
+        return (n = s.buttons[r]) == null ? void 0 : n.pressed;
+      }) && (t = !0);
+    }
+    t && !this.togglePrev && this.toggle(), this.togglePrev = t;
+  }
+  toggle() {
+    this.visible ? this.hide() : this.show();
+  }
+  show() {
+    this.place(), this.placeFrames = 12, this.visible = !0, this.panel.visible = !0, this.idleAt = E() + A, this.paint(!0);
+  }
+  hide() {
+    this.visible = !1, this.panel.visible = !1, this.cursor.visible = !1;
+    for (const e of this.lasers) e.visible = !1;
+    this.revealCooldownUntil = E() + I;
+  }
+  /** World-lock the panel in front of the current head pose (the "recenter"). Uses
+   *  yaw only (so head pitch/roll at summon doesn't skew it), drops it into the lower
+   *  field of view, and tilts its face up toward the viewer. Re-run on every summon. */
+  place() {
+    const e = this.renderer.xr.getCamera(), t = e.getWorldPosition(new a.Vector3()), i = e.getWorldQuaternion(new a.Quaternion()), s = new a.Euler().setFromQuaternion(i, "YXZ").y, r = new a.Quaternion().setFromEuler(new a.Euler(0, s, 0, "YXZ")), n = new a.Vector3(0, 0, -1).applyQuaternion(r);
+    this.panel.position.copy(t).addScaledVector(n, 1.5), this.panel.position.y -= 0.55, this.panel.quaternion.copy(r), this.panel.rotateX(-0.3);
+  }
+  /** Trim text with a trailing ellipsis to fit maxWidth. Assumes ctx.font is set. */
+  ellipsize(e, t) {
+    const i = this.ctx;
+    if (i.measureText(e).width <= t) return e;
+    let s = e;
+    for (; s.length > 1 && i.measureText(s + "…").width > t; ) s = s.slice(0, -1);
+    return s.replace(/\s+$/, "") + "…";
+  }
+  roundRect(e, t, i, s, r) {
+    const n = this.ctx;
+    n.beginPath(), n.moveTo(e + r, t), n.arcTo(e + i, t, e + i, t + s, r), n.arcTo(e + i, t + s, e, t + s, r), n.arcTo(e, t + s, e, t, r), n.arcTo(e, t, e + i, t, r), n.closePath();
+  }
+  /** Repaint the panel only when something visible changed (state or hover). */
+  paint(e) {
+    const t = this.actions.currentTime(), i = this.actions.duration(), s = this.actions.volume(), r = this.actions.muted(), n = this.actions.passthroughAvailable() && this.actions.passthroughEnabled(), l = [this.actions.isPlaying(), Math.floor(t), Math.floor(i), s.toFixed(2), r, this.hover, this.actions.title(), this.actions.passthroughAvailable(), n, this.actions.projectionLabel()].join("|");
+    if (!e && l === this.paintKey) return;
+    this.paintKey = l;
+    const o = this.ctx, c = this.layout;
+    o.clearRect(0, 0, y, w), this.roundRect(0, 0, y, w, 28), o.fillStyle = "rgba(22,24,30,0.84)", o.fill(), o.lineWidth = 2, o.strokeStyle = "rgba(255,255,255,0.08)", o.stroke();
+    const f = this.actions.title();
+    if (f) {
+      o.font = '600 30px system-ui,"Segoe UI",Roboto,sans-serif', o.fillStyle = P, o.textAlign = "center", o.textBaseline = "middle";
+      const d = 2 * c.exit.x - 48 - y;
+      o.fillText(this.ellipsize(f, d), y / 2, c.title.y + c.title.h / 2);
+    }
+    if (this.drawIconButton(c.recenter, this.hover === "recenter", !1, (d, m, b) => this.iconRecenter(d, m, b)), this.drawIconButton(c.exit, this.hover === "exit", !1, (d, m, b) => this.iconExit(d, m, b)), this.actions.passthroughAvailable()) {
+      const d = this.actions.passthroughEnabled();
+      this.drawIconButton(c.passthrough, d, this.hover === "passthrough", (m, b, M) => this.iconEye(m, b, !d, M));
+    }
+    const u = { x: c.play.x + c.play.w / 2, y: c.play.y + c.play.h / 2 };
+    o.beginPath(), o.arc(u.x, u.y, 44, 0, Math.PI * 2), o.fillStyle = this.hover === "play" ? R : "rgba(255,255,255,0.14)", o.fill(), o.fillStyle = "#fff", this.actions.isPlaying() ? (o.fillRect(u.x - 13, u.y - 16, 9, 32), o.fillRect(u.x + 4, u.y - 16, 9, 32)) : (o.beginPath(), o.moveTo(u.x - 12, u.y - 17), o.lineTo(u.x - 12, u.y + 17), o.lineTo(u.x + 18, u.y), o.closePath(), o.fill()), this.drawSpeaker(c.volIcon, r);
+    const g = r ? 0 : Math.max(0, Math.min(1, s));
+    this.drawBar(c.volBar, g, this.hover === "volume");
+    const v = c.projLabel.x + c.projLabel.w / 2;
+    o.fillStyle = L, o.font = "600 15px system-ui,sans-serif", o.textAlign = "center", o.textBaseline = "alphabetic", o.fillText("PROJECTION", v, c.projPrev.y - 8), this.drawIconButton(c.projPrev, this.hover === "projPrev", !1, (d, m, b) => this.iconArrow(d, m, -1, b)), this.drawIconButton(c.projNext, this.hover === "projNext", !1, (d, m, b) => this.iconArrow(d, m, 1, b)), o.fillStyle = P, o.font = "600 26px system-ui,sans-serif", o.textAlign = "center", o.textBaseline = "middle", o.fillText(this.ellipsize(this.actions.projectionLabel(), c.projLabel.w - 12), v, c.projLabel.y + c.projLabel.h / 2);
+    const p = i > 0 ? Math.max(0, Math.min(1, t / i)) : 0;
+    this.drawBar(c.seekBar, p, this.hover === "seek", !0), o.fillStyle = L, o.font = "22px system-ui,sans-serif", o.textBaseline = "alphabetic", o.textAlign = "left", o.fillText(k(t), c.timeCur.x, c.timeCur.y), o.textAlign = "right", o.fillText(i > 0 ? k(i) : "--:--", c.timeDur.x, c.timeDur.y), this.texture.needsUpdate = !0;
+  }
+  /** A rounded-square icon button: accent fill when `filled`, white border when `hover`; the
+   *  icon is drawn centred in `filled ? white : TEXT`. */
+  drawIconButton(e, t, i, s) {
+    const r = this.ctx;
+    this.roundRect(e.x, e.y, e.w, e.h, 14), r.fillStyle = t ? R : "rgba(255,255,255,0.12)", r.fill(), i && (r.lineWidth = 3, r.strokeStyle = "rgba(255,255,255,0.9)", r.stroke()), s(e.x + e.w / 2, e.y + e.h / 2, t ? "#fff" : P);
+  }
+  /** Recenter — a reticle (ring + centre dot + crosshair ticks). */
+  iconRecenter(e, t, i) {
+    const s = this.ctx;
+    s.strokeStyle = i, s.fillStyle = i, s.lineWidth = 2.5, s.lineCap = "round", s.beginPath(), s.arc(e, t, 9, 0, Math.PI * 2), s.stroke(), s.beginPath(), s.arc(e, t, 2.4, 0, Math.PI * 2), s.fill(), s.beginPath(), s.moveTo(e, t - 16), s.lineTo(e, t - 6), s.moveTo(e, t + 6), s.lineTo(e, t + 16), s.moveTo(e - 16, t), s.lineTo(e - 6, t), s.moveTo(e + 6, t), s.lineTo(e + 16, t), s.stroke();
+  }
+  /** Passthrough — an eye; a diagonal slash across it means passthrough is off. */
+  iconEye(e, t, i, s) {
+    const r = this.ctx, n = 16, l = 10;
+    r.strokeStyle = s, r.fillStyle = s, r.lineWidth = 2.5, r.lineCap = "round", r.beginPath(), r.moveTo(e - n, t), r.quadraticCurveTo(e, t - l * 1.7, e + n, t), r.quadraticCurveTo(e, t + l * 1.7, e - n, t), r.stroke(), r.beginPath(), r.arc(e, t, 4, 0, Math.PI * 2), r.fill(), i && (r.beginPath(), r.moveTo(e - n, t + l), r.lineTo(e + n, t - l), r.stroke());
+  }
+  /** A solid triangle pointing left (dir −1) or right (dir +1) — the projection stepper arrows. */
+  iconArrow(e, t, i, s) {
+    const r = this.ctx, n = 8, l = 10;
+    r.fillStyle = s, r.beginPath(), r.moveTo(e + i * n, t), r.lineTo(e - i * n, t - l), r.lineTo(e - i * n, t + l), r.closePath(), r.fill();
+  }
+  /** Exit — a door frame with an arrow pointing out to the right. */
+  iconExit(e, t, i) {
+    const s = this.ctx, r = e - 15, n = 11, l = 22, o = e + 16;
+    s.strokeStyle = i, s.lineWidth = 2.5, s.lineCap = "round", s.lineJoin = "round", s.beginPath(), s.moveTo(r + n, t - l / 2), s.lineTo(r, t - l / 2), s.lineTo(r, t + l / 2), s.lineTo(r + n, t + l / 2), s.stroke(), s.beginPath(), s.moveTo(e - 3, t), s.lineTo(o, t), s.moveTo(o - 7, t - 6), s.lineTo(o, t), s.lineTo(o - 7, t + 6), s.stroke();
+  }
+  drawBar(e, t, i, s = !1) {
+    const r = this.ctx, n = e.h / 2;
+    this.roundRect(e.x, e.y, e.w, e.h, n), r.fillStyle = "rgba(255,255,255,0.22)", r.fill(), t > 0 && (this.roundRect(e.x, e.y, e.w * t, e.h, n), r.fillStyle = R, r.fill()), (s || i) && (r.beginPath(), r.arc(e.x + e.w * t, e.y + e.h / 2, i ? 12 : 9, 0, Math.PI * 2), r.fillStyle = "#fff", r.fill());
+  }
+  drawSpeaker(e, t) {
+    const i = this.ctx, s = e.x, r = e.y + e.h / 2;
+    i.fillStyle = t ? L : P, i.beginPath(), i.moveTo(s, r - 7), i.lineTo(s + 10, r - 7), i.lineTo(s + 20, r - 16), i.lineTo(s + 20, r + 16), i.lineTo(s + 10, r + 7), i.lineTo(s, r + 7), i.closePath(), i.fill(), i.strokeStyle = t ? "#e06a6a" : P, i.lineWidth = 3, t ? (i.beginPath(), i.moveTo(s + 26, r - 9), i.lineTo(s + 40, r + 9), i.moveTo(s + 40, r - 9), i.lineTo(s + 26, r + 9), i.stroke()) : (i.beginPath(), i.arc(s + 24, r, 8, -Math.PI / 3, Math.PI / 3), i.stroke(), i.beginPath(), i.arc(s + 24, r, 15, -Math.PI / 3, Math.PI / 3), i.stroke());
+  }
+  dispose() {
+    for (const e of this.cleanups) e();
+    for (let e = 0; e < this.controllers.length; e++) {
+      const t = this.controllers[e];
+      t.remove(this.lasers[e]), this.lasers[e].geometry.dispose(), this.lasers[e].material.dispose(), this.scene.remove(t);
+    }
+    this.scene.remove(this.panel), this.panel.geometry.dispose(), this.panel.material.dispose(), this.scene.remove(this.cursor), this.cursor.geometry.dispose(), this.cursor.material.dispose(), this.texture.dispose();
+  }
+}
+function E() {
+  return typeof performance < "u" ? performance.now() : 0;
+}
+class K {
+  constructor(e) {
+    this.scene = new a.Scene(), this.meshes = [], this.rig = new a.Group(), this.tilt = 0, this.fov = 1, this.builtFov = 1, this.frameCbs = [], this.alphaFisheye = !1, this.inPassthroughSession = !1, this.passthroughOn = !0, this.animate = (o) => {
+      var c;
+      for (const f of this.frameCbs) f();
+      (c = this.vrControls) == null || c.update(o ?? 0), this.video.readyState >= this.video.HAVE_CURRENT_DATA && (this.texture.needsUpdate = !0), this.renderer.render(this.scene, this.camera);
+    }, this.vrSessionInit = { optionalFeatures: ["local-floor"] }, this.arSessionInit = { optionalFeatures: ["local-floor"] }, this.vrTitle = "", this.resize = () => {
+      if (this.renderer.xr.isPresenting) return;
+      const o = this.w(), c = this.h();
+      this.camera.aspect = o / c, this.camera.updateProjectionMatrix(), this.renderer.setSize(o, c, !1);
+    };
+    const { canvas: t, video: i, projection: s = "180-sbs", swapEyes: r = !1, fov: n = 70, supersampling: l = 1.5 } = e;
+    this.canvas = t, this.video = i, this.currentMode = S[s] ? s : "180-sbs", this.currentSwap = r, this.renderer = new a.WebGLRenderer({ canvas: t, antialias: !0, alpha: !0 }), this.renderer.setClearColor(0, 1), this.renderer.setPixelRatio(this.pixelRatioFor(l)), this.renderer.setSize(this.w(), this.h(), !1), this.renderer.xr.enabled = !0, this.camera = new a.PerspectiveCamera(n, this.w() / this.h(), 0.1, 1e3), this.camera.position.set(0, 0, 0), this.maxAnisotropy = this.renderer.capabilities.getMaxAnisotropy(), this.texture = new a.VideoTexture(i), this.texture.colorSpace = a.SRGBColorSpace, this.texture.minFilter = a.LinearFilter, this.texture.magFilter = a.LinearFilter, this.texture.anisotropy = 1, this.rig.rotation.order = "YXZ", this.scene.add(this.rig), this.applyProjection(this.currentMode, this.currentSwap), i.addEventListener("loadedmetadata", () => {
+      S[this.currentMode].flat && this.applyProjection(this.currentMode, this.currentSwap);
+    }), this.renderer.setAnimationLoop(this.animate), this.renderer.xr.addEventListener("sessionstart", () => {
+      var c;
+      const o = (c = this.renderer.xr.getSession()) == null ? void 0 : c.environmentBlendMode;
+      this.inPassthroughSession = !!(o && o !== "opaque"), this.inPassthroughSession && this.setPassthrough(!0), this.buildVRControls();
+    }), this.renderer.xr.addEventListener("sessionend", () => {
+      var o;
+      this.renderer.setClearAlpha(1), this.inPassthroughSession = !1, (o = this.vrControls) == null || o.dispose(), this.vrControls = void 0, this.video.pause();
+    }), this.ro = new ResizeObserver(() => this.resize()), this.ro.observe(t);
+  }
+  buildVRControls() {
+    const e = this.video;
+    this.vrControls = new X({
+      renderer: this.renderer,
+      scene: this.scene,
+      actions: {
+        isPlaying: () => !e.paused,
+        currentTime: () => e.currentTime,
+        duration: () => e.duration || 0,
+        volume: () => e.volume,
+        muted: () => e.muted,
+        title: () => this.vrTitle,
+        togglePlay: () => {
+          e.paused ? e.play() : e.pause();
+        },
+        seekFraction: (t) => {
+          e.duration && (e.currentTime = t * e.duration);
+        },
+        setVolume: (t) => {
+          e.volume = t, t > 0 && (e.muted = !1);
+        },
+        toggleMute: () => {
+          e.muted = !e.muted;
+        },
+        exitVR: () => this.exitVR(),
+        recenter: () => this.recenter(),
+        adjustTilt: (t) => this.adjustTilt(t),
+        adjustYaw: (t) => this.adjustYaw(t),
+        adjustZoom: (t) => this.adjustZoom(t),
+        passthroughAvailable: () => this.inPassthroughSession,
+        // any AR session, not just alpha content
+        passthroughEnabled: () => this.passthroughOn,
+        togglePassthrough: () => this.setPassthrough(!this.passthroughOn),
+        projectionLabel: () => this.projectionLabel(),
+        cycleProjection: (t) => this.cycleProjection(t)
+      }
+    });
+  }
+  /** Recenter the view: make the viewer's current spot and facing the origin, so the
+   *  video front is straight ahead again. Resets yaw and horizontal position; keeps
+   *  head height and a level horizon (no pitch/roll). */
+  recenter() {
+    const e = this.renderer.xr;
+    if (!e.isPresenting) return;
+    const t = e.getReferenceSpace();
+    if (!t) return;
+    const i = e.getCamera(), s = i.getWorldPosition(new a.Vector3()), r = new a.Euler().setFromQuaternion(i.getWorldQuaternion(new a.Quaternion()), "YXZ").y, n = new a.Quaternion().setFromEuler(new a.Euler(0, r, 0, "YXZ")), l = new XRRigidTransform({ x: s.x, y: 0, z: s.z }, { x: n.x, y: n.y, z: n.z, w: n.w });
+    e.setReferenceSpace(t.getOffsetReferenceSpace(l));
+  }
+  /** Optional title shown on the in-VR control panel. */
+  setVRTitle(e) {
+    this.vrTitle = e;
+  }
+  w() {
+    return this.canvas.clientWidth || 1;
+  }
+  h() {
+    return this.canvas.clientHeight || 1;
+  }
+  pixelRatioFor(e) {
+    return Math.min(window.devicePixelRatio * e, 4);
+  }
+  planeAspect(e) {
+    const t = this.video.videoWidth, i = this.video.videoHeight;
+    return !t || !i ? 16 / 9 : S[e].aspect === "per-eye" ? t / 2 / i : t / i;
+  }
+  buildGeometry(e) {
+    const t = S[e].geom, i = this.fov;
+    if (t === "sphere180") {
+      const l = Math.PI * i, o = Math.PI * i, c = new a.SphereGeometry(50, 64, 32, -l / 2, l, Math.PI / 2 - o / 2, o);
+      return c.scale(-1, 1, 1), c;
+    }
+    if (t === "sphere360") {
+      const l = 2 * Math.PI * i, o = Math.PI * i, c = new a.SphereGeometry(50, 64, 32, Math.PI - l / 2, l, Math.PI / 2 - o / 2, o);
+      return c.scale(-1, 1, 1), c;
+    }
+    if (t === "fisheye") return this.buildFisheyeDome();
+    const s = 2.4 * i, r = s * this.planeAspect(e), n = new a.PlaneGeometry(r, s);
+    return n.translate(0, 0, -2), n;
+  }
+  /**
+   * A dome covering the fisheye field of view (FISHEYE190 ≈ 190° → a 95° half-angle cap in
+   * front of the viewer), with equidistant-fisheye UVs: the angle from the forward axis maps
+   * linearly to radius on the texture disc (centre 0.5,0.5, radius 0.5). UVs are authored in
+   * full-frame [0,1] space; updateStereoUV's per-eye repeat/offset selects the L/R circle.
+   * Forward is −z (the camera's default view direction), so no extra rotation is needed.
+   */
+  buildFisheyeDome(e = 95) {
+    const r = a.MathUtils.degToRad(e), n = [], l = [], o = [];
+    for (let u = 0; u <= 64; u++) {
+      const g = u / 64, v = g * r, p = g * 0.5, d = Math.sin(v), m = Math.cos(v);
+      for (let b = 0; b <= 128; b++) {
+        const M = b / 128 * Math.PI * 2, j = Math.cos(M), F = Math.sin(M);
+        n.push(d * j * 50, d * F * 50, -m * 50), l.push(0.5 + p * j, 0.5 + p * F);
+      }
+    }
+    const c = 129;
+    for (let u = 0; u < 64; u++)
+      for (let g = 0; g < 128; g++) {
+        const v = u * c + g, p = v + 1, d = v + c, m = d + 1;
+        o.push(v, d, p, p, d, m);
+      }
+    const f = new a.BufferGeometry();
+    return f.setAttribute("position", new a.Float32BufferAttribute(n, 3)), f.setAttribute("uv", new a.Float32BufferAttribute(l, 2)), f.setIndex(o), f.computeVertexNormals(), f;
+  }
+  /**
+   * Transparent material for fisheye content with a DeoVR-style packed alpha matte. Built by
+   * patching MeshBasicMaterial (so three.js keeps handling colour management, the map sample and
+   * flipY) and injecting DeoVR's exact alpha decode (ported from their WebXR player):
+   *
+   *   ptUV = fract(vec2(discUV.x*0.2 + ptShift, discUV.y*0.4 + 0.8));   // ptShift 0.4 L / 0.9 R
+   *   alpha = smoothstep(0.0, 0.8, average of the 3×3 red neighbourhood at ptUV);
+   *
+   * The matte is a 0.4×-scaled copy of the disc's alpha stored per eye at that offset, wrapped
+   * across the frame edges (hence it appears tucked into the corners). It's indexed by the SAME
+   * disc UV as the colour, so it aligns exactly — including per-eye parallax. Outside the disc → clip.
+   */
+  makeFisheyeAlphaMaterial() {
+    const e = new a.MeshBasicMaterial({ map: this.texture, transparent: !0, side: a.DoubleSide, depthWrite: !1 }), t = {
+      uPtShift: { value: 0.4 },
+      uTexel: { value: new a.Vector2(1 / 8e3, 1 / 4e3) },
+      uAlphaEnabled: { value: this.passthroughOn ? 1 : 0 }
+      // 0 → opaque dome (passthrough off)
+    };
+    return this.alphaUniforms = t, e.onBeforeCompile = (i) => {
+      i.uniforms.uPtShift = t.uPtShift, i.uniforms.uTexel = t.uTexel, i.uniforms.uAlphaEnabled = t.uAlphaEnabled, i.vertexShader = `varying vec2 vDiscUv;
+` + i.vertexShader.replace("void main() {", `void main() {
+	vDiscUv = uv;`), i.fragmentShader = `uniform float uPtShift;
+uniform vec2 uTexel;
+uniform float uAlphaEnabled;
+varying vec2 vDiscUv;
+` + i.fragmentShader.replace("#include <map_fragment>", `#include <map_fragment>
+        {
+          vec2 n = (vDiscUv - 0.5) * 2.0;
+          if (dot(n, n) > 1.0) discard;                 // outside the fisheye circle
+          vec2 mUv = fract(vec2(vDiscUv.x * 0.2 + uPtShift, vDiscUv.y * 0.4 + 0.8));
+          float s = 0.0;                                // DeoVR getMask(): 3x3 red average
+          for (int dy = -1; dy <= 1; dy++) {
+            for (int dx = -1; dx <= 1; dx++) {
+              s += texture2D(map, mUv + uTexel * vec2(float(dx), float(dy))).r;
+            }
+          }
+          // uAlphaEnabled 1 → keyed matte (passthrough); 0 → fully opaque dome (no passthrough)
+          diffuseColor.a *= mix(1.0, smoothstep(0.0, 0.8, s / 9.0), uAlphaEnabled);
+        }`);
+    }, e;
+  }
+  /** Passthrough on/off (immersive-ar only): on = real world visible (transparent clear); off =
+   *  opaque black surround (VR-style). Alpha content additionally keys the subject via the matte;
+   *  without a matte the dome stays opaque and only the surround changes. */
+  setPassthrough(e) {
+    var i;
+    this.passthroughOn = e, this.alphaUniforms && (this.alphaUniforms.uAlphaEnabled.value = e ? 1 : 0);
+    const t = (i = this.renderer.xr.getSession()) == null ? void 0 : i.environmentBlendMode;
+    t && t !== "opaque" && this.renderer.setClearAlpha(e ? 0 : 1);
+  }
+  /** Mark the current content as carrying a DeoVR-style packed alpha matte (fisheye only). */
+  setAlphaMatte(e) {
+    this.alphaFisheye !== e && (this.alphaFisheye = e, this.applyProjection(this.currentMode, this.currentSwap));
+  }
+  /** Shift the shared video texture for the eye/half being drawn. Runs from the mesh's
+   *  onBeforeRender, so it's called once per eye per frame (the reference approach). */
+  updateStereoUV(e) {
+    const t = this.texture, i = S[this.currentMode].split;
+    let s = !0;
+    if (this.renderer.xr.isPresenting) {
+      const n = e, l = this.renderer.xr.getCamera().cameras;
+      l && l.length >= 2 ? n === l[0] ? s = !0 : n === l[1] ? s = !1 : s = Math.abs(n.matrixWorldInverse.elements[12] - l[0].matrixWorldInverse.elements[12]) <= Math.abs(n.matrixWorldInverse.elements[12] - l[1].matrixWorldInverse.elements[12]) : s = n.projectionMatrix.elements[8] <= 0;
+    }
+    const r = !s !== this.currentSwap;
+    if (i === "sbs" ? (t.repeat.set(0.5, 1), t.offset.set(r ? 0.5 : 0, 0)) : i === "tb" ? (t.repeat.set(1, 0.5), t.offset.set(0, r ? 0 : 0.5)) : (t.repeat.set(1, 1), t.offset.set(0, 0)), this.alphaUniforms) {
+      this.alphaUniforms.uPtShift.value = r ? 0.9 : 0.4;
+      const n = this.video.videoWidth, l = this.video.videoHeight;
+      n && l && this.alphaUniforms.uTexel.value.set(1 / n, 1 / l);
+    }
+  }
+  clearMeshes() {
+    for (const e of this.meshes)
+      this.rig.remove(e), e.geometry.dispose(), e.material.dispose();
+    this.meshes.length = 0;
+  }
+  applyProjection(e, t) {
+    S[e] || (e = "180-sbs"), this.clearMeshes(), this.currentMode = e, this.currentSwap = t, this.alphaUniforms = void 0;
+    let i;
+    if (S[e].geom === "fisheye" && this.alphaFisheye)
+      i = this.makeFisheyeAlphaMaterial();
+    else {
+      const r = S[e].geom === "fisheye" ? a.DoubleSide : a.FrontSide;
+      i = new a.MeshBasicMaterial({ map: this.texture, side: r });
+    }
+    const s = new a.Mesh(this.buildGeometry(e), i);
+    s.layers.set(0), S[e].geom === "sphere180" && (s.rotation.y = Math.PI / 2), s.onBeforeRender = (r, n, l) => this.updateStereoUV(l), this.rig.add(s), this.meshes.push(s);
+  }
+  /** Pitch the video content up/down (radians, accumulated and clamped). */
+  adjustTilt(e) {
+    this.tilt = Math.max(-0.9, Math.min(0.9, this.tilt + e)), this.rig.rotation.x = this.tilt;
+  }
+  /** Yaw the video content left/right (radians, accumulated, unclamped). */
+  adjustYaw(e) {
+    this.rig.rotation.y += e;
+  }
+  /** Zoom by changing the content field of view (positive delta = zoom in / more
+   *  immersive). Shrinking the fov maps the video into a smaller angular window so the
+   *  scene recedes and feels farther; growing it fills the view. Rebuilds the projection
+   *  geometry, throttled so it doesn't churn every frame. */
+  adjustZoom(e) {
+    this.fov = Math.max(0.3, Math.min(1, this.fov + e)), Math.abs(this.fov - this.builtFov) >= 0.03 && this.rebuildGeometry();
+  }
+  rebuildGeometry() {
+    for (const e of this.meshes) {
+      const t = e.geometry;
+      e.geometry = this.buildGeometry(this.currentMode), t.dispose();
+    }
+    this.builtFov = this.fov;
+  }
+  setProjection(e) {
+    this.applyProjection(e, this.currentSwap);
+  }
+  /** Player registers this so an in-VR projection change flows back through Player — keeping its
+   *  state, persistence, and the DOM controls in sync. Falls back to a direct geometry swap. */
+  setProjectionRequester(e) {
+    this.projectionRequester = e;
+  }
+  /** Short label of the current projection, for the in-VR stepper. */
+  projectionLabel() {
+    return V[this.currentMode] ?? this.currentMode;
+  }
+  /** Step the projection by dir (±1) through the PROJECTIONS list (wraps around). */
+  cycleProjection(e) {
+    const t = G.map((r) => r.value), i = Math.max(0, t.indexOf(this.currentMode)), s = t[(i + e + t.length) % t.length];
+    (this.projectionRequester ?? ((r) => this.setProjection(r)))(s);
+  }
+  setSwapEyes(e) {
+    this.applyProjection(this.currentMode, e);
+  }
+  setFov(e) {
+    this.camera.fov = e, this.camera.updateProjectionMatrix();
+  }
+  setSupersampling(e) {
+    this.renderer.setPixelRatio(this.pixelRatioFor(e)), this.renderer.setSize(this.w(), this.h(), !1);
+  }
+  getProjection() {
+    return this.currentMode;
+  }
+  isFlat() {
+    return !!S[this.currentMode].flat;
+  }
+  onFrame(e) {
+    this.frameCbs.push(e);
+  }
+  pauseRendering() {
+    this.renderer.setAnimationLoop(null);
+  }
+  resumeRendering() {
+    this.renderer.setAnimationLoop(this.animate);
+  }
+  /** Enter immersive VR. Rejects with a readable message on failure so the caller can
+   *  surface it — instead of the silent no-op three.js's VRButton produces. Called from
+   *  a click handler so the request keeps the user's transient activation. */
+  async enterVR() {
+    if (!navigator.xr) throw new Error("WebXR is unavailable here — open the page over HTTPS or localhost.");
+    const e = await navigator.xr.requestSession("immersive-vr", this.vrSessionInit);
+    await this.renderer.xr.setSession(e);
+  }
+  /** Enter immersive AR (passthrough). Same contract as enterVR — called from a click so it
+   *  keeps transient activation, rejects with a readable message. The UA composites our
+   *  transparent framebuffer over the camera feed. */
+  async enterAR() {
+    if (!navigator.xr) throw new Error("WebXR is unavailable here — open the page over HTTPS or localhost.");
+    const e = await navigator.xr.requestSession("immersive-ar", this.arSessionInit);
+    await this.renderer.xr.setSession(e);
+  }
+  exitVR() {
+    var e;
+    this.video.paused || this.video.pause(), (e = this.renderer.xr.getSession()) == null || e.end();
+  }
+  /** Arm the browser/headset's own "Enter VR" affordance (e.g. the Quest system button). */
+  offerVR() {
+    var i;
+    const e = (i = navigator.xr) == null ? void 0 : i.offerSession;
+    if (!e) return;
+    const t = () => e.call(navigator.xr, "immersive-vr", this.vrSessionInit).then((s) => this.renderer.xr.setSession(s)).catch(() => {
+    });
+    this.renderer.xr.addEventListener("sessionend", () => void t()), t();
+  }
+  dispose() {
+    var e;
+    this.ro.disconnect(), this.renderer.setAnimationLoop(null), (e = this.vrControls) == null || e.dispose(), this.texture.dispose(), this.clearMeshes(), this.renderer.dispose();
+  }
+}
+const B = Math.PI / 180;
+function $(h, e) {
+  return {
+    lon: Math.max(-90, Math.min(90, h)),
+    lat: Math.max(-85, Math.min(85, e))
+  };
+}
+class ee {
+  constructor(e, t, i = {}) {
+    this.camera = e, this.dom = t, this.lon = 0, this.lat = 0, this.dragging = !1, this.px = 0, this.py = 0, this.enabled = !0, this.onDown = (s) => {
+      this.enabled && (this.dragging = !0, this.px = s.clientX, this.py = s.clientY, this.capture("setPointerCapture", s.pointerId));
+    }, this.onMove = (s) => {
+      if (!this.dragging) return;
+      const r = s.clientX - this.px, n = s.clientY - this.py;
+      this.px = s.clientX, this.py = s.clientY, { lon: this.lon, lat: this.lat } = $(this.lon - r * 0.15, this.lat + n * 0.15);
+    }, this.onUp = (s) => {
+      this.dragging = !1, this.capture("releasePointerCapture", s.pointerId);
+    }, this.isPresenting = i.isPresenting ?? (() => !1), this.dom.addEventListener("pointerdown", this.onDown), this.dom.addEventListener("pointermove", this.onMove), this.dom.addEventListener("pointerup", this.onUp), this.dom.addEventListener("pointercancel", this.onUp);
+  }
+  capture(e, t) {
+    var i, s;
+    try {
+      (s = (i = this.dom)[e]) == null || s.call(i, t);
+    } catch {
+    }
+  }
+  update() {
+    if (this.isPresenting() || !this.enabled) return;
+    const e = (90 - this.lat) * B, t = this.lon * B;
+    this.camera.lookAt(
+      Math.sin(e) * Math.sin(t),
+      Math.cos(e),
+      -Math.sin(e) * Math.cos(t)
+    );
+  }
+  reset() {
+    this.lon = 0, this.lat = 0;
+  }
+  setEnabled(e) {
+    this.enabled = e, e || (this.lon = 0, this.lat = 0, this.camera.lookAt(0, 0, -1));
+  }
+  getAngles() {
+    return { lon: this.lon, lat: this.lat };
+  }
+  dispose() {
+    this.dom.removeEventListener("pointerdown", this.onDown), this.dom.removeEventListener("pointermove", this.onMove), this.dom.removeEventListener("pointerup", this.onUp), this.dom.removeEventListener("pointercancel", this.onUp);
+  }
+}
+class te {
+  constructor() {
+    this.hls = null;
+  }
+  async attach(e, t, i = {}) {
+    this.dispose();
+    const s = i.crossOrigin === void 0 ? "anonymous" : i.crossOrigin;
+    s === null ? e.removeAttribute("crossorigin") : e.crossOrigin = s, e.playsInline = !0;
+    const { url: r, format: n } = t, l = n === "hls" || n === "dash", o = e.canPlayType("application/vnd.apple.mpegurl") !== "";
+    return new Promise((c, f) => {
+      const u = () => {
+        e.removeEventListener("loadedmetadata", g), e.removeEventListener("error", v);
+      }, g = () => {
+        u(), c();
+      }, v = () => {
+        u();
+        const p = e.error ? e.error.code : "unknown";
+        f(new Error(`Video failed to load (media error ${p}). Is the source reachable and CORS-clean?`));
+      };
+      e.addEventListener("loadedmetadata", g), e.addEventListener("error", v), l && !o ? import("hls.js").then(({ default: p }) => {
+        if (!p.isSupported()) {
+          u(), f(new Error("HLS/DASH stream needs hls.js, which is unsupported in this browser."));
+          return;
+        }
+        this.hls = new p({ enableWorker: !0 }), this.hls.on(p.Events.ERROR, (d, m) => {
+          m.fatal && (u(), this.dispose(), f(new Error(`HLS fatal error: ${m.type} / ${m.details}`)));
+        }), this.hls.loadSource(r), this.hls.attachMedia(e);
+      }).catch(() => {
+        u(), f(new Error('This looks like an HLS/DASH stream but hls.js could not be loaded. Install "hls.js".'));
+      }) : (e.src = r, e.load());
+    });
+  }
+  dispose() {
+    this.hls && (this.hls.destroy(), this.hls = null);
+  }
+}
+export {
+  ee as L,
+  S as M,
+  G as P,
+  K as S,
+  te as V,
+  J as a,
+  Y as b,
+  $ as c,
+  Q as d,
+  k as f,
+  Z as i
+};
+//# sourceMappingURL=VideoSource-DHj5tBsK.js.map