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();

templates/index.html

@@ -31,8 +31,15 @@
     <div class="layout">
       <!-- Region filter bar -->
       <nav class="region-bar" id="regionBar">
-        <span class="region-label">Region:</span>
+        <span class="region-label">Shortcuts:</span>
-        <button class="region-btn active" data-region="">All</button>
+        <button
+          class="region-btn"
+          id="firstBtn"
+          title="First clip"
+          aria-label="First clip"
+        >
+          Start
+        </button>
       </nav>
 
       <!-- Video Player -->

videoplayer.py

@@ -352,10 +352,10 @@ def api_videos():
 # South: lat < 37 AND lon > -104
 # East: lon > -80
 US_REGION_BOUNDS = [
-    ('West', lambda lat, lon: lon <= -104),
+    ('04 Back West', lambda lat, lon: lon <= -104),
-    ('Midwest', lambda lat, lon: -104 < lon <= -80 and lat >= 37),
+    ('03 Midwest', lambda lat, lon: -104 < lon <= -80 and lat >= 37),
-    ('South', lambda lat, lon: lat < 37 and lon > -104),
+    ('01 Texas', lambda lat, lon: lat < 37 and lon > -104),
-    ('East', lambda lat, lon: lon > -80),
+    ('02 East Coast', lambda lat, lon: lon > -80),
 ]