@ericchen1990/pano-view 5.0.0 → 5.1.0

package/dist/index.cjs

@@ -2509,6 +2509,19 @@ function createSpatialHost() {
 }
 var SpatialHostContext = (0, import_react.createContext)(null);
 
+// src/spatial/model-controls.ts
+function resolveSurfaceModelAdapter(surface, controls, hovered, previous) {
+  let first = null;
+  let retained = null;
+  for (const [node, adapter] of controls) {
+    if (!surface.contains(node)) continue;
+    first ?? (first = adapter);
+    if (adapter === hovered) return adapter;
+    if (adapter === previous) retained = adapter;
+  }
+  return retained ?? first;
+}
+
 // src/controls/actions.ts
 var CONTROL_PATHS = {
   play: "M8 5 L19 12 L8 19 Z",
@@ -2532,6 +2545,7 @@ var CONTROL_PATHS = {
 function mediaActions(controller, seekSpeed = 10, volumeSpeed = 0.25) {
   if (!controller) return [];
   const snapshot = () => controller.getSnapshot();
+  const safeVolumeSpeed = Number.isFinite(volumeSpeed) && volumeSpeed >= 0 ? volumeSpeed : 0.25;
   return [
     {
       id: snapshot().playing ? "pause" : "play",
@@ -2556,22 +2570,25 @@ function mediaActions(controller, seekSpeed = 10, volumeSpeed = 0.25) {
         )
       )
     })),
-    ...(snapshot().volumeAdjustable ? [-1, 1] : []).map((direction) => ({
+    ...(snapshot().hasAudio !== false && snapshot().volumeAdjustable ? [-1, 1] : []).map((direction) => ({
       id: direction < 0 ? "vol-" : "vol+",
       label: direction < 0 ? "Volume down" : "Volume up",
-      enabled: () => snapshot().volumeAdjustable && (direction < 0 ? snapshot().volume > 0 : snapshot().volume < 1),
-      update: (dt) => controller.setVolume(
-        Math.max(
-          0,
-          Math.min(1, snapshot().volume + direction * dt * volumeSpeed)
-        )
-      )
+      enabled: () => snapshot().hasAudio !== false && snapshot().volumeAdjustable && (direction < 0 ? snapshot().volume > 0 : snapshot().volume < 1),
+      update: (dt) => {
+        if (!Number.isFinite(dt) || dt <= 0 || snapshot().hasAudio === false || !snapshot().volumeAdjustable) return;
+        controller.setVolume(
+          Math.max(0, Math.min(1, snapshot().volume + direction * dt * safeVolumeSpeed))
+        );
+      }
     })),
-    {
+    ...snapshot().hasAudio === false ? [] : [{
       id: snapshot().muted ? "unmute" : "mute",
       label: snapshot().muted ? "Unmute" : "Mute",
-      activate: () => controller.setMuted(!snapshot().muted)
-    }
+      enabled: () => snapshot().hasAudio !== false,
+      activate: () => {
+        if (snapshot().hasAudio !== false) controller.setMuted(!snapshot().muted);
+      }
+    }]
   ];
 }
 function modelActions(adapter, rotateSpeed = 30, zoomSpeed = 1.5) {
@@ -2710,6 +2727,35 @@ function scrollViewportBounds(root, target, maxHeight) {
   };
 }
 
+// src/controls/media-audio.ts
+function probeMediaHasAudio(media) {
+  if (media.readyState < 1) return void 0;
+  const metadata = media;
+  if ((metadata.audioTracks?.length ?? 0) > 0 || metadata.mozHasAudio === true || (metadata.webkitAudioDecodedByteCount ?? 0) > 0) return true;
+  if (metadata.audioTracks?.length === 0 || metadata.mozHasAudio === false) return false;
+  return void 0;
+}
+function subscribeMediaAudio(media, notify2) {
+  let tracks;
+  const trackEvents = ["addtrack", "removetrack", "change"];
+  const sync = () => {
+    const next = media.audioTracks;
+    if (next !== tracks) {
+      trackEvents.forEach((event) => tracks?.removeEventListener(event, notify2));
+      tracks = next;
+      trackEvents.forEach((event) => tracks?.addEventListener(event, notify2));
+    }
+    notify2();
+  };
+  const events = ["loadstart", "emptied", "loadedmetadata", "loadeddata", "playing", "timeupdate"];
+  events.forEach((event) => media.addEventListener(event, sync));
+  sync();
+  return () => {
+    events.forEach((event) => media.removeEventListener(event, sync));
+    trackEvents.forEach((event) => tracks?.removeEventListener(event, notify2));
+  };
+}
+
 // src/video/format.ts
 var DEFAULT_PANO_VIDEO_PLAYBACK_RATES = [0.5, 1, 1.25, 1.5, 2];
 var MEDIA_PROBE_EPSILON = 1e-3;
@@ -2839,6 +2885,29 @@ function cueText(cue) {
   return cue.text.replace(/<[^>]+>/g, "").replace(/\r\n|\r/g, "\n");
 }
 
+// src/controls/layout.ts
+var CONTROL_GROUP_DEFAULTS = { size: 48, gap: 8, padding: 8 };
+function controlGroupLayout(count, width, size = CONTROL_GROUP_DEFAULTS.size, gap = CONTROL_GROUP_DEFAULTS.gap, padding = CONTROL_GROUP_DEFAULTS.padding) {
+  size = Math.max(1, size);
+  gap = Math.max(0, gap);
+  padding = Math.max(0, padding);
+  const columns = Math.max(1, Math.floor((width - 2 * padding + gap) / (size + gap)));
+  const rows = Math.ceil(count / columns);
+  return {
+    height: count ? rows * size + Math.max(0, rows - 1) * gap + 2 * padding : 0,
+    buttons: Array.from({ length: count }, (_, i) => {
+      const row = Math.floor(i / columns), items = Math.min(columns, count - row * columns);
+      return { x: (width - items * size - (items - 1) * gap) / 2 + i % columns * (size + gap), y: padding + row * (size + gap), w: size, h: size };
+    })
+  };
+}
+function allowsAutomaticMediaControls(media) {
+  return media.getAttribute("data-pano-media-controls") !== "none";
+}
+function shouldPauseSurfaceMedia(connected, registered) {
+  return !connected || !registered;
+}
+
 // src/controls/media.ts
 var import_react2 = require("react");
 var mediaControllers = /* @__PURE__ */ new WeakMap();
@@ -2863,6 +2932,7 @@ function usePanoMediaController(ref) {
           playing: media ? !media.paused && !media.ended : false,
           currentTime: media?.currentTime ?? 0,
           duration: media?.duration ?? 0,
+          hasAudio: media ? probeMediaHasAudio(media) : void 0,
           volume: media?.volume ?? 1,
           volumeAdjustable: adjustable.current,
           muted: media?.muted ?? true
@@ -2900,19 +2970,17 @@ function usePanoMediaController(ref) {
     adjustable.current = probeVolumeAdjustable(media);
     const notify2 = () => listeners.current.forEach((fn) => fn());
     const events = [
-      "loadedmetadata",
       "durationchange",
-      "timeupdate",
       "play",
       "pause",
       "ended",
       "volumechange",
-      "error",
-      "emptied"
+      "error"
     ];
     events.forEach((event) => media.addEventListener(event, notify2));
-    notify2();
+    const unsubscribeAudio = subscribeMediaAudio(media, notify2);
     return () => {
+      unsubscribeAudio();
       if (mediaControllers.get(media) === controller) mediaControllers.delete(media);
       events.forEach((event) => media.removeEventListener(event, notify2));
     };
@@ -3231,6 +3299,7 @@ function PanoControlGroup({
     {
       ...props,
       role: "group",
+      style: { gap: `var(--pano-control-gap, ${CONTROL_GROUP_DEFAULTS.gap}px)`, padding: `var(--pano-control-padding, ${CONTROL_GROUP_DEFAULTS.padding}px)`, ...props.style },
       "data-pano-control-group": "",
       className: `pano-control-group ${props.className ?? ""}`,
       children: children ? children(actions) : actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -4023,7 +4092,7 @@ function SurfaceMediaControls({ surface }) {
     const sync = () => {
       const videos = [...surface.element.querySelectorAll("video")];
       const automatic = videos.filter((video) => {
-        if (explicitTargets.has(mediaControllers.get(video) ?? video)) return false;
+        if (!allowsAutomaticMediaControls(video) || explicitTargets.has(mediaControllers.get(video) ?? video)) return false;
         return ![...host.controls].some(([node]) => node === video || node.contains(video));
       });
       let changed = false;
@@ -4096,7 +4165,7 @@ function makeCanvas() {
   canvas.height = HEIGHT * RASTER_SCALE;
   return canvas;
 }
-async function capture(element, owner) {
+async function capture(element, owner, footer = false) {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   const native = ctx;
@@ -4130,6 +4199,10 @@ async function capture(element, owner) {
       transform: "none",
       position: "relative"
     });
+    if (footer) {
+      clone2.style.borderBottomLeftRadius = "0";
+      clone2.style.borderBottomRightRadius = "0";
+    }
     clone2.setAttribute("drawable", "");
     canvas.append(clone2);
     owner.append(canvas);
@@ -4224,6 +4297,10 @@ async function capture(element, owner) {
     top: "0",
     transform: "none"
   });
+  if (footer) {
+    clone.style.borderBottomLeftRadius = "0";
+    clone.style.borderBottomRightRadius = "0";
+  }
   owner.append(clone);
   originals.forEach((node, i) => {
     copies[i].scrollTop = node.scrollTop;
@@ -4301,6 +4378,7 @@ function SurfacePanel({ surface }) {
     edgeButtons: [],
     target: surface.element,
     adapter: null,
+    modelAdapter: null,
     scrollTarget: null,
     mediaTarget: null
   });
@@ -4311,7 +4389,7 @@ function SurfacePanel({ surface }) {
       controller = {
         subscribe: () => () => {
         },
-        getSnapshot: () => ({ ready: media.readyState >= 1, playing: !media.paused && !media.ended, currentTime: media.currentTime, duration: media.duration, volume: media.volume, volumeAdjustable: volumeCapabilities.get(media) ?? false, muted: media.muted }),
+        getSnapshot: () => ({ ready: media.readyState >= 1, playing: !media.paused && !media.ended, currentTime: media.currentTime, duration: media.duration, hasAudio: probeMediaHasAudio(media), volume: media.volume, volumeAdjustable: volumeCapabilities.get(media) ?? false, muted: media.muted }),
         play: async () => {
           try {
             await media.play();
@@ -4328,7 +4406,7 @@ function SurfacePanel({ surface }) {
           if (Number.isFinite(time) && Number.isFinite(media.duration)) media.currentTime = Math.max(0, Math.min(media.duration, time));
         },
         setVolume: (value) => {
-          media.volume = value;
+          if (Number.isFinite(value) && volumeCapabilities.get(media)) media.volume = clampVolume(value);
         },
         setMuted: (value) => {
           media.muted = value;
@@ -4345,6 +4423,7 @@ function SurfacePanel({ surface }) {
     s.generation++;
     s.target = surface.element;
     s.adapter = null;
+    s.modelAdapter = null;
     s.dirty = true;
     s.image = null;
     s.mediaBlocked = false;
@@ -4424,7 +4503,7 @@ function SurfacePanel({ surface }) {
       videos.current.clear();
       controllers.current.clear();
       blockedMedia.current = /* @__PURE__ */ new WeakSet();
-      surface.element.querySelectorAll("video,audio").forEach((m) => m.pause());
+      if (shouldPauseSurfaceMedia(surface.element.isConnected, host.surfaces.has(surface))) surface.element.querySelectorAll("video,audio").forEach((m) => m.pause());
     };
   }, [surface, camera, gl, host, sceneHost, scratch]);
   (0, import_react9.useEffect)(
@@ -4542,9 +4621,15 @@ function SurfacePanel({ surface }) {
       s.dirty = true;
     }
     const ctx = canvas.getContext("2d");
+    const appearance = getComputedStyle(surface.element);
+    const token = (name, fallback) => {
+      const value = parseFloat(appearance.getPropertyValue(`--pano-control-${name}`));
+      return Number.isFinite(value) ? value : fallback;
+    };
+    const controlSize = token("size", CONTROL_GROUP_DEFAULTS.size), controlGap = token("gap", CONTROL_GROUP_DEFAULTS.gap), controlPadding = token("padding", CONTROL_GROUP_DEFAULTS.padding);
     const nextHeight = Math.max(
       surface.anchor ? 1 : 200,
-      Math.min(BODY_HEIGHT, surface.element.offsetHeight) + (s.buttons.length ? 32 + Math.ceil(s.buttons.length / 5) * 88 : 0)
+      Math.min(BODY_HEIGHT, surface.element.offsetHeight) + (s.buttons.length ? controlGroupLayout(s.buttons.length, WIDTH, controlSize, controlGap, controlPadding).height : 0)
     );
     if (canvas.height !== nextHeight * RASTER_SCALE) {
       texture.dispose();
@@ -4581,7 +4666,7 @@ function SurfacePanel({ surface }) {
       });
       owner.setAttribute("aria-hidden", "true");
       surface.element.closest("[data-pano-viewer]")?.append(owner);
-      capture(surface.element, owner).then((image) => {
+      capture(surface.element, owner, s.buttons.length > 0).then((image) => {
         if (!s.disposed && generation === s.generation && revision === s.revision) {
           s.image = image;
           s.failed = false;
@@ -4597,7 +4682,6 @@ function SurfacePanel({ surface }) {
         s.busy = false;
       });
     }
-    const appearance = getComputedStyle(surface.element);
     const radius = Math.max(0, parseFloat(appearance.borderTopLeftRadius) || 0);
     ctx.clearRect(0, 0, WIDTH, s.height);
     ctx.save();
@@ -4746,31 +4830,55 @@ function SurfacePanel({ surface }) {
     s.edgeButtons = !host.input.hasStick && !surface.anchor && s.scrollTarget && !explicitTargets.has(s.scrollTarget) ? scrollEdges(s.scrollTarget, scrollViewportBounds(surface.element, s.scrollTarget, Math.min(BODY_HEIGHT, surface.element.offsetHeight)), () => {
       s.dirty = true;
     }) : [];
-    const adapter = s.adapter;
+    const adapter = resolveSurfaceModelAdapter(surface.element, host.controls, s.adapter, s.modelAdapter);
+    s.modelAdapter = adapter;
     if (adapter && !explicitTargets.has(adapter)) for (const action of modelActions(adapter)) {
       if (host.input.canDrag && adapter.rotateBy && ["left", "right", "up", "down"].includes(action.id) || host.input.hasStick && adapter.zoomBy && ["in", "out"].includes(action.id)) continue;
       add(action.id, action.label, action.update, action.activate, action.enabled);
     }
-    if (media instanceof HTMLAudioElement && !adapter && !explicitTargets.has(mediaControllers.get(media) ?? media)) {
+    if (media instanceof HTMLAudioElement && allowsAutomaticMediaControls(media) && !adapter && !explicitTargets.has(mediaControllers.get(media) ?? media)) {
       for (const action of mediaActions(controllerFor(media))) add(action.id === "pause" ? "play" : action.id === "unmute" ? "mute" : action.id, action.label, action.update, action.activate, action.enabled);
     }
-    s.buttons = surface.anchor ? [] : buttons;
     if (surface.anchor) buttons.length = 0;
+    const layout = controlGroupLayout(buttons.length, WIDTH, controlSize, controlGap, controlPadding);
+    const bodyHeight = Math.min(BODY_HEIGHT, surface.element.offsetHeight);
+    buttons.forEach((button, i) => Object.assign(button, layout.buttons[i], { y: bodyHeight + layout.buttons[i].y }));
+    if (s.buttons.length !== buttons.length) s.dirty = true;
+    s.buttons = buttons;
+    if (buttons.length) {
+      ctx.fillStyle = "#161b22";
+      ctx.fillRect(0, bodyHeight, WIDTH, layout.height);
+    }
     for (const b of buttons) {
-      ctx.fillStyle = b.action.enabled?.() === false ? "#333a43" : appearance.getPropertyValue("--pano-control-background").trim() || "#39424e";
-      ctx.fillRect(b.x, b.y, b.w, b.h);
-      ctx.fillStyle = "#fff";
+      ctx.save();
+      ctx.globalAlpha = b.action.enabled?.() === false ? 0.4 : 1;
+      ctx.fillStyle = appearance.getPropertyValue("--pano-control-background").trim() || "#39424e";
+      ctx.beginPath();
+      ctx.roundRect(b.x, b.y, b.w, b.h, token("radius", b.w / 2));
+      ctx.fill();
+      const border = /^(\d+(?:\.\d+)?)px\s+solid\s+(.+)$/.exec(appearance.getPropertyValue("--pano-control-border").trim() || "1px solid #68778a");
+      if (border) {
+        ctx.strokeStyle = border[2];
+        ctx.lineWidth = Number(border[1]);
+        ctx.stroke();
+      }
+      if (host.action?.id === b.action.id) {
+        ctx.strokeStyle = appearance.getPropertyValue("--pano-control-focus").trim() || "#ffb300";
+        ctx.lineWidth = 3;
+        ctx.stroke();
+      }
       const id = String(b.action.id).replace("scroll-", "");
       const icon = id === "play" && media && !media.paused ? "pause" : id === "mute" && media?.muted ? "unmute" : id;
       ctx.save();
-      ctx.translate(b.x + b.w / 2 - 16, b.y + b.h / 2 - 16);
-      ctx.scale(32 / 24, 32 / 24);
-      ctx.strokeStyle = "#fff";
+      ctx.translate(b.x + b.w / 2 - 12, b.y + b.h / 2 - 12);
+      ctx.scale(1, 1);
+      ctx.strokeStyle = appearance.getPropertyValue("--pano-control-color").trim() || "#baf5ff";
       ctx.lineWidth = 2;
       ctx.lineCap = "round";
       ctx.lineJoin = "round";
       ctx.stroke(new Path2D(CONTROL_PATHS[icon] ?? CONTROL_PATHS.reset));
       ctx.restore();
+      ctx.restore();
     }
     for (const button of s.edgeButtons) {
       const focused = host.action?.id === button.action.id || [...contacts.current.values()].some((contact) => contact.action?.id === button.action.id);
@@ -9696,6 +9804,7 @@ function VolumeControl({
   const mutedOrSilent = muted || volume === 0;
   (0, import_react30.useEffect)(() => {
     onOpenChange(open);
+    return () => onOpenChange(false);
   }, [onOpenChange, open]);
   (0, import_react30.useEffect)(() => {
     if (!open || !volumeAdjustable || hasFinePointerHover()) {
@@ -10143,7 +10252,7 @@ function PanoVideoControlsHud({
           }
         ),
         hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        snapshot.hasAudio === false ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           VolumeControl,
           {
             appearance: resolved,
@@ -15086,6 +15195,32 @@ function suppressFollowingClick(target) {
   setTimeout(cleanup, CLICK_SUPPRESS_MS);
 }
 
+// src/hotspot/tooltip-layout.ts
+function tooltipPadding(value) {
+  const values = String(value).trim().split(/\s+/).map((value2) => Math.max(0, parseFloat(value2) || 0));
+  const [top = 0, right2 = top, bottom = top, left = right2] = values;
+  return [top, right2, bottom, left];
+}
+function tooltipBaseline(top, lineHeight, ascent, descent) {
+  return top + (lineHeight - ascent - descent) / 2 + ascent;
+}
+function tooltipLines(text, maxWidth, measure) {
+  const lines = [];
+  if (!text) return lines;
+  for (const paragraph of text.split("\n")) {
+    let line = "";
+    for (const char of paragraph) {
+      if (line && measure(line + char) > maxWidth) {
+        lines.push(line);
+        line = "";
+      }
+      line += char;
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+
 // src/hotspot/tooltip-transform.ts
 var import_three22 = require("three");
 var point = new import_three22.Vector3();
@@ -15179,25 +15314,17 @@ function SpatialHotspotTooltip({
   }, [content.image]);
   const raster = (0, import_react47.useMemo)(() => {
     const fontSize = Math.max(1, number(appearance.fontSize, 12));
-    const padding = Math.max(0, number(appearance.padding, 8));
+    const [pt, pr, pb, pl] = tooltipPadding(appearance.padding);
+    const padding = Math.max(pl, pr);
+    const letterSpacing = appearance.letterSpacing === "normal" ? 0 : number(appearance.letterSpacing ?? 0, 0);
     const leading = appearance.lineHeight;
     const lineHeight = typeof leading === "string" && leading.endsWith("px") ? number(leading, fontSize * 1.4) : fontSize * number(leading, 1.4) / (typeof leading === "string" && leading.endsWith("%") ? 100 : 1);
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     const font = `${fontSize}px ${appearance.fontFamily}`;
     ctx.font = font;
-    const lines = [];
-    for (const paragraph of (content.text ?? "").split("\n")) {
-      let line = "";
-      for (const char of paragraph) {
-        if (line && ctx.measureText(line + char).width > 220 - padding * 2) {
-          lines.push(line);
-          line = "";
-        }
-        line += char;
-      }
-      if (line || content.text) lines.push(line);
-    }
+    const measure = (text) => (letterSpacing ? [...text].reduce((width2, char) => width2 + ctx.measureText(char).width, 0) : ctx.measureText(text).width) + Math.max(0, [...text].length - 1) * letterSpacing;
+    const lines = tooltipLines(content.text ?? "", 220 - pl - pr, measure);
     const imageWidth = image ? Math.min(
       220 - padding * 2,
       120 * image.naturalWidth / image.naturalHeight
@@ -15206,12 +15333,12 @@ function SpatialHotspotTooltip({
     const width = Math.ceil(
       Math.max(
         imageWidth,
-        ...lines.map((line) => ctx.measureText(line).width),
+        ...lines.map(measure),
         1
-      ) + padding * 2
+      ) + pl + pr
     );
     const height = Math.ceil(
-      padding * 2 + imageHeight + (image && lines.length ? padding : 0) + lines.length * lineHeight
+      pt + pb + imageHeight + (image && lines.length ? padding : 0) + lines.length * lineHeight
     );
     canvas.width = width * 2;
     canvas.height = height * 2;
@@ -15234,17 +15361,26 @@ function SpatialHotspotTooltip({
     }
     ctx.save();
     ctx.clip();
-    let top = padding;
+    let top = pt;
     if (image) {
-      ctx.drawImage(image, padding, top, imageWidth, imageHeight);
+      ctx.drawImage(image, pl, top, imageWidth, imageHeight);
       top += imageHeight + padding;
     }
     ctx.font = font;
     ctx.fillStyle = appearance.color;
-    ctx.textBaseline = "top";
-    lines.forEach(
-      (line, i) => ctx.fillText(line, padding, top + i * lineHeight)
-    );
+    ctx.textBaseline = "alphabetic";
+    lines.forEach((line, i) => {
+      const metrics = ctx.measureText(line || "Mg");
+      const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.8;
+      const descent = metrics.actualBoundingBoxDescent ?? fontSize * 0.2;
+      let x = pl;
+      const y = tooltipBaseline(top + i * lineHeight, lineHeight, ascent, descent);
+      if (!letterSpacing) ctx.fillText(line, x, y);
+      else for (const char of line) {
+        ctx.fillText(char, x, y);
+        x += ctx.measureText(char).width + letterSpacing;
+      }
+    });
     ctx.restore();
     const texture = new import_three23.CanvasTexture(canvas);
     texture.colorSpace = import_three23.SRGBColorSpace;
@@ -19291,7 +19427,7 @@ function BackgroundAudio({
         setInternalPlaying((prev) => !prev);
       },
       setVolume: (vol) => {
-        if (isControlledRef.current) {
+        if (isControlledRef.current || !Number.isFinite(vol)) {
           return;
         }
         const next = clampAudioVolume(vol);
@@ -20629,21 +20765,34 @@ function subscribeWebVRPresentationExit(element, onExit) {
   });
 }
 
+// src/webvr/reticle-geometry.ts
+var import_three41 = require("three");
+function createReticleRing(inner, outer) {
+  const geometry = new import_three41.RingGeometry(inner, outer, 96, 1, Math.PI / 2, -Math.PI * 2);
+  const source = geometry.index;
+  const indices = [];
+  for (let segment = 0; segment < 96; segment++) {
+    if (segment % 4 >= 2) continue;
+    for (let vertex = 0; vertex < 6; vertex++) indices.push(source.getX(segment * 6 + vertex));
+  }
+  geometry.setIndex(indices);
+  return geometry;
+}
+
 // src/webvr/reticle.tsx
 var import_fiber31 = require("@react-three/fiber");
 var import_react65 = require("react");
-var import_three41 = require("three");
+var import_three42 = require("three");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var CENTER_NDC = new import_three41.Vector2(0, 0);
+var CENTER_NDC = new import_three42.Vector2(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
 var MOBILE_VR_RETICLE_SCALE = 3;
 var RETICLE_RENDER_ORDER = 1e5;
 var CROSSHAIR_LENGTH = 0.044;
-var CROSSHAIR_THICKNESS = 8e-3;
+var CROSSHAIR_THICKNESS = 6e-3;
 var RING_INNER_RADIUS = 0.05;
 var RING_OUTER_RADIUS = 0.058;
-var RING_SEGMENTS = 96;
 var RING_INDICES_PER_SEGMENT = 6;
 var GAZE_POINTER_ID = 1000001;
 var DEFAULT_WEBVR_CURSOR_DWELL_MS = 1500;
@@ -20725,8 +20874,17 @@ function WebVRReticle({
   }, []);
   const groupRef = (0, import_react65.useRef)(null);
   const ringMeshRef = (0, import_react65.useRef)(null);
-  const directionRef = (0, import_react65.useRef)(new import_three41.Vector3());
-  const raycasterRef = (0, import_react65.useRef)(new import_three41.Raycaster());
+  const ringBackdropRef = (0, import_react65.useRef)(null);
+  const rings = (0, import_react65.useMemo)(() => ({
+    outline: createReticleRing(RING_INNER_RADIUS - 3e-3, RING_OUTER_RADIUS + 3e-3),
+    track: createReticleRing(RING_INNER_RADIUS, RING_OUTER_RADIUS),
+    progress: createReticleRing(RING_INNER_RADIUS, RING_OUTER_RADIUS)
+  }), []);
+  (0, import_react65.useEffect)(() => () => {
+    Object.values(rings).forEach((geometry) => geometry.dispose());
+  }, [rings]);
+  const directionRef = (0, import_react65.useRef)(new import_three42.Vector3());
+  const raycasterRef = (0, import_react65.useRef)(new import_three42.Raycaster());
   const hoveredRef = (0, import_react65.useRef)(null);
   const dwellRef = (0, import_react65.useRef)(0);
   const clickedRef = (0, import_react65.useRef)(false);
@@ -20751,6 +20909,7 @@ function WebVRReticle({
       }
       dwellRef.current = 0;
       clickedRef.current = false;
+      if (ringBackdropRef.current) ringBackdropRef.current.visible = false;
       if (ringMesh) {
         ringMesh.visible = false;
         ringMesh.geometry.setDrawRange(0, 0);
@@ -20813,8 +20972,9 @@ function WebVRReticle({
       dwellRef.current = 0;
     }
     const progress = spatialOpen ? spatialProgress : target && !clickedRef.current ? resolvedDwellMs > 0 ? Math.min(dwellRef.current / resolvedDwellMs, 1) : 1 : 0;
+    if (ringBackdropRef.current) ringBackdropRef.current.visible = progress > 1e-3;
     if (ringMesh) {
-      const segments = Math.max(0, Math.ceil(progress * RING_SEGMENTS));
+      const segments = Math.max(0, Math.ceil(progress * rings.progress.index.count / RING_INDICES_PER_SEGMENT));
       ringMesh.visible = progress > 1e-3;
       ringMesh.geometry.setDrawRange(0, segments * RING_INDICES_PER_SEGMENT);
     }
@@ -20830,6 +20990,14 @@ function WebVRReticle({
       renderOrder: RETICLE_RENDER_ORDER,
       visible,
       children: [
+        [false, true].map((vertical) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("mesh", { frustumCulled: false, raycast: noopRaycast, renderOrder: RETICLE_RENDER_ORDER, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("boxGeometry", { args: vertical ? [CROSSHAIR_THICKNESS + 6e-3, CROSSHAIR_LENGTH + 6e-3, 1e-3] : [CROSSHAIR_LENGTH + 6e-3, CROSSHAIR_THICKNESS + 6e-3, 1e-3] }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("meshBasicMaterial", { color: "#101419", transparent: true, depthTest: false, depthWrite: false, toneMapped: false })
+        ] }, String(vertical))),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("group", { ref: ringBackdropRef, renderOrder: RETICLE_RENDER_ORDER, visible: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("mesh", { geometry: rings.outline, frustumCulled: false, raycast: noopRaycast, renderOrder: RETICLE_RENDER_ORDER, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("meshBasicMaterial", { color: "#101419", transparent: true, side: import_three42.DoubleSide, depthTest: false, depthWrite: false, toneMapped: false }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("mesh", { geometry: rings.track, frustumCulled: false, raycast: noopRaycast, renderOrder: RETICLE_RENDER_ORDER + 1, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("meshBasicMaterial", { color: "#ffffff", transparent: true, opacity: 0.45, side: import_three42.DoubleSide, depthTest: false, depthWrite: false, toneMapped: false }) })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "mesh",
           {
@@ -20872,40 +21040,26 @@ function WebVRReticle({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "mesh",
           {
             frustumCulled: false,
             raycast: noopRaycast,
             ref: ringMeshRef,
+            geometry: rings.progress,
             renderOrder: RETICLE_RENDER_ORDER + 2,
             visible: false,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                "ringGeometry",
-                {
-                  args: [
-                    RING_INNER_RADIUS,
-                    RING_OUTER_RADIUS,
-                    RING_SEGMENTS,
-                    1,
-                    Math.PI / 2,
-                    Math.PI * -2
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                "meshBasicMaterial",
-                {
-                  color: "#ffffff",
-                  depthTest: false,
-                  depthWrite: false,
-                  side: import_three41.DoubleSide,
-                  toneMapped: false,
-                  transparent: true
-                }
-              )
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              "meshBasicMaterial",
+              {
+                color: "#ffffff",
+                depthTest: false,
+                depthWrite: false,
+                side: import_three42.DoubleSide,
+                toneMapped: false,
+                transparent: true
+              }
+            )
           }
         )
       ]
@@ -20937,7 +21091,7 @@ void main() {
 // src/webvr/stereo.tsx
 var import_fiber32 = require("@react-three/fiber");
 var import_react66 = require("react");
-var import_three42 = require("three");
+var import_three43 = require("three");
 
 // src/webvr/lens-center.ts
 function physicalScreenFromDiagonal(screensizeInches, displayAspect) {
@@ -21028,7 +21182,7 @@ function computeStereoLayout(logicalWidth, logicalHeight, pixelRatio, oversampli
 }
 
 // src/webvr/stereo.tsx
-var TOE_IN = new import_three42.Matrix4();
+var TOE_IN = new import_three43.Matrix4();
 var vertexShader = `
 varying vec2 vUv;
 void main() {
@@ -21052,38 +21206,38 @@ void main() {
 }
 `;
 function createDistortionResources() {
-  const target = new import_three42.WebGLRenderTarget(1, 1, {
+  const target = new import_three43.WebGLRenderTarget(1, 1, {
     depthBuffer: true,
     stencilBuffer: false
   });
-  const geometry = new import_three42.PlaneGeometry(2, 2);
-  const material = new import_three42.ShaderMaterial({
+  const geometry = new import_three43.PlaneGeometry(2, 2);
+  const material = new import_three43.ShaderMaterial({
     depthTest: false,
     depthWrite: false,
     fragmentShader,
     uniforms: {
-      distortion: { value: new import_three42.Vector2() },
-      lensCenter: { value: new import_three42.Vector2() },
+      distortion: { value: new import_three43.Vector2() },
+      lensCenter: { value: new import_three43.Vector2() },
       sourceTexture: { value: target.texture }
     },
     vertexShader
   });
-  const mesh = new import_three42.Mesh(geometry, material);
-  const scene = new import_three42.Scene();
+  const mesh = new import_three43.Mesh(geometry, material);
+  const scene = new import_three43.Scene();
   scene.add(mesh);
-  const maskMaterial = new import_three42.ShaderMaterial({
+  const maskMaterial = new import_three43.ShaderMaterial({
     vertexShader,
     fragmentShader: stereoLensMaskFragmentShader,
     uniforms: material.uniforms,
     depthTest: false,
     depthWrite: false
   });
-  const maskScene = new import_three42.Scene();
-  maskScene.add(new import_three42.Mesh(geometry, maskMaterial));
+  const maskScene = new import_three43.Scene();
+  maskScene.add(new import_three43.Mesh(geometry, maskMaterial));
   return {
     maskScene,
     maskMaterial,
-    camera: new import_three42.OrthographicCamera(-1, 1, 1, -1, 0, 1),
+    camera: new import_three43.OrthographicCamera(-1, 1, 1, -1, 0, 1),
     geometry,
     material,
     mesh,
@@ -21144,15 +21298,15 @@ function WebVRStereoRenderer({
   const runtime = (0, import_react66.useContext)(WebVRRuntimeContext);
   const fallbackStereoRef = (0, import_react66.useRef)(null);
   if (!fallbackStereoRef.current) {
-    fallbackStereoRef.current = new import_three42.StereoCamera();
+    fallbackStereoRef.current = new import_three43.StereoCamera();
   }
   const stereo = runtime?.stereoView.stereo ?? fallbackStereoRef.current;
   const stereoRef = (0, import_react66.useRef)(stereo);
   stereoRef.current = stereo;
   const resources = (0, import_react66.useMemo)(createDistortionResources, []);
-  const sizeRef = (0, import_react66.useRef)(new import_three42.Vector2());
-  const viewportRef = (0, import_react66.useRef)(new import_three42.Vector4());
-  const scissorRef = (0, import_react66.useRef)(new import_three42.Vector4());
+  const sizeRef = (0, import_react66.useRef)(new import_three43.Vector2());
+  const viewportRef = (0, import_react66.useRef)(new import_three43.Vector4());
+  const scissorRef = (0, import_react66.useRef)(new import_three43.Vector4());
   const originalFovRef = (0, import_react66.useRef)(null);
   const stereoActiveRef = (0, import_react66.useRef)(false);
   const profileRef = (0, import_react66.useRef)(profile);
@@ -21173,7 +21327,7 @@ function WebVRStereoRenderer({
   (0, import_react66.useEffect)(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
-      if (!stereoActiveRef.current || !(cameraToRender instanceof import_three42.PerspectiveCamera)) {
+      if (!stereoActiveRef.current || !(cameraToRender instanceof import_three43.PerspectiveCamera)) {
         originalRender(sceneToRender, cameraToRender);
         return;
       }
@@ -21255,7 +21409,7 @@ function WebVRStereoRenderer({
     if (runtime) {
       runtime.stereoView.active = fallback;
     }
-    if (fallback && camera instanceof import_three42.PerspectiveCamera) {
+    if (fallback && camera instanceof import_three43.PerspectiveCamera) {
       syncStereoCameras(
         stereoRef.current,
         camera,
@@ -21267,7 +21421,7 @@ function WebVRStereoRenderer({
       );
       return;
     }
-    if (originalFovRef.current !== null && camera instanceof import_three42.PerspectiveCamera) {
+    if (originalFovRef.current !== null && camera instanceof import_three43.PerspectiveCamera) {
       camera.fov = originalFovRef.current;
       camera.updateProjectionMatrix();
       originalFovRef.current = null;
@@ -23042,7 +23196,7 @@ function usePanoViewer() {
 // src/video/pano-video.tsx
 var import_fiber34 = require("@react-three/fiber");
 var import_react72 = require("react");
-var import_three43 = require("three");
+var import_three44 = require("three");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var EMPTY_TRACKS = [];
 var EMPTY_RATES = DEFAULT_PANO_VIDEO_PLAYBACK_RATES;
@@ -23119,8 +23273,8 @@ function findTextTrack(video, tracks, trackId) {
   return list.length > 0 ? list[0] : null;
 }
 function applyEquirectangularLayout(texture, anisotropy) {
-  texture.colorSpace = import_three43.SRGBColorSpace;
-  texture.wrapS = import_three43.RepeatWrapping;
+  texture.colorSpace = import_three44.SRGBColorSpace;
+  texture.wrapS = import_three44.RepeatWrapping;
   texture.repeat.x = -1;
   texture.offset.x = 1;
   texture.anisotropy = anisotropy;
@@ -23139,7 +23293,7 @@ function usePosterTexture2(poster, onError) {
         active = false;
       };
     }
-    const loader = new import_three43.TextureLoader();
+    const loader = new import_three44.TextureLoader();
     loader.load(
       poster,
       (loadedTexture) => {
@@ -23151,9 +23305,9 @@ function usePosterTexture2(poster, onError) {
           loadedTexture,
           gl.capabilities.getMaxAnisotropy()
         );
-        loadedTexture.wrapT = import_three43.RepeatWrapping;
-        loadedTexture.magFilter = import_three43.LinearFilter;
-        loadedTexture.minFilter = import_three43.LinearMipmapLinearFilter;
+        loadedTexture.wrapT = import_three44.RepeatWrapping;
+        loadedTexture.magFilter = import_three44.LinearFilter;
+        loadedTexture.minFilter = import_three44.LinearMipmapLinearFilter;
         loadedTexture.generateMipmaps = true;
         setTexture(loadedTexture);
       },
@@ -23307,10 +23461,10 @@ function PanoVideo({
     video.muted = true;
     applyInlineVideoPlayback(video, true);
     video.preload = "metadata";
-    const texture = new import_three43.VideoTexture(video);
+    const texture = new import_three44.VideoTexture(video);
     applyEquirectangularLayout(texture, 1);
-    texture.magFilter = import_three43.LinearFilter;
-    texture.minFilter = import_three43.LinearFilter;
+    texture.magFilter = import_three44.LinearFilter;
+    texture.minFilter = import_three44.LinearFilter;
     texture.generateMipmaps = false;
     return { video, texture };
   }, []);
@@ -23371,6 +23525,7 @@ function PanoVideo({
         ended: playbackState === "ended",
         currentTime: video?.currentTime ?? 0,
         duration: video && Number.isFinite(video.duration) ? video.duration : 0,
+        hasAudio: video ? probeMediaHasAudio(video) : void 0,
         volume: video ? clampVolume(video.volume) : clampVolume(volume),
         volumeAdjustable: mediaCapabilitiesRef.current.volumeAdjustable,
         muted: video?.muted ?? muted,
@@ -23572,7 +23727,7 @@ function PanoVideo({
         emitSnapshot();
       },
       setVolume: (nextVolume) => {
-        if (!mediaCapabilitiesRef.current.volumeAdjustable) {
+        if (!Number.isFinite(nextVolume) || !mediaCapabilitiesRef.current.volumeAdjustable) {
           return;
         }
         video.volume = clampVolume(nextVolume);
@@ -23676,7 +23831,7 @@ function PanoVideo({
     const handleVolume = () => {
       emitSnapshot();
     };
-    video.addEventListener("timeupdate", handleTimeUpdate);
+    const unsubscribeAudio = subscribeMediaAudio(video, handleTimeUpdate);
     video.addEventListener("durationchange", handleTimeUpdate);
     video.addEventListener("progress", handleTimeUpdate);
     video.addEventListener("play", handlePlay);
@@ -23686,7 +23841,7 @@ function PanoVideo({
     video.addEventListener("ratechange", handleVolume);
     return () => {
       active = false;
-      video.removeEventListener("timeupdate", handleTimeUpdate);
+      unsubscribeAudio();
       video.removeEventListener("durationchange", handleTimeUpdate);
       video.removeEventListener("progress", handleTimeUpdate);
       video.removeEventListener("play", handlePlay);
@@ -23746,7 +23901,7 @@ function PanoVideo({
     activeTexture ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "mesh",
       {
-        rotation: [0, import_three43.MathUtils.degToRad(90 + yawOffset2), 0],
+        rotation: [0, import_three44.MathUtils.degToRad(90 + yawOffset2), 0],
         visible,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("sphereGeometry", { args: [DEFAULT_PANORAMA_RADIUS, 128, 64] }),
@@ -23754,7 +23909,7 @@ function PanoVideo({
             PanoBasicMaterial,
             {
               map: activeTexture,
-              side: import_three43.BackSide,
+              side: import_three44.BackSide,
               toneMapped: false
             }
           )
@@ -24965,7 +25120,7 @@ function PanoMapOverlay({
 var import_react76 = require("react");
 var import_client2 = require("react-dom/client");
 var import_fiber35 = require("@react-three/fiber");
-var import_three44 = require("three");
+var import_three45 = require("three");
 
 // src/webvr/scene-menu-layout.ts
 var bounded = (value, fallback, min, max) => Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : fallback;
@@ -25175,7 +25330,7 @@ function MenuSurface({
     timer: 0
   });
   const group = (0, import_react76.useRef)(null);
-  const direction = (0, import_react76.useMemo)(() => new import_three44.Vector3(), []);
+  const direction = (0, import_react76.useMemo)(() => new import_three45.Vector3(), []);
   const [reduced, setReduced] = (0, import_react76.useState)(false);
   (0, import_react76.useEffect)(() => {
     const media = matchMedia("(prefers-reduced-motion: reduce)");
@@ -25231,13 +25386,13 @@ function MenuSurface({
       const canvas = document.createElement("canvas");
       canvas.width = w * MENU_TEXTURE_SCALE;
       canvas.height = atlasHeight * MENU_TEXTURE_SCALE;
-      const texture = new import_three44.CanvasTexture(canvas);
-      texture.colorSpace = import_three44.SRGBColorSpace;
-      texture.minFilter = import_three44.LinearMipmapLinearFilter;
-      texture.magFilter = import_three44.LinearFilter;
+      const texture = new import_three45.CanvasTexture(canvas);
+      texture.colorSpace = import_three45.SRGBColorSpace;
+      texture.minFilter = import_three45.LinearMipmapLinearFilter;
+      texture.magFilter = import_three45.LinearFilter;
       texture.generateMipmaps = true;
       texture.anisotropy = Math.min(4, gl.capabilities.getMaxAnisotropy());
-      const material = new import_three44.MeshBasicMaterial({
+      const material = new import_three45.MeshBasicMaterial({
         map: texture,
         transparent: true,
         depthTest: false,
@@ -25308,12 +25463,12 @@ function MenuSurface({
             }
           }
         }
-      const geometry = new import_three44.BufferGeometry();
+      const geometry = new import_three45.BufferGeometry();
       geometry.setAttribute(
         "position",
-        new import_three44.Float32BufferAttribute(positions, 3)
+        new import_three45.Float32BufferAttribute(positions, 3)
       );
-      geometry.setAttribute("uv", new import_three44.Float32BufferAttribute(uvs, 2));
+      geometry.setAttribute("uv", new import_three45.Float32BufferAttribute(uvs, 2));
       geometry.computeVertexNormals();
       result.push({
         canvas,
@@ -25340,7 +25495,7 @@ function MenuSurface({
   );
   const blocker = (0, import_react76.useMemo)(() => {
     if (!open || layout !== "arc") return null;
-    const geometry = new import_three44.PlaneGeometry(1, 1, Math.ceil(degrees / 3), 1);
+    const geometry = new import_three45.PlaneGeometry(1, 1, Math.ceil(degrees / 3), 1);
     const positions = geometry.attributes.position;
     const top = sceneMenuPoint(
       0,
@@ -25893,7 +26048,7 @@ function MenuSurface({
             },
             raycast: function(raycaster, intersections) {
               if (!state.current.closing && state.current.alpha > 0)
-                import_three44.Mesh.prototype.raycast.call(this, raycaster, intersections);
+                import_three45.Mesh.prototype.raycast.call(this, raycaster, intersections);
             }
           },
           index