three-vr-player 0.5.0 → 0.7.0

package/dist/three-vr-player.js

@@ -1,43 +1,56 @@
-import { P as Y, V as _, S as H, L as K, a as Q, b as X } from "./VideoSource-BGaVaGUn.js";
-import { M as rt, c as at, d as pt, i as lt } from "./VideoSource-BGaVaGUn.js";
-function $(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}`;
-}
-function o(l, t = {}, e = []) {
-  const s = document.createElement(l), { class: p, ...c } = t;
+import { P as X, f as J, V as Z, S as tt, L as et, a as st, b as it } from "./VideoSource-Cx7XPpvZ.js";
+import { M as dt, c as ht, d as ut, i as vt } from "./VideoSource-Cx7XPpvZ.js";
+function o(v, t = {}, e = []) {
+  const s = document.createElement(v), { class: p, ...c } = t;
   p && (s.className = p), Object.assign(s, c);
-  for (const u of e) s.append(u);
+  for (const h of e) s.append(h);
   return s;
 }
-class Z {
+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]), G = o("span", { class: "tvp-volwrap" }, [r, f]), z = o("span", { class: "tvp-vrslot" }), b = o("button", { class: "tvp-btn tvp-projbtn", title: "Projection", textContent: "🌐" }), d = o("div", { class: "tvp-projmenu", hidden: !0 });
-    for (const i of Y) {
-      const n = o("button", { textContent: i.label });
-      n.dataset.mode = i.value, d.append(n);
+    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" }), h = 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: "🌐" }), d = o("div", { class: "tvp-projmenu", hidden: !0 });
+    for (const i of X) {
+      const r = o("button", { textContent: i.label });
+      r.dataset.mode = i.value, d.append(r);
     }
-    const M = o("button", { textContent: "Off (native player)" });
-    M.dataset.mode = "off", d.append(o("hr", { class: "tvp-sep" }), M);
-    const J = o("span", { class: "tvp-projwrap" }, [b, d]), 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, G, z, 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) }), j = o("span", { textContent: String(e.initial.fov) }), E = 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 }), N = 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", {}, [D("Field of view (zoom): ", j, "°"), x]),
-      o("label", {}, [D("Supersampling: ", A, "× (sharpness)"), E]),
+    const A = o("button", { textContent: "Off (native player)" });
+    A.dataset.mode = "off", d.append(o("hr", { class: "tvp-sep" }), A);
+    const H = o("span", { class: "tvp-projwrap" }, [k, d]), j = o("button", { class: "tvp-btn tvp-settingsbtn", title: "Settings", textContent: "⚙" }), M = o("button", { class: "tvp-btn tvp-fullscreen", title: "Fullscreen", textContent: "⛶" }), C = o("footer", { class: "tvp-controls" }, [p, c, h, _, y, H, j, M]), T = o("input", { type: "checkbox", checked: e.initial.swapEyes }), w = o("input", { type: "range", min: "30", max: "100", step: "1", value: String(e.initial.fov) }), F = 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" }, [T, "Swap eyes (if depth looks wrong)"]),
+      o("label", {}, [W("Field of view (zoom): ", F, "°"), 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", { class: "row" }, [L, "Use CORS proxy"]),
+      o("label", {}, ["Proxy URL", V]),
       o("label", {}, ["API password", N])
-    ]), W = o("div", { class: "tvp-toast" });
-    this.nodes.push(S, g, W);
+    ]), 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, h, m) => {
-      i.addEventListener(n, h, m), this.disposers.push(() => i.removeEventListener(n, h, m));
-    }, I = (i) => c.style.setProperty("--seek", `${i}%`), y = () => {
-      f.hidden = !0, d.hidden = !0, g.classList.remove("open");
+    const a = (i, r, l, u) => {
+      i.addEventListener(r, l, u), this.disposers.push(() => i.removeEventListener(r, l, u));
+    }, B = (i) => c.style.setProperty("--seek", `${i}%`), E = () => {
+      g.hidden = !0, d.hidden = !0, b.classList.remove("open");
+    };
+    let D = 0;
+    const K = (i) => {
+      S.textContent = i, S.classList.add("show"), clearTimeout(D), D = window.setTimeout(() => S.classList.remove("show"), 4500);
+    }, f = (i, r) => {
+      let l = !1, u = -1e9;
+      const G = (x) => {
+        u = x.timeStamp, r(x);
+      };
+      a(i, "pointerdown", () => {
+        l = !0;
+      }), a(i, "pointercancel", () => {
+        l = !1;
+      }), a(i, "pointerup", (x) => {
+        l && (l = !1, G(x));
+      }), a(i, "click", (x) => {
+        x.timeStamp - u > 700 && G(x);
+      });
     };
-    a(p, "click", () => {
+    f(p, () => {
       s.paused ? s.play() : s.pause();
     }), a(s, "play", () => {
       p.textContent = "⏸";
@@ -46,66 +59,71 @@ class Z {
     }), a(s, "timeupdate", () => {
       if (s.duration) {
         const i = s.currentTime / s.duration * 100;
-        c.value = String(i * 10), I(i), u.textContent = `${$(s.currentTime)} / ${$(s.duration)}`;
+        c.value = String(i * 10), B(i), h.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 ? "🔇" : "🔊";
+      B(Number(c.value) / 10), s.duration && (s.currentTime = Number(c.value) / 1e3 * s.duration);
+    }), f(n, () => {
+      const i = g.hidden;
+      E(), g.hidden = !i;
+    }), a(m, "input", () => {
+      s.volume = Number(m.value), s.muted = s.volume === 0, n.textContent = s.muted ? "🔇" : "🔊";
     });
-    const B = () => {
+    const U = () => {
       const i = e.getProjection();
-      let n = "Projection";
-      d.querySelectorAll("button").forEach((h) => {
-        const m = h.dataset.mode === i;
-        h.classList.toggle("active", m), m && (n = `Projection: ${h.textContent}`);
-      }), b.title = n;
+      let r = "Projection";
+      d.querySelectorAll("button").forEach((l) => {
+        const u = l.dataset.mode === i;
+        l.classList.toggle("active", u), u && (r = `Projection: ${l.textContent}`);
+      }), k.title = r;
     };
-    a(b, "click", (i) => {
-      i.stopPropagation();
-      const n = d.hidden;
-      y(), d.hidden = !n;
-    }), a(d, "click", (i) => {
-      const n = i.target.closest("button[data-mode]");
-      n && (e.setProjection(n.dataset.mode), B(), d.hidden = !0);
-    }), B(), 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);
-      j.textContent = String(i), e.setFov(i);
-    }), a(E, "input", () => {
-      const i = Number(E.value);
-      A.textContent = String(i), e.setSupersampling(i);
+    f(k, () => {
+      const i = d.hidden;
+      E(), d.hidden = !i;
+    }), f(d, (i) => {
+      const r = i.target.closest("button[data-mode]");
+      r && (e.setProjection(r.dataset.mode), U(), d.hidden = !0);
+    }), U(), f(j, () => {
+      const i = !b.classList.contains("open");
+      E(), b.classList.toggle("open", i);
+    }), a(T, "change", () => e.setSwapEyes(T.checked)), a(w, "input", () => {
+      const i = Number(w.value);
+      F.textContent = String(i), e.setFov(i);
+    }), a(R, "input", () => {
+      const i = Number(R.value);
+      I.textContent = String(i), e.setSupersampling(i);
     });
-    const T = () => e.setProxy({ url: F.value.trim(), apiPassword: N.value, enabled: C.checked });
-    a(C, "change", T), a(F, "change", T), a(N, "change", T), a(e.surface, "wheel", (i) => {
+    const z = () => e.setProxy({ url: V.value.trim(), apiPassword: N.value, enabled: L.checked });
+    a(L, "change", z), a(V, "change", z), a(N, "change", z), a(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), j.textContent = String(n), e.setFov(n);
-    }, { passive: !1 }), a(O, "click", () => {
-      var n, h;
+      const r = Math.max(30, Math.min(100, Number(w.value) + Math.sign(i.deltaY) * 3));
+      w.value = String(r), F.textContent = String(r), e.setFov(r);
+    }, { passive: !1 }), f(M, () => {
+      var r, l;
       const i = e.fullscreenTarget;
-      document.fullscreenElement ? (h = document.exitFullscreen) == null || h.call(document) : (n = i.requestFullscreen) == null || n.call(i);
-    }), a(document, "click", (i) => {
-      const n = i.composedPath(), h = (m) => n.includes(m);
-      [f, r, d, b, g, k].some(h) || y();
+      document.fullscreenElement ? (l = document.exitFullscreen) == null || l.call(document) : (r = i.requestFullscreen) == null || r.call(i);
+    }), a(document, "pointerdown", (i) => {
+      const r = i.composedPath(), l = (u) => r.includes(u);
+      [g, n, d, k, b, j].some(l) || E();
     });
-    let w = 0;
-    const q = () => !f.hidden || !d.hidden || g.classList.contains("open"), R = () => {
-      q() || S.classList.add("tvp-hidden");
-    }, L = () => {
-      S.classList.remove("tvp-hidden"), clearTimeout(w), w = window.setTimeout(R, 5e3);
+    let P = 0;
+    const Q = () => !g.hidden || !d.hidden || b.classList.contains("open"), $ = () => {
+      Q() || C.classList.add("tvp-hidden");
+    }, O = () => {
+      C.classList.remove("tvp-hidden"), clearTimeout(P), P = window.setTimeout($, 5e3);
     };
-    a(e.fullscreenTarget, "pointermove", L), a(e.fullscreenTarget, "pointerdown", L), a(e.fullscreenTarget, "pointerleave", () => {
-      clearTimeout(w), R();
-    }), this.disposers.push(() => clearTimeout(w)), L(), e.vrSupported().then((i) => {
-      i && (Object.assign(e.vrButton.style, { position: "static", left: "auto", bottom: "auto", transform: "none", margin: "0" }), z.append(e.vrButton));
+    a(e.fullscreenTarget, "pointermove", O), a(e.fullscreenTarget, "pointerdown", O), a(e.fullscreenTarget, "pointerleave", () => {
+      clearTimeout(P), $();
+    }), this.disposers.push(() => clearTimeout(P)), O(), 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() {
@@ -113,15 +131,15 @@ class Z {
     for (const t of this.nodes) t.remove();
   }
 }
-function D(l, t, e) {
+function W(v, t, e) {
   const s = document.createDocumentFragment();
-  return s.append(l, t, e), s;
+  return s.append(v, 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 tt {
+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.tainted = !1, this.loading = !1, this.useProxy = !1, this.opts = e, this.proxyConfig = e.proxy, this.useProxy = !!e.proxy;
+    var c, h;
+    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",
@@ -131,64 +149,71 @@ class tt {
     }, 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 p;
     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), p = 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;
     }
-    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"), p.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 Z(p, {
+    }), e.title && this.scene.setVRTitle(e.title), 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(p, {
       video: this.video,
       surface: this.canvas,
       fullscreenTarget: this.wrap,
-      vrButton: this.scene.vrButton,
       vrSupported: () => this.vrSupported(),
+      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: (r) => this.setProjection(r),
-      setSwapEyes: (r) => this.setSwapEyes(r),
-      setFov: (r) => this.setFov(r),
-      setSupersampling: (r) => this.setSupersampling(r),
+      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: ((c = this.proxyConfig) == null ? void 0 : c.url) ?? "", apiPassword: ((h = this.proxyConfig) == null ? void 0 : h.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 ? Q(t) : null);
+    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: p, format: c } = X(t, this.useProxy ? this.proxyConfig : void 0), u = this.opts.crossOrigin === void 0 ? "anonymous" : this.opts.crossOrigin;
+    const { url: p, format: c } = it(t, this.useProxy ? this.proxyConfig : void 0), h = 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.tainted = !1, this.applyDisplay(), await this.video.play().catch(() => {
+      await this.source.attach(this.video, { url: p, format: c }, { crossOrigin: h }), 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 && c === "progressive" && h !== null)
         try {
           this.tainted = !0, 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.tainted = !1, 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;
     }
@@ -239,10 +264,13 @@ class tt {
   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 };
@@ -262,13 +290,13 @@ class tt {
   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;
@@ -279,12 +307,12 @@ class tt {
     (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 et 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 tt(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"),
@@ -311,23 +339,23 @@ class et extends HTMLElement {
     return this.player;
   }
 }
-function st(l = "three-video") {
-  typeof customElements < "u" && !customElements.get(l) && customElements.define(l, et);
+function at(v = "three-video") {
+  typeof customElements < "u" && !customElements.get(v) && customElements.define(v, rt);
 }
-st();
+at();
 export {
-  K as LookControls,
-  rt as MODES,
-  Y as PROJECTIONS,
-  tt as Player,
-  H as StereoScene,
-  et as ThreeVideoElement,
-  _ as VideoSource,
-  X as buildProxyUrl,
-  at as clampAngles,
-  pt as detectFormat,
-  Q as detectProjection,
-  lt as isFlatMode,
-  st 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