{% extends "pages/base.html" %}
{% load i18n %}

{% block title %}{{ stream.name }} | {% trans "Video" %}{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
          <p class="text-muted mb-1">{% trans "Live stream" %}</p>
          <h1 class="h3 mb-0">{{ stream.name }}</h1>
        </div>
        {% if request.user.is_staff %}
        <div class="btn-group" role="group">
          <a class="btn btn-outline-primary" href="{{ stream.get_admin_url }}">
            {% trans "Configure" %}
          </a>
          <a class="btn btn-outline-secondary" href="{% url 'video:mjpeg-debug' stream.slug %}">
            {% trans "Debug stream" %}
          </a>
        </div>
        {% endif %}
      </div>
      <div
        class="ratio ratio-16x9 bg-dark rounded shadow-sm d-flex align-items-center justify-content-center overflow-hidden"
        data-stream-ws-path="{{ stream_ws_path }}"
        data-stream-webrtc-ws-path="{{ stream_webrtc_ws_path }}"
        data-stream-url="{{ stream_url }}"
      >
        <video
          class="w-100 h-100 object-fit-cover"
          playsinline
          autoplay
          muted
          controls
          hidden
        ></video>
        <img
          class="img-fluid w-100 h-100 object-fit-cover"
          alt="{% trans 'Live video stream' %}"
          hidden
        />
      </div>
      <p class="mt-3 text-muted">
        {% trans "This stream uses WebRTC with a Redis-backed WebSocket transport. MJPEG playback is legacy." %}
      </p>
    </div>
  </div>
</div>
{{ webrtc_ice_servers|json_script:"webrtc-ice-servers" }}
<script>
  (() => {
    const container = document.querySelector("[data-stream-ws-path]");
    if (!container) {
      return;
    }
    const wsPath = container.dataset.streamWsPath;
    const webrtcPath = container.dataset.streamWebrtcWsPath;
    const streamUrl = container.dataset.streamUrl;
    const video = container.querySelector("video");
    const image = container.querySelector("img");
    const iceServers = (() => {
      const node = document.getElementById("webrtc-ice-servers");
      if (!node) {
        return [];
      }
      try {
        return JSON.parse(node.textContent);
      } catch (error) {
        console.error("Unable to parse ICE servers:", error);
        return [];
      }
    })();

    const wsScheme = window.location.protocol === "https:" ? "wss" : "ws";
    const buildWsUrl = (path) => `${wsScheme}://${window.location.host}${path}`;

    const showVideo = () => {
      if (video) {
        video.hidden = false;
      }
      if (image) {
        image.hidden = true;
      }
    };

    const showImage = () => {
      if (video) {
        video.hidden = true;
      }
      if (image) {
        image.hidden = false;
      }
    };

    let websocketStarted = false;
    let websocketReconnectDelay = 1000;
    const maxWebsocketReconnectDelay = 30000;
    let mjpegFallbackStarted = false;
    const startMjpegStream = () => {
      if (mjpegFallbackStarted || !streamUrl || !image) {
        return;
      }
      mjpegFallbackStarted = true;
      image.src = `${streamUrl}?ts=${Date.now()}`;
      showImage();
    };
    const startWebsocketStream = () => {
      if (mjpegFallbackStarted) {
        return;
      }
      if (websocketStarted) {
        return;
      }
      websocketStarted = true;
      if (!wsPath || !image) {
        return;
      }
      let lastUrl = null;
      const ws = new WebSocket(buildWsUrl(wsPath));
      ws.binaryType = "arraybuffer";
      const cleanup = () => {
        if (lastUrl) {
          URL.revokeObjectURL(lastUrl);
          lastUrl = null;
        }
      };
      const scheduleReconnect = () => {
        cleanup();
        websocketStarted = false;
        if (!mjpegFallbackStarted) {
          setTimeout(startWebsocketStream, websocketReconnectDelay);
          websocketReconnectDelay = Math.min(
            websocketReconnectDelay * 2,
            maxWebsocketReconnectDelay
          );
        }
      };
      ws.addEventListener("message", (event) => {
        const blob = new Blob([event.data], { type: "image/jpeg" });
        const objectUrl = URL.createObjectURL(blob);
        if (lastUrl) {
          URL.revokeObjectURL(lastUrl);
        }
        lastUrl = objectUrl;
        image.src = objectUrl;
      });
      ws.addEventListener("open", () => {
        websocketReconnectDelay = 1000;
        showImage();
      });
      ws.addEventListener("close", scheduleReconnect);
      ws.addEventListener("error", (event) => {
        console.error("WebSocket error:", event);
        startMjpegStream();
        ws.close();
      });
    };

    const startWebrtcStream = async () => {
      if (!webrtcPath || !window.RTCPeerConnection || !video) {
        return false;
      }
      const ws = new WebSocket(buildWsUrl(webrtcPath));
      const pc = new RTCPeerConnection({ iceServers });
      pc.addEventListener("track", (event) => {
        showVideo();
        if (video.srcObject !== event.streams[0]) {
          video.srcObject = event.streams[0];
        }
      });
      pc.addEventListener("icecandidate", (event) => {
        if (event.candidate) {
          ws.send(JSON.stringify({ type: "candidate", candidate: event.candidate }));
        }
      });
      pc.addEventListener("connectionstatechange", () => {
        if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
          startWebsocketStream();
        }
      });

      ws.addEventListener("message", async (event) => {
        const payload = JSON.parse(event.data || "{}");
        if (payload.type === "answer") {
          await pc.setRemoteDescription({ type: "answer", sdp: payload.sdp });
        }
        if (payload.type === "candidate" && payload.candidate) {
          await pc.addIceCandidate(payload.candidate);
        }
      });

      ws.addEventListener("open", async () => {
        const offer = await pc.createOffer();
        await pc.setLocalDescription(offer);
        ws.send(JSON.stringify({ type: "offer", sdp: offer.sdp }));
      });

      ws.addEventListener("close", () => {
        pc.close();
        if (video.srcObject) {
          video.srcObject = null;
        }
        startWebsocketStream();
      });

      ws.addEventListener("error", () => {
        pc.close();
        startWebsocketStream();
      });

      return true;
    };

    startWebrtcStream().then((started) => {
      if (!started) {
        startWebsocketStream();
      }
    });
  })();
</script>
{% endblock %}