rays/ipx
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

One place to get an episode's file where you are (#457)

Browse Source 
Getting an episode onto a phone took two buttons in two states: download
it to the server, wait, then keep it on the device, beside Save to this
computer, Share and Delete, five buttons that did not say where each
copy went. Now a file has one button that brings it to where you are.
On a phone or in the iOS app it ends on the device; when iPX has not got
the file yet, iPX fetches it and the device's copy follows once iPX says
it is done (remembered in localStorage, so a page closed meanwhile
catches up when a list next shows the file). On a computer it has iPX
fetch the file, and with iPX's copy there saves one. A line beside the
size says where the file is, and the rarer actions, two of them
destructive, are under a menu.

isPlayable is false for any file not on iPX, so the phone's button is
decided by playsKind, the same test without the path. download_done now
marks the file as on iPX in what the page holds, so the open file's box
changes at once rather than after the list is fetched again.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RqkrVA8TdTxe556JB3sR1n
This commit is contained in:
Ray Slakinski
2026-11-13 18:40:49 +00:00
parent 47e093e313
commit 5ef01593d7
9 changed files with 201 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
web/src/items.ts
View File

@@ -129,6 +129,7 @@ function showList(r: ListPage, append: boolean, asked: number){
const back=append ? null : takeReopen();
if(back && !entries.some(e=>entryKey(e)===entryKey(back))) entries=[back,...entries];
S.entries = entries;
followWantedIn(entries);
renderEntries();
if(back){ const e=S.entries.find(x=>entryKey(x)===entryKey(back)); if(e) selectEntry(e); }
}
@@ -219,7 +220,10 @@ function epEl(e: Entry){
/// blog feeds put article images in enclosures, and an <audio> element pointed at a JPEG
/// is just a broken player.
function isPlayable(x: Enclosure|undefined){
if(!x || !x.path) return false;
return !!x && !!x.path && playsKind(x);
}
/// Whether a file is audio or video, wherever it is: one not downloaded yet too.
function playsKind(x: {mime?: string|null, path?: string|null, url?: string}){
const m=(x.mime||'').toLowerCase();
if(m.startsWith('audio/')||m.startsWith('video/')) return true;
if(m) return false;
@@ -467,59 +471,88 @@ function textOf(e: Entry){
return (e.description&&e.description.trim())||'<em>No show notes.</em>';
}
/// One enclosure: a play button when the file is here, otherwise what it is and a way to get it.
/// Where a file is, in the words its box says it in (#457): the publisher's alone, on its way to
/// iPX, on iPX, on this device as well.
function whereText(x: Enclosure){
const here=isKept(x), busy=keeping.has(keepUrl(x));
if(!x.path){
if(here) return 'On this device';
if(wanted.has(x.id)) return 'Downloading to iPX, then this device';
if(x.state==='pending') return 'Queued for iPX';
if(x.state==='error') return 'iPX could not download it';
return 'Publisher only';
}
return here ? 'On iPX and this device' : busy ? 'On iPX, downloading to this device' : 'On iPX';
}
/// Whether ⬇ ends on this device: a phone or the app, where the file is wanted in the hand, for a
/// file this device can play offline. A computer's ⬇ has iPX fetch it and saves a copy.
const toDevice=(x: Enclosure)=>canKeep() && playsKind(x)
&& (!!ipxHost || !!window.matchMedia?.('(max-width:820px)')?.matches);
/// One enclosure (#457): what it is, where it is, and one button that brings it to where you are.
/// Everything else, rarer and two of it destructive, is under ⋯.
function encBox(x: Enclosure){
const size=x.length?mb(x.length):'';
// One file serves everyone reading the feed, so deleting is not a private act.
const f=S.feeds.find(y=>y.id===x.feed_id);
const shared=f&&f.subscribers>1;
// Icons, with the words in the tooltip and for screen readers.
const delLabel=shared
? `Delete for everyone (shared with ${f.subscribers-1} other ${f.subscribers===2?'person':'people'} reading this feed)`
: 'Delete file';
const delBtn=`<button class="btn ico danger" data-a="del" data-enc="${x.id}" title="${delLabel}" aria-label="${delLabel}">${ICON.trash}</button>`;
const btn=(a: string, label: string, icon: string, extra='')=>
`<button class="btn ico" data-a="${a}" data-enc="${x.id}" title="${label}" aria-label="${label}"${extra}>${icon}</button>`;
// Played without its dead air, so saved without it too (#186).
const dead=(x.deadair??0)>0;
const saveLabel=dead?'Save to this computer, without its dead air':'Save to this computer';
const saveBtn=`<a class="btn ico" href="/media/${x.id}${dead?'/deadair':''}" download title="${saveLabel}" aria-label="${saveLabel}">${ICON.save}</a>`;
// The publisher's address, not this server's copy, which only someone signed in here can open.
const shareBtn=`<button class="btn ico" data-a="share" data-enc="${x.id}" title="Share the file" aria-label="Share the file">${ICON.share}</button>`;
if(x.path && !isPlayable(x)){
// On disk, but not audio or video: view it, keep it, or remove it -- no player.
return `<div class="encbox">
${kindIcon(x)}
<span class="meta" style="flex:1">${size}</span>
<a class="btn ico" href="/media/${x.id}" target="_blank" rel="noopener noreferrer" title="View in a new tab" aria-label="View in a new tab">${ICON.open}</a>
${saveBtn}
${shareBtn}
${delBtn}
</div>`;
}
if(x.path){
// One player, the bar at the bottom. This pane had an <audio> of its own, and playing it
// started the bar as well, so the same file played twice at once.
return `<div class="encbox">
${kindIcon(x)}
<span class="meta" style="flex:1">${size}</span>
<button class="btn ico" data-a="play" data-enc="${x.id}" title="Play" aria-label="Play">${ICON.play}</button>
${keepBtn(x)}
${saveBtn}
${shareBtn}
${delBtn}
</div>`;
}
// Nothing on disk. For an image or a PDF you usually just want to look at it, so link
// straight to the publisher's copy in a new tab -- no download, and nothing proxied
// through here, which would make ipx a fetch-anything relay.
const viewable = !!webUrl(x.url) && !isPlayable(x) && x.state !== 'pending' && x.state !== 'held';
let get='';
if(toDevice(x)){
const url=keepUrl(x);
get=isKept(x) ? btn('more', 'On this device. More', ICON.kept, ' aria-pressed="true"')
: keeping.has(url) ? btn('offline', 'Downloading to this device', ICON.download, ` data-url="${url}" aria-busy="true"`)
: wanted.has(x.id) ? btn('want', 'Downloading to iPX, then this device', ICON.download, ' aria-busy="true"')
: x.path ? btn('offline', 'Download to this device', ICON.download, ` data-url="${url}"`)
: btn('want', 'Download to this device', ICON.download);
}else if(x.path){
const label=dead?'Save a copy to this computer, without its dead air':'Save a copy to this computer';
get=`<a class="btn ico" href="/media/${x.id}${dead?'/deadair':''}" download title="${label}" aria-label="${label}">${ICON.download}</a>`;
}else if(x.state!=='pending') get=btn('get', 'Download to iPX', ICON.download);
// Nothing on disk, an image or a PDF: you usually just want to look at it, so the publisher's
// copy in a new tab, nothing proxied through here, which would make ipx a fetch-anything relay.
const view=x.path && !isPlayable(x) ? `/media/${x.id}`
: !x.path && !!webUrl(x.url) && !isPlayable(x) && x.state!=='pending' && x.state!=='held' ? x.url : '';
// One player, the bar at the bottom. This pane had an <audio> of its own, and playing it
// started the bar as well, so the same file played twice at once.
return `<div class="encbox">
${kindIcon(x)}
<span class="meta" style="flex:1">${size}</span>
${x.state==='error'&&x.last_error?`<span class="err">${esc(x.last_error)}</span>`:''}
${viewable?`<a class="btn ico" href="${esc(x.url)}" target="_blank" rel="noopener noreferrer" title="View in a new tab" aria-label="View in a new tab">${ICON.open}</a>`:''}
${shareBtn}
<button class="btn ico" data-a="get" data-enc="${x.id}" title="Download to the server" aria-label="Download to the server">${ICON.download}</button>
</div>`;
${kindIcon(x)}
<span class="meta" style="flex:1">${[size, whereText(x)].filter(Boolean).join(' · ')}</span>
${x.state==='error'&&x.last_error&&!x.path?`<span class="err">${esc(x.last_error)}</span>`:''}
${x.path&&isPlayable(x)?btn('play', 'Play', ICON.play):''}
${view?`<a class="btn ico" href="${esc(view)}" target="_blank" rel="noopener noreferrer" title="View in a new tab" aria-label="View in a new tab">${ICON.open}</a>`:''}
${get}
${/* The publisher's address, not this server's copy, which only someone signed in here can open. */''}
${btn('share', 'Share the file', ICON.share)}
${fileMenuItems(x).length?btn('more', 'More', ICON.more):''}
</div>`;
}
/// What ⋯ offers for a file: whatever its one button does not.
function fileMenuItems(x: Enclosure): [string, string, string][]{
const items: [string, string, string][]=[];
const device=toDevice(x);
if(isKept(x)) items.push(['offline', 'Remove from this device', '']);
else if(!device && canKeep() && isPlayable(x) && x.path && !keeping.has(keepUrl(x)))
items.push(['offline', 'Download to this device, to play offline', '']);
if(device && !x.path && x.state!=='pending' && !wanted.has(x.id)) items.push(['get', 'Download to iPX only', '']);
if(x.path){
// One file serves everyone reading the feed, so deleting is not a private act.
const f=S.feeds.find(y=>y.id===x.feed_id);
items.push(['del', f&&f.subscribers>1
? `Delete from iPX, for everyone (shared with ${f.subscribers-1} other ${f.subscribers===2?'person':'people'} reading this feed)`
: 'Delete from iPX', ' danger']);
}
return items;
}
function fileMenu(e: Entry, x: Enclosure){
openModal(`<button class="iconbtn cardx" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button>
<h3>${esc(entryName(e).text)}</h3><p class="hint">${esc(whereText(x))}</p>
<div class="sharemenu">${fileMenuItems(x).map(([a,label,cls])=>
`<button class="btn${cls}" data-m="${a}">${esc(label)}</button>`).join('')}</div>`);
$$<HTMLButtonElement>('#modalCard [data-m]').forEach(b=>b.onclick=()=>{ closeModal(); epAction(b.dataset.m!, e, null, x.id); });
}
/// A shared link that starts at a time (#447): ipx-play's page reads `?t=` in seconds. Under five
@@ -595,10 +628,15 @@ async function epAction(a: string, e: Entry, el: HTMLElement|null, encId?: numbe
if(a==='share') await shareEpisode(e, encId??null);
if(a==='flag'){ e.flagged=!e.flagged; await api(path+'/flags',{method:'POST',body:JSON.stringify({flagged:e.flagged})}); haptic('tap'); redraw(); }
if(a==='read'){ await setRead(e,!e.read); haptic(e.read?'done':'tap'); redraw(); }
if(a==='get'){
if(a==='more' && enc) fileMenu(e, enc);
if(a==='get' || a==='want'){
if(!enc) return;
await api(`/api/enclosures/${enc.id}/download`,{method:'POST'});
toast('Queued: '+entryName(e).text);
enc.state='pending';
// Wanted here too: the device's copy follows once iPX has the file (#457).
if(a==='want'){ want(enc.id, entryName(e).text); toast('Downloading: '+entryName(e).text+'. It comes to this device once iPX has it.'); }
else toast('Queued: '+entryName(e).text);
redraw();
}
if(a==='del'){
const f=S.feeds.find(x=>x.id===e.feed_id);