<!DOCTYPE html>
<html>
<head>
  <title>WebRTC Watcher</title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
</head>
<body>
  <h1>Watching: {{ username }}</h1>

  <!-- Make sure we have muted, controls, playsinline, and autoplay -->
  <video
    id="remoteVideo"
    playsinline
    autoplay
    controls
    muted
    style="transform: scaleX(-1);">
  </video>

  <script>
    const username = "{{ username }}";
    const socket = io({ transports: ["websocket"] });

    let peerConnection = null;
    const remoteVideo = document.getElementById("remoteVideo");

    socket.on("connect", () => {
      console.log("[Watcher] Connected:", socket.id);
      // Join the same room
      socket.emit("join_room", { username });
      // Let the streamer know we want to watch
      socket.emit("new_watcher", { watcherSid: socket.id, username });
    });

    // 1) Receive Offer from the streamer
    socket.on("offer", async (data) => {
      console.log("[Watcher] Received offer from:", data.streamerSid);

      if (!peerConnection) {
        peerConnection = new RTCPeerConnection({
          iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
        });

        // 2) Handle local ICE candidates -> send to streamer
        peerConnection.onicecandidate = (event) => {
          if (event.candidate) {
            socket.emit("ice-candidate", {
              candidate: event.candidate.candidate,
              sdpMid: event.candidate.sdpMid,
              sdpMLineIndex: event.candidate.sdpMLineIndex,
              targetSid: data.streamerSid
            });
          }
        };

        // 3) When remote tracks arrive
        peerConnection.ontrack = (event) => {
          console.log("[Watcher] ontrack =>", event.streams[0]);

          // Attach the incoming stream to <video>
          remoteVideo.srcObject = event.streams[0];
          console.log("[Watcher] remoteVideo.srcObject set:", remoteVideo.srcObject);

          // Explicitly call .play() to handle auto-play policy
          remoteVideo.play().then(() => {
            console.log("[Watcher] remoteVideo is playing");
          }).catch(err => {
            console.error("[Watcher] remoteVideo play() error:", err);
          });
        };
      }

      try {
        // 4) Set remote description
        const desc = new RTCSessionDescription({
          type: data.offerType,
          sdp: data.offer
        });
        await peerConnection.setRemoteDescription(desc);
        console.log("[Watcher] setRemoteDescription done");

        // 5) Create and send answer
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        console.log("[Watcher] created answer, setLocalDescription done");

        socket.emit("answer", {
          answer: answer.sdp,
          answerType: answer.type,
          streamerSid: data.streamerSid
        });
        console.log("[Watcher] answer emitted");
      } catch (err) {
        console.error("[Watcher] Error handling offer/answer:", err);
      }
    });

    // 6) ICE candidates from streamer -> add to our PeerConnection
    socket.on("ice-candidate", (data) => {
      const { candidate, sdpMid, sdpMLineIndex, senderSid } = data;
      console.log("[Watcher] ICE candidate from", senderSid);

      if (peerConnection && candidate) {
        peerConnection.addIceCandidate(new RTCIceCandidate({
          candidate,
          sdpMid,
          sdpMLineIndex
        })).catch(err => console.error("[Watcher] addIceCandidate error:", err));
      }
    });
  </script>
</body>
</html>

