rays
9c16408d04
- users.theme and users.theme_mode, added by migrate(); GET /api/me returns them and PATCH /api/me saves them, refusing anything but a plain name and light/dark/auto, since index() writes them into the page's <html> tag. - The page arrives with data-theme and data-choice already on <html> (and data-mode unless Auto), so it is drawn in the account's theme from the start. - A theme a browser kept in localStorage goes up to the account once, the first time an account with none loads the page. - Saves go one at a time, each with the choice as it stands: sent all at once, a quick run through the list could land out of order and keep a theme passed on the way. The browser test caught it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
601 lines
33 KiB
TypeScript
601 lines
33 KiB
TypeScript
/* ---------------- modals ---------------- */
|
|
function openModal(html: string, wide?: boolean){
|
|
$('#modalCard').innerHTML=html;
|
|
$('#modalCard').classList.toggle('wide',!!wide);
|
|
$('#modal').classList.add('on');
|
|
}
|
|
function closeModal(){
|
|
$('#modal').classList.remove('on');
|
|
if(logTimer){ clearInterval(logTimer); logTimer=null; }
|
|
}
|
|
|
|
/* ---------------- log view ---------------- */
|
|
let logTimer=null, logSeq=0, logLines=[], logFilter='', logLevel='', logTab='all';
|
|
// Which sources belong to each tab. "daemon" is the control protocol itself: every
|
|
// command in and every event out, whatever sent it.
|
|
const LOG_TABS={
|
|
all: null,
|
|
daemon: t=>t==='ipx::io',
|
|
scan: t=>t==='ipx::scan',
|
|
web: t=>t==='ipx::http',
|
|
};
|
|
const LEVELS={ERROR:3,WARN:2,INFO:1,DEBUG:0,TRACE:0};
|
|
|
|
function logsModal(){
|
|
logSeq=0; logLines=[];
|
|
openModal(`<h3>Log</h3>
|
|
<div class="logbar">
|
|
<div class="tabs" id="logtabs">
|
|
${Object.keys(LOG_TABS).map(t=>
|
|
`<button data-t="${t}" class="${logTab===t?'on':''}">${
|
|
{all:'All',daemon:'Daemon I/O',scan:'Scans',web:'HTTP'}[t]}</button>`).join('')}
|
|
</div>
|
|
<select id="loglevel" style="width:auto">
|
|
<option value="">All levels</option>
|
|
<option value="INFO">Info and above</option>
|
|
<option value="WARN">Warnings and errors</option>
|
|
<option value="ERROR">Errors only</option>
|
|
</select>
|
|
<input type="search" id="logq" class="grow" placeholder="Filter…">
|
|
<label class="check" style="margin:0"><input type="checkbox" id="logfollow" checked> Follow</label>
|
|
<button class="btn ico" id="logcopy" title="Copy what is showing" aria-label="Copy what is showing">${ICON.copy}</button>
|
|
<button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button>
|
|
</div>
|
|
<div id="logbox"><p class="empty">Loading…</p></div>
|
|
<span class="hint"><b>Daemon I/O</b> is the control protocol itself — every command in and
|
|
every event out. <b>Scans</b> is feed and download activity, <b>HTTP</b> is web requests.
|
|
The buffer keeps debug detail even when the terminal does not; <b>IPX_UI_LOG</b> changes
|
|
what it captures.</span>`, true);
|
|
|
|
$$('#logtabs button').forEach(b=>b.onclick=()=>{
|
|
logTab=b.dataset.t;
|
|
$$('#logtabs button').forEach(x=>x.classList.toggle('on',x.dataset.t===logTab));
|
|
drawLog();
|
|
});
|
|
$('#loglevel').onchange=e=>{ logLevel=e.target.value; drawLog(); };
|
|
$('#logq').oninput=e=>{ logFilter=e.target.value.toLowerCase(); drawLog(); };
|
|
$('#logcopy').onclick=()=>copyText(visibleLog().map(l=>
|
|
`${new Date(l.ts*1000).toISOString()} ${l.level} ${l.target} ${l.msg}`).join('\n'), $('#logcopy'));
|
|
|
|
pollLog();
|
|
logTimer=setInterval(pollLog,2000);
|
|
}
|
|
|
|
async function pollLog(){
|
|
try{
|
|
const r=await api(`/api/logs?after=${logSeq}&limit=500`);
|
|
if(r.lines.length){
|
|
logLines=logLines.concat(r.lines).slice(-2000);
|
|
logSeq=r.latest;
|
|
drawLog();
|
|
}else if(!logLines.length){ drawLog(); }
|
|
}catch(e){
|
|
const box=$('#logbox');
|
|
if(box) box.innerHTML=`<p class="empty">Lost contact with the daemon: ${esc(e.message)}</p>`;
|
|
}
|
|
}
|
|
function visibleLog(){
|
|
const min=logLevel?LEVELS[logLevel]:-1;
|
|
const tab=LOG_TABS[logTab];
|
|
return logLines.filter(l=>
|
|
(!tab || tab(l.target)) &&
|
|
(LEVELS[l.level]??1)>=min &&
|
|
(!logFilter || (l.msg+' '+l.target).toLowerCase().includes(logFilter)));
|
|
}
|
|
function drawLog(){
|
|
const box=$('#logbox'); if(!box) return;
|
|
const follow=$('#logfollow')?.checked;
|
|
const rows=visibleLog();
|
|
box.innerHTML = rows.length ? rows.map(l=>{
|
|
const t=new Date(l.ts*1000).toLocaleTimeString();
|
|
if(logTab==='daemon'){
|
|
const out=l.msg.startsWith('<-');
|
|
return `<div class="l"><time>${t}</time>`+
|
|
`<span class="lv" style="color:${out?'var(--good)':'var(--accent)'}">${out?'out':'in'}</span>`+
|
|
`<span>${esc(l.msg.replace(/^[<-]+\s*/,''))}</span></div>`;
|
|
}
|
|
return `<div class="l"><time>${t}</time><span class="lv ${esc(l.level)}">${esc(l.level)}</span>`+
|
|
`<span class="tg">${esc(l.target.replace(/^ipx::?/,''))}</span><span>${esc(l.msg)}</span></div>`;
|
|
}).join('') : '<p class="empty">Nothing matches.</p>';
|
|
if(follow) box.scrollTop=box.scrollHeight;
|
|
}
|
|
$('#modal').onclick=e=>{ if(e.target.id==='modal') closeModal(); };
|
|
|
|
$('#addFeed').onclick=()=>{
|
|
openModal(`<h3>Add a feed</h3>
|
|
<div class="field"><label>Feed URL</label><input type="text" id="nurl" placeholder="https://example.com/rss">
|
|
<span class="hint">A Patreon token on its own adds every show from that creator.</span></div>
|
|
<div class="field"><label>Folder (optional)</label><input type="text" id="nfolder" placeholder="Defaults to the feed title"></div>
|
|
<div class="field"><label>Keywords (optional, comma separated)</label>
|
|
<input type="text" id="nkw"><span class="hint">Only items matching a keyword are downloaded.</span></div>
|
|
<label class="check"><input type="checkbox" id="nexp"> Allow items marked explicit</label>
|
|
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
|
|
<button class="btn ico primary" id="nsave" title="Add feed" aria-label="Add feed">${ICON.plus}</button></div>`);
|
|
$('#nurl').focus();
|
|
$('#nsave').onclick=async()=>{
|
|
const url=$('#nurl').value.trim(); if(!url) return;
|
|
$('#nsave').disabled=true; $('#nsave').title='Adding…';
|
|
try{
|
|
const r=await api('/api/feeds',{method:'POST',body:JSON.stringify({
|
|
url, folder:$('#nfolder').value.trim()||null, allow_explicit:$('#nexp').checked,
|
|
keywords:$('#nkw').value.split(',').map(s=>s.trim()).filter(Boolean)})});
|
|
closeModal(); toast(r.existing?`Already subscribed as ${r.id}`:`Added ${r.id}`);
|
|
await loadFeeds(true); selectFeed(r.id);
|
|
}catch(e){ toast(e.message,true); $('#nsave').title='Add feed'; $('#nsave').disabled=false; }
|
|
};
|
|
};
|
|
|
|
// What everyone here reads, you included, as a place to start. The rows carry an id, never a
|
|
// URL, so a key in someone's feed address never reaches this page.
|
|
const NONE_LISTED='<p class="hint">Nothing yet. Feeds people here subscribe to show up here.</p>';
|
|
async function listFeeds(url,box){
|
|
let rows=[];
|
|
try{ rows=await api(url)||[]; }catch{}
|
|
box.innerHTML=rows.length?'':NONE_LISTED;
|
|
for(const p of rows) box.appendChild(listedFeed(p,'childrow'));
|
|
return rows.length;
|
|
}
|
|
|
|
/// One listed feed: a row in Popular and the Add a feed dialog, a tile in Directory's grid. The
|
|
/// parts are the same either way; the class lays them out.
|
|
function listedFeed(p,cls){
|
|
const el=document.createElement('div');
|
|
el.className=cls;
|
|
el.innerHTML=artHTML(p.image,p.title||p.id)+
|
|
`<div class="txt"><b>${esc(p.title||p.id)}</b>`+
|
|
`<small class="meta">${p.subscribers} subscriber${p.subscribers===1?'':'s'}</small></div>`+
|
|
// Green, as a downloaded file is: it is already yours. Plus, beside it, is the way to get one.
|
|
(p.subscribed?`<span class="subbed" title="Subscribed: click to open it" aria-label="Subscribed">${ICON.subbed}</span>`
|
|
:`<button class="btn ico" data-a="sub" title="Subscribe" aria-label="Subscribe">${ICON.subbed}</button>`);
|
|
// Yours already: the row opens it instead.
|
|
if(p.subscribed){ el.onclick=()=>{ closeModal(); selectFeed(p.id); }; return el; }
|
|
$('[data-a="sub"]',el).onclick=async()=>{
|
|
try{
|
|
await api(`/api/popular/${encodeURIComponent(p.id)}`,{method:'POST'});
|
|
closeModal(); toast(`Subscribed to ${p.title||p.id}`);
|
|
await loadFeeds(true); selectFeed(p.id);
|
|
}catch(e){ toast(e.message,true); }
|
|
};
|
|
return el;
|
|
}
|
|
|
|
// Directory's filters. Kept out here because a finished scan redraws the pane, which would
|
|
// otherwise clear them.
|
|
let dirKind='All', dirCat=null;
|
|
const KINDS={All:()=>true,Podcasts:p=>p.podcast,Blogs:p=>!p.podcast};
|
|
/// Directory: every listed feed as its cover art, under two filters that combine: what a feed is
|
|
/// (Podcasts, anything with audio or video, or Blogs, the rest) and what it is about (its iTunes
|
|
/// category, as chips). Both filter in place, without asking the server again.
|
|
async function renderDirectory(url,box){
|
|
let rows=[];
|
|
try{ rows=await api(url)||[]; }catch{}
|
|
if(!rows.length){ box.innerHTML=NONE_LISTED; return 0; }
|
|
const bar=$('#dirbar');
|
|
// Only a filter when the server has both kinds.
|
|
const both=rows.some(KINDS.Podcasts)&&rows.some(KINDS.Blogs);
|
|
const btn=(k,v,on)=>`<button type="button" data-${k}="${esc(v)}" class="${on?'on':''}" aria-pressed="${on}">${esc(v)}</button>`;
|
|
const draw=()=>{
|
|
if(!both) dirKind='All';
|
|
const ofKind=rows.filter(KINDS[dirKind]);
|
|
// No empty chips: only the categories among the feeds the kind lets through.
|
|
const cats=[...new Set(ofKind.map(p=>p.category).filter(Boolean))].sort();
|
|
if(!cats.includes(dirCat)) dirCat=null;
|
|
bar.innerHTML=
|
|
(both?`<div class="tabs" role="group" aria-label="Kind">${Object.keys(KINDS).map(k=>btn('kind',k,k===dirKind)).join('')}</div>`:'')+
|
|
(cats.length?`<div class="chips" role="group" aria-label="Category">${cats.map(c=>btn('cat',c,c===dirCat)).join('')}</div>`:'');
|
|
// A picked chip lifts on a second press. Everything is redrawn, so the keyboard goes back to
|
|
// the button just pressed.
|
|
for(const b of $$('button',bar)) b.onclick=()=>{
|
|
const k=b.dataset.kind!=null?'kind':'cat', v=b.dataset[k];
|
|
if(k==='kind') dirKind=v; else dirCat=dirCat===v?null:v;
|
|
draw(); $(`[data-${k}="${CSS.escape(v)}"]`,bar)?.focus();
|
|
};
|
|
box.innerHTML='';
|
|
for(const p of ofKind.filter(p=>!dirCat||p.category===dirCat)) box.appendChild(listedFeed(p,'tile'));
|
|
};
|
|
draw();
|
|
return rows.length;
|
|
}
|
|
|
|
/// Directory and Popular open in the main pane, as the original's Directory did.
|
|
async function renderListed(v){
|
|
const box=$('#content');
|
|
box.classList.add('plain');
|
|
$('#tbRemove').disabled=true;
|
|
syncTools(null);
|
|
$('#epSearch').placeholder='Search items…';
|
|
const listening=v===VIEWS[':listening'], grid=v===VIEWS[':directory'];
|
|
box.innerHTML=`
|
|
<div class="fhead slim">
|
|
<div class="art">${v.icon}</div>
|
|
<div class="meta"><h2>${v.title}</h2>
|
|
<div class="sub">${v.blurb}${listening?'':' Everyone counts, you included. Private feeds are never listed.'}</div></div>
|
|
</div>
|
|
${grid?'<div class="dirbar" id="dirbar"></div>':''}
|
|
<div class="${grid?'tiles':'childlist'}" id="${listening?'listening':'popular'}"><p class="hint">Loading…</p></div>`;
|
|
$('#count').textContent=v.title;
|
|
const n=await (listening?renderListening:grid?renderDirectory:listFeeds)(v.url,$(listening?'#listening':'#popular',box));
|
|
if(VIEWS[S.feed]===v) $('#count').textContent=`${v.title}: ${plural(n,listening?'episode':'feed')}`;
|
|
}
|
|
|
|
/// Currently Listening: episodes you started and have not finished, across every feed you
|
|
/// subscribe to. A row resumes the episode in the player bar on click -- a shortcut back to
|
|
/// where you left off, not another way to browse. The one in the player pauses instead.
|
|
async function renderListening(url,box){
|
|
let rows=[];
|
|
try{ rows=(await api(url)).entries||[]; }catch{}
|
|
box.innerHTML=rows.length?'':'<p class="hint">Nothing in progress. Episodes you start and do not finish show up here.</p>';
|
|
for(const e of rows){
|
|
// Carries its episode, for paintListenRow to repaint as the player moves.
|
|
const el: HTMLDivElement & {entry?: any}=document.createElement('div');
|
|
el.className='childrow';
|
|
el.entry=e;
|
|
el.innerHTML=artHTML(e.image||feedArt(e.feed_id),e.title||'')+
|
|
`<div class="txt"><b>${EQ}<span>${esc(e.title||'(untitled)')}</span></b>`+
|
|
`<small><span class="fd">${esc(feedName(e.feed_id))}</span><span class="left"></span></small></div>`+
|
|
`<button class="iconbtn" data-a="play"></button>`+
|
|
`<button class="iconbtn" data-a="remove" title="Remove from Currently Listening" aria-label="Remove from Currently Listening">${ICON.close}</button>`+
|
|
`<div class="rail"><i></i></div>`;
|
|
el.onclick=ev=>(ev.target as Element).closest('[data-a=remove]')?forget(e)
|
|
:el.classList.contains('now')&&!audio.paused?audio.pause():play(e);
|
|
paintListenRow(el);
|
|
box.appendChild(el);
|
|
}
|
|
return rows.length;
|
|
}
|
|
|
|
/// One row's time left, progress and play button, taken from the player when it is the one in it.
|
|
function paintListenRow(el){
|
|
const e=el.entry, now=player.guid===e.guid&&player.feed===e.feed_id;
|
|
// Zero until the player has sought to where you left off; the saved position stands till then.
|
|
if(now&&audio.currentTime) e.position=Math.floor(audio.currentTime);
|
|
// The player's own length first: a feed's can be minutes out.
|
|
const d=(now&&isFinite(audio.duration)&&Math.floor(audio.duration))||e.duration;
|
|
el.classList.toggle('now',now);
|
|
$('.left',el).textContent=d?`${clock(d-e.position)} left`:`${clock(e.position)} in`;
|
|
// With no length there is nothing to show, and an empty rail reads as a heavy border.
|
|
const rail=$('.rail',el); rail.hidden=!d;
|
|
$('i',rail).style.width=`${d?Math.min(100,e.position/d*100):0}%`;
|
|
const b=$('[data-a=play]',el), label=now&&!audio.paused?'Pause':'Resume';
|
|
if(b.title!==label){ b.title=label; b.setAttribute('aria-label',label); b.innerHTML=label==='Pause'?ICON.pause:ICON.play; }
|
|
}
|
|
/// Keeps the list in step with the player. Only a row that is, or was, the one in it changes.
|
|
function syncListening(){
|
|
for(const el of $$('#listening .childrow'))
|
|
if(el.entry&&(el.classList.contains('now')||player.guid===el.entry.guid)) paintListenRow(el);
|
|
}
|
|
|
|
/// Takes an episode off Currently Listening by forgetting where you got to: the list is every
|
|
/// episode with a saved position short of the end, so the position is what has to go.
|
|
async function forget(e){
|
|
// Closed without saving first, or the player's next save would put it straight back.
|
|
if(player.guid===e.guid){ player.guid=null; $('#pclose').click(); }
|
|
try{
|
|
await api(`/api/entries/${encodeURIComponent(e.feed_id)}/${encodeURIComponent(e.guid)}/position`,
|
|
{method:'POST',body:JSON.stringify({secs:0})});
|
|
}catch(err){ toast(err.message,true); }
|
|
if(S.feed===':listening') renderListed(VIEWS[':listening']);
|
|
}
|
|
|
|
// The toolbar acts on whatever is selected: the feed on the left, the item in the table.
|
|
$('#tbRemove').onclick=()=>{ const f=S.feeds.find(x=>x.id===S.feed); if(f) removeFeed(f); };
|
|
$('#tbPlay').onclick=()=>{ const e=cur(); if(e) play(e); };
|
|
$('#tbRead').onclick=()=>{ const e=cur(); if(e) epAction('read',e,null); };
|
|
$('#tbFlag').onclick=()=>{ const e=cur(); if(e) epAction('flag',e,null); };
|
|
let searchT;
|
|
$('#epSearch').oninput=ev=>{ clearTimeout(searchT);
|
|
searchT=setTimeout(()=>{ S.q=ev.target.value; S.offset=0; loadEntries(); },250); };
|
|
// Crossing the phone breakpoint moves the files between their pane and the text.
|
|
window.matchMedia?.('(max-width:820px)')?.addEventListener?.('change',()=>{ const e=cur(); if(e) showDetail(e); });
|
|
|
|
let expanded = new Set(JSON.parse(localStorage.getItem('ipx.expanded')||'[]'));
|
|
function toggleGroup(id){
|
|
expanded.has(id) ? expanded.delete(id) : expanded.add(id);
|
|
try{ localStorage.setItem('ipx.expanded', JSON.stringify([...expanded])); }catch{}
|
|
renderFeeds();
|
|
}
|
|
let globalMax = 3;
|
|
const UNITS = [['m','minutes'],['h','hours'],['d','days'],['w','weeks']];
|
|
const UNIT_MINS = {m:1, h:60, d:1440, w:10080};
|
|
|
|
/// Largest unit that divides evenly, so 120 reads "2 hours" not "120 minutes".
|
|
function splitEvery(m){
|
|
if(!m) return {n:1, u:'h'};
|
|
for(const u of ['w','d','h']) if(m % UNIT_MINS[u] === 0) return {n:m/UNIT_MINS[u], u};
|
|
return {n:m, u:'m'};
|
|
}
|
|
function unitOptions(sel){
|
|
return UNITS.map(([v,l]) =>
|
|
`<option value="${v}"${sel===v?' selected':''}>${l}</option>`).join('');
|
|
}
|
|
function everyText(m){
|
|
if(!m) return '\u2014';
|
|
const {n,u} = splitEvery(m);
|
|
const name = {m:'min', h:'hour', d:'day', w:'week'}[u];
|
|
return n + ' ' + name + (u!=='m' && n!==1 ? 's' : '');
|
|
}
|
|
function due(ts){
|
|
const d = ts - Date.now()/1000;
|
|
if(d <= 0) return 'due now';
|
|
if(d < 3600) return 'in '+Math.max(1,Math.round(d/60))+'m';
|
|
if(d < 86400) return 'in '+Math.round(d/3600)+'h';
|
|
return 'in '+Math.round(d/86400)+'d';
|
|
}
|
|
|
|
/// Global settings. GET /api/settings is open to anyone signed in; only the PATCH, and the
|
|
/// Users screen behind it, are the operator's alone (the server refuses both from anyone
|
|
/// else). A non-admin gets the same modal minus those two parts, not no settings at all --
|
|
/// Export/Import are theirs regardless, and seeing the schedule and quota explains why a
|
|
/// feed is polled when it is.
|
|
async function prefsModal(){
|
|
const g = await api('/api/settings');
|
|
const gs = splitEvery(g.every_mins);
|
|
const admin = !!(S.me&&S.me.admin);
|
|
openModal(`<h3>Settings</h3>
|
|
<div class="field"><label>Theme</label>
|
|
<select id="stheme">${Object.entries(THEMES).map(([k,t])=>
|
|
`<option value="${k}"${theme.name===k?' selected':''}>${esc(t.name)}</option>`).join('')}</select></div>
|
|
<div class="field" id="smodefield"${THEMES[theme.name].modes?'':' hidden'}><label>Light or dark</label>
|
|
<select id="smode">${Object.entries(MODES).map(([k,t])=>
|
|
`<option value="${k}"${theme.mode===k?' selected':''}>${esc(t)}</option>`).join('')}</select>
|
|
<span class="hint">Auto follows your system's light/dark setting.</span></div>
|
|
<div class="field"><label>Check feeds every</label>
|
|
${admin?`<div class="inline">
|
|
<input type="number" id="gnum" min="1" max="999" value="${gs.n}">
|
|
<select id="gunit">${unitOptions(gs.u)}</select>
|
|
</div>
|
|
<span class="hint">Applies to every feed that does not set its own. A feed's suggested
|
|
interval (its <b>ttl</b>) is still honoured when it asks to be polled less often.</span>`
|
|
:`<span class="hint">${everyText(g.every_mins)}, for every feed that does not set its
|
|
own. Only an admin changes this.</span>`}</div>
|
|
${admin?`<div class="field"><label>Max new downloads per scan, per feed</label>
|
|
<input type="number" id="gmax" min="0" max="999" value="${g.max_new_per_check}">
|
|
<span class="hint">Applies to any feed that does not set its own — including every feed
|
|
inside an OPML subscription. <b>0 means unlimited</b>, which will pull a whole back
|
|
catalogue the first time a feed is scanned.</span></div>
|
|
<div class="field"><label>Download these media types automatically</label>
|
|
<input type="text" id="gtypes" value="${esc((g.media_types||[]).join(', '))}"
|
|
placeholder="audio, video">
|
|
<span class="hint">Anything else is still listed and can be downloaded by hand — blog feeds
|
|
put article images in enclosures, and those are not worth keeping. Empty takes everything.</span></div>
|
|
<div class="field"><label>Disk quota (GB, 0 = unlimited)</label>
|
|
<input type="number" id="gquota" min="0" step="0.5" value="${g.max_total_gb}">
|
|
<span class="hint">Over this, the oldest played items are deleted first. Pinned
|
|
items are never touched.</span></div>
|
|
<div class="field"><label>Delete items older than (days, 0 = keep)</label>
|
|
<input type="number" id="gage" min="0" value="${g.max_age_days}"></div>`:''}
|
|
<div class="field"><label>Download folder</label>
|
|
<span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>
|
|
<div class="field"><label>Subscriptions</label>
|
|
<div class="inline">
|
|
<!-- Words as well as icons: a floppy disk and a plus mean nothing on their own here. -->
|
|
<a class="btn" href="/api/opml" download="ipx-subscriptions.opml" title="Export OPML" aria-label="Export OPML">${ICON.save} Export</a>
|
|
<button class="btn" id="gopml" title="Import OPML…" aria-label="Import OPML">${ICON.plus} Import…</button>
|
|
</div>
|
|
<span class="hint">Export saves your subscriptions as OPML for another podcast app. Import
|
|
subscribes you to every feed in one.</span></div>
|
|
${admin?`<div class="field"><label>Users</label>
|
|
<div class="inline"><button class="btn ico" id="gusers" title="Manage users…" aria-label="Manage users">${ICON.users}</button></div>
|
|
<span class="hint">Add and remove the people who can sign in, and choose who is an admin.</span></div>`:''}
|
|
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="${admin?'Cancel':'Close'}" aria-label="${admin?'Cancel':'Close'}">${ICON.close}</button>
|
|
${admin?`<button class="btn ico primary" id="gsave" title="Save" aria-label="Save">${ICON.check}</button>`:''}</div>`);
|
|
$('#stheme').onchange=e=>setTheme(e.target.value,undefined,true);
|
|
$('#smode').onchange=e=>setTheme(undefined,e.target.value,true);
|
|
$('#gopml').onclick=opmlModal;
|
|
if(!admin) return;
|
|
$('#gusers').onclick=usersModal;
|
|
$('#gsave').onclick=async()=>{
|
|
try{
|
|
await api('/api/settings',{method:'PATCH',body:JSON.stringify({
|
|
schedule:`every ${Math.max(1,Number($('#gnum').value)||1)}${$('#gunit').value}`,
|
|
max_new_per_check:Math.max(0,Number($('#gmax').value)||0),
|
|
media_types:$('#gtypes').value.split(',').map(t=>t.trim()).filter(Boolean),
|
|
max_total_gb:Number($('#gquota').value)||0,
|
|
max_age_days:Number($('#gage').value)||0})});
|
|
closeModal(); toast('Settings saved');
|
|
await loadFeeds(true); if(S.feed){ renderFeed(); loadEntries(); }
|
|
}catch(e){ toast(e.message,true); }
|
|
};
|
|
}
|
|
|
|
// Admin only, and the server enforces that: this screen is just the way in.
|
|
async function usersModal(){
|
|
const users = await api('/api/users') || [];
|
|
openModal(`<h3>Users</h3>
|
|
${users.map(u=>`<div class="inline" data-id="${u.id}" style="margin-bottom:8px">
|
|
<div style="flex:1;min-width:0"><b style="overflow-wrap:anywhere">${esc(u.name)}</b>
|
|
<small style="display:block;color:var(--faint)">${u.created?`Added ${dateOf(u.created)}`:'Added before this was kept'} · ${
|
|
u.last_login?`signed in ${ago(u.last_login)}`:'never signed in'}</small></div>
|
|
${u.password?'':'<span class="tag" title="No password: signs in through the proxy">Proxy</span>'}
|
|
<label class="check" style="margin:0"><input type="checkbox" data-a="admin" ${u.admin?'checked':''}> Admin</label>
|
|
<button class="btn ico danger" data-a="rm" title="Remove ${esc(u.name)}" aria-label="Remove ${esc(u.name)}">${ICON.trash}</button></div>`).join('')}
|
|
<div class="field" style="margin-top:16px"><label>Add someone</label>
|
|
<div class="inline">
|
|
<input type="text" id="uname" placeholder="Name" autocomplete="off" spellcheck="false">
|
|
<input type="password" id="upass" placeholder="Password" autocomplete="new-password">
|
|
</div>
|
|
<label class="check" style="margin-top:8px"><input type="checkbox" id="uadmin"> Admin</label>
|
|
<span class="hint">At least 8 characters. Leave the password empty for someone who signs in
|
|
through the proxy. New people start with no feeds.</span></div>
|
|
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button>
|
|
<button class="btn ico primary" id="uadd" title="Add" aria-label="Add">${ICON.plus}</button></div>`);
|
|
const change=async(u,opts)=>{
|
|
try{
|
|
await api(`/api/users/${u.id}`,opts);
|
|
// Demoting yourself takes this screen away; reload so the page stops offering it. Only
|
|
// on success: reloading after a refusal wiped the toast that said why.
|
|
if(u.name===S.me?.name){ location.reload(); return; }
|
|
}catch(e){ toast(e.message,true); }
|
|
usersModal(); // on a refusal, this puts the checkbox back where the server left it
|
|
};
|
|
$$('#modalCard [data-id]').forEach(row=>{
|
|
const u=users.find(x=>String(x.id)===row.dataset.id);
|
|
$('[data-a="admin"]',row).onchange=e=>
|
|
change(u,{method:'PATCH',body:JSON.stringify({admin:e.target.checked})});
|
|
$('[data-a="rm"]',row).onclick=()=>{
|
|
if(confirm(`Remove ${u.name}? Their subscriptions and read state go with them. Downloaded files stay.`))
|
|
change(u,{method:'DELETE'});
|
|
};
|
|
});
|
|
$('#uadd').onclick=async()=>{
|
|
try{
|
|
await api('/api/users',{method:'POST',body:JSON.stringify({
|
|
name:$('#uname').value, password:$('#upass').value, admin:$('#uadmin').checked})});
|
|
toast('Added'); usersModal();
|
|
}catch(e){ toast(e.message,true); } // keep what was typed
|
|
};
|
|
}
|
|
|
|
function settingsModal(f, newUrl?: string){
|
|
const isGroup = S.feeds.some(c=>c.group===f.id);
|
|
openModal(`<h3>${esc(f.title||f.id)}</h3>
|
|
${isGroup?`<p class="hint" style="margin:-6px 0 12px">This is ${isPatreon(f)?'a Patreon creator':'an OPML subscription'}. These
|
|
settings apply to it and are inherited by every feed inside it.</p>`:''}
|
|
${f.managed?`<p class="hint" style="margin:-6px 0 12px">This feed comes from
|
|
${isPatreon(S.feeds.find(p=>p.id===f.group))?'a Patreon creator':'an OPML subscription'} and follows its settings. Saving anything here gives it its own entry in
|
|
config.toml, and it stops following the subscription's settings.</p>`:''}
|
|
<p class="hint" style="margin:-4px 0 10px">These are <b>your</b> settings for this feed.
|
|
Everyone else keeps their own.</p>
|
|
<div class="field"><label>Keywords</label>
|
|
<input type="text" id="skw" value="${esc(f.keywords.join(', '))}">
|
|
<span class="hint">Comma separated. Empty takes everything.</span></div>
|
|
<div class="field"><label>Max new downloads per scan</label>
|
|
<input type="number" id="smax" min="0" value="${f.max_new_per_check??''}">
|
|
<span class="hint">Blank follows the global default (${globalMax}). The rest wait for
|
|
the next scan.</span></div>
|
|
<label class="check"><input type="checkbox" id="sauto" ${f.auto_download?'checked':''}> Download new items automatically</label>
|
|
<label class="check"><input type="checkbox" id="sexp" ${f.allow_explicit?'checked':''}> Allow items marked explicit</label>
|
|
<div class="field"><label>Feed URL</label>
|
|
<div class="inline">
|
|
<input type="text" id="surl" value="${esc(newUrl||f.url)}" spellcheck="false" ${S.me&&S.me.admin?'':'readonly'}>
|
|
<button type="button" class="btn ico" id="scopy" title="Copy the URL" aria-label="Copy the URL">${ICON.copy}</button>
|
|
</div>
|
|
<span class="hint">${S.me&&S.me.admin
|
|
? `Shared with everyone reading this feed. Editing it keeps every item and download —
|
|
handy when an auth token in the URL is rotated. The feed is re-checked from scratch
|
|
on the next scan.`
|
|
: `The same for everyone reading this feed, so only an admin can change it.`}</span></div>
|
|
${S.me&&S.me.admin?`<div class="field"><label>Download folder (shared)</label>
|
|
<input type="text" id="sfolder" value="${esc(f.folder||'')}" placeholder="${esc(f.title||f.id)}">
|
|
<span class="hint">Where the files land. There is one copy however many people
|
|
subscribe, so this is the same for everyone.</span></div>`:''}
|
|
${S.me&&S.me.admin?`<div class="field"><label>Directory category (shared)</label>
|
|
<input type="text" id="scat" list="scats" value="${esc(f.category||'')}" placeholder="${esc(f.feed_category||'None')}">
|
|
<datalist id="scats"></datalist>
|
|
<span class="hint">${f.feed_category
|
|
? `The feed names its own, ${esc(f.feed_category)}, and the Directory uses that.`
|
|
: `The feed names none, so the Directory files it under this. Pick one already listed where it fits.`}</span></div>`:''}
|
|
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
|
|
<button class="btn ico primary" id="ssave" title="Save" aria-label="Save">${ICON.check}</button></div>`);
|
|
$('#scopy').onclick=()=>copyText($('#surl').value,$('#scopy'));
|
|
// Offer the categories the Directory already shows, so a blog about games joins Games rather
|
|
// than starting a second chip beside it.
|
|
if($('#scats')) api('/api/directory').then(rows=>{ $('#scats').innerHTML=[...new Set((rows||[])
|
|
.map(p=>p.category).filter(Boolean))].sort().map(c=>`<option value="${esc(c)}">`).join(''); }).catch(()=>{});
|
|
$('#ssave').onclick=async()=>{
|
|
const max=$('#smax').value;
|
|
try{
|
|
const patch: Record<string, unknown>={
|
|
keywords:$('#skw').value.split(',').map(s=>s.trim()).filter(Boolean),
|
|
max_new_per_check:max===''?null:Number(max),
|
|
auto_download:$('#sauto').checked, allow_explicit:$('#sexp').checked};
|
|
// The shared half is an admin's to change, and the API refuses it from anyone else.
|
|
if(S.me&&S.me.admin){
|
|
patch.url=$('#surl').value.trim();
|
|
patch.folder=$('#sfolder').value.trim()||null;
|
|
patch.category=$('#scat').value.trim()||null;
|
|
}
|
|
await api(`/api/feeds/${encodeURIComponent(f.id)}`,{method:'PATCH',body:JSON.stringify(patch)});
|
|
closeModal(); toast('Saved — applies on the next scan');
|
|
await loadFeeds(true); renderFeed(); loadEntries();
|
|
}catch(e){ toast(e.message,true); }
|
|
};
|
|
}
|
|
|
|
function downloadLatestModal(f){
|
|
openModal(`<h3>Download latest items</h3>
|
|
<div class="field"><label>How many of the newest undownloaded items?</label>
|
|
<input type="number" id="dcount" min="1" max="100" value="5">
|
|
<span class="hint">Queued immediately, ignoring the per-scan limit.</span></div>
|
|
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
|
|
<button class="btn ico primary" id="dgo" title="Download" aria-label="Download">${ICON.download}</button></div>`);
|
|
$('#dgo').onclick=async()=>{
|
|
const n=Number($('#dcount').value)||5;
|
|
try{
|
|
const r=await api(`/api/feeds/${encodeURIComponent(f.id)}/download-latest`,
|
|
{method:'POST',body:JSON.stringify({count:n})});
|
|
closeModal(); toast(`Queued ${r.queued} item${r.queued===1?'':'s'}`);
|
|
}catch(e){ toast(e.message,true); }
|
|
};
|
|
}
|
|
|
|
function removeFeed(f){
|
|
openModal(`<h3>Unsubscribe?</h3>
|
|
<p style="color:var(--dim)">Removes <b>${esc(f.title||f.id)}</b> from your feeds. Anyone else
|
|
reading it keeps it, along with their own read state.
|
|
Downloaded files and history are kept, so re-adding it will not pull the back catalogue again.</p>
|
|
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Cancel" aria-label="Cancel">${ICON.close}</button>
|
|
<button class="btn ico danger" id="rgo" title="Unsubscribe" aria-label="Unsubscribe">${ICON.circleMinus}</button></div>`);
|
|
$('#rgo').onclick=async()=>{
|
|
await api(`/api/feeds/${encodeURIComponent(f.id)}`,{method:'DELETE'});
|
|
closeModal(); toast('Unsubscribed'); S.feed=null;
|
|
await loadFeeds(); if(!S.feeds.length) renderFeed();
|
|
};
|
|
}
|
|
|
|
function opmlModal(){
|
|
openModal(`<h3>OPML</h3>
|
|
<p style="color:var(--dim);font-size:13.5px">Move subscriptions between podcast apps.</p>
|
|
<div class="field"><label>Export: save your subscriptions as OPML</label>
|
|
<div class="inline">
|
|
<a class="btn ico" href="/api/opml" download="ipx-subscriptions.opml" title="Export OPML" aria-label="Export OPML">${ICON.save}</a>
|
|
</div></div>
|
|
<div class="field" style="margin-top:16px"><label>Import: choose a file, or paste OPML</label>
|
|
<input type="file" id="opmlFile" accept=".opml,.xml,text/x-opml,text/xml,application/xml" style="margin-bottom:8px">
|
|
<textarea id="opmlText" rows="6" style="width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px;font:12px monospace"></textarea></div>
|
|
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button>
|
|
<button class="btn ico primary" id="oimp" title="Import: subscribe to every feed in it" aria-label="Import">${ICON.plus}</button></div>`);
|
|
$('#oimp').onclick=async()=>{
|
|
// A chosen file is read here and sent as text, so the server never stores it. Clearing
|
|
// the picker lets go of it on this side too, whether it was refused or imported.
|
|
const pick=$('#opmlFile'), file=pick.files[0];
|
|
const xml=file ? await file.text() : $('#opmlText').value;
|
|
const letGo=()=>{ pick.value=''; };
|
|
// A quick look before sending anything. The server parses it properly and has the last word.
|
|
if(!/<opml[\s>]/i.test(xml)){
|
|
letGo(); toast(`${file?file.name:'That'} is not an OPML file`,true); return;
|
|
}
|
|
try{
|
|
const r=await api('/api/opml',{method:'POST',body:JSON.stringify({xml})});
|
|
letGo(); closeModal(); toast(`Subscribed to ${r.added} feed(s)`+(r.already?`, ${r.already} you already had`:'')); loadFeeds(true);
|
|
}catch(e){ letGo(); toast(e.message,true); }
|
|
};
|
|
}
|
|
|
|
async function scanAll(){ toast('Scanning all feeds…'); await api('/api/fetch',{method:'POST',body:JSON.stringify({force:true})}); }
|
|
$('#scanAll').onclick=scanAll;
|
|
$('#prefs').onclick=prefsModal;
|
|
// Someone the proxy signed in is signed out by the proxy: ipx's own sign-out cannot stick while
|
|
// the proxy still vouches for them. /api/me says where, when that is the case.
|
|
$('#signout').onclick=async()=>{ await api('/api/logout',{method:'POST'}); location.href=S.me?.sign_out||'/login'; };
|
|
api('/api/me').then(u=>{
|
|
S.me=u;
|
|
$('#who').textContent=u.name+(u.admin?' · admin':'');
|
|
}).catch(()=>{});
|
|
$('#logs').onclick=logsModal;
|
|
$('#feedFilter').oninput=renderFeeds;
|
|
// The feed list from the keyboard: Enter or Space opens a row, Right and Left open and close a
|
|
// folder. Handled keys stop here, or the player's own Space and arrows would act on them too.
|
|
$('#feedlist').onkeydown=ev=>{
|
|
const row=ev.target.closest('[data-id]'); if(!row) return;
|
|
const id=row.dataset.id;
|
|
if((ev.key==='Enter'||ev.key===' ')&&ev.target===row) row.click();
|
|
else if(row.classList.contains('group')&&
|
|
(ev.key==='ArrowRight'&&!expanded.has(id)||ev.key==='ArrowLeft'&&expanded.has(id))) toggleGroup(id);
|
|
else return;
|
|
ev.preventDefault(); ev.stopPropagation();
|
|
};
|
|
$('#burger').onclick=()=>nav(!$('#sidebar').classList.contains('open'));
|
|
$('#scrim').onclick=()=>nav(false);
|
|
|