@vizor-vr/player 0.2.0

package/dist/collab-BXPomrS0.js

@@ -0,0 +1,978 @@
+import { C as CanvasTexture, L as LinearFilter, S as SpriteMaterial, a as Sprite } from "./three-Bci7aSeI.js";
+import { C as COLLAB_GAZE_LERP_FACTOR, l as latLonToSpherical, a as COLLAB_GAZE_INTERVAL, b as COLLAB_GAZE_THRESHOLD } from "./annotations-C0ugfCn4.js";
+const ICON_PLAY = `<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>`;
+const ICON_PAUSE = `<svg viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`;
+const ICON_VOLUME_HIGH = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor" stroke="none"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>`;
+const ICON_VOLUME_LOW = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor" stroke="none"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>`;
+const ICON_VOLUME_MUTED = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor" stroke="none"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>`;
+const ICON_FULLSCREEN = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`;
+const ICON_FULLSCREEN_EXIT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`;
+const ICON_VR = `<svg viewBox="0 0 24 24"><path d="M20.74 6H3.21C2.55 6 2 6.57 2 7.28v10.44c0 .7.55 1.28 1.23 1.28h4.79c.52 0 .96-.3 1.19-.77l1.58-3.15c.28-.58.84-.94 1.43-.94h1.56c.59 0 1.15.36 1.43.94l1.58 3.15c.23.47.67.77 1.19.77h4.79c.68 0 1.23-.57 1.23-1.28V7.28C22 6.57 21.43 6 20.74 6zM7.5 14.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm9 0c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>`;
+const ICON_COMPASS = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" fill="currentColor"/></svg>`;
+const ICON_SETTINGS = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`;
+const ICON_PLAYLIST_NEXT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4" fill="currentColor"/><line x1="19" y1="5" x2="19" y2="19"/></svg>`;
+const ICON_PLAYLIST_PREV = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="19 20 9 12 19 4 19 20" fill="currentColor"/><line x1="5" y1="19" x2="5" y2="5"/></svg>`;
+const ICON_LIVE_DOT = `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="currentColor"/></svg>`;
+const ICON_CC = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"/><path d="M7 10.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5"/><path d="M7 13.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5"/><path d="M14 10.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5"/><path d="M14 13.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5"/></svg>`;
+const ICON_CHAT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`;
+const ICON_MIC = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>`;
+const ICON_MIC_MUTED = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .64-.09 1.26-.26 1.85"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>`;
+const DRIFT_THRESHOLD = 1;
+const RECONNECT_DELAY = 3e3;
+const PLAYBACK_THROTTLE = 250;
+class CollaborativeClient {
+  ws = null;
+  options;
+  unsubscribes = [];
+  reconnectTimer = null;
+  disposed = false;
+  lastPlaybackSend = 0;
+  connected = false;
+  constructor(options) {
+    this.options = options;
+  }
+  /** Connect to the collaborative server */
+  connect() {
+    if (this.disposed) return;
+    try {
+      this.ws = new WebSocket(this.options.serverUrl);
+    } catch {
+      this.scheduleReconnect();
+      return;
+    }
+    this.ws.onopen = () => {
+      this.connected = true;
+      this.send({
+        type: "join",
+        roomCode: this.options.roomCode,
+        userId: this.options.userId,
+        displayName: this.options.displayName,
+        password: this.options.password
+      });
+      if (this.options.role === "host") {
+        this.subscribeHostState();
+      }
+    };
+    this.ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        this.handleMessage(msg);
+      } catch {
+      }
+    };
+    this.ws.onclose = () => {
+      this.connected = false;
+      this.cleanupSubscriptions();
+      if (!this.disposed) {
+        this.scheduleReconnect();
+      }
+    };
+    this.ws.onerror = () => {
+    };
+  }
+  /** Whether the client is currently connected */
+  isConnected() {
+    return this.connected;
+  }
+  /** Gracefully disconnect and clean up */
+  dispose() {
+    this.disposed = true;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.cleanupSubscriptions();
+    if (this.ws) {
+      if (this.ws.readyState === WebSocket.OPEN) {
+        this.send({ type: "leave" });
+      }
+      this.ws.close();
+      this.ws = null;
+    }
+    this.connected = false;
+  }
+  // --- Private ---
+  handleMessage(msg) {
+    switch (msg.type) {
+      case "room_state":
+        this.handleRoomState(msg.users, msg.playing, msg.currentTime);
+        break;
+      case "sync":
+        this.handleSync(msg.playing, msg.currentTime);
+        break;
+      case "user_joined":
+        this.options.onUserJoined?.(msg.user);
+        this.options.onParticipantsChange?.([]);
+        break;
+      case "user_left":
+        this.options.onUserLeft?.(msg.userId);
+        this.options.onParticipantsChange?.([]);
+        break;
+      case "error":
+        console.warn(`[Vizor Collab] Server error: ${msg.code} — ${msg.message}`);
+        break;
+      case "peer_gaze":
+        this.options.onPeerGaze?.(msg.userId, msg.lat, msg.lon);
+        break;
+      case "chat_message":
+        this.options.onChatMessage?.(msg.userId, msg.displayName, msg.text, msg.timestamp);
+        break;
+      case "voice_signal":
+        this.options.onVoiceSignal?.(msg.fromUserId, msg.sdp, msg.candidate);
+        break;
+    }
+  }
+  handleRoomState(users, playing, currentTime) {
+    this.options.onParticipantsChange?.(users);
+    if (this.options.role === "viewer") {
+      this.applySync(playing, currentTime);
+    }
+  }
+  handleSync(playing, currentTime) {
+    if (this.options.role !== "viewer") return;
+    this.applySync(playing, currentTime);
+  }
+  applySync(playing, currentTime) {
+    const { state, mediaElement } = this.options;
+    const localTime = mediaElement.currentTime;
+    const drift = Math.abs(currentTime - localTime);
+    if (drift > DRIFT_THRESHOLD) {
+      mediaElement.seek(currentTime);
+    }
+    const localPlaying = state.get("playing");
+    if (playing && !localPlaying) {
+      Promise.resolve(mediaElement.play()).catch(() => {
+      });
+    } else if (!playing && localPlaying) {
+      mediaElement.pause();
+    }
+  }
+  /** Host: subscribe to local state changes and broadcast them */
+  subscribeHostState() {
+    const { state } = this.options;
+    const unsubPlaying = state.subscribe("playing", (playing) => {
+      this.sendPlaybackState(playing, state.get("currentTime"));
+    });
+    this.unsubscribes.push(unsubPlaying);
+    const unsubSeeking = state.subscribe("seeking", (seeking, prevSeeking) => {
+      if (!seeking && prevSeeking) {
+        this.send({
+          type: "seek",
+          currentTime: state.get("currentTime")
+        });
+      }
+    });
+    this.unsubscribes.push(unsubSeeking);
+  }
+  /** Throttled playback state sender */
+  sendPlaybackState(playing, currentTime) {
+    const now = Date.now();
+    if (now - this.lastPlaybackSend < PLAYBACK_THROTTLE) return;
+    this.lastPlaybackSend = now;
+    this.send({
+      type: "playback_state",
+      playing,
+      currentTime,
+      timestamp: now
+    });
+  }
+  /** Send a chat message */
+  sendChat(text) {
+    this.send({ type: "chat", text });
+  }
+  /** Send a voice signal (SDP offer/answer or ICE candidate) to a specific peer */
+  sendVoiceSignal(targetUserId, sdp, candidate) {
+    this.send({ type: "voice_signal", targetUserId, sdp, candidate });
+  }
+  /** Send a message to the server */
+  send(msg) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(msg));
+    }
+  }
+  scheduleReconnect() {
+    if (this.disposed || this.reconnectTimer) return;
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, RECONNECT_DELAY);
+  }
+  /** Register a cleanup function to run on dispose */
+  addCleanup(fn) {
+    this.unsubscribes.push(fn);
+  }
+  cleanupSubscriptions() {
+    for (const unsub of this.unsubscribes) unsub();
+    this.unsubscribes = [];
+  }
+}
+const PEER_COLORS$1 = [
+  "#FF6B6B",
+  "#4ECDC4",
+  "#45B7D1",
+  "#FFA07A",
+  "#98D8C8",
+  "#F7DC6F",
+  "#BB8FCE",
+  "#85C1E9",
+  "#F1948A",
+  "#82E0AA"
+];
+const CURSOR_DISTANCE = 195;
+const CURSOR_SCALE = 6;
+const LABEL_SCALE_X = 14;
+const LABEL_SCALE_Y = 5;
+const CURSOR_CANVAS_SIZE = 64;
+const LABEL_CANVAS_WIDTH = 256;
+const LABEL_CANVAS_HEIGHT = 64;
+class GazeCursorManager {
+  scene;
+  cursors = /* @__PURE__ */ new Map();
+  colorIndex = 0;
+  constructor(scene) {
+    this.scene = scene;
+  }
+  /** Add a cursor for a new peer */
+  addPeer(userId, displayName) {
+    if (this.cursors.has(userId)) return;
+    const color = PEER_COLORS$1[this.colorIndex % PEER_COLORS$1.length];
+    this.colorIndex++;
+    const sprite = this.createCursorSprite(color);
+    const nameLabel = this.createLabelSprite(displayName, color);
+    nameLabel.visible = true;
+    this.scene.add(sprite);
+    this.scene.add(nameLabel);
+    this.cursors.set(userId, {
+      sprite,
+      nameLabel,
+      targetLat: 0,
+      targetLon: 0,
+      currentLat: 0,
+      currentLon: 0,
+      displayName,
+      color
+    });
+  }
+  /** Remove a peer's cursor */
+  removePeer(userId) {
+    const cursor = this.cursors.get(userId);
+    if (!cursor) return;
+    this.scene.remove(cursor.sprite);
+    this.scene.remove(cursor.nameLabel);
+    cursor.sprite.material.map?.dispose();
+    cursor.sprite.material.dispose();
+    cursor.nameLabel.material.map?.dispose();
+    cursor.nameLabel.material.dispose();
+    this.cursors.delete(userId);
+  }
+  /** Update the target gaze position for a peer */
+  updateGaze(userId, lat, lon) {
+    const cursor = this.cursors.get(userId);
+    if (!cursor) return;
+    cursor.targetLat = lat;
+    cursor.targetLon = lon;
+  }
+  /** Called each animation frame. Lerps all cursors toward their target positions. */
+  update() {
+    for (const [, cursor] of this.cursors) {
+      cursor.currentLat += (cursor.targetLat - cursor.currentLat) * COLLAB_GAZE_LERP_FACTOR;
+      cursor.currentLon += (cursor.targetLon - cursor.currentLon) * COLLAB_GAZE_LERP_FACTOR;
+      const { phi, theta } = latLonToSpherical(cursor.currentLat, cursor.currentLon);
+      const x = CURSOR_DISTANCE * Math.sin(phi) * Math.cos(theta);
+      const y = CURSOR_DISTANCE * Math.cos(phi);
+      const z = CURSOR_DISTANCE * Math.sin(phi) * Math.sin(theta);
+      cursor.sprite.position.set(x, y, z);
+      cursor.nameLabel.position.set(x, y + CURSOR_SCALE * 0.8, z);
+    }
+  }
+  /** Get the number of tracked peers */
+  getPeerCount() {
+    return this.cursors.size;
+  }
+  /** Clean up all cursors */
+  dispose() {
+    for (const [userId] of this.cursors) {
+      this.removePeer(userId);
+    }
+  }
+  /** Create a colored circle sprite for the cursor dot */
+  createCursorSprite(color) {
+    const canvas = document.createElement("canvas");
+    canvas.width = CURSOR_CANVAS_SIZE;
+    canvas.height = CURSOR_CANVAS_SIZE;
+    const ctx = canvas.getContext("2d");
+    const cx = CURSOR_CANVAS_SIZE / 2;
+    const cy = CURSOR_CANVAS_SIZE / 2;
+    const radius = CURSOR_CANVAS_SIZE / 2 - 4;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 3;
+    ctx.stroke();
+    const texture = new CanvasTexture(canvas);
+    texture.minFilter = LinearFilter;
+    texture.magFilter = LinearFilter;
+    const material = new SpriteMaterial({
+      map: texture,
+      sizeAttenuation: true,
+      depthTest: false,
+      transparent: true
+    });
+    const sprite = new Sprite(material);
+    sprite.scale.set(CURSOR_SCALE, CURSOR_SCALE, 1);
+    return sprite;
+  }
+  /** Create a text label sprite showing the peer's display name */
+  createLabelSprite(name, color) {
+    const canvas = document.createElement("canvas");
+    canvas.width = LABEL_CANVAS_WIDTH;
+    canvas.height = LABEL_CANVAS_HEIGHT;
+    const ctx = canvas.getContext("2d");
+    const padding = 10;
+    ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+    ctx.beginPath();
+    ctx.roundRect(padding, padding, LABEL_CANVAS_WIDTH - padding * 2, LABEL_CANVAS_HEIGHT - padding * 2, 8);
+    ctx.fill();
+    ctx.fillStyle = color;
+    ctx.font = "bold 24px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(name, LABEL_CANVAS_WIDTH / 2, LABEL_CANVAS_HEIGHT / 2);
+    const texture = new CanvasTexture(canvas);
+    texture.minFilter = LinearFilter;
+    texture.magFilter = LinearFilter;
+    const material = new SpriteMaterial({
+      map: texture,
+      sizeAttenuation: true,
+      depthTest: false,
+      transparent: true
+    });
+    const sprite = new Sprite(material);
+    sprite.scale.set(LABEL_SCALE_X, LABEL_SCALE_Y, 1);
+    return sprite;
+  }
+}
+class GazeSender {
+  timer = null;
+  lastSentLat = NaN;
+  lastSentLon = NaN;
+  orientationProvider;
+  sendFn;
+  constructor(orientationProvider, sendFn) {
+    this.orientationProvider = orientationProvider;
+    this.sendFn = sendFn;
+  }
+  /** Start sampling and sending gaze messages */
+  start() {
+    if (this.timer) return;
+    this.timer = setInterval(() => this.sample(), COLLAB_GAZE_INTERVAL);
+  }
+  /** Stop sampling */
+  stop() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+  /** Clean up */
+  dispose() {
+    this.stop();
+  }
+  sample() {
+    const { lat, lon } = this.orientationProvider.getOrientation();
+    const dLat = Math.abs(lat - this.lastSentLat);
+    const dLon = Math.abs(lon - this.lastSentLon);
+    if (dLat > COLLAB_GAZE_THRESHOLD || dLon > COLLAB_GAZE_THRESHOLD || isNaN(this.lastSentLat)) {
+      this.lastSentLat = lat;
+      this.lastSentLon = lon;
+      this.sendFn({ type: "gaze", lat, lon });
+    }
+  }
+}
+const PEER_COLORS = [
+  "#FF6B6B",
+  "#4ECDC4",
+  "#45B7D1",
+  "#FFA07A",
+  "#98D8C8",
+  "#F7DC6F",
+  "#BB8FCE",
+  "#85C1E9",
+  "#F1948A",
+  "#82E0AA"
+];
+const CHAT_CSS = `
+.vz-chat-panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+  max-width: 70%;
+  background: rgba(15, 15, 25, 0.95);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  z-index: 25;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+.vz-chat-panel.open {
+  transform: translateX(0);
+}
+.vz-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+.vz-chat-title {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+}
+.vz-chat-close {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.vz-chat-close:hover {
+  color: #fff;
+}
+.vz-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 12px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.2) transparent;
+}
+.vz-chat-messages::-webkit-scrollbar {
+  width: 4px;
+}
+.vz-chat-messages::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.2);
+  border-radius: 2px;
+}
+.vz-chat-message {
+  margin: 4px 0;
+  padding: 4px 0;
+}
+.vz-chat-msg-header {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+.vz-chat-msg-name {
+  font-weight: 600;
+  font-size: 12px;
+}
+.vz-chat-msg-time {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+}
+.vz-chat-msg-text {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.9);
+  word-break: break-word;
+  margin-top: 2px;
+  line-height: 1.4;
+}
+.vz-chat-input-row {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+.vz-chat-input {
+  flex: 1;
+  height: 32px;
+  border-radius: 6px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  padding: 0 10px;
+  font-size: 13px;
+  outline: none;
+}
+.vz-chat-input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+.vz-chat-input:focus {
+  background: rgba(255, 255, 255, 0.15);
+}
+.vz-chat-send {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: none;
+  background: var(--vz-primary, #f43f5e);
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.vz-chat-send:hover {
+  opacity: 0.85;
+}
+.vz-chat-empty {
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 13px;
+  text-align: center;
+  padding: 24px 16px;
+}
+`;
+class ChatPanel {
+  panel;
+  messagesEl;
+  inputEl;
+  emptyEl;
+  styleEl;
+  isOpen = false;
+  messages = [];
+  colorMap = /* @__PURE__ */ new Map();
+  colorIndex = 0;
+  onSend;
+  shadowRoot;
+  constructor(shadowRoot, onSend) {
+    this.shadowRoot = shadowRoot;
+    this.onSend = onSend;
+    this.styleEl = document.createElement("style");
+    this.styleEl.textContent = CHAT_CSS;
+    shadowRoot.appendChild(this.styleEl);
+    this.panel = document.createElement("div");
+    this.panel.className = "vz-chat-panel";
+    const header = document.createElement("div");
+    header.className = "vz-chat-header";
+    const title = document.createElement("span");
+    title.className = "vz-chat-title";
+    title.textContent = "Chat";
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "vz-chat-close";
+    closeBtn.textContent = "✕";
+    closeBtn.addEventListener("click", () => this.close());
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    this.panel.appendChild(header);
+    this.messagesEl = document.createElement("div");
+    this.messagesEl.className = "vz-chat-messages";
+    this.emptyEl = document.createElement("div");
+    this.emptyEl.className = "vz-chat-empty";
+    this.emptyEl.textContent = "No messages yet";
+    this.messagesEl.appendChild(this.emptyEl);
+    this.panel.appendChild(this.messagesEl);
+    const inputRow = document.createElement("div");
+    inputRow.className = "vz-chat-input-row";
+    this.inputEl = document.createElement("input");
+    this.inputEl.className = "vz-chat-input";
+    this.inputEl.type = "text";
+    this.inputEl.placeholder = "Type a message...";
+    this.inputEl.maxLength = 500;
+    this.inputEl.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        this.handleSend();
+      }
+    });
+    const sendBtn = document.createElement("button");
+    sendBtn.className = "vz-chat-send";
+    sendBtn.innerHTML = "➤";
+    sendBtn.addEventListener("click", () => this.handleSend());
+    inputRow.appendChild(this.inputEl);
+    inputRow.appendChild(sendBtn);
+    this.panel.appendChild(inputRow);
+    shadowRoot.appendChild(this.panel);
+  }
+  /** Add a chat message to the panel */
+  addMessage(msg) {
+    this.messages.push(msg);
+    if (this.emptyEl.parentNode) {
+      this.emptyEl.remove();
+    }
+    this.renderMessage(msg);
+    this.scrollToBottom();
+  }
+  /** Toggle panel open/closed */
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  /** Open the panel */
+  open() {
+    this.isOpen = true;
+    this.panel.classList.add("open");
+    this.inputEl.focus();
+  }
+  /** Close the panel */
+  close() {
+    this.isOpen = false;
+    this.panel.classList.remove("open");
+  }
+  /** Whether the panel is currently visible */
+  isVisible() {
+    return this.isOpen;
+  }
+  /** Get message count */
+  getMessageCount() {
+    return this.messages.length;
+  }
+  /** Clean up */
+  dispose() {
+    this.panel.remove();
+    this.styleEl.remove();
+  }
+  handleSend() {
+    const text = this.inputEl.value.trim();
+    if (!text) return;
+    this.inputEl.value = "";
+    this.onSend(text);
+  }
+  renderMessage(msg) {
+    const el = document.createElement("div");
+    el.className = "vz-chat-message";
+    const headerEl = document.createElement("div");
+    headerEl.className = "vz-chat-msg-header";
+    const nameEl = document.createElement("span");
+    nameEl.className = "vz-chat-msg-name";
+    nameEl.style.color = this.getColorForUser(msg.userId);
+    nameEl.textContent = msg.isLocal ? "You" : msg.displayName;
+    const timeEl = document.createElement("span");
+    timeEl.className = "vz-chat-msg-time";
+    timeEl.textContent = this.formatTime(msg.timestamp);
+    headerEl.appendChild(nameEl);
+    headerEl.appendChild(timeEl);
+    const textEl = document.createElement("div");
+    textEl.className = "vz-chat-msg-text";
+    textEl.textContent = msg.text;
+    el.appendChild(headerEl);
+    el.appendChild(textEl);
+    this.messagesEl.appendChild(el);
+  }
+  scrollToBottom() {
+    this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
+  }
+  getColorForUser(userId) {
+    if (!this.colorMap.has(userId)) {
+      this.colorMap.set(userId, PEER_COLORS[this.colorIndex % PEER_COLORS.length]);
+      this.colorIndex++;
+    }
+    return this.colorMap.get(userId);
+  }
+  formatTime(ts) {
+    const d = new Date(ts);
+    const h = d.getHours().toString().padStart(2, "0");
+    const m = d.getMinutes().toString().padStart(2, "0");
+    return `${h}:${m}`;
+  }
+}
+class ChatButton {
+  container;
+  badge;
+  unreadCount = 0;
+  chatPanel;
+  constructor(chatPanel) {
+    this.chatPanel = chatPanel;
+    this.container = document.createElement("div");
+    this.container.style.position = "relative";
+    this.container.style.display = "inline-flex";
+    const btn = document.createElement("button");
+    btn.className = "vz-btn vz-chat-btn";
+    btn.innerHTML = ICON_CHAT;
+    btn.title = "Chat (T)";
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.chatPanel.toggle();
+      if (this.chatPanel.isVisible()) {
+        this.resetUnread();
+      }
+    });
+    this.badge = document.createElement("span");
+    this.badge.className = "vz-chat-badge";
+    this.badge.style.display = "none";
+    this.container.appendChild(btn);
+    this.container.appendChild(this.badge);
+  }
+  /** Increment unread count and show badge */
+  incrementUnread() {
+    this.unreadCount++;
+    this.updateBadge();
+  }
+  /** Reset unread count and hide badge */
+  resetUnread() {
+    this.unreadCount = 0;
+    this.updateBadge();
+  }
+  /** Get the DOM element to insert into controls */
+  getElement() {
+    return this.container;
+  }
+  /** Clean up */
+  dispose() {
+    this.container.remove();
+  }
+  updateBadge() {
+    if (this.unreadCount > 0) {
+      this.badge.textContent = this.unreadCount > 99 ? "99+" : String(this.unreadCount);
+      this.badge.style.display = "flex";
+    } else {
+      this.badge.textContent = "";
+      this.badge.style.display = "none";
+    }
+  }
+}
+const STUN_SERVERS = [
+  { urls: "stun:stun.l.google.com:19302" },
+  { urls: "stun:stun1.l.google.com:19302" }
+];
+class VoiceManager {
+  localStream = null;
+  peers = /* @__PURE__ */ new Map();
+  state = "inactive";
+  sendSignal;
+  constructor(sendSignal) {
+    this.sendSignal = sendSignal;
+  }
+  /** Get current voice state */
+  getState() {
+    return this.state;
+  }
+  /** Start voice — request microphone and begin connections */
+  async start() {
+    if (this.state !== "inactive") return;
+    try {
+      this.localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      this.state = "active";
+    } catch (err) {
+      console.warn("[Vizor Voice] getUserMedia failed:", err);
+      throw err;
+    }
+  }
+  /** Toggle mute on/off */
+  toggleMute() {
+    if (!this.localStream) return;
+    if (this.state === "active") {
+      this.localStream.getAudioTracks().forEach((t) => t.enabled = false);
+      this.state = "muted";
+    } else if (this.state === "muted") {
+      this.localStream.getAudioTracks().forEach((t) => t.enabled = true);
+      this.state = "active";
+    }
+  }
+  /** Whether voice is currently active (active or muted) */
+  isActive() {
+    return this.state !== "inactive";
+  }
+  /** Whether mic is currently muted */
+  isMuted() {
+    return this.state === "muted";
+  }
+  /**
+   * Initiate a WebRTC connection to a peer (caller side).
+   * Creates an offer and sends it via signaling.
+   */
+  async connectToPeer(peerId) {
+    if (!this.localStream || this.peers.has(peerId)) return;
+    const pc = this.createPeerConnection(peerId);
+    this.localStream.getTracks().forEach((track) => {
+      pc.addTrack(track, this.localStream);
+    });
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    this.sendSignal(peerId, JSON.stringify(offer));
+  }
+  /**
+   * Handle an incoming voice signal (SDP offer/answer or ICE candidate).
+   */
+  async handleSignal(fromUserId, sdp, candidate) {
+    if (!this.localStream) return;
+    if (sdp) {
+      const desc = JSON.parse(sdp);
+      if (desc.type === "offer") {
+        const pc = this.createPeerConnection(fromUserId);
+        this.localStream.getTracks().forEach((track) => {
+          pc.addTrack(track, this.localStream);
+        });
+        await pc.setRemoteDescription(new RTCSessionDescription(desc));
+        const answer = await pc.createAnswer();
+        await pc.setLocalDescription(answer);
+        this.sendSignal(fromUserId, JSON.stringify(answer));
+      } else if (desc.type === "answer") {
+        const peerConn = this.peers.get(fromUserId);
+        if (peerConn) {
+          await peerConn.pc.setRemoteDescription(new RTCSessionDescription(desc));
+        }
+      }
+    } else if (candidate) {
+      const peerConn = this.peers.get(fromUserId);
+      if (peerConn) {
+        const iceCandidate = new RTCIceCandidate(JSON.parse(candidate));
+        await peerConn.pc.addIceCandidate(iceCandidate);
+      }
+    }
+  }
+  /** Remove a peer connection (when peer leaves) */
+  removePeer(peerId) {
+    const peerConn = this.peers.get(peerId);
+    if (!peerConn) return;
+    peerConn.pc.close();
+    peerConn.audioEl.srcObject = null;
+    peerConn.audioEl.remove();
+    this.peers.delete(peerId);
+  }
+  /** Stop voice — release microphone and close all connections */
+  stop() {
+    this.peers.forEach((peerConn, peerId) => {
+      peerConn.pc.close();
+      peerConn.audioEl.srcObject = null;
+      peerConn.audioEl.remove();
+    });
+    this.peers.clear();
+    if (this.localStream) {
+      this.localStream.getTracks().forEach((t) => t.stop());
+      this.localStream = null;
+    }
+    this.state = "inactive";
+  }
+  /** Get the number of active peer connections */
+  getPeerCount() {
+    return this.peers.size;
+  }
+  /** Clean up everything */
+  dispose() {
+    this.stop();
+  }
+  // --- Private ---
+  createPeerConnection(peerId) {
+    if (this.peers.has(peerId)) {
+      this.removePeer(peerId);
+    }
+    const pc = new RTCPeerConnection({ iceServers: STUN_SERVERS });
+    const audioEl = document.createElement("audio");
+    audioEl.autoplay = true;
+    pc.ontrack = (event) => {
+      audioEl.srcObject = event.streams[0] ?? new MediaStream([event.track]);
+    };
+    pc.onicecandidate = (event) => {
+      if (event.candidate) {
+        this.sendSignal(peerId, void 0, JSON.stringify(event.candidate));
+      }
+    };
+    pc.onconnectionstatechange = () => {
+      if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
+        this.removePeer(peerId);
+      }
+    };
+    this.peers.set(peerId, { pc, audioEl });
+    return pc;
+  }
+}
+class VoiceButton {
+  container;
+  btn;
+  voiceManager;
+  onVoiceStarted;
+  constructor(voiceManager, onVoiceStarted) {
+    this.voiceManager = voiceManager;
+    this.onVoiceStarted = onVoiceStarted;
+    this.container = document.createElement("div");
+    this.container.style.position = "relative";
+    this.container.style.display = "inline-flex";
+    this.btn = document.createElement("button");
+    this.btn.className = "vz-btn vz-voice-btn";
+    this.btn.innerHTML = ICON_MIC;
+    this.btn.title = "Voice Chat (V)";
+    this.btn.style.opacity = "0.5";
+    this.btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.handleClick();
+    });
+    this.container.appendChild(this.btn);
+  }
+  /** Get the DOM element to insert into controls */
+  getElement() {
+    return this.container;
+  }
+  /** Update button icon based on current voice state */
+  updateState() {
+    const state = this.voiceManager.getState();
+    switch (state) {
+      case "inactive":
+        this.btn.innerHTML = ICON_MIC;
+        this.btn.style.opacity = "0.5";
+        this.btn.title = "Start Voice Chat (V)";
+        break;
+      case "active":
+        this.btn.innerHTML = ICON_MIC;
+        this.btn.style.opacity = "1";
+        this.btn.title = "Mute (V)";
+        break;
+      case "muted":
+        this.btn.innerHTML = ICON_MIC_MUTED;
+        this.btn.style.opacity = "1";
+        this.btn.title = "Unmute (V)";
+        break;
+    }
+  }
+  /** Handle toggle via keyboard shortcut */
+  toggle() {
+    this.handleClick();
+  }
+  /** Clean up */
+  dispose() {
+    this.container.remove();
+  }
+  // --- Private ---
+  handleClick() {
+    if (!this.voiceManager.isActive()) {
+      this.voiceManager.start().then(() => {
+        this.updateState();
+        this.onVoiceStarted?.();
+      }).catch((err) => {
+        console.warn("[Vizor Voice] Failed to start:", err);
+      });
+    } else {
+      this.voiceManager.toggleMute();
+      this.updateState();
+    }
+  }
+}
+export {
+  ChatButton as C,
+  GazeCursorManager as G,
+  ICON_PLAY as I,
+  VoiceButton as V,
+  ChatPanel as a,
+  CollaborativeClient as b,
+  GazeSender as c,
+  VoiceManager as d,
+  ICON_PAUSE as e,
+  ICON_VOLUME_HIGH as f,
+  ICON_VOLUME_LOW as g,
+  ICON_VOLUME_MUTED as h,
+  ICON_FULLSCREEN as i,
+  ICON_FULLSCREEN_EXIT as j,
+  ICON_VR as k,
+  ICON_COMPASS as l,
+  ICON_SETTINGS as m,
+  ICON_LIVE_DOT as n,
+  ICON_CC as o,
+  ICON_PLAYLIST_PREV as p,
+  ICON_PLAYLIST_NEXT as q
+};
+//# sourceMappingURL=collab-BXPomrS0.js.map