-
-
- ${escapeHtml(feed.title)}
- ${feed.author ? `${escapeHtml(feed.author)}
` : ''}
- No subscriptions yet. Search or import OPML to add feeds.
'; - return; - } - - container.innerHTML = ''; - podcastFeeds.forEach(feed => { - const div = document.createElement('div'); - div.className = 'podcast-feed-item'; - div.innerHTML = ` - ${feed.artwork_url - ? `Loading…
'; - if (listEl) listEl.innerHTML = ''; - - try { - const res = await fetch(`/podcasts/feeds/${feedId}/episodes/`); - const data = await res.json(); - const feed = data.feed; - const episodes = data.episodes || []; - - if (headerEl) { - headerEl.innerHTML = ` -Failed to load episodes.
'; - } -} - -function filterEpisodes(query) { - const listEl = $('podcast-episode-list'); - if (!listEl) return; - const q = query.toLowerCase().trim(); - listEl.querySelectorAll('.episode-item').forEach(item => { - const text = (item.querySelector('.episode-title') || {}).textContent?.toLowerCase() || ''; - item.style.display = (!q || text.includes(q)) ? '' : 'none'; - }); -} - -function renderEpisodeList(episodes, feedId, container) { - if (!container) return; - if (!episodes.length) { - container.innerHTML = 'No episodes found.
'; - return; - } - - container.innerHTML = ''; - episodes.forEach(ep => { - // Cache episode data by id so onclick attrs only need the id (avoids encoding - // strings with quotes inside HTML attributes which breaks the attribute parser) - podcastEpCache[ep.id] = { - id: ep.id, - title: ep.title, - description: ep.description || '', - audioUrl: ep.audio_url, - durationSeconds: ep.duration_seconds, - positionSeconds: ep.position_seconds || 0, - feedId: feedId || 0, - played: ep.played, - }; - - const div = document.createElement('div'); - div.className = 'episode-item' + (ep.played ? ' episode-played' : ''); - div.id = `episode-item-${ep.id}`; - - const artSrc = ep.artwork_url || (feedId ? (podcastFeeds.find(f => f.id === feedId) || {}).artwork_url || '' : ''); - const dur = formatDuration(ep.duration_seconds); - const dateStr = ep.pub_date ? ep.pub_date.slice(0, 10) : ''; - const posStr = ep.position_seconds > 0 ? formatDuration(ep.position_seconds) + ' played' : ''; - const progressPct = (ep.duration_seconds > 0 && ep.position_seconds > 0) - ? Math.min(100, (ep.position_seconds / ep.duration_seconds) * 100) : 0; - - div.innerHTML = ` - ${artSrc ? `Loading…
'; - inboxUpdateBulkBar(); - } - - try { - const res = await fetch(`/podcasts/inbox/?limit=${_inboxPageSize}&offset=${_inboxOffset}`); - const data = await res.json(); - const episodes = data.episodes || []; - - if (!append) listEl.innerHTML = ''; - - if (!episodes.length && !append) { - listEl.innerHTML = 'Inbox empty — all caught up!
'; - $('inbox-load-more-bar').style.display = 'none'; - return; - } - - episodes.forEach(ep => { - podcastEpCache[ep.id] = { - id: ep.id, - title: ep.title, - description: ep.description || '', - audioUrl: ep.audio_url, - durationSeconds: ep.duration_seconds, - positionSeconds: ep.position_seconds || 0, - feedId: ep['feed__id'], - played: false, - }; - - const progressPct = (ep.duration_seconds > 0 && ep.position_seconds > 0) - ? Math.min(100, (ep.position_seconds / ep.duration_seconds) * 100) : 0; - const dur = formatDuration(ep.duration_seconds); - const dateStr = ep.pub_date ? ep.pub_date.slice(0, 10) : ''; - const inQueue = ep.in_queue; - - const div = document.createElement('div'); - div.className = 'episode-item'; - div.dataset.epId = ep.id; - div.innerHTML = ` - - ${ep['feed__artwork_url'] ? `Failed to load inbox.
'; - } -} - -function inboxLoadMore() { - loadAndRenderInbox(true); -} - -function inboxGetSelectedIds() { - return Array.from(document.querySelectorAll('.inbox-cb:checked')) - .map(cb => parseInt(cb.dataset.epId, 10)); -} - -function inboxOnCheck() { - inboxUpdateBulkBar(); - // sync select-all state - const all = document.querySelectorAll('.inbox-cb'); - const checked = document.querySelectorAll('.inbox-cb:checked'); - const selectAll = $('inbox-select-all'); - if (selectAll) { - selectAll.indeterminate = checked.length > 0 && checked.length < all.length; - selectAll.checked = all.length > 0 && checked.length === all.length; - } -} - -function inboxSelectAll(checked) { - document.querySelectorAll('.inbox-cb').forEach(cb => { cb.checked = checked; }); - inboxUpdateBulkBar(); -} - -function inboxUpdateBulkBar() { - const ids = inboxGetSelectedIds(); - const bar = $('inbox-bulk-actions'); - const countEl = $('inbox-selection-count'); - if (!bar) return; - if (ids.length > 0) { - bar.style.display = ''; - if (countEl) countEl.textContent = `${ids.length} selected`; - } else { - bar.style.display = 'none'; - } -} - -async function inboxBulkDismiss() { - const ids = inboxGetSelectedIds(); - if (!ids.length) return; - try { - await fetch('/podcasts/progress/dismiss/', { - method: 'POST', - headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCsrfToken()}, - body: JSON.stringify({episode_ids: ids, dismissed: true}), - }); - ids.forEach(id => { - const div = document.querySelector(`.episode-item[data-ep-id="${id}"]`); - if (div) div.remove(); - }); - inboxUpdateBulkBar(); - const selectAll = $('inbox-select-all'); - if (selectAll) { selectAll.checked = false; selectAll.indeterminate = false; } - if (!document.querySelector('.inbox-cb')) { - const listEl = $('podcast-inbox-list'); - if (listEl && !listEl.querySelector('.episode-item')) { - listEl.innerHTML = 'Inbox empty — all caught up!
'; - } - } - } catch (e) {} -} - -async function inboxDismissOne(epId, btn) { - try { - await fetch('/podcasts/progress/dismiss/', { - method: 'POST', - headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCsrfToken()}, - body: JSON.stringify({episode_ids: [epId], dismissed: true}), - }); - const div = document.querySelector(`.episode-item[data-ep-id="${epId}"]`); - if (div) div.remove(); - if (!document.querySelector('.inbox-cb')) { - const listEl = $('podcast-inbox-list'); - if (listEl && !listEl.querySelector('.episode-item')) { - listEl.innerHTML = 'Inbox empty — all caught up!
'; - } - } - } catch (e) {} -} - -async function inboxBulkQueueAdd() { - const ids = inboxGetSelectedIds(); - for (const id of ids) { - await queueAddEpisode(id); - } - // Update queue button states - ids.forEach(id => { - const div = document.querySelector(`.episode-item[data-ep-id="${id}"]`); - if (div) { - const qBtn = div.querySelector('.episode-actions .btn-sm:nth-child(2)'); - if (qBtn) { qBtn.textContent = '✓Q'; qBtn.title = 'In queue'; } - } - }); -} - -async function inboxBulkMarkPlayed() { - const ids = inboxGetSelectedIds(); - try { - for (const id of ids) { - await fetch('/podcasts/progress/mark-played/', { - method: 'POST', - headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCsrfToken()}, - body: JSON.stringify({episode_id: id, played: true}), - }); - } - ids.forEach(id => { - const div = document.querySelector(`.episode-item[data-ep-id="${id}"]`); - if (div) div.remove(); - }); - inboxUpdateBulkBar(); - const selectAll = $('inbox-select-all'); - if (selectAll) { selectAll.checked = false; selectAll.indeterminate = false; } - } catch (e) {} -} - -async function inboxBulkDownload() { - const ids = inboxGetSelectedIds(); - for (const id of ids) { - const ep = podcastEpCache[id]; - if (ep) await downloadEpisode(ep.audioUrl, ep.title, null); - } -} - -async function loadAndRenderQueue() { - const ol = $('podcast-queue-ol'); - if (!ol) return; - ol.innerHTML = 'Keine Shownotes.
'; + notes.querySelectorAll('a[href]').forEach(a => a.setAttribute('target', '_blank')); + if (live) { + linkStamps(notes); + notes.addEventListener('click', ev => { + const a = ev.target.closest('a.nui-pod-stamp'); + if (!a) return; + ev.preventDefault(); + N.podcastSeek(parseInt(a.dataset.t, 10) * 1000); + }); + } + body.append(notes); + } + }; + const tab = (which, label) => { + const b = el('button', 'nui-pod-subtab', label); + b.type = 'button'; + b.dataset.which = which; + b.addEventListener('click', () => show(which)); + tabs.append(b); + }; + if (chapters.length) tab('chapters', `Kapitel (${chapters.length})`); + tab('notes', 'Shownotes'); + if (d.has_transcript) tab('transcript', 'Transkript'); + box.append(tabs, body); + show(chapters.length ? 'chapters' : 'notes'); + } + + function markChapter(scope, seconds) { + const items = scope.querySelectorAll('.nui-pod-chapter'); + let current = -1; + items.forEach((li, i) => { if (parseFloat(li.dataset.start) <= seconds + 0.5) current = i; }); + items.forEach((li, i) => li.classList.toggle('current', i === current)); + const now = scope.querySelector('.nui-pod-chapnow'); + if (now) { + const d = storedDetails(parseInt((scope.querySelector('.nui-pod-notesbox') || scope).dataset.episode, 10)); + const ch = d && d.chapters ? d.chapters.filter(c => c.start <= seconds + 0.5).pop() : null; + now.textContent = ch ? plain(ch.title || '') : ''; + } + markTranscript(scope, seconds); + } + + // ---- transcript: follows the playback, a tap jumps there -------------------------------- + + const transcripts = new Map(); + let transcriptTouched = 0; // the user scrolled the transcript: don't pull it along for a while + + async function showTranscript(body, id, live) { + body.append(el('div', 'nui-pod-meta', 'Transkript wird geladen …')); + let t = transcripts.get(id); + if (!t) { + try { + const r = await fetch(`/podcasts/episodes/${id}/transcript/`); + if (!r.ok) throw new Error(r.status); + t = await r.json(); + transcripts.set(id, t); + } catch (e) { + body.textContent = ''; + body.append(el('div', 'nui-pod-meta', navigator.onLine ? 'Für diese Folge gibt es kein lesbares Transkript.' : 'Das Transkript braucht eine Verbindung.')); + return; + } + } + body.textContent = ''; + const list = el('div', 'nui-pod-transcript'); + for (const seg of t.segments || []) { + const p = el('p', 'nui-pod-seg'); + p.dataset.start = String(seg.start || 0); + if (seg.speaker) p.append(el('strong', 'nui-pod-speaker', seg.speaker + ': ')); + p.append(document.createTextNode(seg.text || '')); + if (live) p.addEventListener('click', () => N.podcastSeek(Math.round((seg.start || 0) * 1000))); + list.append(p); + } + list.addEventListener('touchstart', () => { transcriptTouched = Date.now(); }, {passive: true}); + body.append(list); + markTranscript(body, (player.pos || 0) / 1000); + } + + function markTranscript(scope, seconds) { + const segs = scope.querySelectorAll('.nui-pod-seg'); + if (!segs.length) return; + let current = null; + segs.forEach(p => { if (parseFloat(p.dataset.start) <= seconds + 0.3) current = p; }); + segs.forEach(p => p.classList.toggle('current', p === current)); + if (current && current.dataset.shown !== '1' && Date.now() - transcriptTouched > 8000) { + segs.forEach(p => { p.dataset.shown = ''; }); + current.dataset.shown = '1'; + current.scrollIntoView({block: 'center', behavior: 'smooth'}); + } + } + + // Shownotes of an episode that isn't playing: its own sheet. + let notesSheet = null; + + function openNotes(e) { + closeNotes(); + notesSheet = el('div'); + notesSheet.id = 'nui-pod-player'; + notesSheet.className = 'nui-pod-notes-sheet'; + const panel = el('div', 'nui-pod-player-panel'); + const top = el('div', 'nui-pod-player-top'); + top.append(button('⌄', 'Schließen', closeNotes)); + panel.append(top, el('div', 'nui-pod-player-title', e.title), el('div', 'nui-pod-player-feed', e.feed || '')); + const play1 = el('button', 'btn nui-pod-notes-play', '▶ Abspielen'); + play1.type = 'button'; + play1.addEventListener('click', () => { closeNotes(); play(e); }); + panel.append(play1); + const box = el('div', 'nui-pod-notesbox'); + panel.append(box); + notesSheet.append(panel); + notesSheet.addEventListener('click', ev => { if (ev.target === notesSheet) closeNotes(); }); + document.body.append(notesSheet); + showDetails(box, e.id, false); + } + + function closeNotes() { + if (!notesSheet) return false; + notesSheet.remove(); + notesSheet = null; + return true; + } + + function openPlayer() { + if (player.kind !== 'podcast') return; + closePlayer(); + sheet = el('div'); + sheet.id = 'nui-pod-player'; + sheet.innerHTML = ''; + const panel = sheet.firstChild; + const top = el('div', 'nui-pod-player-top'); + top.append(button('⌄', 'Player schließen', closePlayer)); + panel.append(top, art(player.artwork, 'player')); + panel.append(el('div', 'nui-pod-player-title'), el('div', 'nui-pod-player-feed')); + const range = el('input', 'nui-pod-seek'); + range.type = 'range'; + range.min = 0; + range.step = 1; + range.id = 'nui-pod-seek'; + range.addEventListener('input', () => { + seeking = true; + sheet.querySelector('.nui-pod-time-pos').textContent = clock(range.value); + }); + range.addEventListener('change', () => { + N.podcastSeek(range.value * 1000); + seeking = false; + }); + const times = el('div', 'nui-pod-times'); + times.append(el('span', 'nui-pod-time-pos'), el('span', 'nui-pod-time-left')); + panel.append(range, times); + const prefs = devicePrefs(); + const back = prefs.skip_back || 15; + const fwd = prefs.skip_forward || 30; + const controls = el('div', 'nui-pod-controls'); + controls.append( + button(String(back), `${back} Sekunden zurück`, () => N.podcastSkip(false), 'nui-pod-back'), + button('▶', 'Abspielen', () => N.podcastToggle(), 'nui-pod-play'), + button(String(fwd), `${fwd} Sekunden vor`, () => N.podcastSkip(true), 'nui-pod-fwd'), + ); + panel.append(controls); + const extra = el('div', 'nui-pod-extra'); + extra.append( + button('1×', 'Geschwindigkeit', speedMenu, 'nui-pod-speed'), + button('☾', 'Sleep-Timer', sleepMenu, 'nui-pod-sleep'), + button('☆', 'Favorit', () => toggleFavorite({id: player.episodeId}, star => { + const b = sheet && sheet.querySelector('.nui-pod-fav'); + if (b) { b.textContent = star ? '★' : '☆'; b.classList.toggle('on', star); } + }), 'nui-pod-fav'), + button('⏭', 'Folge abschließen, nächste spielen', finishAndNext, 'nui-pod-next'), + button('≡', 'Warteschlange', () => { closePlayer(); view = 'queue'; feedView = null; showTab('podcasts'); render(); }), + ); + panel.append(extra); + const notes = el('div', 'nui-pod-notesbox'); + panel.append(notes); + sheet.addEventListener('click', e => { if (e.target === sheet) closePlayer(); }); + document.body.append(sheet); + sheetEpisode = player.episodeId; + showDetails(notes, player.episodeId, true); + renderPlayer(); + } + + function closePlayer() { + if (!sheet) return false; + sheet.remove(); + sheet = null; + return true; + } + + function renderPlayer() { + if (!sheet) return; + if (player.kind !== 'podcast') { closePlayer(); return; } + if (sheetEpisode !== player.episodeId) { + // The next episode started while the player was open. + sheetEpisode = player.episodeId; + showDetails(sheet.querySelector('.nui-pod-notesbox'), player.episodeId, true); + } + markChapter(sheet, (player.pos || 0) / 1000); + sheet.querySelector('.nui-pod-player-title').textContent = player.title || ''; + sheet.querySelector('.nui-pod-player-feed').textContent = player.feed || ''; + const range = sheet.querySelector('.nui-pod-seek'); + const dur = Math.round((player.dur || 0) / 1000); + const pos = Math.round((player.pos || 0) / 1000); + range.max = dur || 1; + if (!seeking) { + range.value = pos; + sheet.querySelector('.nui-pod-time-pos').textContent = clock(pos); + } + sheet.querySelector('.nui-pod-time-left').textContent = dur ? '−' + clock(dur - pos) : ''; + const p = sheet.querySelector('.nui-pod-play'); + p.textContent = player.playing ? '❚❚' : '▶'; + p.title = player.playing ? 'Pause' : 'Abspielen'; + const sp = sheet.querySelector('.nui-pod-speed'); + sp.textContent = speedLabel(player.speed || 1) + (player.podcastSpeed ? '•' : ''); + sp.title = player.podcastSpeed ? 'Geschwindigkeit (eigene für diesen Podcast)' : 'Geschwindigkeit'; + const sl = sheet.querySelector('.nui-pod-sleep'); + sl.textContent = sleepLabel() || '☾'; + sl.classList.toggle('on', !!sleepLabel()); + const img = sheet.querySelector('.nui-pod-art-player img'); + const src = (player.artwork || '').replace(/^http:/, 'https:'); + if (img && src && img.getAttribute('src') !== src) img.src = src; + } + + function speedLabel(s) { + return String(Math.round(s * 100) / 100).replace('.', ',') + '×'; + } + + // Speed: for all podcasts, or (AntennaPod-like) remembered for this podcast. + function speedMenu() { + const own = !!player.podcastSpeed; + const pick = forPodcast => openSheet(forPodcast ? `Geschwindigkeit für „${plain(player.feed)}“` : 'Geschwindigkeit für alle Podcasts', + SPEEDS.map(s => ({ + icon: Math.abs((player.speed || 1) - s) < 0.01 && own === forPodcast ? '●' : '○', + label: speedLabel(s), + action: () => (forPodcast ? N.podcastSpeedForPodcast(s) : N.podcastSpeed(s)), + })).concat(forPodcast && own ? [{icon: '↺', label: 'Wie alle anderen Podcasts', action: () => N.podcastSpeedForPodcast(0)}] : [])); + if (!N.podcastSpeedForPodcast || !player.feedId) { pick(false); return; } + openSheet('Geschwindigkeit', [ + {icon: '◎', label: 'Für alle Podcasts', hint: own ? null : speedLabel(player.speed || 1), action: () => pick(false)}, + {icon: '◉', label: `Nur für „${plain(player.feed)}“`, hint: own ? speedLabel(player.speed || 1) : 'noch keine eigene', + action: () => pick(true)}, + ]); + } + + // ---- sleep timer (runs in the app, also with the screen off) ---- + + function sleepLabel() { + const t = player.sleep || {}; + if (t.episodes > 0) return t.episodes === 1 ? '☾ Folgenende' : `☾ ${t.episodes} Folgen`; + if (t.leftMs > 0) return `☾ ${Math.max(1, Math.ceil(t.leftMs / 60000))} min`; + return ''; + } + + // Minutes count only while playing; shaking the phone starts them over. + function sleepMenu() { + if (!N.podcastSleep) return; + const t = player.sleep || {}; + const on = !!sleepLabel(); + const items = []; + if (on) { + items.push({icon: '✕', label: 'Ausschalten', hint: sleepLabel().replace('☾ ', 'läuft: '), action: () => N.podcastSleep(0)}); + if (t.leftMs > 0 && N.podcastSleepExtend) { + items.push({icon: '+', label: '5 Minuten länger', action: () => N.podcastSleepExtend(5)}); + items.push({icon: '+', label: '10 Minuten länger', action: () => N.podcastSleepExtend(10)}); + } + } + for (const m of [5, 10, 15, 30, 45, 60, 90]) { + items.push({icon: '☾', label: `${m} Minuten`, hint: m === t.last && !on ? 'zuletzt' : null, action: () => N.podcastSleep(m)}); + } + items.push({icon: '⏹', label: 'Am Ende der Folge', action: () => N.podcastSleep(-1)}); + items.push({icon: '⏹', label: 'Nach 2 Folgen', action: () => N.podcastSleep(-2)}); + items.push({icon: '⏹', label: 'Nach 3 Folgen', action: () => N.podcastSleep(-3)}); + if (N.podcastSleepAuto) { + items.push({icon: t.auto ? '☑' : '☐', label: 'Nachts von selbst (22–6 Uhr)', + hint: t.auto ? `an: ${t.last || 15} Minuten, wenn eine Folge startet` : 'aus', + action: () => { N.podcastSleepAuto(!t.auto); t.auto = !t.auto; }}); + } + openSheet('Sleep-Timer', items); + } + + function finishAndNext() { + const id = currentId(); + if (!id) return; + N.podcastNext(); + N.podcastMarkPlayed(id, true); + } + + // ---- downloads (Downloads.kt) ------------------------------------------------------------ + // Episodes kept on the phone to play without a connection. Each episode row + // gets a mark (↓ fetch it, a ring while it loads, ✓ when it's here), the ⋯ + // menus and the settings sheet get their entries. The app downloads the + // first episodes of the queue by itself and tells us via __dioraDownloads. + + const DL = !!N.podcastDownloads; + let downloads = DL ? parse(N.podcastDownloads(), {}) : {}; + let dlSettings = DL ? parse(N.podcastDownloadSettings(), {}) : {}; + const DL_COUNTS = [1, 2, 3, 5, 10]; + // The limit and the clean-up the AntennaPod way (Downloads.kt, DownloadPlan.toClean). + const DL_LIMITS = [5, 10, 25, 50, 100, 500, 0]; + const DL_CLEANUPS = [ + {value: 'queue', label: 'Wenn nicht mehr in der Warteschlange', + hint: 'automatische Downloads, sobald ihre Folge dort fehlt; beim Limit auch gehörte'}, + {value: 'never', label: 'Nie', hint: 'beim Limit lädt die App nichts mehr von selbst'}, + ]; + const dlLimitLabel = n => (n ? n + ' Folgen' : 'Unbegrenzt'); + + function size(bytes) { + if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1).replace('.', ',') + ' GB'; + return Math.max(1, Math.round((bytes || 0) / 1048576)) + ' MB'; + } + + function dlStart(e) { + N.podcastDownload(JSON.stringify(e.raw)); + window.__dioraDownloads(Object.assign({}, downloads, {[e.id]: {state: 'queued', progress: 0, bytes: 0, total: 0}})); + toast('Wird heruntergeladen'); + } + + function dlDelete(e, running) { + N.podcastDeleteDownload(e.id); + toast(running ? 'Download abgebrochen' : 'Download gelöscht'); + } + + function dlAppend(row, e) { + if (!DL || !(e.raw.episode__audio_url || e.raw.audio_url)) return; + const d = downloads[e.id]; + const state = d ? d.state : null; + let b; + if (state === 'done') { + b = button('✓', 'Heruntergeladen', () => openSheet(e.title, dlMenuItems(e)), 'nui-pod-dl nui-pod-dl-done'); + } else if (state === 'queued' || state === 'downloading') { + b = button('', state === 'queued' ? 'Wartet auf den Download' : 'Wird heruntergeladen', + () => openSheet(e.title, dlMenuItems(e)), 'nui-pod-dl nui-pod-dl-ring'); + b.append(el('span')); + } else { + b = button('↓', state === 'failed' ? 'Download hat nicht geklappt — nochmal' : 'Herunterladen', () => dlStart(e), + 'nui-pod-dl' + (state === 'failed' ? ' nui-pod-dl-failed' : '')); + } + b.dataset.dl = e.id; + dlRing(b); + row.append(b); + } + + function dlRing(b) { + const d = downloads[b.dataset.dl]; + if (!d || (d.state !== 'queued' && d.state !== 'downloading')) return; + b.style.setProperty('--p', (d.progress || 0) + '%'); + b.firstChild.textContent = d.state === 'queued' ? '…' : d.progress + ''; + } + + function dlMenuItems(e) { + if (!DL || !(e.raw.episode__audio_url || e.raw.audio_url)) return []; + const d = downloads[e.id]; + if (!d || d.state === 'failed') { + return [{icon: '↓', label: 'Herunterladen', hint: d ? 'hat eben nicht geklappt (' + (d.error || '?') + ')' : 'zum Hören ohne Verbindung', + action: () => dlStart(e)}]; + } + if (d.state === 'done') return [{icon: '✕', label: 'Download löschen', hint: size(d.bytes), action: () => dlDelete(e)}]; + return [{icon: '✕', label: 'Download abbrechen', hint: d.state === 'queued' ? 'wartet noch' : d.progress + ' %', + action: () => dlDelete(e, true)}]; + } + + function dlSet(changes) { + Object.assign(dlSettings, changes); + N.podcastSetDownloadSettings(JSON.stringify(changes)); + settingsMenu(); + } + + function dlSettingsItems() { + if (!DL) return []; + const s = dlSettings = parse(N.podcastDownloadSettings(), dlSettings); + const done = Object.values(downloads).filter(d => d.state === 'done'); + const bytes = done.reduce((n, d) => n + (d.bytes || 0), 0); + return [ + {icon: s.auto ? '☑' : '☐', label: 'Automatisch herunterladen', + hint: s.auto ? `die ersten ${s.count} Folgen der Warteschlange` : 'aus', action: () => dlSet({auto: !s.auto})}, + s.auto && {icon: '#', label: 'Wie viele Folgen', hint: String(s.count), action: () => openSheet('Automatisch herunterladen', + DL_COUNTS.map(n => ({icon: s.count === n ? '●' : '○', label: n === 1 ? '1 Folge' : n + ' Folgen', active: s.count === n, + action: () => dlSet({count: n})})))}, + s.auto && {icon: s.mobile ? '☑' : '☐', label: 'Auch über mobile Daten', hint: s.mobile ? 'nicht nur im WLAN' : 'sonst nur im WLAN', + action: () => dlSet({mobile: !s.mobile})}, + {icon: s.deletePlayed ? '☑' : '☐', label: 'Gehörte Folgen löschen', + hint: 'sobald die Folge zu Ende ist – nicht bei Favoriten', + action: () => dlSet({deletePlayed: !s.deletePlayed})}, + s.limit != null && {icon: '▦', label: 'Höchstens behalten', + hint: dlLimitLabel(s.limit) + ` · jetzt ${Object.values(downloads).filter(d => d.state !== 'failed').length}`, + action: () => openSheet('Höchstens so viele Folgen auf dem Telefon', DL_LIMITS.map(n => ({ + icon: s.limit === n ? '●' : '○', label: dlLimitLabel(n), active: s.limit === n, + hint: n === 25 ? 'Standard' : null, action: () => dlSet({limit: n})})))}, + s.cleanup && {icon: '♻', label: 'Aufräumen', hint: (DL_CLEANUPS.find(c => c.value === s.cleanup) || DL_CLEANUPS[0]).label, + action: () => openSheet('Downloads aufräumen', DL_CLEANUPS.map(c => ({ + icon: s.cleanup === c.value ? '●' : '○', label: c.label, hint: c.hint, active: s.cleanup === c.value, + action: () => dlSet({cleanup: c.value})})))}, + done.length > 0 && {icon: '✕', label: `Downloads löschen (${size(bytes)})`, danger: true, + hint: done.length === 1 ? '1 Folge' : done.length + ' Folgen', + action: () => openSheet(`Alle ${done.length} Downloads löschen?`, [ + {icon: '✕', label: 'Löschen', hint: size(bytes), danger: true, + action: () => { N.podcastDeleteAllDownloads(); toast('Downloads gelöscht'); }}, + {icon: '‹', label: 'Abbrechen', action: () => {}}, + ])}, + ]; + } + + window.__dioraDownloads = function (map) { + const before = downloads; + downloads = (typeof map === 'string' ? parse(map, downloads) : map) || {}; + const keys = Object.keys(downloads); + const same = keys.length === Object.keys(before).length && + keys.every(id => before[id] && before[id].state === downloads[id].state); + // Only the numbers moved: turn the rings, no new list (keeps a drag or a scroll going). + if (same) document.querySelectorAll('#nui-pod [data-dl]').forEach(dlRing); + else render(); + }; + + // ---- hooks from the app --------------------------------------------------------------- + + window.__dioraPodcasts = function (json) { + state = typeof json === 'string' ? parse(json, state) : json; + render(); + }; + + window.__dioraPodcastsRefreshed = function (ok) { + refreshing = false; + if (!ok) toast(navigator.onLine ? 'Abrufen hat nicht geklappt' : 'Offline — es gilt der letzte Stand'); + render(); + }; + + window.__dioraPlayer = function (p) { + const before = player; + player = p || {kind: null}; + renderMini(); + renderPlayer(); + // The current episode changed: the queue view marks it. + if (before.episodeId !== player.episodeId || before.kind !== player.kind) render(); + }; + + // The app loads this in ; the browser may load it after the page is parsed. + function start(fn) { + if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn); + else fn(); + } + + start(() => { + if (typeof showTab !== 'function') return; + // The web's podcast tab loads its own lists; the app has them already. + window.loadPodcastTab = function () {}; + window.refreshAllFeeds = async function () {}; + build(); + buildMini(); + player = parse(N.playerState(), {kind: null}); + render(); + renderMini(); + + const back = window.__dioraBack; + window.__dioraBack = function () { + if (closeStats()) return true; + if (closeNotes()) return true; + if (closePlayer()) return true; + if (typeof _currentTopTab !== 'undefined' && _currentTopTab === 'podcasts' && stopSelecting()) return true; + if (back && back()) return true; + if (typeof _currentTopTab !== 'undefined' && _currentTopTab === 'podcasts') { + if (feedView) { feedView = null; render(); return true; } + showTab('books'); + return true; + } + return false; + }; + + // Pull the latest state once per start; the server has done the fetching. + N.podcastRefresh(false); + }); +})(); diff --git a/static/podcasts/podcast-ui.css b/static/podcasts/podcast-ui.css new file mode 100644 index 0000000..1d49122 --- /dev/null +++ b/static/podcasts/podcast-ui.css @@ -0,0 +1,529 @@ +/* Copied from diora-android 62f3a69 2026-10-02: the podcast parts of web-native/static/native.css + (bottom sheet, podcasts) by tools/sync_podcast_ui.py. Do not edit here. + The web's own additions are in podcasts-web.css. */ + +/* ---- bottom sheet ---------------------------------------------------------------- */ + +#nui-sheet { + position: fixed; + inset: 0; + z-index: 900; +} + +.nui-backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.6); +} + +.nui-panel { + position: absolute; + left: 0; + right: 0; + bottom: 0; + max-height: 80vh; + overflow-y: auto; + background: var(--nui-panel); + border-top: 1px solid var(--border); + border-radius: 12px 12px 0 0; + padding: 8px 0 12px; + animation: nui-up 0.18s ease-out; +} + +@keyframes nui-up { + from { transform: translateY(40px); opacity: 0; } + to { transform: none; opacity: 1; } +} + +.nui-sheet-title { + padding: 10px 20px 8px; + font-size: 12px; + font-weight: 400; + color: var(--nui-muted); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.nui-row, +.nui-row-main { + display: flex; + align-items: center; + gap: 14px; + width: 100%; + min-height: 52px; + padding: 6px 20px; + background: none; + border: none; + color: var(--fg); + font: inherit; + font-size: 15px; + text-align: left; + cursor: pointer; +} + +.nui-row:active, +.nui-row-main:active { + background: #1d1d1d; +} + +.nui-row-icon { + width: 24px; + text-align: center; + flex-shrink: 0; + font-size: 18px; +} + +.nui-row-text { + display: flex; + flex-direction: column; + min-width: 0; +} + +.nui-row-hint { + font-size: 12px; + font-weight: 400; + color: var(--nui-muted); +} + +.nui-danger { color: var(--accent); } +.nui-active .nui-row-label { color: var(--accent); } + +.nui-row-split { + padding: 0 16px 0 0; +} +.nui-row-split .nui-row-main { + flex: 1; + width: auto; +} + +.nui-seg { + display: inline-flex; + border: 1px solid var(--border); + border-radius: 4px; + overflow: hidden; +} +.nui-seg button { + min-width: 44px; + min-height: 34px; + background: none; + border: none; + color: var(--nui-muted); + font: inherit; +} +.nui-seg button.nui-seg-on { + background: var(--fg); + color: var(--bg); +} + +/* ---- podcasts (phones only: html.nui-podcasts, see native-podcast.js) ------------ */ + +html.nui-podcasts #tab-podcasts > :not(#nui-pod) { display: none !important; } +html.nui-pod-playing #nui-mini { display: none !important; } +html.nui-radio.nui-pod-mini-open body { + padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); +} + +#nui-pod-bar { + display: flex; + align-items: center; + gap: 2px; + margin: 0 -4px 8px 0; +} +#nui-pod-bar .native-brand { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; } +.nui-pod-status { font-size: 12px; font-weight: 400; color: var(--nui-muted); } + +.nui-pod-tabs { + display: flex; + margin: 0 0 8px; + border-bottom: 1px solid var(--border); + overflow-x: auto; + scrollbar-width: none; +} +.nui-pod-tab { + flex: 1 0 auto; + min-height: var(--nui-tap); + padding: 0 10px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + border: none; + border-bottom: 2px solid transparent; + background: none; + color: var(--nui-muted); + font: inherit; + font-size: 14px; + white-space: nowrap; +} +.nui-pod-tab.active { color: inherit; font-weight: 700; border-bottom-color: var(--accent); } +.nui-pod-count { + min-width: 20px; + padding: 1px 6px; + border-radius: 10px; + background: #2a2a2a; + font-size: 11px; + font-weight: 700; + text-align: center; +} +.nui-pod-tab.active .nui-pod-count { background: var(--accent); color: #fff; } + +.nui-pod-summary { padding: 6px 2px 10px; font-size: 12px; color: var(--nui-muted); } +.nui-pod-empty { padding: 32px 12px; color: var(--nui-muted); text-align: center; line-height: 1.5; } + +.nui-pod-list { display: flex; flex-direction: column; } +.nui-pod-row { + display: flex; + align-items: center; + gap: 12px; + min-height: 72px; + padding: 8px 0; + border-bottom: 1px solid var(--border); + background: var(--bg); + -webkit-tap-highlight-color: transparent; +} +.nui-pod-row:active { background: #141414; } +.nui-pod-row.nui-pod-played .nui-pod-title { color: var(--nui-muted); font-weight: 400; } +.nui-pod-row.nui-pod-current .nui-pod-title { color: var(--accent); } +.nui-pod-row.nui-pod-current .nui-pod-title::before { content: '▶ '; } + +.nui-pod-art { + flex: none; + width: 52px; + height: 52px; + border-radius: 4px; + overflow: hidden; + background: #1c1c1c; +} +.nui-pod-art img { width: 100%; height: 100%; object-fit: cover; display: block; } +.nui-pod-art-big { width: 72px; height: 72px; } +.nui-pod-art-mini { width: 44px; height: 44px; margin-left: 10px; } +.nui-pod-art-player { width: min(72vw, 320px); height: min(72vw, 320px); border-radius: 8px; align-self: center; } + +.nui-pod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } +.nui-pod-title { + font-size: 15px; + font-weight: 700; + line-height: 1.3; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.nui-pod-meta { + font-size: 12px; + font-weight: 400; + color: var(--nui-muted); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.nui-pod-progress { height: 3px; margin-top: 4px; border-radius: 2px; background: #2a2a2a; overflow: hidden; max-width: 160px; } +.nui-pod-progress > span { display: block; height: 100%; background: var(--accent); } +.nui-pod-badge { + flex: none; + padding: 3px 7px; + border: 1px solid var(--border); + border-radius: 10px; + font-size: 11px; + color: var(--nui-muted); +} +.nui-pod-queued { color: var(--green); } + +.nui-pod-handle { + flex: none; + width: var(--nui-tap); + height: var(--nui-tap); + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; + color: var(--nui-muted); + touch-action: none; + cursor: grab; +} +.nui-pod-queue .nui-pod-row { transition: transform 0.15s ease; } +.nui-pod-queue .nui-pod-row.nui-pod-dragging { + transition: none; + position: relative; + z-index: 2; + background: #1a1a1a; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); +} + +.nui-pod-feedhead { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; } +.nui-pod-switch { + display: grid; + grid-template-columns: auto 1fr; + column-gap: 10px; + align-items: center; + padding: 10px 0; + border-bottom: 1px solid var(--border); + font-size: 14px; +} +.nui-pod-switch input { width: 20px; height: 20px; accent-color: var(--accent); } +.nui-pod-switch .nui-pod-meta { grid-column: 2; } + +.nui-pod-search { display: flex; gap: 8px; margin: 4px 0 10px; } +.nui-pod-search input { flex: 1; min-width: 0; min-height: var(--nui-tap); font-size: 16px; } +.nui-pod-search .btn { min-height: var(--nui-tap); } + +/* mini player in the bottom bar */ +#nui-pod-mini { + position: relative; + display: flex; + align-items: center; + gap: 2px; + height: 64px; + padding: 0 4px 0 0; + border-bottom: 1px solid var(--border); +} +#nui-pod-mini[hidden] { display: none; } +.nui-pod-mini-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #2a2a2a; } +.nui-pod-mini-bar span { display: block; height: 100%; background: var(--accent); } +.nui-pod-skip { font-size: 20px; } + +/* full player */ +#nui-pod-player { + position: fixed; + inset: 0; + z-index: 880; + background: rgba(0, 0, 0, 0.6); + display: flex; + align-items: flex-end; +} +.nui-pod-player-panel { + width: 100%; + max-height: 100%; + overflow-y: auto; + background: #0b0b0b; + border-top: 1px solid var(--border); + border-radius: 14px 14px 0 0; + padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px)); + display: flex; + flex-direction: column; + gap: 12px; +} +.nui-pod-player-top { display: flex; justify-content: center; } +.nui-pod-player-top .nui-icon { font-size: 26px; color: var(--nui-muted); } +.nui-pod-player-title { font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center; } +.nui-pod-player-feed { margin-top: -6px; font-size: 13px; color: var(--nui-muted); text-align: center; } +.nui-pod-seek { width: 100%; accent-color: var(--accent); height: 28px; } +.nui-pod-times { display: flex; justify-content: space-between; margin-top: -8px; font-size: 12px; color: var(--nui-muted); font-variant-numeric: tabular-nums; } +.nui-pod-controls { display: flex; align-items: center; justify-content: center; gap: 28px; } +.nui-pod-controls .nui-icon { font-size: 18px; font-weight: 700; } +.nui-pod-back::before { content: '↺'; font-size: 26px; margin-right: 2px; } +.nui-pod-fwd::after { content: '↻'; font-size: 26px; margin-left: 2px; } +.nui-pod-play { + width: 72px; + height: 72px; + border-radius: 50%; + background: var(--accent) !important; + color: #fff !important; + font-size: 26px !important; +} +.nui-pod-extra { display: flex; justify-content: space-around; } +.nui-pod-speed { font-size: 15px !important; font-weight: 700; min-width: 64px; } + +/* e-reader mode on a phone: black on white */ +body.eink .nui-pod-row { background: #fff; } +body.eink .nui-pod-row:active { background: #ddd; } +body.eink .nui-pod-count { background: #ddd; color: #000; } +body.eink .nui-pod-tab.active { border-bottom-color: #000; color: #000; } +body.eink .nui-pod-tab.active .nui-pod-count { background: #000; color: #fff; } +body.eink .nui-pod-progress { background: #ccc; } +body.eink .nui-pod-progress > span, +body.eink .nui-pod-mini-bar span { background: #000; } +body.eink .nui-pod-row.nui-pod-current .nui-pod-title { color: #000; } +body.eink .nui-pod-player-panel { background: #fff; border-top: 2px solid #000; } +body.eink .nui-pod-play { background: #000 !important; } +body.eink .nui-pod-art { background: #eee; } + +/* podcast queue tools: sort, choose several, lock */ +.nui-pod-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } +.nui-pod-head .nui-pod-summary { padding: 6px 2px; } +.nui-pod-tools { display: flex; align-items: center; margin-right: -6px; } +.nui-pod-tools .nui-icon { font-size: 18px; color: var(--nui-muted); } +.nui-pod-lock.on { color: var(--accent) !important; } +.nui-pod-selbar { + position: sticky; + top: 0; + z-index: 5; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px 6px; + margin: 0 -12px 4px; + padding: 6px 12px 8px; + background: var(--bg); + border-bottom: 1px solid var(--border); +} +.nui-pod-selcount { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; } +.nui-pod-selactions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; } +.nui-pod-selactions .btn { min-height: 38px; flex: 1 0 auto; } +.nui-pod-selactions .btn:disabled { opacity: 0.4; } +.nui-pod-check { flex: none; width: 28px; font-size: 22px; color: var(--nui-muted); text-align: center; } +.nui-pod-check.on { color: var(--accent); } +.nui-pod-row.nui-pod-selecting { user-select: none; -webkit-user-select: none; } +body.eink .nui-pod-check.on, +body.eink .nui-pod-lock.on { color: #000 !important; } +body.eink .nui-pod-selbar { background: #fff; } + +/* podcast playback: per-podcast chips, sleep timer */ +.nui-pod-feedprefs { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); } +.nui-pod-chip { + display: inline-flex; + align-items: baseline; + gap: 6px; + min-height: 36px; + padding: 6px 12px; + border: 1px solid var(--border); + border-radius: 18px; + background: none; + color: var(--nui-muted); + font: inherit; + font-size: 13px; +} +.nui-pod-chip strong { color: inherit; font-weight: 700; } +.nui-pod-chip.on { border-color: var(--accent); color: inherit; } +.nui-pod-chip.on strong { color: var(--accent); } +.nui-pod-sleep { font-size: 15px !important; white-space: nowrap; } +.nui-pod-sleep.on { color: var(--accent) !important; font-weight: 700; } +/* unsubscribing: a quiet link, asked once more in place */ +.nui-pod-unsub { display: flex; justify-content: flex-end; padding: 6px 0; border-bottom: 1px solid var(--border); } +.nui-pod-unsub-btn { + min-height: var(--nui-tap, 44px); + padding: 0 4px; + border: none; + background: none; + color: var(--nui-muted); + font: inherit; + font-size: 13px; +} +.nui-pod-unsub-ask { display: block; padding: 12px 0; } +.nui-pod-unsub-ask .nui-pod-title { display: block; overflow: visible; } +.nui-pod-unsub-ask .nui-pod-meta { margin-top: 4px; line-height: 1.4; white-space: normal; overflow: visible; } +.nui-pod-unsub-actions { display: flex; gap: 8px; margin-top: 10px; } +.nui-pod-unsub-actions .btn { min-height: var(--nui-tap, 44px); } +.nui-pod-unsub-yes { color: var(--accent); border-color: var(--accent); font-weight: 700; } +body.eink .nui-pod-unsub-yes { color: #000; border-color: #000; } +body.eink .nui-pod-chip.on { border-color: #000; } +body.eink .nui-pod-chip.on strong, +body.eink .nui-pod-sleep.on { color: #000 !important; } + +/* podcast chapters and shownotes */ +.nui-pod-notesbox { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; min-height: 40px; } +.nui-pod-subtabs { display: flex; gap: 4px; margin-bottom: 6px; } +.nui-pod-subtab { + min-height: 36px; + padding: 0 12px; + border: none; + border-bottom: 2px solid transparent; + background: none; + color: var(--nui-muted); + font: inherit; + font-size: 14px; +} +.nui-pod-subtab.active { color: inherit; font-weight: 700; border-bottom-color: var(--accent); } +.nui-pod-chapters { list-style: none; margin: 0; padding: 0; } +.nui-pod-chapter { + display: grid; + grid-template-columns: 4.5em 1fr; + gap: 10px; + align-items: baseline; + padding: 10px 4px; + border-bottom: 1px solid var(--border); + font-size: 14px; + cursor: pointer; +} +.nui-pod-chapter-t { color: var(--nui-muted); font-size: 12px; font-variant-numeric: tabular-nums; } +.nui-pod-chapter.current { color: var(--accent); font-weight: 700; } +.nui-pod-chapter.current .nui-pod-chapter-t { color: var(--accent); } +.nui-pod-notes { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; } +.nui-pod-notes img { max-width: 100%; height: auto; } +.nui-pod-notes a { color: var(--accent); } +.nui-pod-notes .nui-pod-stamp { font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; } +.nui-pod-notes table { display: block; overflow-x: auto; } +.nui-pod-notes-sheet .nui-pod-player-panel { max-height: 88%; } +.nui-pod-notes-play { align-self: center; min-height: var(--nui-tap); } +body.eink .nui-pod-chapter.current, +body.eink .nui-pod-chapter.current .nui-pod-chapter-t, +body.eink .nui-pod-notes a { color: #000; } +body.eink .nui-pod-subtab.active { border-bottom-color: #000; color: #000; } + +/* ---- podcast downloads (Downloads.kt; the "downloads" block of native-podcast.js) ---- */ +.nui-pod-dl { min-width: 36px !important; margin-left: -6px; font-size: 22px; color: var(--nui-muted); } +.nui-pod-dl-failed { color: var(--yellow); } +/* ✓ in a ring: set apart from the plain green ✓ of "in der Warteschlange" */ +.nui-pod-dl.nui-pod-dl-done { + position: relative; + font-size: 12px; + font-weight: 700; + color: var(--green); +} +.nui-pod-dl-done::after { + content: ''; + position: absolute; + width: 20px; + height: 20px; + left: 50%; + top: 50%; + margin: -11px 0 0 -11px; + border: 1px solid var(--green); + border-radius: 50%; +} +.nui-pod-dl-ring > span { + width: 26px; + height: 26px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 9px; + font-weight: 700; + color: var(--nui-muted); + background: + radial-gradient(closest-side, var(--bg) 78%, transparent 80% 100%), + conic-gradient(var(--accent) var(--p, 0%), #2a2a2a 0); +} +body.eink .nui-pod-dl-done { color: #000; } +body.eink .nui-pod-dl-done::after { border-color: #000; } +body.eink .nui-pod-dl-ring > span { + color: #000; + background: + radial-gradient(closest-side, #fff 78%, transparent 80% 100%), + conic-gradient(#000 var(--p, 0%), #ccc 0); +} + +/* tab row scrolls sideways without a visible bar; the lock emoji in the app's greys */ +.nui-pod-tabs::-webkit-scrollbar { display: none; } +.nui-pod-lock { filter: grayscale(1); opacity: 0.6; } +.nui-pod-lock.on { opacity: 1; filter: grayscale(1) brightness(1.4); } + +/* episode filters: one row that scrolls sideways */ +.nui-pod-filters { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 10px; scrollbar-width: none; } +.nui-pod-filters::-webkit-scrollbar { display: none; } +.nui-pod-filters .nui-pod-chip { flex: none; } +.nui-pod-more { display: block; margin: 12px auto; min-height: var(--nui-tap); } +.nui-pod-star { color: var(--yellow); } +.nui-pod-fav.on { color: var(--yellow) !important; } +.nui-pod-stat-total { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 18px; } +.nui-pod-stat-total strong { font-size: 30px; } +.nui-pod-stat-total span { font-size: 13px; color: var(--nui-muted); } +.nui-pod-stat-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } +.nui-pod-stat-bar { max-width: none; height: 5px; } +body.eink .nui-pod-star, body.eink .nui-pod-fav.on { color: #000 !important; } + +/* feed errors, chapter navigation, transcript */ +.nui-pod-feederr { font-size: 12px; color: var(--yellow); } +.nui-pod-feederr-box { padding: 8px 10px; margin: 4px 0 8px; border: 1px solid var(--yellow); border-radius: 6px; line-height: 1.4; } +.nui-pod-chapnav { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } +.nui-pod-chapnow { flex: 1; min-width: 0; text-align: center; font-size: 13px; color: var(--nui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.nui-pod-transcript { max-height: 60vh; overflow-y: auto; padding-right: 4px; } +.nui-pod-seg { margin: 0; padding: 6px 4px; font-size: 14px; line-height: 1.5; color: var(--nui-muted); border-radius: 4px; cursor: pointer; } +.nui-pod-seg.current { color: inherit; background: #1a1a1a; } +.nui-pod-speaker { color: inherit; } +body.eink .nui-pod-feederr { color: #000; } +body.eink .nui-pod-feederr-box { border-color: #000; } +body.eink .nui-pod-seg { color: #444; } +body.eink .nui-pod-seg.current { color: #000; background: #e6e6e6; } diff --git a/static/podcasts/podcasts-web.css b/static/podcasts/podcasts-web.css new file mode 100644 index 0000000..de7c0cc --- /dev/null +++ b/static/podcasts/podcasts-web.css @@ -0,0 +1,189 @@ +/* Podcasts in the browser (static/js/podcasts-web.js): the app's podcast page + — its styles are podcast-ui.css, copied from diora-android's native.css by + tools/sync_podcast_ui.py — set into the web layout. The app's look stays + (black, monospace, red accent); on wide screens the podcast page, its mini + player and its sheets keep to one centred column. Only loaded in browsers; + everything is scoped to html.dpw. */ + +html.dpw { + --nui-tap: 44px; + --nui-muted: #9a9a9a; + --nui-panel: #111; + --dpw-surface: #0b0b0b; + --dpw-hover: #111; + --dpw-col: 760px; +} + +/* The placeholder shown until the page is there. */ +html.nui-podcasts #tab-podcasts > :not(#nui-pod) { display: none !important; } +.dpw-loading { padding: 2rem 0; text-align: center; } + +html.dpw #nui-pod { + max-width: var(--dpw-col); + margin: 0 auto; +} + +/* ---- what the app has in its other native styles ---------------------------------- */ + +html.dpw .nui-icon { + min-width: var(--nui-tap); + min-height: var(--nui-tap); + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 20px; + padding: 0; +} +html.dpw .nui-icon:hover { color: var(--fg); } + +html.dpw .nui-bar-text { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; +} + +/* ---- the dock: mini player right above the radio bar ----------------------------- */ + +html.dpw #nui-dock { + position: fixed; + left: 0; + right: 0; + bottom: var(--dpw-bar-h, 72px); + z-index: 190; /* under the reader (200), the sidebar and the sheets */ + max-width: var(--dpw-col); + margin: 0 auto; +} +html.dpw body.dnd-mode #nui-dock { display: none; } +html.dpw #nui-pod-mini { + background: var(--dpw-surface); + border: 1px solid var(--border); + border-bottom: none; + border-radius: 10px 10px 0 0; + overflow: hidden; + box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5); +} +html.dpw .nui-pod-mini-bar { top: 0; } +html.dpw.nui-pod-mini-open .main-content { + padding-bottom: calc(var(--dpw-bar-h, 72px) + 64px + 2rem); +} + +html.dpw .nui-mini-text { + flex: 1; + min-width: 0; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 2px; + padding: 0 14px; + background: none; + border: none; + color: inherit; + font: inherit; + text-align: left; + cursor: pointer; +} +html.dpw .nui-mini-station, +html.dpw .nui-mini-track { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +html.dpw .nui-mini-station { font-size: 15px; font-weight: 700; } +html.dpw .nui-mini-track { font-size: 12px; font-weight: 400; color: var(--nui-muted); } +html.dpw .nui-mini-track:empty { display: none; } +html.dpw .nui-mini-toggle { font-size: 22px; color: var(--accent); } + +#nui-radio-toast { + position: fixed; + left: 50%; + bottom: calc(var(--dpw-bar-h, 72px) + 80px); + transform: translateX(-50%); + z-index: 950; + max-width: calc(100% - 32px); + padding: 10px 16px; + border-radius: 6px; + background: #222; + color: #fff; + font-size: 14px; + text-shadow: none; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s; +} +#nui-radio-toast.nui-show { opacity: 1; } + +/* ---- a mouse: hover states the phone doesn't need --------------------------------- */ + +@media (hover: hover) { + html.dpw #nui-pod .nui-pod-row { cursor: pointer; } + html.dpw #nui-pod .nui-pod-row:hover { background: var(--dpw-hover); } + html.dpw .nui-row:hover { background: #1a1a1a; } + html.dpw .nui-pod-chip:hover, + html.dpw .nui-pod-tab:hover, + html.dpw .nui-pod-subtab:hover { color: var(--fg); } + html.dpw .nui-pod-chapter:hover, + html.dpw .nui-pod-seg:hover { background: #141414; } +} +html.dpw .nui-row, +html.dpw .nui-pod-tab, +html.dpw .nui-pod-chip, +html.dpw .nui-pod-subtab { cursor: pointer; } + +/* ---- wide screens: sheets and the player in the column ------------------------------ */ + +@media (min-width: 761px) { + html.dpw .nui-panel { + margin: 0 auto; + max-width: 560px; + border: 1px solid var(--border); + border-bottom: none; + } + html.dpw #nui-pod-player { justify-content: center; } + html.dpw .nui-pod-player-panel { + max-width: var(--dpw-col); + max-height: 92vh; + border: 1px solid var(--border); + border-bottom: none; + } + html.dpw .nui-pod-art-player { width: 240px; height: 240px; } + html.dpw .nui-pod-selbar { margin: 0 0 4px; padding: 6px 0 8px; } +} + +/* Phones: the dock spans the screen like in the app. */ +@media (max-width: 760px) { + html.dpw #nui-pod-mini { border-left: none; border-right: none; border-radius: 0; box-shadow: none; } + html.dpw .nui-pod-selbar { margin: 0 -0.75rem 4px; padding: 6px 0.75rem 8px; } +} + +/* ---- the web's light scheme (◑, body.bright-bg) ------------------------------------- */ + +html.dpw body.bright-bg { + --nui-muted: #555; + --nui-panel: #f4f4f4; + --dpw-surface: #f7f7f7; + --dpw-hover: #f0f0f0; +} +/* app.css resolves --text-muted (the colour of .btn-icon) on :root, so it stays + white under body.bright-bg; inside the podcast parts it follows --fg. */ +html.dpw body.bright-bg #nui-pod, +html.dpw body.bright-bg #nui-dock, +html.dpw body.bright-bg #nui-sheet, +html.dpw body.bright-bg #nui-pod-player { --text-muted: var(--fg); --text: var(--fg); } +html.dpw body.bright-bg .nui-pod-player-panel { background: var(--dpw-surface); } +html.dpw body.bright-bg .nui-pod-row:active, +html.dpw body.bright-bg .nui-row:active, +html.dpw body.bright-bg .nui-row:hover, +html.dpw body.bright-bg .nui-pod-chapter:hover, +html.dpw body.bright-bg .nui-pod-seg:hover, +html.dpw body.bright-bg .nui-pod-seg.current, +html.dpw body.bright-bg .nui-pod-queue .nui-pod-row.nui-pod-dragging { background: #e8e8e8; } +html.dpw body.bright-bg .nui-pod-art { background: #e4e4e4; } +html.dpw body.bright-bg .nui-pod-count, +html.dpw body.bright-bg .nui-pod-progress, +html.dpw body.bright-bg .nui-pod-mini-bar { background: #d4d4d4; } +html.dpw body.bright-bg .nui-pod-tab.active .nui-pod-count { background: var(--accent); color: #fff; } +html.dpw body.bright-bg #nui-pod-mini { box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12); } diff --git a/templates/radio/player.html b/templates/radio/player.html index b8dbc5c..e80683d 100644 --- a/templates/radio/player.html +++ b/templates/radio/player.html @@ -22,23 +22,6 @@ -