Currently Listening: the EQ bars mark what is playing

The row in the player gets the amber EQ bars, as the item list's does,
and its progress rail and time left move as it plays. Rows say how
much is left, and their buttons are quiet so that row stands out.

savePos no longer saves before the file has loaded: currentTime is 0
then, and a failed load or an early pause wiped the saved position.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/index.html

@@ -204,6 +204,25 @@ input:focus,select:focus{outline:0;border-color:var(--accent)}
 .childrow .art{width:32px;height:32px;font-size:12px}
 .childrow .txt{flex:1;min-width:0}
 .childrow .txt b{display:block;font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* Currently Listening: how far into each episode you are, as a rail along the foot of its row.
+   The one in the player is marked as it is everywhere else, by the amber EQ bars, and its rail
+   and time left move as it plays. The rest stay neutral, so that one is what stands out. */
+#listening .childrow{position:relative;overflow:hidden;gap:12px;padding:10px 10px 13px}
+#listening .childrow .art{width:44px;height:44px;font-size:13px}
+#listening .txt b{display:flex;align-items:center;gap:7px}
+#listening .txt b span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#listening .txt small{display:flex;gap:12px;margin-top:3px;color:var(--faint);font-size:11.5px}
+#listening .txt small .fd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#listening .txt small .left{flex:none;color:var(--dim)}
+#listening .childrow:not(.now) .eq{display:none}
+#listening .rail{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--raise)}
+#listening .rail i{display:block;height:100%;width:0;background:var(--faint);transition:width .25s linear}
+#listening .now{border-color:color-mix(in srgb,var(--accent2) 60%,var(--line))}
+#listening .now .eq,#listening .now .left{color:var(--accent2)}
+#listening .now .rail i{background:var(--accent2)}
+/* Quiet buttons: a filled one on every row outshouted the row that is playing. */
+#listening [data-a=play]{color:var(--accent)}
+#listening [data-a=remove]{color:var(--faint)}
 /* Directory's filters: .tabs for what a feed is, as the item filters are, and chips for what it
    is about. A picked chip is underlined in --accent2, as the download bar and the now-playing EQ
    are; a .badge's fill already means unread in the sidebar. */
@@ -1525,7 +1544,9 @@ audio.addEventListener('timeupdate',()=>{
   if(d && audio.currentTime/d >= 0.9) markPlayed();
 });
 function savePos(){
-  if(!player.guid) return;
+  // Before the file has loaded, currentTime is 0 rather than where you are: saving it then --
+  // a failed load, or a pause before the seek to where you left off -- wiped the position.
+  if(!player.guid||!audio.readyState) return;
   player.saveAt=audio.currentTime;
   if(player.entry) player.entry.position=Math.floor(audio.currentTime);
   // The measured length stands in for one the feed left out: without it Currently Listening
@@ -1540,6 +1561,7 @@ audio.addEventListener('ended',()=>{savePos();markPlayed();$('#pplay').innerHTML
 // body.playing is what sets the EQ bars moving.
 audio.addEventListener('play',()=>{ $('#pplay').innerHTML=ICON.pause; document.body.classList.add('playing'); });
 audio.addEventListener('pause',()=>{ $('#pplay').innerHTML=ICON.play; document.body.classList.remove('playing'); });
+for(const ev of ['play','pause','timeupdate']) audio.addEventListener(ev,syncListening);
 window.addEventListener('beforeunload',savePos);
 $('#pplay').onclick=()=>audio.paused?audio.play():audio.pause();
 $('#pback').onclick=()=>audio.currentTime-=15;
@@ -1547,7 +1569,9 @@ $('#pfwd').onclick=()=>audio.currentTime+=30;
 $('#seek').oninput=e=>{const d=audio.duration;if(d)audio.currentTime=d*e.target.value/1000};
 $('#rate').onchange=e=>{audio.playbackRate=+e.target.value;localStorage.setItem('ipx.rate',e.target.value)};
 $('#vol').oninput=e=>{audio.volume=e.target.value/100;localStorage.setItem('ipx.vol',e.target.value)};
-$('#pclose').onclick=()=>{savePos();audio.pause();audio.removeAttribute('src');player.guid=null;$('#player').classList.remove('on');document.body.classList.remove('has-video');renderEntries()};
+$('#pclose').onclick=()=>{savePos();audio.pause();audio.removeAttribute('src');player.guid=null;$('#player').classList.remove('on');document.body.classList.remove('has-video');renderEntries();
+  // Called here, not left to the pause event: closing a player already paused fires none.
+  syncListening()};
 (function restore(){
   const r=localStorage.getItem('ipx.rate'), v=localStorage.getItem('ipx.vol');
   if(r){$('#rate').value=r;audio.playbackRate=+r}
@@ -1857,7 +1881,7 @@ async function renderListed(v){
 
 /// Currently Listening: episodes you started and have not finished, across every feed you
 /// subscribe to. A row resumes the episode in the player bar on click -- a shortcut back to
-/// where you left off, not another way to browse.
+/// where you left off, not another way to browse. The one in the player pauses instead.
 async function renderListening(url,box){
   let rows=[];
   try{ rows=(await api(url)).entries||[]; }catch{}
@@ -1865,19 +1889,41 @@ async function renderListening(url,box){
   for(const e of rows){
     const el=document.createElement('div');
     el.className='childrow';
-    const pct=e.duration?Math.min(100,Math.round(e.position/e.duration*100)):0;
+    el.entry=e;
     el.innerHTML=artHTML(e.image||feedArt(e.feed_id),e.title||'')+
-      `<div class="txt"><b>${esc(e.title||'(untitled)')}</b>`+
-      `<small class="meta">${esc(feedName(e.feed_id))} · ${clock(e.position)} of ${e.duration?clock(e.duration):'?'}</small>`+
-      `<div class="dlbar live"><i style="width:${pct}%"></i></div></div>`+
-      `<button class="btn ico primary" title="Resume" aria-label="Resume">${ICON.play}</button>`+
-      `<button class="btn ico" data-a="remove" title="Remove from Currently Listening" aria-label="Remove from Currently Listening">${ICON.close}</button>`;
-    el.onclick=ev=>ev.target.closest('[data-a=remove]')?forget(e):play(e);
+      `<div class="txt"><b>${EQ}<span>${esc(e.title||'(untitled)')}</span></b>`+
+      `<small><span class="fd">${esc(feedName(e.feed_id))}</span><span class="left"></span></small></div>`+
+      `<button class="iconbtn" data-a="play"></button>`+
+      `<button class="iconbtn" data-a="remove" title="Remove from Currently Listening" aria-label="Remove from Currently Listening">${ICON.close}</button>`+
+      `<div class="rail"><i></i></div>`;
+    el.onclick=ev=>ev.target.closest('[data-a=remove]')?forget(e)
+      :el.classList.contains('now')&&!audio.paused?audio.pause():play(e);
+    paintListenRow(el);
     box.appendChild(el);
   }
   return rows.length;
 }
 
+/// One row's time left, progress and play button, taken from the player when it is the one in it.
+function paintListenRow(el){
+  const e=el.entry, now=player.guid===e.guid&&player.feed===e.feed_id;
+  // Zero until the player has sought to where you left off; the saved position stands till then.
+  if(now&&audio.currentTime) e.position=Math.floor(audio.currentTime);
+  const d=e.duration||(now&&isFinite(audio.duration)?Math.floor(audio.duration):0);
+  el.classList.toggle('now',now);
+  $('.left',el).textContent=d?`${clock(d-e.position)} left`:`${clock(e.position)} in`;
+  // With no length there is nothing to show, and an empty rail reads as a heavy border.
+  const rail=$('.rail',el); rail.hidden=!d;
+  $('i',rail).style.width=`${d?Math.min(100,e.position/d*100):0}%`;
+  const b=$('[data-a=play]',el), label=now&&!audio.paused?'Pause':'Resume';
+  if(b.title!==label){ b.title=label; b.setAttribute('aria-label',label); b.innerHTML=label==='Pause'?ICON.pause:ICON.play; }
+}
+/// Keeps the list in step with the player. Only a row that is, or was, the one in it changes.
+function syncListening(){
+  for(const el of $$('#listening .childrow'))
+    if(el.entry&&(el.classList.contains('now')||player.guid===el.entry.guid)) paintListenRow(el);
+}
+
 /// Takes an episode off Currently Listening by forgetting where you got to: the list is every
 /// episode with a saved position short of the end, so the position is what has to go.
 async function forget(e){