watch.js

const video = document.getElementById("video");
const status = document.getElementById("status");

const proto = location.protocol === "https:" ? "wss:" : "ws:";
const ws = new WebSocket(`${proto}//${location.host}/__signaling__?role=watcher`);

let pc;

ws.onopen = () => {
  status.textContent = "Waiting for host...";
};

ws.onmessage = async (e) => {
  const msg = JSON.parse(e.data);

  if (msg.type === "offer") {
    pc = new RTCPeerConnection({
      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    });

    pc.ontrack = (ev) => {
      video.srcObject = ev.streams[0];
      status.style.opacity = "0";
    };

    pc.onicecandidate = (ev) => {
      if (ev.candidate) {
        ws.send(JSON.stringify({ type: "ice-candidate", candidate: ev.candidate }));
      }
    };

    pc.onconnectionstatechange = () => {
      if (pc.connectionState === "disconnected" || pc.connectionState === "failed") {
        status.textContent = "Disconnected — reload to reconnect";
        status.style.opacity = "1";
      }
    };

    await pc.setRemoteDescription({ type: "offer", sdp: msg.sdp });
    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);
    ws.send(JSON.stringify({ type: "answer", sdp: answer.sdp }));
  }

  if (msg.type === "ice-candidate") {
    if (pc) await pc.addIceCandidate(msg.candidate);
  }
};

ws.onclose = () => {
  status.textContent = "Connection lost — reload to reconnect";
  status.style.opacity = "1";
};

// Fullscreen on click
document.addEventListener("click", () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});