three-vr-player 0.4.0 → 0.6.0

package/dist/three-vr-player.js

@@ -1,109 +1,134 @@
-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), 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}`;
+import { P as X, V as Z, S as tt, L as et, a as st, b as it } from "./VideoSource-CMM_vlRP.js";
+import { M as dt, c as ht, d as ut, i as vt } from "./VideoSource-CMM_vlRP.js";
+function J(c) {
+  if (!Number.isFinite(c) || c < 0) return "0:00";
+  const t = Math.floor(c % 60), e = Math.floor(c / 60 % 60), s = Math.floor(c / 3600), a = String(t).padStart(2, "0");
+  return s > 0 ? `${s}:${String(e).padStart(2, "0")}:${a}` : `${e}:${a}`;
 }
-function o(l, t = {}, e = []) {
-  const s = document.createElement(l), { class: p, ...c } = t;
-  p && (s.className = p), Object.assign(s, c);
+function o(c, t = {}, e = []) {
+  const s = document.createElement(c), { class: a, ...d } = t;
+  a && (s.className = a), Object.assign(s, d);
   for (const u of e) s.append(u);
   return s;
 }
-class X {
+class ot {
   constructor(t, e) {
     this.nodes = [], this.disposers = [];
-    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 s = e.video, a = o("button", { class: "tvp-btn tvp-play", title: "Play/Pause", textContent: "▶" }), d = o("input", { class: "tvp-seek", type: "range", min: "0", max: "1000", value: "0" }), u = o("span", { class: "tvp-time", textContent: "0:00 / 0:00" }), n = o("button", { class: "tvp-btn tvp-mute", title: "Volume", textContent: "🔊" }), m = o("input", { class: "tvp-volume", type: "range", min: "0", max: "1", step: "0.01", value: "1" }), g = o("div", { class: "tvp-volpopup", hidden: !0 }, [m]), _ = o("span", { class: "tvp-volwrap" }, [n, g]), y = o("button", { class: "tvp-btn tvp-vrbtn", title: "Enter VR", textContent: "🥽", hidden: !0 }), k = o("button", { class: "tvp-btn tvp-projbtn", title: "Projection", textContent: "🌐" }), h = o("div", { class: "tvp-projmenu", hidden: !0 });
+    for (const i of X) {
+      const r = o("button", { textContent: i.label });
+      r.dataset.mode = i.value, h.append(r);
     }
-    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]),
+    const O = o("button", { textContent: "Off (native player)" });
+    O.dataset.mode = "off", h.append(o("hr", { class: "tvp-sep" }), O);
+    const H = o("span", { class: "tvp-projwrap" }, [k, h]), j = o("button", { class: "tvp-btn tvp-settingsbtn", title: "Settings", textContent: "⚙" }), A = o("button", { class: "tvp-btn tvp-fullscreen", title: "Fullscreen", textContent: "⛶" }), C = o("footer", { class: "tvp-controls" }, [a, d, u, _, y, H, j, A]), F = o("input", { type: "checkbox", checked: e.initial.swapEyes }), w = o("input", { type: "range", min: "30", max: "100", step: "1", value: String(e.initial.fov) }), T = o("span", { textContent: String(e.initial.fov) }), R = o("input", { type: "range", min: "1", max: "2", step: "0.25", value: String(e.initial.supersampling) }), I = o("span", { textContent: String(e.initial.supersampling) }), L = o("input", { type: "checkbox", checked: e.proxy.enabled }), V = o("input", { type: "text", value: e.proxy.url, placeholder: "http://localhost:8888", spellcheck: !1 }), N = o("input", { type: "password", value: e.proxy.apiPassword, placeholder: "API password" }), b = o("section", { class: "tvp-settings" }, [
+      o("label", { class: "row" }, [F, "Swap eyes (if depth looks wrong)"]),
+      o("label", {}, [W("Field of view (zoom): ", T, "°"), w]),
+      o("label", {}, [W("Supersampling: ", I, "× (sharpness)"), R]),
       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);
+      o("label", { class: "row" }, [L, "Use CORS proxy"]),
+      o("label", {}, ["Proxy URL", V]),
+      o("label", {}, ["API password", N])
+    ]), S = o("div", { class: "tvp-toast" });
+    this.nodes.push(C, b, S);
     for (const i of this.nodes) t.append(i);
-    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");
+    const p = (i, r, l, v) => {
+      i.addEventListener(r, l, v), this.disposers.push(() => i.removeEventListener(r, l, v));
+    }, $ = (i) => d.style.setProperty("--seek", `${i}%`), E = () => {
+      g.hidden = !0, h.hidden = !0, b.classList.remove("open");
     };
-    a(p, "click", () => {
+    let B = 0;
+    const K = (i) => {
+      S.textContent = i, S.classList.add("show"), clearTimeout(B), B = window.setTimeout(() => S.classList.remove("show"), 4500);
+    }, f = (i, r) => {
+      let l = !1, v = -1e9;
+      const G = (x) => {
+        v = x.timeStamp, r(x);
+      };
+      p(i, "pointerdown", () => {
+        l = !0;
+      }), p(i, "pointercancel", () => {
+        l = !1;
+      }), p(i, "pointerup", (x) => {
+        l && (l = !1, G(x));
+      }), p(i, "click", (x) => {
+        x.timeStamp - v > 700 && G(x);
+      });
+    };
+    f(a, () => {
       s.paused ? s.play() : s.pause();
-    }), a(s, "play", () => {
-      p.textContent = "⏸";
-    }), a(s, "pause", () => {
-      p.textContent = "▶";
-    }), a(s, "timeupdate", () => {
+    }), p(s, "play", () => {
+      a.textContent = "⏸";
+    }), p(s, "pause", () => {
+      a.textContent = "▶";
+    }), p(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)}`;
+        d.value = String(i * 10), $(i), u.textContent = `${J(s.currentTime)} / ${J(s.duration)}`;
       }
-    }), 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 ? "🔇" : "🔊";
+    }), p(d, "input", () => {
+      $(Number(d.value) / 10), s.duration && (s.currentTime = Number(d.value) / 1e3 * s.duration);
+    }), f(n, () => {
+      const i = g.hidden;
+      E(), g.hidden = !i;
+    }), p(m, "input", () => {
+      s.volume = Number(m.value), s.muted = s.volume === 0, n.textContent = s.muted ? "🔇" : "🔊";
     });
-    const M = () => {
+    const D = () => {
       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;
+      let r = "Projection";
+      h.querySelectorAll("button").forEach((l) => {
+        const v = l.dataset.mode === i;
+        l.classList.toggle("active", v), v && (r = `Projection: ${l.textContent}`);
+      }), k.title = r;
     };
-    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);
+    f(k, () => {
+      const i = h.hidden;
+      E(), h.hidden = !i;
+    }), f(h, (i) => {
+      const r = i.target.closest("button[data-mode]");
+      r && (e.setProjection(r.dataset.mode), D(), h.hidden = !0);
+    }), D(), f(j, () => {
+      const i = !b.classList.contains("open");
+      E(), b.classList.toggle("open", i);
+    }), p(F, "change", () => e.setSwapEyes(F.checked)), p(w, "input", () => {
+      const i = Number(w.value);
+      T.textContent = String(i), e.setFov(i);
+    }), p(R, "input", () => {
+      const i = Number(R.value);
+      I.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) => {
+    const z = () => e.setProxy({ url: V.value.trim(), apiPassword: N.value, enabled: L.checked });
+    p(L, "change", z), p(V, "change", z), p(N, "change", z), p(e.surface, "wheel", (i) => {
       i.preventDefault();
-      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 r = Math.max(30, Math.min(100, Number(w.value) + Math.sign(i.deltaY) * 3));
+      w.value = String(r), T.textContent = String(r), e.setFov(r);
+    }, { passive: !1 }), f(A, () => {
+      var r, l;
       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();
+      document.fullscreenElement ? (l = document.exitFullscreen) == null || l.call(document) : (r = i.requestFullscreen) == null || r.call(i);
+    }), p(document, "pointerdown", (i) => {
+      const r = i.composedPath(), l = (v) => r.includes(v);
+      [g, n, h, k, b, j].some(l) || E();
     });
-    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);
+    let P = 0;
+    const Q = () => !g.hidden || !h.hidden || b.classList.contains("open"), U = () => {
+      Q() || C.classList.add("tvp-hidden");
+    }, M = () => {
+      C.classList.remove("tvp-hidden"), clearTimeout(P), P = window.setTimeout(U, 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));
+    p(e.fullscreenTarget, "pointermove", M), p(e.fullscreenTarget, "pointerdown", M), p(e.fullscreenTarget, "pointerleave", () => {
+      clearTimeout(P), U();
+    }), this.disposers.push(() => clearTimeout(P)), M(), e.vrSupported().then((i) => {
+      y.hidden = !i;
+    }), f(y, () => {
+      if (e.isPresenting()) {
+        e.exitVR();
+        return;
+      }
+      e.enterVR().catch((i) => K(i instanceof Error ? i.message : "Could not enter VR."));
+    }), e.onVrChange((i) => {
+      y.classList.toggle("active", i), y.title = i ? "Exit VR" : "Enter VR";
     });
   }
   dispose() {
@@ -111,82 +136,89 @@ class X {
     for (const t of this.nodes) t.remove();
   }
 }
-function $(l, t, e) {
+function W(c, t, e) {
   const s = document.createDocumentFragment();
-  return s.append(l, t, e), s;
+  return s.append(c, t, e), s;
 }
-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 {
+const q = ":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-btn.active{color:#4f8cff}.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}", Y = "three-vr-player:settings";
+class nt {
   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;
+    var d, u;
+    this.source = new Z(), this.listeners = /* @__PURE__ */ new Map(), this.readyEmitted = !1, this.native = !1, this.tainted = !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: 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 p;
+    }, this.displayMode = this.view.projection, 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 (e.shadowDom !== !1) {
-      const r = this.wrap.attachShadow({ mode: "open" }), v = document.createElement("style");
-      v.textContent = U, r.appendChild(v), p = r;
+      const n = this.wrap.attachShadow({ mode: "open" }), m = document.createElement("style");
+      m.textContent = q, n.appendChild(m), a = n;
     } else {
       if (!document.getElementById("tvp-styles")) {
-        const r = document.createElement("style");
-        r.id = "tvp-styles", r.textContent = U, document.head.appendChild(r);
+        const n = document.createElement("style");
+        n.id = "tvp-styles", n.textContent = q, document.head.appendChild(n);
       }
-      p = this.wrap;
+      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, e.crossOrigin !== null && (this.video.crossOrigin = e.crossOrigin ?? "anonymous"), p.append(this.canvas, this.video), this.scene = new H({
+    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"), a.append(this.canvas, this.video), this.scene = new tt({
       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 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, {
+    }), this.look = new et(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 ot(a, {
       video: this.video,
       surface: this.canvas,
       fullscreenTarget: this.wrap,
-      vrButton: this.scene.vrButton,
       vrSupported: () => this.vrSupported(),
-      getProjection: () => this.scene.getProjection(),
-      setProjection: (r) => this.setProjection(r),
-      setSwapEyes: (r) => this.setSwapEyes(r),
-      setFov: (r) => this.setFov(r),
-      setSupersampling: (r) => this.setSupersampling(r),
+      enterVR: () => this.enterVR(),
+      exitVR: () => this.scene.exitVR(),
+      isPresenting: () => this.scene.renderer.xr.isPresenting,
+      onVrChange: (n) => {
+        this.on("enterxr", () => n(!0)), this.on("exitxr", () => n(!1));
+      },
+      getProjection: () => this.displayMode,
+      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: ((u = this.proxyConfig) == null ? void 0 : u.apiPassword) ?? "", enabled: this.useProxy },
-      setProxy: (r) => this.setProxy(r)
+      proxy: { url: ((d = this.proxyConfig) == null ? void 0 : d.url) ?? "", apiPassword: ((u = this.proxyConfig) == null ? void 0 : u.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")), e.src && this.load(e.src, { projection: e.projection });
+    }), this.scene.renderer.xr.addEventListener("sessionstart", () => this.emit("enterxr")), this.scene.renderer.xr.addEventListener("sessionend", () => this.emit("exitxr")), this.vrSupported().then((n) => {
+      n && this.scene.offerVR();
+    }), 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, 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;
+    const s = e.projection ?? (this.opts.autoDetect !== !1 ? st(t) : null);
+    s && this.applyProjectionGeometry(s), this.displayMode !== "off" && (this.displayMode = this.view.projection);
+    const { url: a, format: d } = it(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: p, format: c }, { crossOrigin: u }), this.setNativeFallback(!1), await this.video.play().catch(() => {
+      await this.source.attach(this.video, { url: a, format: d }, { crossOrigin: u }), this.tainted = !1, this.applyDisplay(), await this.video.play().catch(() => {
       });
-    } catch (r) {
-      if (this.opts.nativeFallback !== !1 && c === "progressive" && u !== null)
+    } catch (n) {
+      if (this.opts.nativeFallback !== !1 && d === "progressive" && u !== null)
         try {
-          this.setNativeFallback(!0), await this.source.attach(this.video, { url: p, format: c }, { crossOrigin: null }), await this.video.play().catch(() => {
+          this.tainted = !0, this.setNativeFallback(!0), await this.source.attach(this.video, { url: a, format: d }, { crossOrigin: null }), await this.video.play().catch(() => {
           }), this.emit("fallback");
           return;
-        } catch (v) {
-          throw this.setNativeFallback(!1), this.emit("error", v), v;
+        } catch (m) {
+          throw this.tainted = !1, this.setNativeFallback(!1), this.emit("error", m), m;
         }
-      throw this.setNativeFallback(!1), this.emit("error", r), r;
+      throw this.setNativeFallback(!1), this.emit("error", n), n;
     } finally {
       this.loading = !1;
     }
@@ -210,8 +242,19 @@ class Z {
   pause() {
     this.video.pause();
   }
+  /** Set the display mode: a geometry projection (WebGL 3D) or 'off' for plain 2D `<video>`. */
   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);
+    if (t === "off") {
+      this.displayMode = "off", this.setNativeFallback(!0), this.emit("projectionchange", t);
+      return;
+    }
+    this.displayMode = t, this.applyProjectionGeometry(t), this.tainted && this.currentSrc ? this.load(this.currentSrc) : this.setNativeFallback(!1), this.emit("projectionchange", t);
+  }
+  applyProjectionGeometry(t) {
+    this.scene.setProjection(t), this.look.setEnabled(!this.scene.isFlat()), this.look.reset(), this.view.projection = t, this.persist();
+  }
+  applyDisplay() {
+    this.setNativeFallback(this.displayMode === "off");
   }
   setSwapEyes(t) {
     this.scene.setSwapEyes(t), this.view.swapEyes = t, this.persist();
@@ -226,10 +269,13 @@ class Z {
   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);
   }
+  /** Enter immersive VR. Rejects if the WebXR session request fails (e.g. no headset,
+   *  or a non-secure origin) — the built-in controls surface the reason as a toast. */
   async enterVR() {
-    var e;
-    const t = this.scene.vrButton;
-    (e = t == null ? void 0 : t.click) == null || e.call(t);
+    await this.scene.enterVR();
+  }
+  exitVR() {
+    this.scene.exitVR();
   }
   get three() {
     return { renderer: this.scene.renderer, scene: this.scene.scene, camera: this.scene.camera };
@@ -244,18 +290,18 @@ class Z {
   }
   emit(t, e) {
     var s;
-    (s = this.listeners.get(t)) == null || s.forEach((p) => p(e));
+    (s = this.listeners.get(t)) == null || s.forEach((a) => a(e));
   }
   persist() {
     if (this.opts.persistSettings)
       try {
-        localStorage.setItem(V, JSON.stringify(this.view));
+        localStorage.setItem(Y, JSON.stringify(this.view));
       } catch {
       }
   }
   loadSettings() {
     try {
-      const t = localStorage.getItem(V);
+      const t = localStorage.getItem(Y);
       return t ? JSON.parse(t) : null;
     } catch {
       return null;
@@ -266,12 +312,12 @@ class Z {
     (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 tt extends HTMLElement {
+class rt extends HTMLElement {
   static get observedAttributes() {
     return ["src", "projection"];
   }
   connectedCallback() {
-    this.player || (this.style.display || (this.style.display = "block"), this.player = new Z(this, {
+    this.player || (this.style.display || (this.style.display = "block"), this.player = new nt(this, {
       src: this.getAttribute("src") ?? void 0,
       projection: this.getAttribute("projection") ?? void 0,
       controls: this.hasAttribute("controls"),
@@ -298,23 +344,23 @@ class tt extends HTMLElement {
     return this.player;
   }
 }
-function et(l = "three-video") {
-  typeof customElements < "u" && !customElements.get(l) && customElements.define(l, tt);
+function at(c = "three-video") {
+  typeof customElements < "u" && !customElements.get(c) && customElements.define(c, rt);
 }
-et();
+at();
 export {
-  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
+  et as LookControls,
+  dt as MODES,
+  X as PROJECTIONS,
+  nt as Player,
+  tt as StereoScene,
+  rt as ThreeVideoElement,
+  Z as VideoSource,
+  it as buildProxyUrl,
+  ht as clampAngles,
+  ut as detectFormat,
+  st as detectProjection,
+  vt as isFlatMode,
+  at as registerWebComponent
 };
 //# sourceMappingURL=three-vr-player.js.map