three-vr-player 0.2.0 → 0.4.0

package/README.md

@@ -87,6 +87,7 @@ new Player(container, {
 ```ts
 player.load(src, { projection? }); player.play(); player.pause();
 player.setProjection(p); player.setSwapEyes(b); player.setFov(deg); player.setSupersampling(x);
+player.setProxy({ url, apiPassword?, enabled });  // also exposed as a toggle in the ⚙ settings
 player.enterVR(); player.dispose();
 player.video;   // the underlying <video>
 player.three;   // { renderer, scene, camera }

package/dist/Player.d.ts

@@ -18,6 +18,9 @@ export declare class Player {
     private readyEmitted;
     private native;
     private loading;
+    private proxyConfig?;
+    private useProxy;
+    private currentSrc?;
     constructor(container: HTMLElement, options?: PlayerOptions);
     private vrSupported;
     load(src: string, o?: {
@@ -31,6 +34,12 @@ export declare class Player {
     setSwapEyes(v: boolean): void;
     setFov(deg: number): void;
     setSupersampling(x: number): void;
+    /** Update the CORS proxy config / toggle it, and reload the current source if any. */
+    setProxy(p: {
+        url: string;
+        apiPassword?: string;
+        enabled: boolean;
+    }): void;
     enterVR(): Promise<void>;
     get three(): {
         renderer: import('three').WebGLRenderer;

package/dist/three-vr-player.js

@@ -1,86 +1,109 @@
-import { P as I, V as R, S as $, L as V, a as D, b as U } from "./VideoSource-CJGIX8gL.js";
-import { M as G, c as Q, d as X, i as Z } from "./VideoSource-CJGIX8gL.js";
-function z(l) {
+import { P as Y, V as _, S as H, L as K, a as G, b as Q } from "./VideoSource-CJGIX8gL.js";
+import { M as nt, c as rt, d as at, i as pt } from "./VideoSource-CJGIX8gL.js";
+function R(l) {
   if (!Number.isFinite(l) || l < 0) return "0:00";
-  const t = Math.floor(l % 60), s = Math.floor(l / 60 % 60), e = Math.floor(l / 3600), a = String(t).padStart(2, "0");
-  return e > 0 ? `${e}:${String(s).padStart(2, "0")}:${a}` : `${s}:${a}`;
+  const t = Math.floor(l % 60), e = Math.floor(l / 60 % 60), s = Math.floor(l / 3600), p = String(t).padStart(2, "0");
+  return s > 0 ? `${s}:${String(e).padStart(2, "0")}:${p}` : `${e}:${p}`;
 }
-function n(l, t = {}, s = []) {
-  const e = document.createElement(l), { class: a, ...o } = t;
-  a && (e.className = a), Object.assign(e, o);
-  for (const c of s) e.append(c);
-  return e;
+function o(l, t = {}, e = []) {
+  const s = document.createElement(l), { class: p, ...c } = t;
+  p && (s.className = p), Object.assign(s, c);
+  for (const u of e) s.append(u);
+  return s;
 }
-class J {
-  constructor(t, s) {
+class X {
+  constructor(t, e) {
     this.nodes = [], this.disposers = [];
-    const e = s.video, a = n("button", { class: "tvp-btn tvp-play", title: "Play/Pause", textContent: "▶" }), o = n("input", { class: "tvp-seek", type: "range", min: "0", max: "1000", value: "0" }), c = n("span", { class: "tvp-time", textContent: "0:00 / 0:00" }), h = n("button", { class: "tvp-btn tvp-mute", title: "Volume", textContent: "🔊" }), v = n("input", { class: "tvp-volume", type: "range", min: "0", max: "1", step: "0.01", value: "1" }), m = n("div", { class: "tvp-volpopup", hidden: !0 }, [v]), L = n("span", { class: "tvp-volwrap" }, [h, m]), k = n("span", { class: "tvp-vrslot" }), b = n("button", { class: "tvp-btn tvp-projbtn", title: "Projection", textContent: "🌐" }), d = n("div", { class: "tvp-projmenu", hidden: !0 });
-    for (const i of I) {
-      const r = n("button", { textContent: i.label });
-      r.dataset.mode = i.value, d.append(r);
+    const s = e.video, p = o("button", { class: "tvp-btn tvp-play", title: "Play/Pause", textContent: "▶" }), c = o("input", { class: "tvp-seek", type: "range", min: "0", max: "1000", value: "0" }), u = o("span", { class: "tvp-time", textContent: "0:00 / 0:00" }), r = o("button", { class: "tvp-btn tvp-mute", title: "Volume", textContent: "🔊" }), v = o("input", { class: "tvp-volume", type: "range", min: "0", max: "1", step: "0.01", value: "1" }), f = o("div", { class: "tvp-volpopup", hidden: !0 }, [v]), D = o("span", { class: "tvp-volwrap" }, [r, f]), N = o("span", { class: "tvp-vrslot" }), b = o("button", { class: "tvp-btn tvp-projbtn", title: "Projection", textContent: "🌐" }), h = o("div", { class: "tvp-projmenu", hidden: !0 });
+    for (const i of Y) {
+      const n = o("button", { textContent: i.label });
+      n.dataset.mode = i.value, h.append(n);
     }
-    const T = n("span", { class: "tvp-projwrap" }, [b, d]), S = n("button", { class: "tvp-btn tvp-settingsbtn", title: "Settings", textContent: "⚙" }), E = n("button", { class: "tvp-btn tvp-fullscreen", title: "Fullscreen", textContent: "⛶" }), M = n("footer", { class: "tvp-controls" }, [a, o, c, L, k, T, S, E]), x = n("input", { type: "checkbox", checked: s.initial.swapEyes }), f = n("input", { type: "range", min: "30", max: "100", step: "1", value: String(s.initial.fov) }), y = n("span", { textContent: String(s.initial.fov) }), w = n("input", { type: "range", min: "1", max: "2", step: "0.25", value: String(s.initial.supersampling) }), j = n("span", { textContent: String(s.initial.supersampling) }), C = n("section", { class: "tvp-settings" }, [
-      n("label", { class: "row" }, [x, "Swap eyes (if depth looks wrong)"]),
-      n("label", {}, [N("Field of view (zoom): ", y, "°"), f]),
-      n("label", {}, [N("Supersampling: ", j, "× (sharpness)"), w])
-    ]), B = n("div", { class: "tvp-toast" });
-    this.nodes.push(M, C, B);
+    const J = o("span", { class: "tvp-projwrap" }, [b, h]), k = o("button", { class: "tvp-btn tvp-settingsbtn", title: "Settings", textContent: "⚙" }), O = o("button", { class: "tvp-btn tvp-fullscreen", title: "Fullscreen", textContent: "⛶" }), S = o("footer", { class: "tvp-controls" }, [p, c, u, D, N, J, k, O]), P = o("input", { type: "checkbox", checked: e.initial.swapEyes }), x = o("input", { type: "range", min: "30", max: "100", step: "1", value: String(e.initial.fov) }), E = o("span", { textContent: String(e.initial.fov) }), j = o("input", { type: "range", min: "1", max: "2", step: "0.25", value: String(e.initial.supersampling) }), A = o("span", { textContent: String(e.initial.supersampling) }), C = o("input", { type: "checkbox", checked: e.proxy.enabled }), F = o("input", { type: "text", value: e.proxy.url, placeholder: "http://localhost:8888", spellcheck: !1 }), T = o("input", { type: "password", value: e.proxy.apiPassword, placeholder: "API password" }), g = o("section", { class: "tvp-settings" }, [
+      o("label", { class: "row" }, [P, "Swap eyes (if depth looks wrong)"]),
+      o("label", {}, [$("Field of view (zoom): ", E, "°"), x]),
+      o("label", {}, [$("Supersampling: ", A, "× (sharpness)"), j]),
+      o("hr", { class: "tvp-sep" }),
+      o("label", { class: "row" }, [C, "Use CORS proxy"]),
+      o("label", {}, ["Proxy URL", F]),
+      o("label", {}, ["API password", T])
+    ]), W = o("div", { class: "tvp-toast" });
+    this.nodes.push(S, g, W);
     for (const i of this.nodes) t.append(i);
-    const p = (i, r, u, g) => {
-      i.addEventListener(r, u, g), this.disposers.push(() => i.removeEventListener(r, u, g));
-    }, P = (i) => o.style.setProperty("--seek", `${i}%`);
-    p(a, "click", () => {
-      e.paused ? e.play() : e.pause();
-    }), p(e, "play", () => {
-      a.textContent = "⏸";
-    }), p(e, "pause", () => {
-      a.textContent = "▶";
-    }), p(e, "timeupdate", () => {
-      if (e.duration) {
-        const i = e.currentTime / e.duration * 100;
-        o.value = String(i * 10), P(i), c.textContent = `${z(e.currentTime)} / ${z(e.duration)}`;
+    const a = (i, n, d, m) => {
+      i.addEventListener(n, d, m), this.disposers.push(() => i.removeEventListener(n, d, m));
+    }, I = (i) => c.style.setProperty("--seek", `${i}%`), y = () => {
+      f.hidden = !0, h.hidden = !0, g.classList.remove("open");
+    };
+    a(p, "click", () => {
+      s.paused ? s.play() : s.pause();
+    }), a(s, "play", () => {
+      p.textContent = "⏸";
+    }), a(s, "pause", () => {
+      p.textContent = "▶";
+    }), a(s, "timeupdate", () => {
+      if (s.duration) {
+        const i = s.currentTime / s.duration * 100;
+        c.value = String(i * 10), I(i), u.textContent = `${R(s.currentTime)} / ${R(s.duration)}`;
       }
-    }), p(o, "input", () => {
-      P(Number(o.value) / 10), e.duration && (e.currentTime = Number(o.value) / 1e3 * e.duration);
-    }), p(h, "click", (i) => {
-      i.stopPropagation(), m.hidden = !m.hidden;
-    }), p(v, "input", () => {
-      e.volume = Number(v.value), e.muted = e.volume === 0, h.textContent = e.muted ? "🔇" : "🔊";
+    }), a(c, "input", () => {
+      I(Number(c.value) / 10), s.duration && (s.currentTime = Number(c.value) / 1e3 * s.duration);
+    }), a(r, "click", (i) => {
+      i.stopPropagation();
+      const n = f.hidden;
+      y(), f.hidden = !n;
+    }), a(v, "input", () => {
+      s.volume = Number(v.value), s.muted = s.volume === 0, r.textContent = s.muted ? "🔇" : "🔊";
     });
-    const F = () => {
-      const i = s.getProjection();
-      let r = "Projection";
-      d.querySelectorAll("button").forEach((u) => {
-        const g = u.dataset.mode === i;
-        u.classList.toggle("active", g), g && (r = `Projection: ${u.textContent}`);
-      }), b.title = r;
+    const M = () => {
+      const i = e.getProjection();
+      let n = "Projection";
+      h.querySelectorAll("button").forEach((d) => {
+        const m = d.dataset.mode === i;
+        d.classList.toggle("active", m), m && (n = `Projection: ${d.textContent}`);
+      }), b.title = n;
     };
-    p(b, "click", (i) => {
-      i.stopPropagation(), d.hidden = !d.hidden;
-    }), p(d, "click", (i) => {
-      const r = i.target.closest("button[data-mode]");
-      r && (s.setProjection(r.dataset.mode), F(), d.hidden = !0);
-    }), F(), p(S, "click", (i) => {
-      i.stopPropagation(), C.classList.toggle("open");
-    }), p(x, "change", () => s.setSwapEyes(x.checked)), p(f, "input", () => {
-      const i = Number(f.value);
-      y.textContent = String(i), s.setFov(i);
-    }), p(w, "input", () => {
-      const i = Number(w.value);
-      j.textContent = String(i), s.setSupersampling(i);
-    }), p(s.surface, "wheel", (i) => {
+    a(b, "click", (i) => {
+      i.stopPropagation();
+      const n = h.hidden;
+      y(), h.hidden = !n;
+    }), a(h, "click", (i) => {
+      const n = i.target.closest("button[data-mode]");
+      n && (e.setProjection(n.dataset.mode), M(), h.hidden = !0);
+    }), M(), a(k, "click", (i) => {
+      i.stopPropagation();
+      const n = !g.classList.contains("open");
+      y(), g.classList.toggle("open", n);
+    }), a(P, "change", () => e.setSwapEyes(P.checked)), a(x, "input", () => {
+      const i = Number(x.value);
+      E.textContent = String(i), e.setFov(i);
+    }), a(j, "input", () => {
+      const i = Number(j.value);
+      A.textContent = String(i), e.setSupersampling(i);
+    });
+    const L = () => e.setProxy({ url: F.value.trim(), apiPassword: T.value, enabled: C.checked });
+    a(C, "change", L), a(F, "change", L), a(T, "change", L), a(e.surface, "wheel", (i) => {
       i.preventDefault();
-      const r = Math.max(30, Math.min(100, Number(f.value) + Math.sign(i.deltaY) * 3));
-      f.value = String(r), y.textContent = String(r), s.setFov(r);
-    }, { passive: !1 }), p(E, "click", () => {
-      var r, u;
-      const i = s.fullscreenTarget;
-      document.fullscreenElement ? (u = document.exitFullscreen) == null || u.call(document) : (r = i.requestFullscreen) == null || r.call(i);
-    }), p(document, "click", (i) => {
-      const r = i.composedPath();
-      !m.hidden && !r.includes(m) && !r.includes(h) && (m.hidden = !0), !d.hidden && !r.includes(d) && !r.includes(b) && (d.hidden = !0);
-    }), s.vrSupported().then((i) => {
-      i && (Object.assign(s.vrButton.style, { position: "static", left: "auto", bottom: "auto", transform: "none", margin: "0" }), k.append(s.vrButton));
+      const n = Math.max(30, Math.min(100, Number(x.value) + Math.sign(i.deltaY) * 3));
+      x.value = String(n), E.textContent = String(n), e.setFov(n);
+    }, { passive: !1 }), a(O, "click", () => {
+      var n, d;
+      const i = e.fullscreenTarget;
+      document.fullscreenElement ? (d = document.exitFullscreen) == null || d.call(document) : (n = i.requestFullscreen) == null || n.call(i);
+    }), a(document, "click", (i) => {
+      const n = i.composedPath(), d = (m) => n.includes(m);
+      [f, r, h, b, g, k].some(d) || y();
+    });
+    let w = 0;
+    const q = () => !f.hidden || !h.hidden || g.classList.contains("open"), B = () => {
+      q() || S.classList.add("tvp-hidden");
+    }, z = () => {
+      S.classList.remove("tvp-hidden"), clearTimeout(w), w = window.setTimeout(B, 5e3);
+    };
+    a(e.fullscreenTarget, "pointermove", z), a(e.fullscreenTarget, "pointerdown", z), a(e.fullscreenTarget, "pointerleave", () => {
+      clearTimeout(w), B();
+    }), this.disposers.push(() => clearTimeout(w)), z(), e.vrSupported().then((i) => {
+      i && (Object.assign(e.vrButton.style, { position: "static", left: "auto", bottom: "auto", transform: "none", margin: "0" }), N.append(e.vrButton));
     });
   }
   dispose() {
@@ -88,78 +111,82 @@ class J {
     for (const t of this.nodes) t.remove();
   }
 }
-function N(l, t, s) {
-  const e = document.createDocumentFragment();
-  return e.append(l, t, s), e;
+function $(l, t, e) {
+  const s = document.createDocumentFragment();
+  return s.append(l, t, e), s;
 }
-const O = ":host,:host *,.tvp,.tvp *{box-sizing:border-box}.tvp-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}.tvp-canvas:active{cursor:grabbing}.tvp-video{display:none}.tvp-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:12px;background:linear-gradient(transparent,#000c);z-index:5;font:14px system-ui,Segoe UI,Roboto,sans-serif;color:#e8eaed}.tvp-btn{padding:4px;border:0;background:none;color:#e8eaed;cursor:pointer;font-size:22px;line-height:1}.tvp-btn:hover{opacity:.7}.tvp-seek{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:14px;background:transparent;cursor:pointer;margin:0}.tvp-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#4f8cff var(--seek,0%),#3a4150 var(--seek,0%))}.tvp-seek::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}.tvp-seek::-moz-range-track{height:4px;border-radius:2px;background:#3a4150}.tvp-seek::-moz-range-progress{height:4px;border-radius:2px;background:#4f8cff}.tvp-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:pointer}.tvp-time{font-variant-numeric:tabular-nums;min-width:96px;text-align:center;color:#cfd6e2}.tvp-volwrap,.tvp-projwrap{position:relative;display:inline-flex}.tvp-volpopup{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);width:40px;height:132px;background:#121418eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #2a2f3a;border-radius:10px;z-index:8;box-shadow:0 8px 24px #0009}.tvp-volpopup[hidden]{display:none}.tvp-volume{position:absolute;top:50%;left:50%;width:104px;height:14px;margin:0;transform:translate(-50%,-50%) rotate(-90deg);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.tvp-volume::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#3a4150}.tvp-volume::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}.tvp-volume::-moz-range-track{height:4px;border-radius:2px;background:#3a4150}.tvp-volume::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:pointer}.tvp-projmenu{position:absolute;bottom:calc(100% + 8px);right:0;min-width:210px;background:#121418eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #2a2f3a;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;z-index:8;box-shadow:0 8px 24px #0009}.tvp-projmenu[hidden]{display:none}.tvp-projmenu button{text-align:left;background:transparent;border:0;color:#e8eaed;padding:8px 10px;border-radius:7px;cursor:pointer;font:inherit;white-space:nowrap}.tvp-projmenu button:hover{background:#252b39}.tvp-projmenu button.active{background:#4f8cff;color:#fff}.tvp-vrslot button{position:static!important}.tvp-settings{position:absolute;bottom:62px;right:10px;width:300px;max-width:calc(100% - 20px);max-height:70%;overflow-y:auto;background:#121418eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #2a2f3a;border-radius:12px;padding:14px;display:none;flex-direction:column;gap:12px;z-index:6;font:14px system-ui,Segoe UI,Roboto,sans-serif;color:#e8eaed}.tvp-settings.open{display:flex}.tvp-settings label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#aab2c0}.tvp-settings label.row{flex-direction:row;align-items:center;gap:8px;color:#e8eaed;font-size:13px}.tvp-settings input[type=range]{width:100%;accent-color:#4f8cff}.tvp-toast{position:absolute;left:50%;bottom:74px;transform:translate(-50%);max-width:80%;padding:10px 16px;border-radius:10px;background:#1b1f2aed;border:1px solid #2a2f3a;color:#e8eaed;opacity:0;pointer-events:none;transition:opacity .2s;z-index:7;font:13px system-ui}.tvp-toast.show{opacity:1}", A = "three-vr-player:settings";
-class W {
-  constructor(t, s = {}) {
-    this.source = new R(), this.listeners = /* @__PURE__ */ new Map(), this.readyEmitted = !1, this.native = !1, this.loading = !1, this.opts = s;
-    const e = s.persistSettings ? this.loadSettings() : null;
+const U = ":host,:host *,.tvp,.tvp *{box-sizing:border-box}.tvp-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}.tvp-canvas:active{cursor:grabbing}.tvp-video{display:none}.tvp-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:12px;background:linear-gradient(transparent,#000c);z-index:5;font:14px system-ui,Segoe UI,Roboto,sans-serif;color:#e8eaed;transition:opacity .3s}.tvp-controls.tvp-hidden{opacity:0;pointer-events:none}.tvp-btn{padding:4px;border:0;background:none;color:#e8eaed;cursor:pointer;font-size:22px;line-height:1}.tvp-btn:hover{opacity:.7}.tvp-seek{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:14px;background:transparent;cursor:pointer;margin:0}.tvp-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#4f8cff var(--seek,0%),#3a4150 var(--seek,0%))}.tvp-seek::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}.tvp-seek::-moz-range-track{height:4px;border-radius:2px;background:#3a4150}.tvp-seek::-moz-range-progress{height:4px;border-radius:2px;background:#4f8cff}.tvp-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:pointer}.tvp-time{font-variant-numeric:tabular-nums;min-width:96px;text-align:center;color:#cfd6e2}.tvp-volwrap,.tvp-projwrap{position:relative;display:inline-flex}.tvp-volpopup{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);width:40px;height:132px;background:#121418eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #2a2f3a;border-radius:10px;z-index:8;box-shadow:0 8px 24px #0009}.tvp-volpopup[hidden]{display:none}.tvp-volume{position:absolute;top:50%;left:50%;width:104px;height:14px;margin:0;transform:translate(-50%,-50%) rotate(-90deg);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.tvp-volume::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#3a4150}.tvp-volume::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}.tvp-volume::-moz-range-track{height:4px;border-radius:2px;background:#3a4150}.tvp-volume::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:pointer}.tvp-projmenu{position:absolute;bottom:calc(100% + 8px);right:0;min-width:210px;background:#121418eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #2a2f3a;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;z-index:8;box-shadow:0 8px 24px #0009}.tvp-projmenu[hidden]{display:none}.tvp-projmenu button{text-align:left;background:transparent;border:0;color:#e8eaed;padding:8px 10px;border-radius:7px;cursor:pointer;font:inherit;white-space:nowrap}.tvp-projmenu button:hover{background:#252b39}.tvp-projmenu button.active{background:#4f8cff;color:#fff}.tvp-vrslot button{position:static!important}.tvp-settings{position:absolute;bottom:62px;right:10px;width:300px;max-width:calc(100% - 20px);max-height:70%;overflow-y:auto;background:#121418eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #2a2f3a;border-radius:12px;padding:14px;display:none;flex-direction:column;gap:12px;z-index:6;font:14px system-ui,Segoe UI,Roboto,sans-serif;color:#e8eaed}.tvp-settings.open{display:flex}.tvp-settings label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#aab2c0}.tvp-settings label.row{flex-direction:row;align-items:center;gap:8px;color:#e8eaed;font-size:13px}.tvp-settings input[type=range]{width:100%;accent-color:#4f8cff}.tvp-settings input[type=text],.tvp-settings input[type=password]{width:100%;padding:7px 9px;border-radius:7px;border:1px solid #333;background:#151821;color:#e8eaed;font:inherit}.tvp-sep{width:100%;border:0;border-top:1px solid #2a2f3a;margin:2px 0}.tvp-toast{position:absolute;left:50%;bottom:74px;transform:translate(-50%);max-width:80%;padding:10px 16px;border-radius:10px;background:#1b1f2aed;border:1px solid #2a2f3a;color:#e8eaed;opacity:0;pointer-events:none;transition:opacity .2s;z-index:7;font:13px system-ui}.tvp-toast.show{opacity:1}", V = "three-vr-player:settings";
+class Z {
+  constructor(t, e = {}) {
+    var c, u;
+    this.source = new _(), this.listeners = /* @__PURE__ */ new Map(), this.readyEmitted = !1, this.native = !1, this.loading = !1, this.useProxy = !1, this.opts = e, this.proxyConfig = e.proxy, this.useProxy = !!e.proxy;
+    const s = e.persistSettings ? this.loadSettings() : null;
     this.view = {
-      projection: s.projection ?? (e == null ? void 0 : e.projection) ?? "180-sbs",
-      swapEyes: s.swapEyes ?? (e == null ? void 0 : e.swapEyes) ?? !1,
-      fov: s.fov ?? (e == null ? void 0 : e.fov) ?? 70,
-      supersampling: s.supersampling ?? (e == null ? void 0 : e.supersampling) ?? 1.5
+      projection: e.projection ?? (s == null ? void 0 : s.projection) ?? "180-sbs",
+      swapEyes: e.swapEyes ?? (s == null ? void 0 : s.swapEyes) ?? !1,
+      fov: e.fov ?? (s == null ? void 0 : s.fov) ?? 70,
+      supersampling: e.supersampling ?? (s == null ? void 0 : s.supersampling) ?? 1.5
     }, this.wrap = document.createElement("div"), this.wrap.className = "tvp", this.wrap.style.cssText = "position:relative;width:100%;height:100%;overflow:hidden;", t.appendChild(this.wrap);
-    let a;
-    if (s.shadowDom !== !1) {
-      const o = this.wrap.attachShadow({ mode: "open" }), c = document.createElement("style");
-      c.textContent = O, o.appendChild(c), a = o;
+    let p;
+    if (e.shadowDom !== !1) {
+      const r = this.wrap.attachShadow({ mode: "open" }), v = document.createElement("style");
+      v.textContent = U, r.appendChild(v), p = r;
     } else {
       if (!document.getElementById("tvp-styles")) {
-        const o = document.createElement("style");
-        o.id = "tvp-styles", o.textContent = O, document.head.appendChild(o);
+        const r = document.createElement("style");
+        r.id = "tvp-styles", r.textContent = U, document.head.appendChild(r);
       }
-      a = this.wrap;
+      p = this.wrap;
     }
-    this.canvas = document.createElement("canvas"), this.canvas.className = "tvp-canvas", this.video = document.createElement("video"), this.video.className = "tvp-video", this.video.playsInline = !0, s.crossOrigin !== null && (this.video.crossOrigin = s.crossOrigin ?? "anonymous"), a.append(this.canvas, this.video), this.scene = new $({
+    this.canvas = document.createElement("canvas"), this.canvas.className = "tvp-canvas", this.video = document.createElement("video"), this.video.className = "tvp-video", this.video.playsInline = !0, e.crossOrigin !== null && (this.video.crossOrigin = e.crossOrigin ?? "anonymous"), p.append(this.canvas, this.video), this.scene = new H({
       canvas: this.canvas,
       video: this.video,
       projection: this.view.projection,
       swapEyes: this.view.swapEyes,
       fov: this.view.fov,
       supersampling: this.view.supersampling
-    }), this.look = new V(this.scene.camera, this.canvas, { isPresenting: () => this.scene.renderer.xr.isPresenting }), this.scene.onFrame(() => this.look.update()), this.look.setEnabled(!this.scene.isFlat()), s.controls !== !1 && (this.ui = new J(a, {
+    }), this.look = new K(this.scene.camera, this.canvas, { isPresenting: () => this.scene.renderer.xr.isPresenting }), this.scene.onFrame(() => this.look.update()), this.look.setEnabled(!this.scene.isFlat()), e.controls !== !1 && (this.ui = new X(p, {
       video: this.video,
       surface: this.canvas,
       fullscreenTarget: this.wrap,
       vrButton: this.scene.vrButton,
       vrSupported: () => this.vrSupported(),
       getProjection: () => this.scene.getProjection(),
-      setProjection: (o) => this.setProjection(o),
-      setSwapEyes: (o) => this.setSwapEyes(o),
-      setFov: (o) => this.setFov(o),
-      setSupersampling: (o) => this.setSupersampling(o),
-      initial: { swapEyes: this.view.swapEyes, fov: this.view.fov, supersampling: this.view.supersampling }
+      setProjection: (r) => this.setProjection(r),
+      setSwapEyes: (r) => this.setSwapEyes(r),
+      setFov: (r) => this.setFov(r),
+      setSupersampling: (r) => this.setSupersampling(r),
+      initial: { swapEyes: this.view.swapEyes, fov: this.view.fov, supersampling: this.view.supersampling },
+      proxy: { url: ((c = this.proxyConfig) == null ? void 0 : c.url) ?? "", apiPassword: ((u = this.proxyConfig) == null ? void 0 : u.apiPassword) ?? "", enabled: this.useProxy },
+      setProxy: (r) => this.setProxy(r)
     })), this.video.addEventListener("play", () => this.emit("play")), this.video.addEventListener("pause", () => this.emit("pause")), this.video.addEventListener("ended", () => this.emit("ended")), this.video.addEventListener("timeupdate", () => this.emit("timeupdate", this.video.currentTime)), this.video.addEventListener("error", () => {
       this.loading || this.emit("error", this.video.error);
     }), this.video.addEventListener("loadedmetadata", () => {
       this.readyEmitted || (this.readyEmitted = !0, this.emit("ready"));
-    }), this.scene.renderer.xr.addEventListener("sessionstart", () => this.emit("enterxr")), this.scene.renderer.xr.addEventListener("sessionend", () => this.emit("exitxr")), s.src && this.load(s.src, { projection: s.projection });
+    }), this.scene.renderer.xr.addEventListener("sessionstart", () => this.emit("enterxr")), this.scene.renderer.xr.addEventListener("sessionend", () => this.emit("exitxr")), e.src && this.load(e.src, { projection: e.projection });
   }
   vrSupported() {
     return this.opts.vrButton === !1 || !navigator.xr ? Promise.resolve(!1) : navigator.xr.isSessionSupported("immersive-vr").catch(() => !1);
   }
-  async load(t, s = {}) {
-    const e = s.projection ?? (this.opts.autoDetect !== !1 ? D(t) : null);
-    e && this.setProjection(e);
-    const { url: a, format: o } = U(t, this.opts.proxy), c = this.opts.crossOrigin === void 0 ? "anonymous" : this.opts.crossOrigin;
+  async load(t, e = {}) {
+    this.currentSrc = t;
+    const s = e.projection ?? (this.opts.autoDetect !== !1 ? G(t) : null);
+    s && this.setProjection(s);
+    const { url: p, format: c } = Q(t, this.useProxy ? this.proxyConfig : void 0), u = this.opts.crossOrigin === void 0 ? "anonymous" : this.opts.crossOrigin;
     this.loading = !0;
     try {
-      await this.source.attach(this.video, { url: a, format: o }, { crossOrigin: c }), this.setNativeFallback(!1), await this.video.play().catch(() => {
+      await this.source.attach(this.video, { url: p, format: c }, { crossOrigin: u }), this.setNativeFallback(!1), await this.video.play().catch(() => {
       });
-    } catch (h) {
-      if (this.opts.nativeFallback !== !1 && o === "progressive" && c !== null)
+    } catch (r) {
+      if (this.opts.nativeFallback !== !1 && c === "progressive" && u !== null)
         try {
-          this.setNativeFallback(!0), await this.source.attach(this.video, { url: a, format: o }, { crossOrigin: null }), await this.video.play().catch(() => {
+          this.setNativeFallback(!0), await this.source.attach(this.video, { url: p, format: c }, { crossOrigin: null }), await this.video.play().catch(() => {
           }), this.emit("fallback");
           return;
         } catch (v) {
           throw this.setNativeFallback(!1), this.emit("error", v), v;
         }
-      throw this.setNativeFallback(!1), this.emit("error", h), h;
+      throw this.setNativeFallback(!1), this.emit("error", r), r;
     } finally {
       this.loading = !1;
     }
@@ -195,36 +222,40 @@ class W {
   setSupersampling(t) {
     this.scene.setSupersampling(t), this.view.supersampling = t, this.persist();
   }
+  /** Update the CORS proxy config / toggle it, and reload the current source if any. */
+  setProxy(t) {
+    this.proxyConfig = t.url ? { url: t.url, apiPassword: t.apiPassword || void 0 } : void 0, this.useProxy = t.enabled, this.currentSrc && this.load(this.currentSrc);
+  }
   async enterVR() {
-    var s;
+    var e;
     const t = this.scene.vrButton;
-    (s = t == null ? void 0 : t.click) == null || s.call(t);
+    (e = t == null ? void 0 : t.click) == null || e.call(t);
   }
   get three() {
     return { renderer: this.scene.renderer, scene: this.scene.scene, camera: this.scene.camera };
   }
-  on(t, s) {
-    let e = this.listeners.get(t);
-    return e || (e = /* @__PURE__ */ new Set(), this.listeners.set(t, e)), e.add(s), this;
+  on(t, e) {
+    let s = this.listeners.get(t);
+    return s || (s = /* @__PURE__ */ new Set(), this.listeners.set(t, s)), s.add(e), this;
   }
-  off(t, s) {
-    var e;
-    return (e = this.listeners.get(t)) == null || e.delete(s), this;
+  off(t, e) {
+    var s;
+    return (s = this.listeners.get(t)) == null || s.delete(e), this;
   }
-  emit(t, s) {
-    var e;
-    (e = this.listeners.get(t)) == null || e.forEach((a) => a(s));
+  emit(t, e) {
+    var s;
+    (s = this.listeners.get(t)) == null || s.forEach((p) => p(e));
   }
   persist() {
     if (this.opts.persistSettings)
       try {
-        localStorage.setItem(A, JSON.stringify(this.view));
+        localStorage.setItem(V, JSON.stringify(this.view));
       } catch {
       }
   }
   loadSettings() {
     try {
-      const t = localStorage.getItem(A);
+      const t = localStorage.getItem(V);
       return t ? JSON.parse(t) : null;
     } catch {
       return null;
@@ -235,12 +266,12 @@ class W {
     (t = this.ui) == null || t.dispose(), this.look.dispose(), this.source.dispose(), this.scene.dispose(), this.video.remove(), this.canvas.remove(), this.wrap.remove(), this.listeners.clear();
   }
 }
-class q extends HTMLElement {
+class tt extends HTMLElement {
   static get observedAttributes() {
     return ["src", "projection"];
   }
   connectedCallback() {
-    this.player || (this.style.display || (this.style.display = "block"), this.player = new W(this, {
+    this.player || (this.style.display || (this.style.display = "block"), this.player = new Z(this, {
       src: this.getAttribute("src") ?? void 0,
       projection: this.getAttribute("projection") ?? void 0,
       controls: this.hasAttribute("controls"),
@@ -251,39 +282,39 @@ class q extends HTMLElement {
       proxy: this.getAttribute("proxy-url") ? { url: this.getAttribute("proxy-url"), apiPassword: this.getAttribute("proxy-password") ?? void 0 } : void 0
     }));
   }
-  attributeChangedCallback(t, s, e) {
-    !this.player || e == null || (t === "src" && this.player.load(e), t === "projection" && this.player.setProjection(e));
+  attributeChangedCallback(t, e, s) {
+    !this.player || s == null || (t === "src" && this.player.load(s), t === "projection" && this.player.setProjection(s));
   }
   disconnectedCallback() {
     var t;
     (t = this.player) == null || t.dispose(), this.player = void 0;
   }
   numAttr(t) {
-    const s = this.getAttribute(t);
-    return s == null ? void 0 : Number(s);
+    const e = this.getAttribute(t);
+    return e == null ? void 0 : Number(e);
   }
   /** The underlying Player instance (for programmatic control). */
   get api() {
     return this.player;
   }
 }
-function Y(l = "three-video") {
-  typeof customElements < "u" && !customElements.get(l) && customElements.define(l, q);
+function et(l = "three-video") {
+  typeof customElements < "u" && !customElements.get(l) && customElements.define(l, tt);
 }
-Y();
+et();
 export {
-  V as LookControls,
-  G as MODES,
-  I as PROJECTIONS,
-  W as Player,
-  $ as StereoScene,
-  q as ThreeVideoElement,
-  R as VideoSource,
-  U as buildProxyUrl,
-  Q as clampAngles,
-  X as detectFormat,
-  D as detectProjection,
-  Z as isFlatMode,
-  Y as registerWebComponent
+  K as LookControls,
+  nt as MODES,
+  Y as PROJECTIONS,
+  Z as Player,
+  H as StereoScene,
+  tt as ThreeVideoElement,
+  _ as VideoSource,
+  Q as buildProxyUrl,
+  rt as clampAngles,
+  at as detectFormat,
+  G as detectProjection,
+  pt as isFlatMode,
+  et as registerWebComponent
 };
 //# sourceMappingURL=three-vr-player.js.map