three-vr-player 0.9.0 → 0.10.0

package/dist/{VideoSource-BXMPMJzW.js → VideoSource-DHj5tBsK.js}

@@ -1,5 +1,5 @@
 import * as a from "three";
-function D(h) {
+function Q(h) {
   let e = h;
   try {
     e = new URL(h).pathname;
@@ -8,21 +8,21 @@ function D(h) {
   const t = e.toLowerCase();
   return t.endsWith(".m3u8") ? "hls" : t.endsWith(".mpd") ? "dash" : "progressive";
 }
-const G = {
+const D = {
   progressive: "/proxy/stream",
   hls: "/proxy/hls/manifest.m3u8",
   dash: "/proxy/mpd/manifest.m3u8"
 };
-function q(h, e) {
-  const t = D(h);
+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}${G[t]}?${s.toString()}`, format: t };
+  return { url: `${i}${D[t]}?${s.toString()}`, format: t };
 }
-const b = {
+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 },
@@ -34,7 +34,7 @@ const b = {
   "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" }
-}, X = [
+}, G = [
   { value: "180-sbs", label: "180° SBS (VR180)" },
   { value: "180-mono", label: "180° Mono" },
   { value: "360-mono", label: "360° Mono" },
@@ -45,23 +45,34 @@ const b = {
   { value: "flat-2d", label: "Flat 2D" },
   { value: "flat-sbs-full", label: "Flat 3D — Full SBS" },
   { value: "flat-sbs-half", label: "Flat 3D — Half SBS" }
-];
-function $(h) {
+], 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 = b[h]) != null && e.flat);
+  return !!((e = S[h]) != null && e.flat);
 }
-function Y(h) {
+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 F(h) {
+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 S = 1024, y = 340;
-function Q() {
-  const h = S, e = y, t = 48;
+const y = 1024, w = 340;
+function O() {
+  const h = y, e = w, t = 48;
   return {
     width: h,
     height: e,
@@ -74,24 +85,28 @@ function Q() {
     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 w(h, e, t, i = 0, s = 0) {
+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 V(h, e, t = Q()) {
-  return w(t.recenter, h, e) ? { region: "recenter" } : w(t.passthrough, h, e) ? { region: "passthrough" } : w(t.exit, h, e) ? { region: "exit" } : w(t.play, h, e) ? { region: "play" } : w(t.volIcon, h, e) ? { region: "volume" } : w(t.volBar, h, e, 12, 26) ? { region: "volume", value: C((h - t.volBar.x) / t.volBar.w) } : w(t.seekBar, h, e, 12, 26) ? { region: "seek", value: C((h - t.seekBar.x) / t.seekBar.w) } : null;
+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 T = "#4f8cff", M = "#e8eaed", I = "#aab2c0", W = [4, 5], E = 8e3, U = 0.05, j = 0.02, B = 1500, R = 0.15, _ = 0.012, N = 0.08;
-class z {
+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 = Q(), 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 = S, this.canvas.height = y, 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 * y / S;
+    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 })
@@ -103,13 +118,13 @@ class z {
     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), p = () => this.onGrabStart(n), d = () => this.onGrabEnd(n), m = (f) => {
-        this.connected[n] = !(f != null && f.data) || f.data.targetRayMode === "tracked-pointer";
+      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;
-      }, u = l;
-      u.addEventListener("selectstart", c), u.addEventListener("squeezestart", p), u.addEventListener("squeezeend", d), u.addEventListener("connected", m), u.addEventListener("disconnected", v), this.cleanups.push(() => {
-        u.removeEventListener("selectstart", c), u.removeEventListener("squeezestart", p), u.removeEventListener("squeezeend", d), u.removeEventListener("connected", m), u.removeEventListener("disconnected", v);
+      }, 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);
@@ -140,7 +155,7 @@ class z {
       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 + E), this.hover = t, this.paint(!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. */
@@ -149,13 +164,13 @@ class z {
     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 ? V(i.uv.x * S, (1 - i.uv.y) * y, this.layout) : null, distance: i.distance, point: i.point };
+    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 = P() + E, t.region) {
+      switch (this.idleAt = E() + A, t.region) {
         case "play":
           this.actions.togglePlay();
           break;
@@ -165,6 +180,12 @@ class z {
         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;
@@ -186,26 +207,28 @@ class z {
         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) > U || s.distanceTo(l) > j) && 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);
+        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 X zooms the content fov every frame it's held (push right =
-   *  zoom in). Pitch/yaw are handled by the grip grab-rotate, not the stick. */
+  /** 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)
-      for (const t of e.inputSources) {
-        if (t.handedness !== "right" || !t.gamepad) continue;
-        const i = t.gamepad.axes, s = i.length >= 4 ? i[2] ?? 0 : i[0] ?? 0, r = Math.abs(s);
-        r > R && this.actions.adjustZoom(Math.sign(s) * (r - R) / (1 - R) * _);
-        break;
-      }
+    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 = P() + B, this.controllers[e].getWorldQuaternion(this.grabQuat).angleTo(this.grabStartQuat) < N && this.toggle());
+    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. */
@@ -223,7 +246,7 @@ class z {
     let t = !1;
     for (const i of (e == null ? void 0 : e.inputSources) ?? []) {
       const s = i.gamepad;
-      s && W.some((r) => {
+      s && U.some((r) => {
         var n;
         return (n = s.buttons[r]) == null ? void 0 : n.pressed;
       }) && (t = !0);
@@ -234,12 +257,12 @@ class z {
     this.visible ? this.hide() : this.show();
   }
   show() {
-    this.place(), this.placeFrames = 12, this.visible = !0, this.panel.visible = !0, this.idleAt = P() + E, this.paint(!0);
+    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 = P() + B;
+    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
@@ -262,33 +285,35 @@ class z {
   }
   /** 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].join("|");
+    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, S, y), this.roundRect(0, 0, S, y, 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 p = this.actions.title();
-    if (p) {
-      o.font = '600 30px system-ui,"Segoe UI",Roboto,sans-serif', o.fillStyle = M, o.textAlign = "center", o.textBaseline = "middle";
-      const u = 2 * c.exit.x - 48 - S;
-      o.fillText(this.ellipsize(p, u), S / 2, c.title.y + c.title.h / 2);
+    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, (u, f, g) => this.iconRecenter(u, f, g)), this.drawIconButton(c.exit, this.hover === "exit", !1, (u, f, g) => this.iconExit(u, f, g)), this.actions.passthroughAvailable()) {
-      const u = this.actions.passthroughEnabled();
-      this.drawIconButton(c.passthrough, u, this.hover === "passthrough", (f, g, x) => this.iconEye(f, g, !u, x));
+    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 d = { x: c.play.x + c.play.w / 2, y: c.play.y + c.play.h / 2 };
-    o.beginPath(), o.arc(d.x, d.y, 44, 0, Math.PI * 2), o.fillStyle = this.hover === "play" ? T : "rgba(255,255,255,0.14)", o.fill(), o.fillStyle = "#fff", this.actions.isPlaying() ? (o.fillRect(d.x - 13, d.y - 16, 9, 32), o.fillRect(d.x + 4, d.y - 16, 9, 32)) : (o.beginPath(), o.moveTo(d.x - 12, d.y - 17), o.lineTo(d.x - 12, d.y + 17), o.lineTo(d.x + 18, d.y), o.closePath(), o.fill()), this.drawSpeaker(c.volIcon, r);
-    const m = r ? 0 : Math.max(0, Math.min(1, s));
-    this.drawBar(c.volBar, m, this.hover === "volume");
-    const v = i > 0 ? Math.max(0, Math.min(1, t / i)) : 0;
-    this.drawBar(c.seekBar, v, this.hover === "seek", !0), o.fillStyle = I, o.font = "22px system-ui,sans-serif", o.textBaseline = "alphabetic", o.textAlign = "left", o.fillText(F(t), c.timeCur.x, c.timeCur.y), o.textAlign = "right", o.fillText(i > 0 ? F(i) : "--:--", c.timeDur.x, c.timeDur.y), this.texture.needsUpdate = !0;
+    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 ? T : "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" : M);
+    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) {
@@ -300,6 +325,11 @@ class z {
     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;
@@ -307,11 +337,11 @@ class z {
   }
   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 = T, 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());
+    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 ? I : M, 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" : M, 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());
+    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();
@@ -322,14 +352,14 @@ class z {
     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 P() {
+function E() {
   return typeof performance < "u" ? performance.now() : 0;
 }
-class Z {
+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 p of this.frameCbs) p();
+      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;
@@ -337,8 +367,8 @@ class Z {
       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 = b[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", () => {
-      b[this.currentMode].flat && this.applyProjection(this.currentMode, this.currentSwap);
+    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;
@@ -350,7 +380,7 @@ class Z {
   }
   buildVRControls() {
     const e = this.video;
-    this.vrControls = new z({
+    this.vrControls = new X({
       renderer: this.renderer,
       scene: this.scene,
       actions: {
@@ -380,7 +410,9 @@ class Z {
         passthroughAvailable: () => this.inPassthroughSession,
         // any AR session, not just alpha content
         passthroughEnabled: () => this.passthroughOn,
-        togglePassthrough: () => this.setPassthrough(!this.passthroughOn)
+        togglePassthrough: () => this.setPassthrough(!this.passthroughOn),
+        projectionLabel: () => this.projectionLabel(),
+        cycleProjection: (t) => this.cycleProjection(t)
       }
     });
   }
@@ -410,10 +442,10 @@ class Z {
   }
   planeAspect(e) {
     const t = this.video.videoWidth, i = this.video.videoHeight;
-    return !t || !i ? 16 / 9 : b[e].aspect === "per-eye" ? t / 2 / i : t / i;
+    return !t || !i ? 16 / 9 : S[e].aspect === "per-eye" ? t / 2 / i : t / i;
   }
   buildGeometry(e) {
-    const t = b[e].geom, i = this.fov;
+    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;
@@ -435,21 +467,21 @@ class Z {
    */
   buildFisheyeDome(e = 95) {
     const r = a.MathUtils.degToRad(e), n = [], l = [], o = [];
-    for (let d = 0; d <= 64; d++) {
-      const m = d / 64, v = m * r, u = m * 0.5, f = Math.sin(v), g = Math.cos(v);
-      for (let x = 0; x <= 128; x++) {
-        const A = x / 128 * Math.PI * 2, L = Math.cos(A), k = Math.sin(A);
-        n.push(f * L * 50, f * k * 50, -g * 50), l.push(0.5 + u * L, 0.5 + u * k);
+    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 d = 0; d < 64; d++)
-      for (let m = 0; m < 128; m++) {
-        const v = d * c + m, u = v + 1, f = v + c, g = f + 1;
-        o.push(v, f, u, u, f, g);
+    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 p = new a.BufferGeometry();
-    return p.setAttribute("position", new a.Float32BufferAttribute(n, 3)), p.setAttribute("uv", new a.Float32BufferAttribute(l, 2)), p.setIndex(o), p.computeVertexNormals(), p;
+    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
@@ -509,7 +541,7 @@ varying vec2 vDiscUv;
   /** 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 = b[this.currentMode].split;
+    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;
@@ -528,16 +560,16 @@ varying vec2 vDiscUv;
     this.meshes.length = 0;
   }
   applyProjection(e, t) {
-    b[e] || (e = "180-sbs"), this.clearMeshes(), this.currentMode = e, this.currentSwap = t, this.alphaUniforms = void 0;
+    S[e] || (e = "180-sbs"), this.clearMeshes(), this.currentMode = e, this.currentSwap = t, this.alphaUniforms = void 0;
     let i;
-    if (b[e].geom === "fisheye" && this.alphaFisheye)
+    if (S[e].geom === "fisheye" && this.alphaFisheye)
       i = this.makeFisheyeAlphaMaterial();
     else {
-      const r = b[e].geom === "fisheye" ? a.DoubleSide : a.FrontSide;
+      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), b[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);
+    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) {
@@ -564,6 +596,20 @@ varying vec2 vDiscUv;
   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);
   }
@@ -577,7 +623,7 @@ varying vec2 vDiscUv;
     return this.currentMode;
   }
   isFlat() {
-    return !!b[this.currentMode].flat;
+    return !!S[this.currentMode].flat;
   }
   onFrame(e) {
     this.frameCbs.push(e);
@@ -622,21 +668,21 @@ varying vec2 vDiscUv;
     this.ro.disconnect(), this.renderer.setAnimationLoop(null), (e = this.vrControls) == null || e.dispose(), this.texture.dispose(), this.clearMeshes(), this.renderer.dispose();
   }
 }
-const O = Math.PI / 180;
-function H(h, e) {
+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 K {
+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 } = H(this.lon - r * 0.15, this.lat + n * 0.15);
+      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);
@@ -650,7 +696,7 @@ class K {
   }
   update() {
     if (this.isPresenting() || !this.enabled) return;
-    const e = (90 - this.lat) * O, t = this.lon * O;
+    const e = (90 - this.lat) * B, t = this.lon * B;
     this.camera.lookAt(
       Math.sin(e) * Math.sin(t),
       Math.cos(e),
@@ -670,7 +716,7 @@ class K {
     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 J {
+class te {
   constructor() {
     this.hls = null;
   }
@@ -679,26 +725,26 @@ class J {
     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, p) => {
-      const d = () => {
-        e.removeEventListener("loadedmetadata", m), e.removeEventListener("error", v);
-      }, m = () => {
-        d(), c();
+    return new Promise((c, f) => {
+      const u = () => {
+        e.removeEventListener("loadedmetadata", g), e.removeEventListener("error", v);
+      }, g = () => {
+        u(), c();
       }, v = () => {
-        d();
-        const u = e.error ? e.error.code : "unknown";
-        p(new Error(`Video failed to load (media error ${u}). Is the source reachable and CORS-clean?`));
+        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", m), e.addEventListener("error", v), l && !o ? import("hls.js").then(({ default: u }) => {
-        if (!u.isSupported()) {
-          d(), p(new Error("HLS/DASH stream needs hls.js, which is unsupported in this browser."));
+      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 u({ enableWorker: !0 }), this.hls.on(u.Events.ERROR, (f, g) => {
-          g.fatal && (d(), this.dispose(), p(new Error(`HLS fatal error: ${g.type} / ${g.details}`)));
+        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(() => {
-        d(), p(new Error('This looks like an HLS/DASH stream but hls.js could not be loaded. Install "hls.js".'));
+        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());
     });
   }
@@ -707,16 +753,16 @@ class J {
   }
 }
 export {
-  K as L,
-  b as M,
-  X as P,
-  Z as S,
-  J as V,
-  Y as a,
-  q as b,
-  H as c,
-  D as d,
-  F as f,
-  $ as i
+  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-BXMPMJzW.js.map
+//# sourceMappingURL=VideoSource-DHj5tBsK.js.map