44r0n7/vidflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add video time display to scrubber (fades in on hover)

Browse Source 
- #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>
This commit is contained in:
Aaron
2026-05-23 19:18:32 -04:00
parent 40dfcbb257
commit 36f7a7e439
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vidflow.html
+9 -1
View File
@@ -126,6 +126,8 @@ html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-famil
#pb-wrap:hover #pb{height:6px} #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{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-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 & NOW-PLAYING TICKER ── */
/* Bottom bar */ /* Bottom bar */
@@ -392,6 +394,7 @@ body.idle .gt,body.idle .gb,body.idle .gr,body.idle .gl{opacity:0;transition:opa
<!-- ── PROGRESS BAR ── --> <!-- ── PROGRESS BAR ── -->
<div id="pb-wrap"> <div id="pb-wrap">
<div id="pb"><div id="pb-thumb"></div></div> <div id="pb"><div id="pb-thumb"></div></div>
<span id="pb-time"></span>
</div> </div>
<!-- ── NOW-PLAYING TICKER ── --> <!-- ── NOW-PLAYING TICKER ── -->
@@ -459,6 +462,8 @@ function dbg(...args){ if(DEBUG) console.log('[VidFlow]',...args); }
const qs = s => document.querySelector(s); const qs = s => document.querySelector(s);
const qsa = s => document.querySelectorAll(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;'); } 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 ═══════════════════════════════════════
// ── YouTube IFrame API ── // ── YouTube IFrame API ──
@@ -654,7 +659,10 @@ function startPB(){
A.pbTimer=setInterval(()=>{ A.pbTimer=setInterval(()=>{
try{ try{
const dur=A.player?.getDuration?.(), cur=A.player?.getCurrentTime?.(); 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){} }catch(e){}
},500); },500);
} }