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
+
@@ -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,'&').replace(//g,'>').replace(/"/g,'"'); } +// 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); }