One place to get an episode's file where you are (#457)
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:
@@ -118,8 +118,9 @@ ok(audio.calls.includes('src:/media/99'), 'a video did not play on the element')
|
||||
|
||||
// Kept on the phone (#425): no service worker in a WebView, so the button is the app's to answer.
|
||||
const enc42 = { id: 42, deadair: 0, mime: 'audio/mpeg' };
|
||||
ok(String(vm.runInContext('keepBtn(X)', Object.assign(ctx, { X: enc42 }))).includes('data-a="offline"'),
|
||||
'no Keep button in the app, which has no service worker to keep a file');
|
||||
// ⬇ ends on the phone in the app, whatever the width (#457).
|
||||
ok(vm.runInContext('toDevice(X)', Object.assign(ctx, { X: enc42 })) === true,
|
||||
'in the app, a file\'s download button did not bring it to the phone, which has no service worker to keep it');
|
||||
since();
|
||||
await vm.runInContext('toggleKept(X, "Episode One")', ctx);
|
||||
ok(last('keep')?.url === '/media/42', 'Keep did not ask the app for the file');
|
||||
|
||||
@@ -352,3 +352,19 @@ test('a Patreon feed or file carries your access, a post page does not (#455)',
|
||||
assert.equal(carries('https://www.patreon.com/glasscannon/posts/music-from-room-174604106'), false);
|
||||
assert.equal(carries('https://example.com/ep.mp3'), false);
|
||||
});
|
||||
|
||||
test('a file\'s box says where it is: the publisher, on its way, iPX, this device (#457)', () => {
|
||||
const where = (x: object) => run(`whereText(${JSON.stringify({ id: 7, deadair: 0, path: null, state: 'held', ...x })})`) as string;
|
||||
assert.equal(where({}), 'Publisher only');
|
||||
assert.equal(where({ state: 'pending' }), 'Queued for iPX');
|
||||
assert.equal(where({ state: 'error' }), 'iPX could not download it');
|
||||
run(`want(7, 'Ep')`);
|
||||
assert.equal(where({ state: 'pending' }), 'Downloading to iPX, then this device');
|
||||
run('unwant(7)');
|
||||
assert.equal(where({ path: '/d/ep.mp3', state: 'done' }), 'On iPX');
|
||||
run(`kept.add('/media/7')`);
|
||||
assert.equal(where({ path: '/d/ep.mp3', state: 'done' }), 'On iPX and this device');
|
||||
// iPX let its copy go; the one here stays.
|
||||
assert.equal(where({ state: 'reaped' }), 'On this device');
|
||||
run('kept.clear()');
|
||||
});
|
||||
|
||||
@@ -297,7 +297,7 @@ test('the three panes are there and the item text lands in the bottom one', asyn
|
||||
const downloaded = page.locator('.ep', { has: page.locator('.kind.here') }).first();
|
||||
await downloaded.click();
|
||||
await expect(page.locator('#files [data-a="play"]')).toBeVisible();
|
||||
await expect(page.locator('#files .encbox [title="Save to this computer"]')).toBeVisible();
|
||||
await expect(page.locator('#files .encbox [title="Save a copy to this computer"]')).toBeVisible();
|
||||
|
||||
// Selecting another item replaces the pane rather than stacking.
|
||||
await page.locator('.ep', { hasText: 'First Episode' }).click();
|
||||
@@ -349,7 +349,7 @@ test('a downloaded file that is not audio gets no player', async ({ page }) => {
|
||||
// What it is and that it is here: one icon, green, with the words in its tooltip.
|
||||
await expect(page.locator('#files .encbox .kind.here')).toHaveAttribute('title', 'image, downloaded');
|
||||
// Still offered as a file, just not as an episode: viewable and keepable.
|
||||
await expect(page.locator('#files [title="Save to this computer"]')).toBeVisible();
|
||||
await expect(page.locator('#files [title="Save a copy to this computer"]')).toBeVisible();
|
||||
const view = page.locator('#files a[title="View in a new tab"]');
|
||||
await expect(view).toHaveAttribute('target', '_blank');
|
||||
await expect(view).toHaveAttribute('rel', /noopener/);
|
||||
@@ -860,9 +860,10 @@ test('deleting a shared file warns that it is everyone\'s copy', async ({ page }
|
||||
await expect(row).toBeVisible({ timeout: 20_000 });
|
||||
await row.click();
|
||||
|
||||
// An icon now; what it does, and to whom, is in its tooltip.
|
||||
const del = page.locator('#files button[data-a="del"]');
|
||||
await expect(del).toHaveAttribute('title', /^Delete for everyone \(shared with 1 other person/);
|
||||
// Under the file's menu (#457), saying what it does, and to whom.
|
||||
await page.locator('#files .encbox [data-a="more"]').last().click();
|
||||
const del = page.locator('#modalCard [data-m="del"]');
|
||||
await expect(del).toHaveText(/^Delete from iPX, for everyone \(shared with 1 other person/);
|
||||
|
||||
// Two prompts: the page's own, then the server's, because someone else has not played
|
||||
// it. Accept the first, decline the second, and the file must survive.
|
||||
@@ -1345,7 +1346,7 @@ test('a download by hand fills its bar and names its file, and only on its own s
|
||||
const slow = page.locator('.ep', { hasText: 'Slow episode' });
|
||||
await expect(slow).toBeVisible({ timeout: 20_000 });
|
||||
await slow.click();
|
||||
await page.locator('#files button[title="Download to the server"]').click();
|
||||
await page.locator('#files button[title="Download to iPX"]').click();
|
||||
await expect(slow.locator('.dlbar.live')).toBeAttached({ timeout: 10_000 });
|
||||
await expect(page.locator('#count')).toContainText(/downloading .+ — \d+%/);
|
||||
await expect(page.locator('.toast', { hasText: /^Downloaded .+\.mp3/ })).toBeVisible({ timeout: 20_000 });
|
||||
@@ -1358,7 +1359,7 @@ test('a download by hand fills its bar and names its file, and only on its own s
|
||||
// A download that fails says which item, and what to do (#304).
|
||||
const broken = page.locator('.ep', { hasText: 'Broken episode' });
|
||||
await broken.click();
|
||||
await page.locator('#files button[title="Download to the server"]').click();
|
||||
await page.locator('#files button[title="Download to iPX"]').click();
|
||||
await expect(page.locator('.toast', { hasText: 'Unable to download "Broken episode". Try again with its download button.' }))
|
||||
.toBeVisible({ timeout: 20_000 });
|
||||
await expect(broken.locator('.dlbar.live')).toHaveCount(0);
|
||||
@@ -1499,14 +1500,16 @@ test('a deleted file looks as if it was never downloaded', async ({ page }) => {
|
||||
const row = page.locator('.ep', { hasText: 'An Article' });
|
||||
await expect(row).toBeVisible({ timeout: 20_000 });
|
||||
await row.click();
|
||||
await page.locator('#files button[data-a="del"]').click();
|
||||
await page.locator('#files .encbox [data-a="more"]').last().click();
|
||||
await page.locator('#modalCard [data-m="del"]').click();
|
||||
|
||||
// No "reaped", no chip at all: just the way to get it again.
|
||||
await expect(row.locator('.kind.here')).toHaveCount(0);
|
||||
await expect(row).not.toContainText(/reaped/i);
|
||||
await row.click();
|
||||
await expect(page.locator('#files')).not.toContainText(/reaped/i);
|
||||
await expect(page.locator('#files button[title="Download to the server"]')).toBeVisible();
|
||||
await expect(page.locator('#files button[title="Download to iPX"]')).toBeVisible();
|
||||
await expect(page.locator('#files .encbox .meta')).toContainText('Publisher only');
|
||||
});
|
||||
|
||||
test('one action, one icon: the toolbar, the page and every dialog agree', async ({ page }) => {
|
||||
@@ -1923,7 +1926,8 @@ test.describe('on a phone', () => {
|
||||
await page.locator('.feed', { hasText: 'Test Show' }).click();
|
||||
await page.locator('.tabs button', { hasText: 'Downloaded' }).first().click();
|
||||
await page.locator('.ep').first().click();
|
||||
const del = page.locator('#detail [data-a="del"]');
|
||||
// Delete is under the file's menu (#457), which sits above the notes.
|
||||
const del = page.locator('#detail .encbox [data-a="more"]').first();
|
||||
await expect(del).toBeInViewport();
|
||||
// Below a long set of notes it was screens down and looked missing (issue #21).
|
||||
expect(await page.locator('#detail').evaluate(d =>
|
||||
@@ -2130,6 +2134,31 @@ test.describe('an item with no files, on a phone', () => {
|
||||
await expect(page.locator('#detail')).not.toContainText('No files');
|
||||
});
|
||||
|
||||
test('one press of a file\'s button brings it from the publisher, through iPX, to the phone (#457)', async ({ page }) => {
|
||||
// A file iPX does not have: Test Show's downloaded one, deleted first, so the test owns it.
|
||||
const enc = await page.evaluate(async () => {
|
||||
const list = await api('/api/feeds/test-show/entries?filter=all') as ListPage;
|
||||
const x = list.entries.flatMap(e => e.enclosures).find(x => x.path && playsKind(x))!;
|
||||
await api(`/api/enclosures/${x.id}?force=true`, { method: 'DELETE' });
|
||||
return x.id;
|
||||
});
|
||||
await page.locator('#burger').click();
|
||||
await page.locator('.feed', { hasText: 'Test Show' }).click();
|
||||
await page.locator('.tabs button', { hasText: 'All' }).first().click();
|
||||
// The row of a file not on iPX carries its download bar, by the file's id.
|
||||
await page.locator('.ep').filter({ has: page.locator(`.dlbar[data-bar="${enc}"]`) }).click();
|
||||
const box = page.locator('#detail .encbox');
|
||||
await expect(box.locator('.meta')).toContainText('Publisher only');
|
||||
await box.locator('[data-a="want"]').click();
|
||||
await expect(box.locator('.meta')).toHaveText(/On iPX and this device$/, { timeout: 20_000 });
|
||||
await expect(box.locator('[data-a="more"][aria-pressed="true"]')).toBeVisible();
|
||||
expect(await page.evaluate(() => localStorage.getItem('ipx.wanted'))).toBe('[]');
|
||||
// Taken off the phone from its menu; iPX keeps its copy.
|
||||
await box.locator('[data-a="more"][aria-pressed="true"]').click();
|
||||
await page.locator('#modalCard [data-m="offline"]').click();
|
||||
await expect(box.locator('.meta')).toHaveText(/On iPX$/);
|
||||
});
|
||||
|
||||
test('back and the item\'s actions stay at hand anywhere in a long post (#456)', async ({ page }) => {
|
||||
await page.locator('#burger').click();
|
||||
await page.locator('#feedlist .place', { hasText: 'All Subscriptions' }).click();
|
||||
@@ -2585,9 +2614,10 @@ test('a downloaded file\'s buttons sit on one row in the files pane', async ({ p
|
||||
await expect(page.locator('.ep').first()).toBeVisible();
|
||||
await page.evaluate(() => showDetail(S.entries.find(e => e.enclosures.some(x => x.path)) ?? null));
|
||||
const box = page.locator('#files .encbox').first();
|
||||
await expect(box.locator('.btn')).toHaveCount(5);
|
||||
// Play, the one button that brings it here, share, and the rest under ⋯ (#457).
|
||||
await expect(box.locator('.btn')).toHaveCount(4);
|
||||
const tops = await box.locator('.btn').evaluateAll(bs => bs.map(b => Math.round(b.getBoundingClientRect().top)));
|
||||
expect(new Set(tops).size, 'play, keep, save, share and delete wrapped onto two rows').toBe(1);
|
||||
expect(new Set(tops).size, 'play, save, share and more wrapped onto two rows').toBe(1);
|
||||
// And on a phone, where the pane is the whole width (#412 added keep).
|
||||
await page.setViewportSize({ width: 375, height: 800 });
|
||||
const phone = await box.locator('.btn').evaluateAll(bs => bs.map(b => Math.round(b.getBoundingClientRect().top)));
|
||||
|
||||
@@ -146,12 +146,17 @@ test('an episode kept on the device plays from it offline, and its place waits t
|
||||
await page.locator('.ep', { hasText: 'Listen on a Plane' }).click();
|
||||
};
|
||||
await open();
|
||||
const keep = page.locator('#files [data-a="offline"]');
|
||||
// Kept by its menu on a computer; the line in its box says where it is (#457).
|
||||
const where = page.locator('#files .encbox .meta');
|
||||
const menu = async (m: string) => {
|
||||
await page.locator('#files .encbox [data-a="more"]').last().click();
|
||||
await page.locator(`#modalCard [data-m="${m}"]`).click();
|
||||
};
|
||||
const row = page.locator('.ep', { hasText: 'Listen on a Plane' });
|
||||
await expect(keep).toHaveAttribute('aria-pressed', 'false');
|
||||
await expect(where).toHaveText(/On iPX$/);
|
||||
await expect(row.locator('.kept')).toHaveCount(0);
|
||||
await keep.click();
|
||||
await expect(keep).toHaveAttribute('aria-pressed', 'true', { timeout: 15_000 });
|
||||
await menu('offline');
|
||||
await expect(where).toHaveText(/On iPX and this device$/, { timeout: 15_000 });
|
||||
expect(await cacheSize(page, 'ipx-episodes')).toBe(1);
|
||||
// Its row in the list says so too (#413).
|
||||
await expect(row.locator('.kept')).toHaveText('On this device');
|
||||
@@ -160,7 +165,7 @@ test('an episode kept on the device plays from it offline, and its place waits t
|
||||
await page.reload();
|
||||
await open();
|
||||
// Still kept, as the page reads it from the cache at start.
|
||||
await expect(keep).toHaveAttribute('aria-pressed', 'true');
|
||||
await expect(where).toHaveText(/On iPX and this device$/);
|
||||
await expect(row.locator('.kept')).toBeVisible();
|
||||
await page.locator('#files [data-a="play"]').click();
|
||||
await expect.poll(() => page.evaluate(() => audio.currentTime), { timeout: 15_000 }).toBeGreaterThan(0.3);
|
||||
@@ -180,8 +185,8 @@ test('an episode kept on the device plays from it offline, and its place waits t
|
||||
expect((await call(page, `/api/entries/${encodeURIComponent(id)}/offline-ep-1`)).position).toBeGreaterThanOrEqual(0);
|
||||
|
||||
// Taken off the device again.
|
||||
await keep.click();
|
||||
await expect(keep).toHaveAttribute('aria-pressed', 'false');
|
||||
await menu('offline');
|
||||
await expect(where).toHaveText(/On iPX$/);
|
||||
expect(await cacheSize(page, 'ipx-episodes')).toBe(0);
|
||||
await expect(row.locator('.kept')).toHaveCount(0);
|
||||
});
|
||||
|
||||
@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
### Changed
|
||||
|
||||
- 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, with iPX fetching it first when it has not got it, and on a computer iPX fetches it and the button then saves a copy. A line beside the file's size says where it is (publisher only, queued for iPX, on iPX, on this device), and the rarer actions (remove from this device, delete from iPX, download to iPX only) are under ⋯ (#457).
|
||||
- The admin page is laid out as a feed's settings are: each tab in named parts, numbers with their unit beside them, switches for on and off, Server's Save always in reach, and on a phone the tabs in a row of their own so all four fit (#414).
|
||||
- An item's title and text take four fifths of the reading pane's width, no longer running to its far edge (#360).
|
||||
|
||||
|
||||
@@ -38,6 +38,11 @@ function connect(){
|
||||
// Said only for a file on screen, as one downloaded by hand is: the scheduled downloads of
|
||||
// everyone's feeds used to announce themselves to everyone.
|
||||
if(bar){ bar.classList.remove('live'); toast('Downloaded '+ev.path.split('/').pop()); }
|
||||
// On iPX now, in what this page holds too, so the open file's box says so at once rather
|
||||
// than after the list comes again; and, asked for on this device, its copy here follows (#457).
|
||||
for(const e of S.entries) for(const x of e.enclosures) if(x.id===ev.enclosure){ x.path=ev.path; x.state='done'; }
|
||||
if(wanted.has(ev.enclosure)) followWanted({id: ev.enclosure, path: ev.path});
|
||||
else syncKeepButtons();
|
||||
refreshEntries();
|
||||
}
|
||||
// A copy finished: the episode's "Cutting dead air…" becomes how much shorter it is.
|
||||
@@ -50,6 +55,7 @@ function connect(){
|
||||
else if(ev.ev==='download_error'){
|
||||
const bar=document.querySelector(`.dlbar[data-bar="${ev.enclosure}"]`);
|
||||
if(bar) bar.classList.remove('live');
|
||||
unwant(ev.enclosure);
|
||||
// Which item, and what to do: the reason (ev.msg) is in the daemon's log (#304).
|
||||
const e=S.entries.find(x=>x.enclosures.some(n=>n.id===ev.enclosure));
|
||||
toast(`Unable to download ${e?`"${entryName(e).text}"`:'a file'}. Try again with its download button.`,true); refreshEntries();
|
||||
|
||||
130
web/src/items.ts
130
web/src/items.ts
@@ -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){
|
||||
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>
|
||||
<button class="btn ico" data-a="play" data-enc="${x.id}" title="Play" aria-label="Play">${ICON.play}</button>
|
||||
${keepBtn(x)}
|
||||
${saveBtn}
|
||||
${shareBtn}
|
||||
${delBtn}
|
||||
<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']);
|
||||
}
|
||||
// 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';
|
||||
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>`;
|
||||
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);
|
||||
|
||||
@@ -46,24 +46,41 @@ if(worker) (async()=>{
|
||||
try{ for(const k of await (await caches.open(KEPT)).keys()) kept.add(new URL(k.url).pathname); }catch{}
|
||||
if(kept.size) syncKeepButtons();
|
||||
})();
|
||||
/// The open item's files say where each is, and its button what it does next (#457): drawn again
|
||||
/// in place, keeping the reader where it was.
|
||||
function syncKeepButtons(){
|
||||
document.querySelectorAll<HTMLButtonElement>('[data-a="offline"]').forEach(b=>{
|
||||
const k=kept.has(b.dataset.url!);
|
||||
b.setAttribute('aria-pressed',String(k));
|
||||
b.setAttribute('aria-busy',String(keeping.has(b.dataset.url!)));
|
||||
b.innerHTML=k?ICON.kept:ICON.keep;
|
||||
const label=k?'Kept on this device to play offline. Remove it':'Keep on this device to play offline';
|
||||
b.title=label; b.setAttribute('aria-label',label);
|
||||
}); // A row says whether its item is kept; redrawn only where that has changed.
|
||||
const e=cur();
|
||||
if(e && $('#files .encbox, #detail .encbox')){
|
||||
const box=$('#detail'), top=box?.scrollTop??0;
|
||||
showDetail(e);
|
||||
if(box) box.scrollTop=top;
|
||||
}
|
||||
// A row says whether its item is kept; redrawn only where that has changed.
|
||||
for(const e of S.entries)
|
||||
if(e.enclosures.some(isKept)!==!!$(`#eps .ep[data-key="${CSS.escape(entryKey(e))}"] .kept`)) swapRow(e);
|
||||
}
|
||||
/// The button for a file on the server that plays; none without a worker, or an app, to play it
|
||||
/// offline.
|
||||
function keepBtn(x: Enclosure){
|
||||
if(!worker&&!ipxHost) return '';
|
||||
const k=isKept(x), label=k?'Kept on this device to play offline. Remove it':'Keep on this device to play offline';
|
||||
return `<button class="btn ico" data-a="offline" data-enc="${x.id}" data-url="${keepUrl(x)}" aria-pressed="${k}" aria-busy="${keeping.has(keepUrl(x))}" title="${label}" aria-label="${label}">${k?ICON.kept:ICON.keep}</button>`;
|
||||
/// Whether this device can keep a file to play offline: a worker to keep it, or the app.
|
||||
const canKeep=()=>!!worker||!!ipxHost;
|
||||
/* Files asked for on this device before iPX had them (#457): iPX fetches each, and its copy here
|
||||
follows once iPX says it is done, or, when the page was closed meanwhile, the next time a list
|
||||
shows it with its file. Kept in localStorage, so a closed app still remembers. */
|
||||
const wanted=new Map<number,string>();
|
||||
try{ for(const [id,name] of JSON.parse(localStorage.getItem('ipx.wanted')||'[]') as [number,string][]) wanted.set(id,name); }catch{}
|
||||
function saveWanted(){ try{ localStorage.setItem('ipx.wanted',JSON.stringify([...wanted])); }catch{} }
|
||||
function want(id: number, name: string){ wanted.set(id,name); saveWanted(); }
|
||||
function unwant(id: number){ if(wanted.delete(id)) saveWanted(); }
|
||||
/// iPX has the file now: this device's copy follows. The copy without dead air comes later, if it
|
||||
/// does, so the file itself is what is kept.
|
||||
function followWanted(x: {id: number, path?: string|null, deadair?: number|null}){
|
||||
const name=wanted.get(x.id);
|
||||
if(name==null || !x.path) return;
|
||||
unwant(x.id);
|
||||
if(!isKept(x)) void toggleKept(x as Enclosure, name);
|
||||
}
|
||||
/// Those of `entries` iPX fetched while this page was not looking.
|
||||
function followWantedIn(entries: Entry[]){
|
||||
if(!wanted.size) return;
|
||||
for(const e of entries) for(const x of e.enclosures) if(x.path && wanted.has(x.id)) followWanted(x);
|
||||
}
|
||||
async function toggleKept(x: Enclosure, name: string){
|
||||
const url=keepUrl(x);
|
||||
|
||||
@@ -28,6 +28,7 @@ const fa=(box: string,body: string)=>`<svg class="i" viewBox="${box}" aria-hidde
|
||||
/// An app-icon tile (web/signals.svg, deadair-on.svg, ...) in the mode's own variant, as the logo is.
|
||||
const tile=(name: string)=>`<img class="tile onlight" src="/${name}.svg" alt=""><img class="tile ondark" src="/${name}-dark.svg" alt="">`;
|
||||
const ICON: Record<string,string>={
|
||||
more:fa('0 0 448 512','<path fill="currentColor" d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/>'), // solid/ellipsis, for a file's other actions (#457)
|
||||
share:fa('0 0 512 512','<path fill="currentColor" d="M384 192c53 0 96-43 96-96s-43-96-96-96-96 43-96 96c0 5.4 .5 10.8 1.3 16L159.6 184.1c-16.9-15-39.2-24.1-63.6-24.1-53 0-96 43-96 96s43 96 96 96c24.4 0 46.6-9.1 63.6-24.1L289.3 400c-.9 5.2-1.3 10.5-1.3 16 0 53 43 96 96 96s96-43 96-96-43-96-96-96c-24.4 0-46.6 9.1-63.6 24.1L190.7 272c.9-5.2 1.3-10.5 1.3-16s-.5-10.8-1.3-16l129.7-72.1c16.9 15 39.2 24.1 63.6 24.1z"/>'), // solid/share-nodes
|
||||
plus:fa('0 0 448 512','<path fill="currentColor" d="M256 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0 0-160z"/>'), // solid/plus
|
||||
circleMinus:fa('0 0 512 512','<path fill="currentColor" d="M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM184 232l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/>'), // solid/circle-minus, for Unsubscribe
|
||||
|
||||
Reference in New Issue
Block a user