DeadAir in the page: a switch per show, one beside the speed, and the time saved (#172)

A DeadAir switch in each show's settings, and the same switch beside
the speed for the show that is playing, drawn as a waveform with its gap
closed up, outlined when off and solid when on, with aria-pressed. A
file the server gives a copy for plays from /media/{id}/deadair. An
episode's line says how much shorter it is, and Settings says how much
DeadAir has saved you.

Turning it on or off mid-episode saves the place with a request it waits
for, not a beacon, then asks for the entry again from the new
GET /api/entries/{feed}/{guid}, whose position is in the clock of the
version it now plays, and carries on there. A copy not made yet plays
from the next time. Turning a show on wakes the copy maker, so the copy
is there in seconds rather than at its next pass.

The browser test plays a real MP3 with long silences, quiet.mp3, from a
show it adds and removes itself.

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

web/src/player.ts

@@ -1,8 +1,12 @@
 /* ---------------- player ---------------- */
 const audio=$('#audio');
-const player: {guid: string|null, feed: string|null, entry: any, enc?: number, moved?: boolean,
+const player: {guid: string|null, feed: string|null, entry: any, enc?: number, src?: string, moved?: boolean,
   saveAt: number, marked: boolean}={guid:null,feed:null,entry:null,saveAt:0,marked:false};
 
+/// Where a file plays from: DeadAir's copy when the server says this person plays it (#171),
+/// whose times the entry is already given in, else the file itself.
+const mediaSrc=enc=>enc.deadair!=null?`/media/${enc.id}/deadair`:`/media/${enc.id}`;
+
 // Marked read when an item has actually been listened to -- at the end, or past 90%.
 // NOT on play: doing that made the item vanish from the Unread list the instant
 // you pressed play, which looks exactly like it went missing.
@@ -20,14 +24,15 @@ function play(e,enc=e.enclosures.find(isPlayable)){
     toast(e.enclosures.some(x=>x.path) ? 'That file is not audio or video' : 'Not downloaded yet', true);
     return;
   }
-  // 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;
+  // The same file carries on where it was; another of the item's files starts from its top. So
+  // does the other version of the same file, from the place the entry gives in its clock.
+  const resuming = player.guid===e.guid && player.enc===enc.id && player.src===mediaSrc(enc);
   // 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');
-    audio.src=`/media/${enc.id}`;
+    audio.src=player.src=mediaSrc(enc);
     audio.currentTime=0;
     if(e.position>5) audio.addEventListener('loadedmetadata',()=>{audio.currentTime=e.position},{once:true});
     // Initials, if it comes to that, are the feed's: the episode's read as "SE" beside the feed's art.
@@ -38,6 +43,7 @@ function play(e,enc=e.enclosures.find(isPlayable)){
     $('#player').classList.add('on');
     mediaSession(e,f);
     player.marked=false;
+    paintDead();
   }
   audio.play().catch(err=>toast('Playback failed: '+err.message,true));
   renderEntries();
@@ -110,6 +116,49 @@ $('#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)};
+/// DeadAir's switch beside the speed: on or off for the show that is playing. The state is in the
+/// icon's shape and aria-pressed, never a colour.
+function paintDead(){
+  const b=$('#pdead'), f=S.feeds.find(x=>x.id===player.feed);
+  b.hidden=!f||document.body.classList.contains('has-video');
+  if(b.hidden) return;
+  b.setAttribute('aria-pressed',String(!!f.deadair));
+  b.innerHTML=f.deadair?ICON.deadairOn:ICON.deadair;
+  b.title=f.deadair?'DeadAir is on for this show: long silences are shortened'
+    :'Turn on DeadAir for this show: long silences are shortened';
+}
+$('#pdead').onclick=async()=>{
+  const f=S.feeds.find(x=>x.id===player.feed); if(!f) return;
+  const on=!f.deadair;
+  try{ await api(`/api/feeds/${encodeURIComponent(f.id)}`,{method:'PATCH',body:JSON.stringify({deadair:on})}); }
+  catch(err){ toast(err.message,true); return; }
+  f.deadair=on; paintDead();
+  const switched=await switchVersion();
+  toast(!on?'DeadAir is off for this show':switched?'DeadAir is on for this show'
+    :'DeadAir is on for this show. Each episode is shortened a few minutes after it downloads.');
+  renderEntries();
+};
+/// Carries on at the same place in the other version of what is playing, once DeadAir has been
+/// turned on or off for its show. True if it changed version: a copy not made yet plays next time.
+async function switchVersion(){
+  if(!player.guid) return false;
+  const [feed,guid]=[player.feed,player.guid].map(encodeURIComponent);
+  // Saved and waited for, not beaconed, so the entry asked for next has this place in it.
+  if(audio.readyState){
+    await api(`/api/entries/${feed}/${guid}/position`,{method:'POST',body:JSON.stringify({
+      secs:Math.floor(audio.currentTime),duration:isFinite(audio.duration)?Math.floor(audio.duration):null})}).catch(()=>{});
+    player.moved=false;
+  }
+  const e=await api(`/api/entries/${feed}/${guid}`).catch(()=>null);
+  const enc=e&&e.enclosures.find(x=>x.id===player.enc);
+  if(!enc||mediaSrc(enc)===player.src) return false;
+  const was=!audio.paused;
+  player.entry=e; player.src=mediaSrc(enc); player.saveAt=e.position;
+  audio.src=player.src;
+  audio.addEventListener('loadedmetadata',()=>{audio.currentTime=e.position},{once:true});
+  if(was) audio.play().catch(()=>{});
+  return true;
+}
 $('#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()};