From 891582b47a1211d7b5cbc38b3fccd09aa9dd2773 Mon Sep 17 00:00:00 2001
From: zwitschi <zwitschi82@gmail.com>
Date: Mon, 27 Jul 2026 10:59:40 +0200
Subject: [PATCH] Add first clip button and update region names in video player

---
 static/js/app.js     | 13 +++++++++++--
 templates/index.html | 11 +++++++++--
 videoplayer.py       |  8 ++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 1eceb74..631156b 100644
--- a/static/js/app.js
+++ b/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();
diff --git a/templates/index.html b/templates/index.html
index c325d53..9d7d9ab 100644
--- a/templates/index.html
+++ b/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>
-        <button class="region-btn active" data-region="">All</button>
+        <span class="region-label">Shortcuts:</span>
+        <button
+          class="region-btn"
+          id="firstBtn"
+          title="First clip"
+          aria-label="First clip"
+        >
+          Start
+        </button>
       </nav>
 
       <!-- Video Player -->
diff --git a/videoplayer.py b/videoplayer.py
index 5e23798..75fda13 100644
--- a/videoplayer.py
+++ b/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),
-    ('Midwest', lambda lat, lon: -104 < lon <= -80 and lat >= 37),
-    ('South', lambda lat, lon: lat < 37 and lon > -104),
-    ('East', lambda lat, lon: lon > -80),
+    ('04 Back West', lambda lat, lon: lon <= -104),
+    ('03 Midwest', lambda lat, lon: -104 < lon <= -80 and lat >= 37),
+    ('01 Texas', lambda lat, lon: lat < 37 and lon > -104),
+    ('02 East Coast', lambda lat, lon: lon > -80),
 ]