Adding recording (#29)

Reviewed-on: #29
Co-authored-by: Andrew Kettel <andrew.kettel@gmail.com>
Co-committed-by: Andrew Kettel <andrew.kettel@gmail.com>

src/templates/index.html

@@ -44,6 +44,24 @@
       justify-content: center;
     }
 
+    #preview.is-recording {
+      outline: 2px solid #ef4444;
+      outline-offset: 2px;
+      animation: rec-pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes rec-pulse {
+
+      0%,
+      100% {
+        outline-color: #ef4444;
+      }
+
+      50% {
+        outline-color: #7f1d1d;
+      }
+    }
+
     #stream-video {
       width: 100%;
       height: 100%;
@@ -54,6 +72,10 @@
     #placeholder {
       color: #555;
       font-size: 0.9rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
     }
 
     .controls {
@@ -70,7 +92,7 @@
       border: none;
       border-radius: 6px;
       cursor: pointer;
-      transition: opacity 0.2s;
+      transition: opacity 0.2s, background 0.2s;
     }
 
     button:disabled {
@@ -88,11 +110,128 @@
       color: #fff;
     }
 
+    #btn-record {
+      background: #3f3f3f;
+      color: #f0f0f0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    #btn-record.is-recording {
+      background: #b91c1c;
+      color: #fff;
+    }
+
+    .rec-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: currentColor;
+      flex-shrink: 0;
+    }
+
+    #btn-record.is-recording .rec-dot {
+      animation: blink 1s step-start infinite;
+    }
+
+    @keyframes blink {
+
+      0%,
+      100% {
+        opacity: 1;
+      }
+
+      50% {
+        opacity: 0;
+      }
+    }
+
+    .badge {
+      font-size: 0.8rem;
+      padding: 0.25rem 0.75rem;
+      border-radius: 999px;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+    }
+
+    .badge.live {
+      background: #dc2626;
+      color: #fff;
+    }
+
     #status {
       font-size: 0.85rem;
       color: #888;
       min-height: 1.2em;
     }
+
+    #recordings-section {
+      width: 100%;
+      max-width: 720px;
+    }
+
+    #recordings-section h2 {
+      font-size: 0.9rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: #666;
+      margin-bottom: 0.75rem;
+      padding-bottom: 0.4rem;
+      border-bottom: 1px solid #222;
+    }
+
+    #recordings-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+    }
+
+    .recording-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #1a1a1a;
+      border: 1px solid #2a2a2a;
+      border-radius: 6px;
+      padding: 0.5rem 0.85rem;
+      font-size: 0.82rem;
+      gap: 1rem;
+    }
+
+    .recording-item .rec-name {
+      font-family: monospace;
+      color: #ccc;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .recording-item .rec-meta {
+      color: #555;
+      white-space: nowrap;
+      font-size: 0.75rem;
+    }
+
+    .recording-item a {
+      color: #22c55e;
+      text-decoration: none;
+      font-size: 0.78rem;
+      white-space: nowrap;
+      transition: color 0.15s;
+    }
+
+    .recording-item a:hover {
+      color: #4ade80;
+    }
+
+    #recordings-empty {
+      color: #444;
+      font-size: 0.82rem;
+      text-align: center;
+      padding: 0.75rem 0;
+    }
   </style>
 </head>
 
@@ -101,71 +240,165 @@
 
   <div id="preview">
     <div id="placeholder">
-      <div class="dot" id="status-dot"></div>
       <span id="placeholder-text">Checking stream...</span>
     </div>
     <video id="stream-video" autoplay muted playsinline></video>
   </div>
 
   <div class="controls" id="controls"></div>
-
   <p id="status"></p>
 
-  <!-- hls.js from CDN -->
+  <div id="recordings-section">
+    <h2>Recordings</h2>
+    <div id="recordings-list">
+      <p id="recordings-empty">No recordings yet.</p>
+    </div>
+  </div>
+
   <script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
   <script>
     const video = document.getElementById("stream-video");
     const placeholder = document.getElementById("placeholder");
     const placeholderText = document.getElementById("placeholder-text");
-    const statusDot = document.getElementById("status-dot");
     const controls = document.getElementById("controls");
     const statusEl = document.getElementById("status");
+    const preview = document.getElementById("preview");
+    const recordingsList = document.getElementById("recordings-list");
 
     let hls = null;
     let pollInterval = null;
+    let isRecording = false;
 
+    function setStatus(msg) { statusEl.textContent = msg; }
+
+    function fmtBytes(b) {
+      if (b < 1024) return b + " B";
+      if (b < 1048576) return (b / 1024).toFixed(1) + " KB";
+      return (b / 1048576).toFixed(1) + " MB";
+    }
+
+    function fmtDate(iso) { return new Date(iso).toLocaleString(); }
+
+    // ── Recordings list ─────────────────────────────────────────────────────
+    async function refreshRecordings() {
+      const res = await fetch("/camera/recordings");
+      const list = await res.json();
+      recordingsList.innerHTML = "";
+
+      if (list.length === 0) {
+        recordingsList.innerHTML = '<p id="recordings-empty">No recordings yet.</p>';
+        return;
+      }
+
+      list.forEach(rec => {
+        const item = document.createElement("div");
+        item.className = "recording-item";
+        item.innerHTML =
+          '<span class="rec-name">' + rec.filename + '</span>' +
+          '<span class="rec-meta">' + fmtBytes(rec.size_bytes) + ' &nbsp;&middot;&nbsp; ' + fmtDate(rec.created_at) + '</span>' +
+          '<a href="/camera/recordings/' + rec.filename + '" download>Download</a>';
+        recordingsList.appendChild(item);
+      });
+    }
+
+    // ── Record button ───────────────────────────────────────────────────────
+    function createRecordButton() {
+      const btn = document.createElement("button");
+      btn.id = "btn-record";
+      const dot = document.createElement("span");
+      dot.className = "rec-dot";
+      const label = document.createElement("span");
+      label.className = "rec-label";
+
+      if (isRecording) {
+        btn.classList.add("is-recording");
+        label.textContent = "Stop Recording";
+      } else {
+        label.textContent = "Record";
+      }
+
+      btn.appendChild(dot);
+      btn.appendChild(label);
+      btn.addEventListener("click", toggleRecording);
+      return btn;
+    }
+
+    async function toggleRecording() {
+      const btn = document.getElementById("btn-record");
+      if (btn) btn.disabled = true;
+
+      if (!isRecording) {
+        setStatus("Starting recording...");
+        const res = await fetch("/camera/record/start", { method: "POST" });
+        const data = await res.json();
+        if (data.status === "recording" || data.status === "already_recording") {
+          isRecording = true;
+          setStatus("Recording");
+        } else {
+          setStatus("Failed to start recording: " + (data.message || "unknown error"));
+        }
+      } else {
+        setStatus("Stopping recording...");
+        await fetch("/camera/record/stop", { method: "POST" });
+        isRecording = false;
+        setStatus("Recording saved");
+        await refreshRecordings();
+      }
+
+      const streaming = !!document.getElementById("btn-stop");
+      renderControls(streaming);
+    }
+
+    // ── Controls ────────────────────────────────────────────────────────────
     function renderControls(running) {
       controls.innerHTML = "";
 
       if (running) {
         const stop = document.createElement("button");
         stop.id = "btn-stop";
-        stop.textContent = "Stop";
+        stop.textContent = "Stop Stream";
         stop.addEventListener("click", stopStream);
         controls.appendChild(stop);
-
-        const badge = document.createElement("span");
-        badge.className = "badge live";
-        badge.textContent = "● Live";
-        controls.appendChild(badge);
       } else {
         const start = document.createElement("button");
         start.id = "btn-start";
-        start.textContent = "Start";
+        start.textContent = "Start Stream";
         start.addEventListener("click", startStream);
         controls.appendChild(start);
       }
+
+      controls.appendChild(createRecordButton());
+
+      if (running) {
+        const badge = document.createElement("span");
+        badge.className = "badge live";
+        badge.textContent = "Live";
+        controls.appendChild(badge);
+      }
+
+      if (isRecording) {
+        preview.classList.add("is-recording");
+      } else {
+        preview.classList.remove("is-recording");
+      }
     }
 
-    function showOffline(message = "Stream is offline") {
+    // ── Video display ────────────────────────────────────────────────────────
+    function showOffline(message) {
       video.style.display = "none";
       video.src = "";
       placeholder.style.display = "flex";
-      placeholderText.textContent = message;
-      statusDot.classList.remove("live");
+      placeholderText.textContent = message || "Stream is offline";
     }
 
     function showLive() {
       placeholder.style.display = "none";
       video.style.display = "block";
-      statusDot.classList.add("live");
     }
 
-    // ── HLS ─────────────────────────────────────────────────────────────────
-
+    // ── HLS ──────────────────────────────────────────────────────────────────
     function startHls() {
       const src = "/camera/hls/stream.m3u8";
-
       if (hls) { hls.destroy(); hls = null; }
 
       if (Hls.isSupported()) {
@@ -179,7 +412,6 @@
         });
         hls.on(Hls.Events.ERROR, (event, data) => {
           if (data.fatal) {
-            console.error("HLS fatal error:", data);
             showOffline("Stream error — reloading...");
             setTimeout(attachToStream, 3000);
           }
@@ -201,18 +433,14 @@
       video.style.display = "none";
     }
 
-    // ── Status polling ───────────────────────────────────────────────────────
-
+    // ── Status polling ────────────────────────────────────────────────────────
     async function fetchStatus() {
       const res = await fetch("/camera/status");
       return res.json();
     }
 
-    function setStatus(msg) {
-      statusEl.textContent = msg;
-    }
-
-    async function waitForReady(maxAttempts = 40) {
+    async function waitForReady(maxAttempts) {
+      maxAttempts = maxAttempts || 40;
       for (let i = 0; i < maxAttempts; i++) {
         const data = await fetchStatus();
         if (data.ready) return true;
@@ -221,9 +449,10 @@
       return false;
     }
 
-    // Called on page load and after stream errors — attach if already live
     async function attachToStream() {
       const data = await fetchStatus();
+      isRecording = data.recording || false;
+
       if (data.ready) {
         startHls();
         renderControls(true);
@@ -259,15 +488,10 @@
       if (pollInterval) { clearInterval(pollInterval); pollInterval = null; }
     }
 
-    // ── Stream start / stop ──────────────────────────────────────────────────
-
+    // ── Stream start / stop ───────────────────────────────────────────────────
     async function startStream() {
-      // guard: re-check status in case another client just started it
       const current = await fetchStatus();
-      if (current.running || current.ready) {
-        await attachToStream();
-        return;
-      }
+      if (current.running || current.ready) { await attachToStream(); return; }
 
       const btn = document.getElementById("btn-start");
       if (btn) btn.disabled = true;
@@ -275,7 +499,6 @@
       placeholderText.textContent = "Starting...";
 
       await fetch("/camera/start", { method: "POST" });
-
       setStatus("Waiting for first segment...");
       const ready = await waitForReady();
 
@@ -301,14 +524,12 @@
       startOfflinePoll();
     }
 
-    // ── Init ────────────────────────────────────────────────────────────────
-
+    // ── Init ──────────────────────────────────────────────────────────────────
     (async () => {
       await attachToStream();
+      await refreshRecordings();
       const data = await fetchStatus();
-      if (!data.running && !data.ready) {
-        startOfflinePoll();
-      }
+      if (!data.running && !data.ready) startOfflinePoll();
     })();
   </script>
 </body>