// Builds the MJPEG camera preview grid. One <img> per camera, no client JS
// decoding needed — the browser natively renders multipart MJPEG streams.

export function buildCameraGrid(cameras) {
  const grid = document.getElementById("camera-grid");
  grid.innerHTML = "";
  for (const cam of cameras) {
    const pane = document.createElement("div");
    pane.className = "camera-pane";

    const title = document.createElement("div");
    title.className = "cam-title";
    title.textContent = `${cam.id}  (${cam.topic})`;
    pane.appendChild(title);

    const img = document.createElement("img");
    img.dataset.camId = cam.id;
    img.alt = cam.id;
    pane.appendChild(img);

    grid.appendChild(pane);
  }
}

export function setPreviewActive(active) {
  document.querySelectorAll("#camera-grid img").forEach((img) => {
    if (active) {
      if (!img.src) img.src = `/api/camera/${img.dataset.camId}/stream.mjpg?t=${Date.now()}`;
    } else {
      img.removeAttribute("src");
    }
  });
}