rays
e2969bcee8
The theme picker lists Modern (the old Dark and Light), Classic and six new palettes, from Dracula's spec (with Alucard), Material 3's baseline scheme, libadwaita's CSS variables, Flat Remix's _colors.scss, Paper and Nord. A second setting picks Light, Dark or Auto where a theme has both; Classic and Paper do not, so it is hidden for them. The page gets data-mode, light or dark, and Auto is worked out in theme.ts from the system, so each palette is written once instead of again under a media query. Every new palette clears WCAG AA for text on its backgrounds. An old ipx.theme of dark, light or auto carries over as Modern. Closes #27. 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);
|
|
$('#smode').onchange=e=>setTheme(undefined,e.target.value);
|
|
$('#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);
|
|
|