Improve player controls on small screens

index.html

@@ -44,7 +44,7 @@
     .scrub:hover .scrub-hover { display: block; }
 
     /* control row */
-    .ctrl-row { display: flex; align-items: center; gap: 8px; }
+    .ctrl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
     .ctrl-row button { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
     .ctrl-row button:hover { background: rgba(255,255,255,.15); }
     .ctrl-row svg { width: 22px; height: 22px; fill: currentColor; }
@@ -100,7 +100,10 @@
 
     @media (max-width: 600px) {
       .page { padding: 8px; }
-      .ctrl-row svg { width: 18px; height: 18px; }
+      .ctrl-row { gap: 4px; }
+      .ctrl-row button { min-width: 36px; min-height: 34px; }
+      .ctrl-row svg { width: 20px; height: 20px; }
+      .time-label { font-size: 11px; }
       .hours span:nth-child(even) { display: none; }
     }
   </style>
@@ -139,8 +142,8 @@
           <svg id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
           <svg id="icon-pause" viewBox="0 0 24 24" style="display:none"><path d="M6 19h4V5H6zm8-14v14h4V5z"/></svg>
         </button>
-        <button id="btn-back" aria-label="Back 10s"><svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/><text x="10" y="16" font-size="7" fill="currentColor" text-anchor="middle" font-family="sans-serif">10</text></svg></button>
+        <button id="btn-back" aria-label="Back 10 seconds"><svg viewBox="0 0 24 24"><path d="M12 5V2L7 7l5 5V8a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z"/><text x="12" y="15" font-size="6.5" fill="currentColor" text-anchor="middle" font-family="sans-serif" font-weight="bold">10</text></svg></button>
-        <button id="btn-fwd" aria-label="Forward 10s"><svg viewBox="0 0 24 24"><path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/><text x="14" y="16" font-size="7" fill="currentColor" text-anchor="middle" font-family="sans-serif">10</text></svg></button>
+        <button id="btn-fwd" aria-label="Forward 10 seconds"><svg viewBox="0 0 24 24"><path d="M12 5V2l5 5-5 5V8a5 5 0 1 0 5 5h2a7 7 0 1 1-7-7z"/><text x="12" y="15" font-size="6.5" fill="currentColor" text-anchor="middle" font-family="sans-serif" font-weight="bold">10</text></svg></button>
         <div class="vol-wrap">
           <button id="btn-vol" aria-label="Volume">
             <svg id="icon-vol-on" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8.3v7.4a4.5 4.5 0 0 0 2.5-3.7zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1A9 9 0 0 0 14 3.2z"/></svg>
@@ -148,7 +151,7 @@
           </button>
           <input id="volume" type="range" min="0" max="1" step=".01" value=".8">
         </div>
-        <span class="time-label"><span id="time-cur">0:00</span> / <span id="time-dur">0:00</span></span>
+        <span class="time-label"><span id="time-cur">--:--:--</span> / <span id="time-dur">0:00</span></span>
         <span class="spacer"></span>
         <span class="time-label" id="clock" style="color:var(--accent);font-weight:500;">--:--:--</span>
       </div>
@@ -505,7 +508,7 @@
     dateSelect.innerHTML = d.dates.map(day => `<option value="${day}">${day.slice(0,4)}-${day.slice(4,6)}-${day.slice(6)}</option>`).join("");
     dateSelect.value = date || d.dates[0];
     document.querySelector("#clock").textContent = "--:--:--";
-    document.querySelector("#time-cur").textContent = "0:00";
+    document.querySelector("#time-cur").textContent = "--:--:--";
     document.querySelector("#time-dur").textContent = "0:00";
     scrubFill.style.width = "0%";
     drawTimeline();
@@ -519,6 +522,7 @@
     initialOffset = offset;
     wrap.classList.add("has-video");
     document.querySelector("#clock").textContent = timeOfDay(clip.start + offset);
+    document.querySelector("#time-cur").textContent = timeOfDay(clip.start + offset);
     video.src = `/video?date=${dateSelect.value}&name=${encodeURIComponent(clip.name)}&offset=${offset.toFixed(3)}`;
     video.play().catch(() => {});
     drawTimeline();
@@ -527,7 +531,7 @@
   video.addEventListener("timeupdate", () => {
     if (!activeClip) return;
     document.querySelector("#clock").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
-    document.querySelector("#time-cur").textContent = fmt(video.currentTime);
+    document.querySelector("#time-cur").textContent = timeOfDay(activeClip.start + initialOffset + video.currentTime);
     updateScrub();
     drawTimeline();
   });