From dc15b8ffd42ab6e06614a4bc3901b66fc224a3a8 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Mon, 10 Aug 2026 07:01:15 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20download=20button=20in=20clip=20player?=
 =?UTF-8?q?=20=E2=80=94=20watch=20first,=20then=20save?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/app.js     | 14 +++++++++++++-
 public/index.html |  5 ++++-
 public/style.css  |  1 +
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/public/app.js b/public/app.js
index 1514ec9..97b5203 100644
--- a/public/app.js
+++ b/public/app.js
@@ -219,13 +219,25 @@ function renderClips(clips) {
     });
 }
 function playClip(path) {
-    document.getElementById('pb-player').classList.remove('hidden');
+    const player = document.getElementById('pb-player');
+    player.classList.remove('hidden');
     document.getElementById('pb-video').src = '/recordings/' + path;
+    // Store path for download button.
+    player.dataset.path = path;
 }
 document.getElementById('pb-close').addEventListener('click', () => {
     document.getElementById('pb-player').classList.add('hidden');
     document.getElementById('pb-video').src = '';
 });
+document.getElementById('pb-download').addEventListener('click', () => {
+    const path = document.getElementById('pb-player').dataset.path;
+    if (path) {
+        const a = document.createElement('a');
+        a.href = '/recordings/' + path;
+        a.download = path.split('/').pop();
+        a.click();
+    }
+});
 
 // ── Settings / Onboarding ──
 async function renderCameraCards() {
diff --git a/public/index.html b/public/index.html
index a7a9f89..5032a8e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -50,7 +50,10 @@
             <div id="pb-clips" class="clip-grid"></div>
             <div id="pb-player" class="clip-player hidden">
                 <video id="pb-video" controls></video>
-                <button id="pb-close">✕ Close</button>
+                <div style="display:flex;gap:8px;margin-top:12px">
+                    <button id="pb-download" class="btn-primary">⬇ Download</button>
+                    <button id="pb-close">✕ Close</button>
+                </div>
             </div>
         </section>
 
diff --git a/public/style.css b/public/style.css
index 82141e2..5492637 100644
--- a/public/style.css
+++ b/public/style.css
@@ -143,6 +143,7 @@ body {
 .clip-player.hidden { display: none; }
 .clip-player video { max-width: 90%; max-height: 80%; }
 .clip-player button { margin-top: 12px; }
+.clip-player .btn-primary { background: var(--accent); color: #fff; border: none; padding: 8px 20px; border-radius: var(--radius); cursor: pointer; font-size: 14px; }
 
 /* ── Settings ── */
 .settings-toolbar {