Every play button for what is playing shows pause, and pauses it

Only the player bar's button changed; the files pane's, the row's and the
toolbar's kept showing play while it played. play() now pauses when asked to play
what is already playing, which makes each of them a toggle, and syncPlayButtons()
repaints them on play, pause and ended and whenever the list or reader is drawn.

Closes #34.

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

web/src/player.ts

@@ -22,6 +22,8 @@ function play(e,enc=e.enclosures.find(isPlayable)){
   }
   // The same file carries on where it was; another of the item's files starts from its top.
   const resuming = player.guid===e.guid && player.enc===enc.id;
+  // Every play button is a pause button for what is playing, as the player bar's is.
+  if(resuming && !audio.paused){ audio.pause(); return; }
   if(!resuming){
     player.guid=e.guid; player.feed=e.feed_id; player.entry=e; player.enc=enc.id; player.moved=false;
     document.body.classList.toggle('has-video', kindOf(enc)==='video');
@@ -84,6 +86,22 @@ 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','ended']) audio.addEventListener(ev,syncPlayButtons);
+
+/// Every play button for what is playing shows pause, like the player bar's: a row's, the files
+/// pane's, the toolbar's. Only the bar's used to change, so the others said play while it played.
+function syncPlayButtons(){
+  const on=(guid,enc?)=>!audio.paused&&player.guid===guid&&(enc==null||player.enc===enc);
+  const paint=(b,now,idle)=>{
+    const label=now?'Pause':idle;
+    if(b.title===label) return;
+    b.title=label; b.setAttribute('aria-label',label); b.innerHTML=now?ICON.pause:ICON.play;
+  };
+  for(const b of $$('#eps .ep [data-a=play]')) paint(b,on(b.closest('.ep').dataset.guid),'Play');
+  for(const b of $$('#files [data-a=play][data-enc], #detail [data-a=play][data-enc]'))
+    paint(b,on(S.sel,Number(b.dataset.enc)),'Play');
+  const e=cur(); paint($('#tbPlay'),!!e&&on(e.guid),'Play the selected item');
+}
 for(const ev of ['play','pause','timeupdate']) audio.addEventListener(ev,syncListening);
 window.addEventListener('beforeunload',savePos);
 $('#pplay').onclick=()=>audio.paused?audio.play():audio.pause();