From 6d6b4dd1e4065659d2d979d291863eadcb85620b Mon Sep 17 00:00:00 2001
From: rays <ray.slakinski@gmail.com>
Date: Thu, 10 Sep 2026 17:50:39 +0000
Subject: [PATCH] Do not offer a player for a file that is not audio or video

The media-type filter stopped new image enclosures being fetched, but ones
already on disk still got a play button and an <audio> element, because
the UI tested for a path rather than for a playable type. Four places did
this, including play() itself, which picked the first downloaded enclosure
whatever it was.

isPlayable() checks audio/* or video/*, falling back to the extension when
a feed declares no type. A downloaded non-media file now shows as its kind
with Save and Delete, so it stays available without posing as an episode.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AdXho5tTkjFLeUXKbEjKBh
---
 PROGRESS.md                |  20 ++++++++++++++++++++
 tests/ui/app.spec.js       |  21 ++++++++++++++++++++-
 tests/ui/fixtures/art.jpg  | Bin 0 -> 3022 bytes
 tests/ui/fixtures/pics.xml |   8 ++++++++
 tests/ui/global-setup.js   |   6 ++++++
 web/index.html             |  36 +++++++++++++++++++++++++++++++-----
 6 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 tests/ui/fixtures/art.jpg
 create mode 100644 tests/ui/fixtures/pics.xml

diff --git a/PROGRESS.md b/PROGRESS.md
index 2c4e72d..a917748 100644
--- a/PROGRESS.md
+++ b/PROGRESS.md
@@ -56,6 +56,26 @@ and until now nothing set them.
 
 ---
 
+## 2026-09-10 — A file is not the same as a playable file
+
+Reported: "Abort Retry Fail still shows downloaded and audio playback UI". The media-type filter
+stopped *new* image enclosures being fetched, but those 20 JPEGs were already on disk from before
+it existed — and the UI gave a play button and an `<audio>` element to anything with a `path`. An
+audio element pointed at a JPEG is just a broken player.
+
+`isPlayable()` now separates having a file from being playable: audio/* or video/*, falling back to
+the file extension when a feed declares no type. Four places used the wrong test — the row's play
+button, the artwork's play overlay, `encBox`, and `play()` itself, which picked the first downloaded
+enclosure regardless of what it was. A downloaded non-media file now shows as
+`image · downloaded · Save · Delete file`, so it is still there and still retrievable, just not
+pretending to be an episode.
+
+Covered by a new browser test with a fixture blog whose entry carries a JPEG enclosure and a feed
+configured to download it: no play button on the row, no `<audio>` in the detail pane, and the Save
+button still present.
+
+---
+
 ## 2026-09-10 — Three-pane layout
 
 Ray asked for feeds beside, items above, and the selected item's text with its enclosures below —
diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js
index c5c3640..d3e7e8e 100644
--- a/tests/ui/app.spec.js
+++ b/tests/ui/app.spec.js
@@ -10,7 +10,8 @@ test.beforeEach(async ({ page }) => {
 test('the page loads and lists the configured feeds', async ({ page }) => {
   // Regression: a ReferenceError in the script left the shell rendered and the sidebar
   // empty, with every handler below the error dead. Server-side checks all passed.
-  await expect(page.locator('.feed')).toHaveCount(2, { timeout: 15_000 });
+  // Three top-level feeds in the fixture config; the OPML's child is inside a closed folder.
+  await expect(page.locator('.feed')).toHaveCount(3, { timeout: 15_000 });
   await expect(page.getByText('Test Show')).toBeVisible();
   const errors = [];
   page.on('pageerror', e => errors.push(e.message));
@@ -84,6 +85,24 @@ test('the three panes are there and the item text lands in the bottom one', asyn
   await expect(page.locator('#detail audio')).toHaveCount(0);
 });
 
+test('a downloaded file that is not audio gets no player', async ({ page }) => {
+  // Regression: anything with a file got an <audio> element and a play button, so a blog's
+  // header image rendered as a broken player.
+  await page.locator('.feed', { hasText: 'Picture Blog' }).click();
+  const row = page.locator('.ep', { hasText: 'An Article' });
+  await expect(row).toBeVisible({ timeout: 20_000 });
+
+  await expect(row.locator('[data-a="play"]')).toHaveCount(0);
+  await row.click();
+
+  await expect(page.locator('#detail .dt')).toHaveText('An Article');
+  await expect(page.locator('#detail audio')).toHaveCount(0);
+  await expect(page.locator('#detail .encbox')).toContainText('image');
+  await expect(page.locator('#detail .encbox')).toContainText('downloaded');
+  // Still offered as a file, just not as an episode.
+  await expect(page.locator('#detail .btn', { hasText: 'Save' })).toBeVisible();
+});
+
 test('the filter tabs change what is listed', async ({ page }) => {
   await page.getByText('Test Show').click();
   await expect(page.locator('.ep').first()).toBeVisible({ timeout: 20_000 });
diff --git a/tests/ui/fixtures/art.jpg b/tests/ui/fixtures/art.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f9011df2ad6d867758ff008daced07f958ed70b4
GIT binary patch
literal 3022
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
Qlp;H9cr;lNSVczv+21+%=>Px#

literal 0
HcmV?d00001

diff --git a/tests/ui/fixtures/pics.xml b/tests/ui/fixtures/pics.xml
new file mode 100644
index 0000000..4bb8115
--- /dev/null
+++ b/tests/ui/fixtures/pics.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<rss version="2.0"><channel><title>Picture Blog</title><link>http://127.0.0.1:8792/</link>
+<description>A text blog whose entries carry a header image, as Substack does.</description>
+<item><title>An Article</title><guid>pic-1</guid>
+  <pubDate>Mon, 01 Sep 2026 10:00:00 +0000</pubDate>
+  <description>&lt;p&gt;Words, not audio.&lt;/p&gt;</description>
+  <enclosure url="http://127.0.0.1:8792/art.jpg" length="3020" type="image/jpeg"/></item>
+</channel></rss>
\ No newline at end of file
diff --git a/tests/ui/global-setup.js b/tests/ui/global-setup.js
index fce51bc..d8048b0 100644
--- a/tests/ui/global-setup.js
+++ b/tests/ui/global-setup.js
@@ -34,6 +34,12 @@ token = "${TOKEN}"
 url = "http://127.0.0.1:8792/show.xml"
 auto_download = true
 
+# Downloads its image, so the UI has a file that is not playable to deal with.
+[feeds.picture-blog]
+url = "http://127.0.0.1:8792/pics.xml"
+auto_download = true
+media_types = ["image"]
+
 [feeds.test-subscriptions]
 url = "http://127.0.0.1:8792/subs.opml"
 auto_download = false
diff --git a/web/index.html b/web/index.html
index 3b1247c..0681971 100644
--- a/web/index.html
+++ b/web/index.html
@@ -619,6 +619,7 @@ function renderEntries(){
 function epEl(e){
   const enc=e.enclosures[0];
   const has=!!(enc&&enc.path);
+  const playable=isPlayable(enc);
   const el=document.createElement('div');
   el.className='ep'+(e.read?' read':'')+(S.sel===e.guid?' sel':'')+
     (player.guid===e.guid?' playing':'');
@@ -643,8 +644,8 @@ function epEl(e){
       ${enc&&enc.last_error?`<div class="line" style="color:var(--bad)">${esc(enc.last_error)}</div>`:''}
     </div>
     <div class="rowacts">
-      ${has?`<button class="iconbtn" data-a="play" title="Play">▶</button>`:
-            (enc?`<button class="iconbtn" data-a="get" title="Download this ${
+      ${playable?`<button class="iconbtn" data-a="play" title="Play">▶</button>`:
+            (enc&&!has?`<button class="iconbtn" data-a="get" title="Download this ${
               enc.state==='skipped'?kindOf(enc):'file'}">⤓</button>`:'')}
       <button class="iconbtn" data-a="flag" title="${e.flagged?'Stop keeping':'Keep (never auto-delete)'}">${e.flagged?'★':'☆'}</button>
       <button class="iconbtn" data-a="read" title="Mark ${e.read?'unread':'read'}">${e.read?'○':'●'}</button>
@@ -652,7 +653,7 @@ function epEl(e){
     </div>`;
 
   const art=$('.art',el);
-  if(art&&has){
+  if(art&&playable){
     art.insertAdjacentHTML('beforeend','<span class="ovl">▶</span>');
     art.onclick=ev=>{ ev.stopPropagation(); play(e); };
   }
@@ -660,6 +661,19 @@ function epEl(e){
   $$('.rowacts .iconbtn',el).forEach(b=>b.onclick=ev=>{ev.stopPropagation();epAction(b.dataset.a,e,el)});
   return el;
 }
+/// Whether the browser can play it. Having a file is not the same as being playable:
+/// blog feeds put article images in enclosures, and an <audio> element pointed at a JPEG
+/// is just a broken player.
+function isPlayable(x){
+  if(!x || !x.path) return false;
+  const m=(x.mime||'').toLowerCase();
+  if(m.startsWith('audio/')||m.startsWith('video/')) return true;
+  if(m) return false;
+  // No declared type: fall back to the file's extension.
+  return /\.(mp3|m4a|m4b|aac|ogg|oga|opus|flac|wav|mp4|m4v|mov|webm|mkv)$/i
+    .test((x.path||x.url||'').split('?')[0]);
+}
+
 /// What an enclosure is, for a row that is not an episode: "image", "pdf", "document".
 function kindOf(enc){
   const m=(enc.mime||'').toLowerCase();
@@ -736,6 +750,15 @@ function showDetail(e){
 /// One enclosure: a player when the file is here, otherwise what it is and a way to get it.
 function encBox(x){
   const size=x.length?mb(x.length):'';
+  if(x.path && !isPlayable(x)){
+    // On disk, but not audio or video: offer the file, not a player.
+    return `<div class="encbox">
+      <span class="chip done">${esc(kindOf(x))}</span>
+      <span class="meta" style="flex:1">downloaded${size?' \u00b7 '+size:''}</span>
+      <a class="btn" href="/media/${x.id}" download>Save</a>
+      <button class="btn danger" data-a="del" data-enc="${x.id}">Delete file</button>
+    </div>`;
+  }
   if(x.path){
     return `<div class="encbox">
       <audio id="audio-${x.id}" controls preload="none" src="/media/${x.id}"></audio>
@@ -793,8 +816,11 @@ function markPlayed(){
 }
 
 function play(e){
-  const enc=e.enclosures.find(x=>x.path);
-  if(!enc){ toast('Not downloaded yet',true); return; }
+  const enc=e.enclosures.find(isPlayable);
+  if(!enc){
+    toast(e.enclosures.some(x=>x.path) ? 'That file is not audio or video' : 'Not downloaded yet', true);
+    return;
+  }
   const resuming = player.guid===e.guid;
   if(!resuming){
     player.guid=e.guid; player.feed=e.feed_id; player.entry=e;