Add first clip button and update region names in video player

static/js/app.js

@@ -13,6 +13,7 @@
   const npLocation = document.getElementById("npLocation");
   const prevBtn = document.getElementById("prevBtn");
   const nextBtn = document.getElementById("nextBtn");
+  const firstBtn = document.getElementById("firstBtn");
   const regionBar = document.getElementById("regionBar");
   const csBtns = document.querySelectorAll(".cs-btn[data-cam]");
 
@@ -154,8 +155,16 @@
     if (idx > -1 && sameCam[idx + 1]) playClip(sameCam[idx + 1]);
   }
 
+  function firstClip() {
+    if (!currentClip) return;
+    const sameCam =
+      (allVideos[currentClip.cam] && allVideos[currentClip.cam].videos) || [];
+    if (sameCam.length > 0) playClip(sameCam[0]);
+  }
+
   prevBtn.addEventListener("click", prevClip);
   nextBtn.addEventListener("click", nextClip);
+  firstBtn.addEventListener("click", firstClip);
 
   // ---- Playback ----
   function playClip(clip) {
@@ -314,9 +323,9 @@
   }
 
   function buildRegionButtons() {
-    // Keep "All" button, remove any existing region buttons
+    // Remove existing region buttons, but preserve #firstBtn (no data-region)
     var existing = regionBar.querySelectorAll(
-      ".region-btn:not([data-region=''])",
+      ".region-btn[data-region]:not([data-region=''])",
     );
     existing.forEach(function (b) {
       b.remove();