From 36f7a7e43963c96be60a1fbf779ff0b831801eb5 Mon Sep 17 00:00:00 2001
From: Aaron <44r0n7+Claude@pm.me>
Date: Sat, 23 May 2026 19:18:32 -0400
Subject: [PATCH] Add video time display to scrubber (fades in on hover)

- #pb-time span inside #pb-wrap, absolutely positioned right:8px
- Shows current / total in m:ss format (e.g. 1:23 / 4:56)
- Fades in on scrubber hover, hidden otherwise
- fmtTime() helper added to utilities section

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 vidflow.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/vidflow.html b/vidflow.html
index 595eebf..d035183 100644
--- a/vidflow.html
+++ b/vidflow.html
@@ -126,6 +126,8 @@ html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-famil
 #pb-wrap:hover #pb{height:6px}
 #pb{height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:height .15s,width .5s linear;pointer-events:none;position:relative}
 #pb-thumb{position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:#fff;border-radius:50%;opacity:0;transition:opacity .15s;pointer-events:none}
+#pb-time{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;font-family:var(--font-b);font-weight:700;letter-spacing:.5px;color:var(--dim);pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
+#pb-wrap:hover #pb-time{opacity:1}
 
 /* ── BOTTOM BAR & NOW-PLAYING TICKER ── */
 /* Bottom bar */
@@ -392,6 +394,7 @@ body.idle .gt,body.idle .gb,body.idle .gr,body.idle .gl{opacity:0;transition:opa
   <!-- ── PROGRESS BAR ── -->
   <div id="pb-wrap">
     <div id="pb"><div id="pb-thumb"></div></div>
+    <span id="pb-time"></span>
   </div>
 
   <!-- ── NOW-PLAYING TICKER ── -->
@@ -459,6 +462,8 @@ function dbg(...args){ if(DEBUG) console.log('[VidFlow]',...args); }
 const qs  = s => document.querySelector(s);
 const qsa = s => document.querySelectorAll(s);
 function esc(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+// Formats seconds into m:ss (e.g. 83 → "1:23")
+function fmtTime(s){ s=Math.floor(s||0); return Math.floor(s/60)+':'+String(s%60).padStart(2,'0'); }
 
 // ═══ YOUTUBE IFRAME API ═══════════════════════════════════════
 // ── YouTube IFrame API ──
@@ -654,7 +659,10 @@ function startPB(){
   A.pbTimer=setInterval(()=>{
     try{
       const dur=A.player?.getDuration?.(), cur=A.player?.getCurrentTime?.();
-      if(dur>0){ const pct=(cur/dur*100)+'%'; qs('#pb').style.width=pct; }
+      if(dur>0){
+        qs('#pb').style.width=(cur/dur*100)+'%';
+        const t=qs('#pb-time'); if(t) t.textContent=fmtTime(cur)+' / '+fmtTime(dur);
+      }
     }catch(e){}
   },500);
 }