three-vr-player 0.1.0 → 0.3.0

package/dist/three-vr-player.js

@@ -1,220 +1,260 @@
-import { P as $, V as I, S as R, L as V, a as D, b as U } from "./VideoSource-pc2RM7bl.js";
-import { M as G, c as Q, d as X, i as Z } from "./VideoSource-pc2RM7bl.js";
-function F(c) {
-  if (!Number.isFinite(c) || c < 0) return "0:00";
-  const e = Math.floor(c % 60), s = Math.floor(c / 60 % 60), t = Math.floor(c / 3600), a = String(e).padStart(2, "0");
-  return t > 0 ? `${t}:${String(s).padStart(2, "0")}:${a}` : `${s}:${a}`;
+import { P as V, V as D, S as J, L as W, a as q, b as Y } from "./VideoSource-CJGIX8gL.js";
+import { M as tt, c as et, d as st, i as it } from "./VideoSource-CJGIX8gL.js";
+function L(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}`;
 }
-function n(c, e = {}, s = []) {
-  const t = document.createElement(c), { class: a, ...o } = e;
-  a && (t.className = a), Object.assign(t, o);
-  for (const l of s) t.append(l);
-  return t;
+function o(l, t = {}, s = []) {
+  const e = document.createElement(l), { class: a, ...c } = t;
+  a && (e.className = a), Object.assign(e, c);
+  for (const d of s) e.append(d);
+  return e;
 }
-class J {
-  constructor(e, s) {
+class _ {
+  constructor(t, s) {
     this.nodes = [], this.disposers = [];
-    const t = 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" }), l = n("span", { class: "tvp-time", textContent: "0:00 / 0:00" }), f = n("button", { class: "tvp-btn tvp-mute", title: "Volume", textContent: "🔊" }), b = n("input", { class: "tvp-volume", type: "range", min: "0", max: "1", step: "0.01", value: "1" }), h = n("div", { class: "tvp-volpopup", hidden: !0 }, [b]), T = n("span", { class: "tvp-volwrap" }, [f, h]), k = n("span", { class: "tvp-vrslot" }), g = n("button", { class: "tvp-btn tvp-projbtn", title: "Projection", textContent: "🌐" }), d = n("div", { class: "tvp-projmenu", hidden: !0 });
-    for (const i of $) {
-      const r = n("button", { textContent: i.label });
-      r.dataset.mode = i.value, d.append(r);
+    const e = s.video, a = 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" }), d = o("span", { class: "tvp-time", textContent: "0:00 / 0:00" }), n = o("button", { class: "tvp-btn tvp-mute", title: "Volume", textContent: "🔊" }), h = o("input", { class: "tvp-volume", type: "range", min: "0", max: "1", step: "0.01", value: "1" }), m = o("div", { class: "tvp-volpopup", hidden: !0 }, [h]), R = o("span", { class: "tvp-volwrap" }, [n, m]), j = o("span", { class: "tvp-vrslot" }), x = o("button", { class: "tvp-btn tvp-projbtn", title: "Projection", textContent: "🌐" }), u = o("div", { class: "tvp-projmenu", hidden: !0 });
+    for (const i of V) {
+      const r = o("button", { textContent: i.label });
+      r.dataset.mode = i.value, u.append(r);
     }
-    const M = n("span", { class: "tvp-projwrap" }, [g, d]), S = n("button", { class: "tvp-btn tvp-settingsbtn", title: "Settings", textContent: "⚙" }), E = n("button", { class: "tvp-btn tvp-fullscreen", title: "Fullscreen", textContent: "⛶" }), O = n("footer", { class: "tvp-controls" }, [a, o, l, T, k, M, S, E]), x = n("input", { type: "checkbox", checked: s.initial.swapEyes }), v = n("input", { type: "range", min: "30", max: "100", step: "1", value: String(s.initial.fov) }), w = n("span", { textContent: String(s.initial.fov) }), y = 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", {}, [A("Field of view (zoom): ", w, "°"), v]),
-      n("label", {}, [A("Supersampling: ", j, "× (sharpness)"), y])
-    ]), B = n("div", { class: "tvp-toast" });
-    this.nodes.push(O, C, B);
-    for (const i of this.nodes) e.append(i);
-    const p = (i, r, u, m) => {
-      i.addEventListener(r, u, m), this.disposers.push(() => i.removeEventListener(r, u, m));
-    }, P = (i) => o.style.setProperty("--seek", `${i}%`);
+    const B = o("span", { class: "tvp-projwrap" }, [x, u]), C = o("button", { class: "tvp-btn tvp-settingsbtn", title: "Settings", textContent: "⚙" }), F = o("button", { class: "tvp-btn tvp-fullscreen", title: "Fullscreen", textContent: "⛶" }), $ = o("footer", { class: "tvp-controls" }, [a, c, d, R, j, B, C, F]), b = o("input", { type: "checkbox", checked: s.initial.swapEyes }), f = o("input", { type: "range", min: "30", max: "100", step: "1", value: String(s.initial.fov) }), y = o("span", { textContent: String(s.initial.fov) }), w = o("input", { type: "range", min: "1", max: "2", step: "0.25", value: String(s.initial.supersampling) }), z = o("span", { textContent: String(s.initial.supersampling) }), k = o("input", { type: "checkbox", checked: s.proxy.enabled }), S = o("input", { type: "text", value: s.proxy.url, placeholder: "http://localhost:8888", spellcheck: !1 }), P = o("input", { type: "password", value: s.proxy.apiPassword, placeholder: "API password" }), N = o("section", { class: "tvp-settings" }, [
+      o("label", { class: "row" }, [b, "Swap eyes (if depth looks wrong)"]),
+      o("label", {}, [T("Field of view (zoom): ", y, "°"), f]),
+      o("label", {}, [T("Supersampling: ", z, "× (sharpness)"), w]),
+      o("hr", { class: "tvp-sep" }),
+      o("label", { class: "row" }, [k, "Use CORS proxy"]),
+      o("label", {}, ["Proxy URL", S]),
+      o("label", {}, ["API password", P])
+    ]), U = o("div", { class: "tvp-toast" });
+    this.nodes.push($, N, U);
+    for (const i of this.nodes) t.append(i);
+    const p = (i, r, v, g) => {
+      i.addEventListener(r, v, g), this.disposers.push(() => i.removeEventListener(r, v, g));
+    }, O = (i) => c.style.setProperty("--seek", `${i}%`);
     p(a, "click", () => {
-      t.paused ? t.play() : t.pause();
-    }), p(t, "play", () => {
+      e.paused ? e.play() : e.pause();
+    }), p(e, "play", () => {
       a.textContent = "⏸";
-    }), p(t, "pause", () => {
+    }), p(e, "pause", () => {
       a.textContent = "▶";
-    }), p(t, "timeupdate", () => {
-      if (t.duration) {
-        const i = t.currentTime / t.duration * 100;
-        o.value = String(i * 10), P(i), l.textContent = `${F(t.currentTime)} / ${F(t.duration)}`;
+    }), p(e, "timeupdate", () => {
+      if (e.duration) {
+        const i = e.currentTime / e.duration * 100;
+        c.value = String(i * 10), O(i), d.textContent = `${L(e.currentTime)} / ${L(e.duration)}`;
       }
-    }), p(o, "input", () => {
-      P(Number(o.value) / 10), t.duration && (t.currentTime = Number(o.value) / 1e3 * t.duration);
-    }), p(f, "click", (i) => {
-      i.stopPropagation(), h.hidden = !h.hidden;
-    }), p(b, "input", () => {
-      t.volume = Number(b.value), t.muted = t.volume === 0, f.textContent = t.muted ? "🔇" : "🔊";
+    }), p(c, "input", () => {
+      O(Number(c.value) / 10), e.duration && (e.currentTime = Number(c.value) / 1e3 * e.duration);
+    }), p(n, "click", (i) => {
+      i.stopPropagation(), m.hidden = !m.hidden;
+    }), p(h, "input", () => {
+      e.volume = Number(h.value), e.muted = e.volume === 0, n.textContent = e.muted ? "🔇" : "🔊";
     });
-    const z = () => {
+    const A = () => {
       const i = s.getProjection();
       let r = "Projection";
-      d.querySelectorAll("button").forEach((u) => {
-        const m = u.dataset.mode === i;
-        u.classList.toggle("active", m), m && (r = `Projection: ${u.textContent}`);
-      }), g.title = r;
+      u.querySelectorAll("button").forEach((v) => {
+        const g = v.dataset.mode === i;
+        v.classList.toggle("active", g), g && (r = `Projection: ${v.textContent}`);
+      }), x.title = r;
     };
-    p(g, "click", (i) => {
-      i.stopPropagation(), d.hidden = !d.hidden;
-    }), p(d, "click", (i) => {
+    p(x, "click", (i) => {
+      i.stopPropagation(), u.hidden = !u.hidden;
+    }), p(u, "click", (i) => {
       const r = i.target.closest("button[data-mode]");
-      r && (s.setProjection(r.dataset.mode), z(), d.hidden = !0);
-    }), z(), p(S, "click", (i) => {
-      i.stopPropagation(), C.classList.toggle("open");
-    }), p(x, "change", () => s.setSwapEyes(x.checked)), p(v, "input", () => {
-      const i = Number(v.value);
-      w.textContent = String(i), s.setFov(i);
-    }), p(y, "input", () => {
-      const i = Number(y.value);
-      j.textContent = String(i), s.setSupersampling(i);
-    }), p(s.surface, "wheel", (i) => {
+      r && (s.setProjection(r.dataset.mode), A(), u.hidden = !0);
+    }), A(), p(C, "click", (i) => {
+      i.stopPropagation(), N.classList.toggle("open");
+    }), p(b, "change", () => s.setSwapEyes(b.checked)), p(f, "input", () => {
+      const i = Number(f.value);
+      y.textContent = String(i), s.setFov(i);
+    }), p(w, "input", () => {
+      const i = Number(w.value);
+      z.textContent = String(i), s.setSupersampling(i);
+    });
+    const E = () => s.setProxy({ url: S.value.trim(), apiPassword: P.value, enabled: k.checked });
+    p(k, "change", E), p(S, "change", E), p(P, "change", E), p(s.surface, "wheel", (i) => {
       i.preventDefault();
-      const r = Math.max(30, Math.min(100, Number(v.value) + Math.sign(i.deltaY) * 3));
-      v.value = String(r), w.textContent = String(r), s.setFov(r);
-    }, { passive: !1 }), p(E, "click", () => {
-      var r, u;
+      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(F, "click", () => {
+      var r, v;
       const i = s.fullscreenTarget;
-      document.fullscreenElement ? (u = document.exitFullscreen) == null || u.call(document) : (r = i.requestFullscreen) == null || r.call(i);
+      document.fullscreenElement ? (v = document.exitFullscreen) == null || v.call(document) : (r = i.requestFullscreen) == null || r.call(i);
     }), p(document, "click", (i) => {
       const r = i.composedPath();
-      !h.hidden && !r.includes(h) && !r.includes(f) && (h.hidden = !0), !d.hidden && !r.includes(d) && !r.includes(g) && (d.hidden = !0);
+      !m.hidden && !r.includes(m) && !r.includes(n) && (m.hidden = !0), !u.hidden && !r.includes(u) && !r.includes(x) && (u.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));
+      i && (Object.assign(s.vrButton.style, { position: "static", left: "auto", bottom: "auto", transform: "none", margin: "0" }), j.append(s.vrButton));
     });
   }
   dispose() {
-    for (const e of this.disposers) e();
-    for (const e of this.nodes) e.remove();
+    for (const t of this.disposers) t();
+    for (const t of this.nodes) t.remove();
   }
 }
-function A(c, e, s) {
-  const t = document.createDocumentFragment();
-  return t.append(c, e, s), t;
+function T(l, t, s) {
+  const e = document.createDocumentFragment();
+  return e.append(l, t, s), e;
 }
-const L = ":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}", N = "three-vr-player:settings";
-class W {
-  constructor(e, s = {}) {
-    this.source = new I(), this.listeners = /* @__PURE__ */ new Map(), this.readyEmitted = !1, this.opts = s;
-    const t = s.persistSettings ? this.loadSettings() : null;
+const I = ":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-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}", M = "three-vr-player:settings";
+class H {
+  constructor(t, s = {}) {
+    var c, d;
+    this.source = new D(), this.listeners = /* @__PURE__ */ new Map(), this.readyEmitted = !1, this.native = !1, this.loading = !1, this.useProxy = !1, this.opts = s, this.proxyConfig = s.proxy, this.useProxy = !!s.proxy;
+    const e = s.persistSettings ? this.loadSettings() : null;
     this.view = {
-      projection: s.projection ?? (t == null ? void 0 : t.projection) ?? "180-sbs",
-      swapEyes: s.swapEyes ?? (t == null ? void 0 : t.swapEyes) ?? !1,
-      fov: s.fov ?? (t == null ? void 0 : t.fov) ?? 70,
-      supersampling: s.supersampling ?? (t == null ? void 0 : t.supersampling) ?? 1.5
-    }, this.wrap = document.createElement("div"), this.wrap.className = "tvp", this.wrap.style.cssText = "position:relative;width:100%;height:100%;overflow:hidden;", e.appendChild(this.wrap);
+      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
+    }, 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" }), l = document.createElement("style");
-      l.textContent = L, o.appendChild(l), a = o;
+      const n = this.wrap.attachShadow({ mode: "open" }), h = document.createElement("style");
+      h.textContent = I, n.appendChild(h), a = n;
     } else {
       if (!document.getElementById("tvp-styles")) {
-        const o = document.createElement("style");
-        o.id = "tvp-styles", o.textContent = L, document.head.appendChild(o);
+        const n = document.createElement("style");
+        n.id = "tvp-styles", n.textContent = I, document.head.appendChild(n);
       }
       a = 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 R({
+    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 J({
       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 W(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 _(a, {
       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 }
-    })), 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.emit("error", this.video.error)), this.video.addEventListener("loadedmetadata", () => {
+      setProjection: (n) => this.setProjection(n),
+      setSwapEyes: (n) => this.setSwapEyes(n),
+      setFov: (n) => this.setFov(n),
+      setSupersampling: (n) => this.setSupersampling(n),
+      initial: { swapEyes: this.view.swapEyes, fov: this.view.fov, supersampling: this.view.supersampling },
+      proxy: { url: ((c = this.proxyConfig) == null ? void 0 : c.url) ?? "", apiPassword: ((d = this.proxyConfig) == null ? void 0 : d.apiPassword) ?? "", enabled: this.useProxy },
+      setProxy: (n) => this.setProxy(n)
+    })), 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 });
   }
   vrSupported() {
     return this.opts.vrButton === !1 || !navigator.xr ? Promise.resolve(!1) : navigator.xr.isSessionSupported("immersive-vr").catch(() => !1);
   }
-  async load(e, s = {}) {
-    const t = s.projection ?? (this.opts.autoDetect !== !1 ? D(e) : null);
-    t && this.setProjection(t);
-    const { url: a, format: o } = U(e, this.opts.proxy);
+  async load(t, s = {}) {
+    this.currentSrc = t;
+    const e = s.projection ?? (this.opts.autoDetect !== !1 ? q(t) : null);
+    e && this.setProjection(e);
+    const { url: a, format: c } = Y(t, this.useProxy ? this.proxyConfig : void 0), d = this.opts.crossOrigin === void 0 ? "anonymous" : this.opts.crossOrigin;
+    this.loading = !0;
     try {
-      await this.source.attach(this.video, { url: a, format: o }), await this.video.play().catch(() => {
+      await this.source.attach(this.video, { url: a, format: c }, { crossOrigin: d }), this.setNativeFallback(!1), await this.video.play().catch(() => {
       });
-    } catch (l) {
-      throw this.emit("error", l), l;
+    } catch (n) {
+      if (this.opts.nativeFallback !== !1 && c === "progressive" && d !== null)
+        try {
+          this.setNativeFallback(!0), await this.source.attach(this.video, { url: a, format: c }, { crossOrigin: null }), await this.video.play().catch(() => {
+          }), this.emit("fallback");
+          return;
+        } catch (h) {
+          throw this.setNativeFallback(!1), this.emit("error", h), h;
+        }
+      throw this.setNativeFallback(!1), this.emit("error", n), n;
+    } finally {
+      this.loading = !1;
     }
   }
+  /** Swap between WebGL (3D) rendering and plain 2D `<video>` playback. */
+  setNativeFallback(t) {
+    t !== this.native && (this.native = t, t ? (this.scene.pauseRendering(), this.canvas.style.display = "none", Object.assign(this.video.style, {
+      display: "block",
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      objectFit: "contain",
+      background: "#000",
+      zIndex: "1"
+    })) : (this.canvas.style.display = "", this.video.style.cssText = "", this.scene.resumeRendering()));
+  }
   async play() {
     await this.video.play();
   }
   pause() {
     this.video.pause();
   }
-  setProjection(e) {
-    this.scene.setProjection(e), this.look.setEnabled(!this.scene.isFlat()), this.look.reset(), this.view.projection = e, this.persist(), this.emit("projectionchange", e);
+  setProjection(t) {
+    this.scene.setProjection(t), this.look.setEnabled(!this.scene.isFlat()), this.look.reset(), this.view.projection = t, this.persist(), this.emit("projectionchange", t);
+  }
+  setSwapEyes(t) {
+    this.scene.setSwapEyes(t), this.view.swapEyes = t, this.persist();
   }
-  setSwapEyes(e) {
-    this.scene.setSwapEyes(e), this.view.swapEyes = e, this.persist();
+  setFov(t) {
+    this.scene.setFov(t), this.view.fov = t, this.persist();
   }
-  setFov(e) {
-    this.scene.setFov(e), this.view.fov = e, this.persist();
+  setSupersampling(t) {
+    this.scene.setSupersampling(t), this.view.supersampling = t, this.persist();
   }
-  setSupersampling(e) {
-    this.scene.setSupersampling(e), this.view.supersampling = e, 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;
-    const e = this.scene.vrButton;
-    (s = e == null ? void 0 : e.click) == null || s.call(e);
+    const t = this.scene.vrButton;
+    (s = t == null ? void 0 : t.click) == null || s.call(t);
   }
   get three() {
     return { renderer: this.scene.renderer, scene: this.scene.scene, camera: this.scene.camera };
   }
-  on(e, s) {
-    let t = this.listeners.get(e);
-    return t || (t = /* @__PURE__ */ new Set(), this.listeners.set(e, t)), t.add(s), this;
+  on(t, s) {
+    let e = this.listeners.get(t);
+    return e || (e = /* @__PURE__ */ new Set(), this.listeners.set(t, e)), e.add(s), this;
   }
-  off(e, s) {
-    var t;
-    return (t = this.listeners.get(e)) == null || t.delete(s), this;
+  off(t, s) {
+    var e;
+    return (e = this.listeners.get(t)) == null || e.delete(s), this;
   }
-  emit(e, s) {
-    var t;
-    (t = this.listeners.get(e)) == null || t.forEach((a) => a(s));
+  emit(t, s) {
+    var e;
+    (e = this.listeners.get(t)) == null || e.forEach((a) => a(s));
   }
   persist() {
     if (this.opts.persistSettings)
       try {
-        localStorage.setItem(N, JSON.stringify(this.view));
+        localStorage.setItem(M, JSON.stringify(this.view));
       } catch {
       }
   }
   loadSettings() {
     try {
-      const e = localStorage.getItem(N);
-      return e ? JSON.parse(e) : null;
+      const t = localStorage.getItem(M);
+      return t ? JSON.parse(t) : null;
     } catch {
       return null;
     }
   }
   dispose() {
-    var e;
-    (e = this.ui) == null || e.dispose(), this.look.dispose(), this.source.dispose(), this.scene.dispose(), this.video.remove(), this.canvas.remove(), this.wrap.remove(), this.listeners.clear();
+    var t;
+    (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 K 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 H(this, {
       src: this.getAttribute("src") ?? void 0,
       projection: this.getAttribute("projection") ?? void 0,
       controls: this.hasAttribute("controls"),
@@ -225,15 +265,15 @@ class q extends HTMLElement {
       proxy: this.getAttribute("proxy-url") ? { url: this.getAttribute("proxy-url"), apiPassword: this.getAttribute("proxy-password") ?? void 0 } : void 0
     }));
   }
-  attributeChangedCallback(e, s, t) {
-    !this.player || t == null || (e === "src" && this.player.load(t), e === "projection" && this.player.setProjection(t));
+  attributeChangedCallback(t, s, e) {
+    !this.player || e == null || (t === "src" && this.player.load(e), t === "projection" && this.player.setProjection(e));
   }
   disconnectedCallback() {
-    var e;
-    (e = this.player) == null || e.dispose(), this.player = void 0;
+    var t;
+    (t = this.player) == null || t.dispose(), this.player = void 0;
   }
-  numAttr(e) {
-    const s = this.getAttribute(e);
+  numAttr(t) {
+    const s = this.getAttribute(t);
     return s == null ? void 0 : Number(s);
   }
   /** The underlying Player instance (for programmatic control). */
@@ -241,23 +281,23 @@ class q extends HTMLElement {
     return this.player;
   }
 }
-function Y(c = "three-video") {
-  typeof customElements < "u" && !customElements.get(c) && customElements.define(c, q);
+function G(l = "three-video") {
+  typeof customElements < "u" && !customElements.get(l) && customElements.define(l, K);
 }
-Y();
+G();
 export {
-  V as LookControls,
-  G as MODES,
-  $ as PROJECTIONS,
-  W as Player,
-  R as StereoScene,
-  q as ThreeVideoElement,
-  I as VideoSource,
-  U as buildProxyUrl,
-  Q as clampAngles,
-  X as detectFormat,
-  D as detectProjection,
-  Z as isFlatMode,
-  Y as registerWebComponent
+  W as LookControls,
+  tt as MODES,
+  V as PROJECTIONS,
+  H as Player,
+  J as StereoScene,
+  K as ThreeVideoElement,
+  D as VideoSource,
+  Y as buildProxyUrl,
+  et as clampAngles,
+  st as detectFormat,
+  q as detectProjection,
+  it as isFlatMode,
+  G as registerWebComponent
 };
 //# sourceMappingURL=three-vr-player.js.map