Page type-check: noImplicitAny, every parameter and variable typed (#235)
290 places the type-check could not see into, mostly parameters, now typed with web/src/types.ts (feeds, items, files, accounts, log lines, the directory's rows and items). Two changes run differently in form only: the seek and volume inputs divide Number(value) where they divided the string, and esc's table has a name. Null checks are #236. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -9,7 +9,7 @@ function closeModal(){
|
||||
$('#modal').classList.remove('on');
|
||||
}
|
||||
|
||||
$('#modal').onclick=e=>{ if(e.target.id==='modal') closeModal(); };
|
||||
$('#modal').onclick=(e: MouseEvent)=>{ if((e.target as Element).id==='modal') closeModal(); };
|
||||
|
||||
$('#addFeed').onclick=()=>{
|
||||
openModal(`<h3>Add a feed</h3>
|
||||
@@ -27,7 +27,7 @@ $('#addFeed').onclick=()=>{
|
||||
try{
|
||||
const r=await api('/api/feeds',{method:'POST',body:JSON.stringify({
|
||||
url, allow_explicit:$('#nexp').checked,
|
||||
keywords:$('#nkw').value.split(',').map(s=>s.trim()).filter(Boolean)})});
|
||||
keywords:$('#nkw').value.split(',').map((s: string)=>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(why(e),true); $('#nsave').title='Add feed'; $('#nsave').disabled=false; }
|
||||
@@ -43,7 +43,7 @@ let dirError='';
|
||||
/// One listed feed: a tile in the Directory's grid or, given its place, a row in its chart. The
|
||||
/// parts are the same either way; the class lays them out. Yours opens its feed; any other, its
|
||||
/// page in the Directory, to see what it is before you take it (#128).
|
||||
function listedFeed(p,cls,rank?: number){
|
||||
function listedFeed(p: DirFeed,cls: string,rank?: number){
|
||||
const el=document.createElement('div');
|
||||
el.className=cls+(p.subscribed?' mine':'');
|
||||
el.tabIndex=0; el.dataset.id=p.id;
|
||||
@@ -64,11 +64,11 @@ function listedFeed(p,cls,rank?: number){
|
||||
if(p.subscribed){ el.onclick=()=>selectFeed(p.feed||p.id); return el; }
|
||||
el.onclick=()=>{ dirShow=p.id; $('#content').scrollTop=0; drawDirectory(undefined,'.dback'); };
|
||||
// Its own click, not the tile's as well.
|
||||
$('[data-a="sub"]',el).onclick=ev=>{ ev.stopPropagation(); subscribeListed(p); };
|
||||
$('[data-a="sub"]',el).onclick=(ev: Event)=>{ ev.stopPropagation(); subscribeListed(p); };
|
||||
return el;
|
||||
}
|
||||
|
||||
async function subscribeListed(p){
|
||||
async function subscribeListed(p: DirFeed){
|
||||
try{
|
||||
const r=await api(`/api/popular/${encodeURIComponent(p.id)}`,{method:'POST'});
|
||||
toast(`Subscribed to ${NAME(p)}`);
|
||||
@@ -78,29 +78,29 @@ async function subscribeListed(p){
|
||||
|
||||
// Where you are in the Directory: what kind of feed, which category and subcategory, in what
|
||||
// order. Out here because a search redraws the page, and the kind and order hold across visits.
|
||||
let dirKind='All', dirCat=null, dirSub=null, dirSort='az', dirRows=[];
|
||||
let dirKind='All', dirCat: string|null=null, dirSub: string|null=null, dirSort='az', dirRows: DirFeed[]=[];
|
||||
// The feed whose page is open over all that, by id; going back leaves the rest as it was.
|
||||
let dirShow=null;
|
||||
let dirShow: string|null=null;
|
||||
// The two pages that are not a category: every feed, and the feeds that name none. A category is
|
||||
// Apple's or one an admin typed, neither of which starts with a colon.
|
||||
const EVERY=':every', OTHER=':other';
|
||||
const NAME=p=>(p.title||p.id);
|
||||
const byName=(a,b)=>NAME(a).localeCompare(NAME(b),undefined,{sensitivity:'base',numeric:true});
|
||||
const bySubs=(a,b)=>b.subscribers-a.subscribers||byName(a,b);
|
||||
const NAME=(p: {title: string|null, id: string})=>(p.title||p.id);
|
||||
const byName=(a: DirFeed,b: DirFeed)=>NAME(a).localeCompare(NAME(b),undefined,{sensitivity:'base',numeric:true});
|
||||
const bySubs=(a: DirFeed,b: DirFeed)=>b.subscribers-a.subscribers||byName(a,b);
|
||||
/// The grid's orders. It opens A to Z, as the server sends it.
|
||||
const DIR_SORTS={
|
||||
const DIR_SORTS: Record<string,[string,(a: DirFeed,b: DirFeed)=>number]>={
|
||||
subscribers:['Most subscribers',bySubs],
|
||||
az:['Name, A to Z',byName],
|
||||
za:['Name, Z to A',(a,b)=>byName(b,a)],
|
||||
za:['Name, Z to A',(a: DirFeed,b: DirFeed)=>byName(b,a)],
|
||||
};
|
||||
const KINDS={All:()=>true,Podcasts:p=>p.podcast,Blogs:p=>!p.podcast};
|
||||
const KIND_WORD={All:'feed',Podcasts:'podcast',Blogs:'blog'};
|
||||
const KINDS: Record<string,(p: DirFeed)=>boolean>={All:()=>true,Podcasts:p=>p.podcast,Blogs:p=>!p.podcast};
|
||||
const KIND_WORD: Record<string,string>={All:'feed',Podcasts:'podcast',Blogs:'blog'};
|
||||
|
||||
/// The Directory, as Apple's is laid out: it opens on the most subscribed feeds and the
|
||||
/// categories, and a category has a page of its own, its subcategories along the top of its
|
||||
/// grid. What a feed is (Podcasts, anything with audio or video, or Blogs, the rest) holds across
|
||||
/// every page, and the search box looks through the lot. One fetch draws all of it.
|
||||
async function renderDirectory(url,box){
|
||||
async function renderDirectory(url: string,box: HTMLElement){
|
||||
// Each visit starts at the front, as going back to a tab does.
|
||||
dirCat=null; dirSub=null; dirShow=null;
|
||||
dirError='';
|
||||
@@ -117,24 +117,24 @@ function drawDirectory(box=$('#directory'), focus?: string){
|
||||
const both=dirRows.some(KINDS.Podcasts)&&dirRows.some(KINDS.Blogs);
|
||||
if(!both) dirKind='All';
|
||||
const rows=dirRows.filter(KINDS[dirKind]), word=KIND_WORD[dirKind];
|
||||
const count=n=>`${n.toLocaleString()} ${word}${n===1?'':'s'}`;
|
||||
const of=c=>p=>c===EVERY||(c===OTHER?!p.category:p.category===c);
|
||||
const count=(n: number)=>`${n.toLocaleString()} ${word}${n===1?'':'s'}`;
|
||||
const of=(c: string)=>(p: DirFeed)=>c===EVERY||(c===OTHER?!p.category:p.category===c);
|
||||
// A kind can leave a category with nothing in it; that goes back to the front.
|
||||
if(dirCat&&!rows.some(of(dirCat))) dirCat=null;
|
||||
const catName=c=>c===EVERY?`All ${word}s`:c===OTHER?'Other':c;
|
||||
const top=list=>list.filter(p=>p.subscribers).sort(bySubs).slice(0,10);
|
||||
const btn=(k,v,label,on)=>`<button type="button" data-${k}="${esc(v)}" aria-pressed="${on}"${on?' class="on"':''}>${label}</button>`;
|
||||
const catName=(c: string)=>c===EVERY?`All ${word}s`:c===OTHER?'Other':c;
|
||||
const top=(list: DirFeed[])=>list.filter(p=>p.subscribers).sort(bySubs).slice(0,10);
|
||||
const btn=(k: string,v: string,label: string,on: boolean)=>`<button type="button" data-${k}="${esc(v)}" aria-pressed="${on}"${on?' class="on"':''}>${label}</button>`;
|
||||
// back: where its button goes, '' for the front; none on the front itself.
|
||||
const head=(title,sub,back?)=>`<div class="dhead">${back==null?'':
|
||||
const head=(title: string,sub: string,back?: string)=>`<div class="dhead">${back==null?'':
|
||||
`<button type="button" class="dback" data-go="${esc(back)}">${ICON.left}${esc(back?catName(back):'Directory')}</button>`}
|
||||
<div class="dtitle"><h2>${esc(title)}</h2>${both?`<div class="tabs" role="group" aria-label="Kind">${
|
||||
Object.keys(KINDS).map(k=>btn('kind',k,k,k===dirKind)).join('')}</div>`:''}</div>
|
||||
<p class="sub">${esc(sub)}</p></div>`;
|
||||
const sec=(title,body,extra='')=>`<section class="dsec">${title?`<div class="dsech"><h3>${esc(title)}</h3>${extra}</div>`:''}${body}</section>`;
|
||||
const sec=(title: string,body: string,extra='')=>`<section class="dsec">${title?`<div class="dsech"><h3>${esc(title)}</h3>${extra}</div>`:''}${body}</section>`;
|
||||
const tools=(pills='')=>`<div class="dtools">${pills||'<span class="grow"></span>'}<select id="dirsort" aria-label="Sort">${
|
||||
Object.entries(DIR_SORTS).map(([k,[label]])=>`<option value="${k}"${k===dirSort?' selected':''}>${label}</option>`).join('')}</select></div>`;
|
||||
const q=S.q.trim(), grid='<div class="tiles" id="dtiles"></div>', board='<div class="chart" id="dchart"></div>';
|
||||
let html, chart=[], tiles=null;
|
||||
let html: string, chart: DirFeed[]=[], tiles: DirFeed[]|null=null;
|
||||
const show=dirShow&&dirRows.find(p=>p.id===dirShow);
|
||||
if(show){
|
||||
const n=show.subscribers;
|
||||
@@ -168,7 +168,7 @@ function drawDirectory(box=$('#directory'), focus?: string){
|
||||
if(!subs.includes(dirSub)) dirSub=null;
|
||||
if(dirCat!==EVERY) chart=top(inCat);
|
||||
tiles=inCat.filter(p=>!dirSub||p.subcategory===dirSub);
|
||||
const pill=(v,label,n)=>btn('sub',v,`${esc(label)}<small>${n}</small>`,(dirSub||'')===v);
|
||||
const pill=(v: string,label: string,n: number)=>btn('sub',v,`${esc(label)}<small>${n}</small>`,(dirSub||'')===v);
|
||||
html=head(catName(dirCat),dirCat===OTHER?`${count(inCat.length)} that name no category`:count(inCat.length),'')
|
||||
+(chart.length?sec('Most subscribed',board):'')
|
||||
// Its own heading only when the chart is above it, to say where one list ends.
|
||||
@@ -178,10 +178,10 @@ function drawDirectory(box=$('#directory'), focus?: string){
|
||||
box.innerHTML=html;
|
||||
if(show){ $('.show [data-a="sub"]',box).onclick=()=>subscribeListed(show); fillShow(box,show); }
|
||||
const c=$('#dchart',box);
|
||||
if(c){ c.style.setProperty('--rows',String(Math.ceil(chart.length/2))); chart.forEach((p,i)=>c.appendChild(listedFeed(p,'rank',i+1))); }
|
||||
if(c){ c.style.setProperty('--rows',String(Math.ceil(chart.length/2))); chart.forEach((p: DirFeed,i: number)=>c.appendChild(listedFeed(p,'rank',i+1))); }
|
||||
const t=$('#dtiles',box);
|
||||
if(t) for(const p of tiles.sort(DIR_SORTS[dirSort][1])) t.appendChild(listedFeed(p,'tile'));
|
||||
box.onclick=ev=>{
|
||||
box.onclick=(ev: MouseEvent)=>{
|
||||
const b=(ev.target as Element).closest<HTMLElement>('[data-go],[data-kind],[data-sub],[data-back]');
|
||||
if(!b) return;
|
||||
// Back from a feed's page, onto the tile or row it was opened from.
|
||||
@@ -204,9 +204,9 @@ function drawDirectory(box=$('#directory'), focus?: string){
|
||||
/// A listed feed's page, filled in: what it says it is, its first lines unless you ask for the
|
||||
/// rest, and its latest items, each one's title, opening its post on the publisher's site where
|
||||
/// it has one, its first lines, and when and how long.
|
||||
async function fillShow(box,p){
|
||||
async function fillShow(box: HTMLElement,p: DirFeed){
|
||||
const list=$('#dshow',box), about=$('#dabout',box);
|
||||
let got;
|
||||
let got: {description: string|null, failing: string|null, items: ListedItem[], can_admin: boolean};
|
||||
try{ got=await api(`/api/directory/${encodeURIComponent(p.id)}`); }
|
||||
catch(e){ list.innerHTML=`<p class="hint">${esc(why(e))}</p>`; return; }
|
||||
// Gone back, or on to another, while it loaded.
|
||||
@@ -256,7 +256,7 @@ async function fillShow(box,p){
|
||||
|
||||
/// A category as a tile: its name, how many feeds, and the covers of its three most subscribed
|
||||
/// fanned in the corner, so each one is coloured by what is in it, as Apple's are.
|
||||
function catTile(c,name,count,rows){
|
||||
function catTile(c: string,name: string,count: string,rows: DirFeed[]){
|
||||
// Covers before initials, which are all Other had; the likeliest first, and first is in front:
|
||||
// the fan is drawn back to front.
|
||||
const art=[...rows].sort((a,b)=>Number(!a.image)-Number(!b.image)||bySubs(a,b)).slice(0,3).reverse();
|
||||
@@ -265,7 +265,7 @@ function catTile(c,name,count,rows){
|
||||
}
|
||||
|
||||
/// The Directory and Currently Listening open in the main pane, as the original's Directory did.
|
||||
async function renderListed(v){
|
||||
async function renderListed(v: {title: string, icon: string, url?: string, blurb?: string}){
|
||||
const box=$('#content');
|
||||
box.classList.add('plain');
|
||||
$('#tbRemove').disabled=true;
|
||||
@@ -294,14 +294,14 @@ async function renderListed(v){
|
||||
/// 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=[];
|
||||
async function renderListening(url: string,box: HTMLElement){
|
||||
let rows: Entry[]=[];
|
||||
try{ rows=(await api(url)).entries||[]; }catch{}
|
||||
box.innerHTML=rows.length?'':S.q?`<p class="hint">Nothing you are listening to mentions “${esc(S.q)}”.</p>`
|
||||
:'<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');
|
||||
const el: HTMLDivElement & {entry?: Entry}=document.createElement('div');
|
||||
el.className='childrow';
|
||||
el.entry=e;
|
||||
el.innerHTML=artHTML(e.image||feedArt(e.feed_id),e.title||'')+
|
||||
@@ -319,7 +319,7 @@ async function renderListening(url,box){
|
||||
}
|
||||
|
||||
/// One row's time left, progress and play button, taken from the player when it is the one in it.
|
||||
function paintListenRow(el){
|
||||
function paintListenRow(el: HTMLElement & {entry?: Entry}){
|
||||
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);
|
||||
@@ -341,7 +341,7 @@ function syncListening(){
|
||||
|
||||
/// 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){
|
||||
async function forget(e: Entry){
|
||||
// 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{
|
||||
@@ -356,8 +356,8 @@ $('#tbRemove').onclick=()=>{ const f=S.feeds.find(x=>x.id===S.feed); if(f) remov
|
||||
$('#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);
|
||||
let searchT: number;
|
||||
$('#epSearch').oninput=(ev: Event & {target: HTMLInputElement})=>{ clearTimeout(searchT);
|
||||
// The Directory looks through what it already has; Currently Listening and the rest ask the
|
||||
// server (#126, #127).
|
||||
searchT=setTimeout(()=>{ S.q=ev.target.value; S.offset=0;
|
||||
@@ -368,13 +368,13 @@ $('#epSearch').oninput=ev=>{ clearTimeout(searchT);
|
||||
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){
|
||||
function toggleGroup(id: string){
|
||||
expanded.has(id) ? expanded.delete(id) : expanded.add(id);
|
||||
try{ localStorage.setItem('ipx.expanded', JSON.stringify([...expanded])); }catch{}
|
||||
renderFeeds();
|
||||
}
|
||||
let globalMax = 3;
|
||||
function due(ts){
|
||||
function due(ts: number){
|
||||
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';
|
||||
@@ -385,7 +385,7 @@ function due(ts){
|
||||
/// Your settings: the theme, your subscriptions as OPML, and, to read, what the server does
|
||||
/// with feeds. The server's own settings, the accounts and the log are on /admin, which only an
|
||||
/// admin is sent (issue #19); this used to hold them too, shown to admins only.
|
||||
function deadSavedText(me){
|
||||
function deadSavedText(me: Me|null){
|
||||
const s=me&&me.deadair_saved||0;
|
||||
return s?`It has saved you ${spanText(s)} of dead air, on episodes you heard three quarters of or more.`
|
||||
:'Turn it on in a show\'s settings, or beside the speed while it plays, to cut the dead air from it.';
|
||||
@@ -429,8 +429,8 @@ async function prefsModal(){
|
||||
<div class="field"><label>Feeds are checked every</label>
|
||||
<span class="hint">${everyText(g.every_mins)}, for every feed that does not set its own.
|
||||
${admin?'This and the rest of the server\'s settings are on the <a href="/admin">admin page</a>.':'Only an admin changes this.'}</span></div>`);
|
||||
$('#stheme').onchange=e=>setTheme(e.target.value,undefined,true);
|
||||
$('#smode').onchange=e=>setTheme(undefined,e.target.value,true);
|
||||
$('#stheme').onchange=(e: Event & {target: HTMLSelectElement})=>setTheme(e.target.value,undefined,true);
|
||||
$('#smode').onchange=(e: Event & {target: HTMLSelectElement})=>setTheme(undefined,e.target.value,true);
|
||||
$('#gopml').onclick=opmlModal;
|
||||
drawTokens();
|
||||
$('#tokadd').onclick=async()=>{
|
||||
@@ -448,7 +448,7 @@ async function prefsModal(){
|
||||
$('#tokval').select();
|
||||
}catch(err){ toast(why(err),true); }
|
||||
};
|
||||
$('#sblock').onchange=async e=>{
|
||||
$('#sblock').onchange=async (e: Event & {target: HTMLInputElement})=>{
|
||||
const blocked=splitWords(e.target.value);
|
||||
try{
|
||||
await api('/api/me',{method:'PATCH',body:JSON.stringify({blocked})});
|
||||
@@ -461,7 +461,7 @@ async function prefsModal(){
|
||||
/// Your API tokens, each with when it was made and last used, and a button to revoke it.
|
||||
async function drawTokens(){
|
||||
const box=$('#tokens'); if(!box) return;
|
||||
const list=await api('/api/tokens').catch(()=>[]);
|
||||
const list: {id: number, name: string, created: number, last_used: number|null}[]=await api('/api/tokens').catch((): []=>[]);
|
||||
box.innerHTML=list.map(t=>`<div class="tokrow"><span><b>${esc(t.name)}</b>
|
||||
<span class="hint">made ${dateOf(t.created)}, last used ${ago(t.last_used)}</span></span>
|
||||
<button class="btn ico" data-tok="${t.id}" title="Revoke ${esc(t.name)}" aria-label="Revoke ${esc(t.name)}">${ICON.trash}</button></div>`).join('');
|
||||
@@ -486,10 +486,10 @@ function chipsHTML(words: string[], input: string){
|
||||
placeholder="${words.length?'':CHIP_HINT}" enterkeyhint="done" autocomplete="off" spellcheck="false">`;
|
||||
}
|
||||
/// The words in a chip box, with whatever is typed and not yet a chip.
|
||||
function chipWords(box){
|
||||
function chipWords(box: ParentNode){
|
||||
return [...$$('.chip',box).map(c=>c.dataset.w), ...splitWords($('.chipin',box).value)];
|
||||
}
|
||||
function wireChips(box){
|
||||
function wireChips(box: HTMLElement){
|
||||
const input=$('.chipin',box);
|
||||
// The hint only in an empty box: beside chips it reads as one more.
|
||||
const hint=()=>{ input.placeholder=$$('.chip',box).length?'':CHIP_HINT; };
|
||||
@@ -501,14 +501,14 @@ function wireChips(box){
|
||||
}
|
||||
input.value=''; hint();
|
||||
};
|
||||
input.onkeydown=e=>{
|
||||
input.onkeydown=(e: KeyboardEvent)=>{
|
||||
if(e.key==='Enter'||e.key===','){ e.preventDefault(); add(); }
|
||||
else if(e.key==='Backspace'&&!input.value){ input.previousElementSibling?.remove(); hint(); }
|
||||
};
|
||||
// Typed and left without Enter is still meant: Save takes it either way.
|
||||
input.onblur=add;
|
||||
box.onclick=e=>{
|
||||
const x=e.target.closest('.chipx');
|
||||
box.onclick=(e: MouseEvent)=>{
|
||||
const x=(e.target as Element).closest('.chipx');
|
||||
if(x){ x.parentElement.remove(); hint(); }
|
||||
input.focus();
|
||||
};
|
||||
@@ -516,7 +516,7 @@ function wireChips(box){
|
||||
|
||||
/// Your settings for one feed, under its address (#167). What it says is what will happen, in this feed's numbers: the download limit was a bare
|
||||
/// box whose blank, number and 0 were explained in bold small print.
|
||||
function settingsModal(f, newUrl?: string){
|
||||
function settingsModal(f: Feed, newUrl?: string){
|
||||
const kids=S.feeds.filter(c=>c.group===f.id).length;
|
||||
const isGroup=kids>0;
|
||||
const parent=f.managed?S.feeds.find(p=>p.id===f.group):null;
|
||||
@@ -576,7 +576,7 @@ function settingsModal(f, newUrl?: string){
|
||||
// What only matters while it downloads on its own folds away, out of reach, when it does not.
|
||||
const deps=$('#sdeps'), inner=$('.fdepsin',deps);
|
||||
inner.inert=!f.auto_download;
|
||||
$('#sauto').onchange=e=>{ deps.classList.toggle('off',!e.target.checked); inner.inert=!e.target.checked; };
|
||||
$('#sauto').onchange=(e: Event & {target: HTMLInputElement})=>{ deps.classList.toggle('off',!e.target.checked); inner.inert=!e.target.checked; };
|
||||
|
||||
// The download limit, said as what it does. A number in a box hid that it is a window on the
|
||||
// newest items, not a pace through the back catalogue (#97).
|
||||
@@ -591,7 +591,7 @@ function settingsModal(f, newUrl?: string){
|
||||
? `The server's default: downloads the newest ${globalMax}${each} on its own.${older}`
|
||||
: `The server's default: downloads every item${each}, the whole back catalogue.`;
|
||||
const limit=()=>mode==='all'||(mode==='default'&&!globalMax)?Infinity:mode==='default'?globalMax:newest;
|
||||
let bars=[];
|
||||
let bars: HTMLElement[]=[];
|
||||
const draw=(words: boolean)=>{
|
||||
// The newest items with a file, as hold_back counts them: one whose files a filter all
|
||||
// skipped holds no place.
|
||||
@@ -610,16 +610,16 @@ function settingsModal(f, newUrl?: string){
|
||||
};
|
||||
for(const r of $$('[name=swin]')) r.onchange=()=>{ mode=r.value; draw(true); };
|
||||
// Breathing room only matters with DeadAir on: greyed out, not hidden, so it can be seen beforehand.
|
||||
$('#sdead').onchange=e=>{ $('#sdpause').disabled=!e.target.checked; };
|
||||
$('#sdead').onchange=(e: Event & {target: HTMLInputElement})=>{ $('#sdpause').disabled=!e.target.checked; };
|
||||
const pause=$('#sdpause'), pauseText=()=>{ const s=`${pause.value/1000} s`; $('#sdpauseout').textContent=s; pause.setAttribute('aria-valuetext',s); };
|
||||
pause.oninput=pauseText; pauseText();
|
||||
draw(true);
|
||||
// The feed's own newest items, each as tall as it is long, so the strip reads as this show.
|
||||
if(!isGroup) api(`/api/feeds/${encodeURIComponent(f.id)}/entries?limit=40`).then(page=>{
|
||||
const items=page?.entries||[];
|
||||
const items: Entry[]=page?.entries||[];
|
||||
const strip=$('#sepwin'); if(!items.length||!strip) return;
|
||||
const longest=Math.max(1,...items.map(e=>e.duration||0));
|
||||
strip.innerHTML=items.map((e,i)=>{
|
||||
strip.innerHTML=items.map((e: Entry,i: number)=>{
|
||||
const file=e.enclosures.some(x=>x.state!=='skipped');
|
||||
const h=e.duration?Math.round(30+70*Math.sqrt(e.duration/longest)):60;
|
||||
return `<i class="${file?'':'nofile'}" style="--h:${h}%;--n:${i}"></i>`;
|
||||
@@ -637,8 +637,8 @@ function settingsModal(f, newUrl?: string){
|
||||
if(mode!=='newest'){ mode='newest'; $('[name=swin][value=newest]').checked=true; draw(true); }
|
||||
else { $('#smax').value=String(newest); draw(false); }
|
||||
};
|
||||
strip.onpointerdown=e=>{ strip.setPointerCapture(e.pointerId); pick(e.clientX); };
|
||||
strip.onpointermove=e=>{ if(strip.hasPointerCapture(e.pointerId)) pick(e.clientX); };
|
||||
strip.onpointerdown=(e: PointerEvent)=>{ strip.setPointerCapture(e.pointerId); pick(e.clientX); };
|
||||
strip.onpointermove=(e: PointerEvent)=>{ if(strip.hasPointerCapture(e.pointerId)) pick(e.clientX); };
|
||||
}).catch(()=>{});
|
||||
|
||||
wireChips($('#skw'));
|
||||
@@ -668,7 +668,7 @@ function settingsModal(f, newUrl?: string){
|
||||
};
|
||||
}
|
||||
|
||||
function downloadLatestModal(f){
|
||||
function downloadLatestModal(f: Feed){
|
||||
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">
|
||||
@@ -685,7 +685,7 @@ function downloadLatestModal(f){
|
||||
};
|
||||
}
|
||||
|
||||
function removeFeed(f){
|
||||
function removeFeed(f: Feed){
|
||||
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.
|
||||
@@ -753,8 +753,8 @@ api('/api/me').then(u=>{
|
||||
$('#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;
|
||||
$('#feedlist').onkeydown=(ev: KeyboardEvent)=>{
|
||||
const row=(ev.target as Element).closest<HTMLElement>('[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')&&
|
||||
|
||||
Reference in New Issue
Block a user