Podcast-Listen: Zähler pro Abo, kombinierbare Folgen-Filter, Suche in Shownotes, mehrere Favoriten; Oberfläche aus diora-android, sw v62
- feeds/ und state/: pro Abo episode_count, unplayed_count, new_count (wie
„Neu“), last_played_at und link – zwei Abfragen, egal wie viele Abos.
- feeds/<id>/episodes/: favorite pro Folge; description, link, rss_url und
last_refreshed_at des Podcasts für die Infoseite.
- episodes/: filter mit Komma kombinierbar (alle müssen passen), neuer Filter
queued, ids= (die auf einem Gerät geladenen), sort= (new, old, long, short,
title, played), notes=1 sucht q auch in den Shownotes (Titeltreffer zuerst).
- POST episodes/favorite/: mehrere Folgen auf einmal (ent)favorisieren.
- Tests dafür; Podcast-Oberfläche aus diora-android übernommen.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 16:23:00 +02:00
|
|
|
/* Copied from diora-android 99528f2 2026-10-02: the podcast parts of web-native/static/native.css
|
Podcasts im Browser: die Podcast-Seite der App statt des alten Podcast-Tabs
Der Podcast-Tab der Web-App zeigt jetzt dieselbe Oberfläche wie die
Android-App: native-podcast.js aus diora-android, unverändert kopiert nach
static/podcasts/ (tools/sync_podcast_ui.py, mit Quell-Commit im Kopf),
dazu die Podcast-Teile von native.css.
static/js/podcasts-web.js spielt im Browser die Rolle der App
(window.DioraPodcastHost statt DioraNative):
- Zustand aus /podcasts/state/, in localStorage für einen schnellen Start;
Änderungen sofort lokal und der Reihe nach an den Server (Outbox, übersteht
Neuladen und Offline), wie Podcasts.kt, inkl. „immer sortiert halten“
- eigener Player (nicht das Radio-Audio-Element), Warteschlange = Playlist,
wie RadioService.EpisodeTracker: Stelle fortsetzen, Intro/Outro, Fortschritt
alle 10 s und bei Pause, „gehört“ kurz vor Schluss (auch bei „nächste“),
automatisch weiter, nach Pause etwas zurück (0,8/3/10/20 s), Tempo und
Lautstärke (bis 1) pro Podcast, Sleep-Timer nur während des Abspielens mit
Ausblenden
- Sperrbildschirm und Medientasten über navigator.mediaSession
- Abspiel-Einstellungen dieses Geräts in localStorage (wie PlaybackPrefs)
- keine Downloads (die Oberfläche blendet sie aus)
- Radio und Podcast nie gleichzeitig: eine Folge stoppt das Radio, ein Sender
legt die Folge weg
- Bottom-Sheet und Mini-Player-Dock über der Radio-Leiste; auf breiten
Bildschirmen eine mittige Spalte (760 px)
In der App und der Desktop-App (window.DioraNative vorhanden) tut
podcasts-web.js nichts.
Entfernt: der alte Podcast-Tab (Markup, ~1000 Zeilen in app.js, CSS), die
Podcast-Leiste im Player, INITIAL_PODCAST_FEEDS und das Herunterladen von
Folgen in den Browser-Cache (der Service Worker räumt diora-podcast-v1 ab).
Service-Worker-Cache auf v52, neue Dateien im App-Shell.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 10:26:32 +02:00
|
|
|
(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; }
|
2026-10-02 12:44:49 +02:00
|
|
|
/* One player for both: the podcast bar shows the radio too. */
|
|
|
|
|
html.nui-one-player #nui-mini { display: none !important; }
|
|
|
|
|
.nui-mini-radio .nui-pod-art,
|
|
|
|
|
.nui-radio-art { display: flex; align-items: center; justify-content: center; }
|
|
|
|
|
.nui-mini-radio .nui-pod-art:empty::after,
|
|
|
|
|
.nui-radio-art:empty::after { content: '◉'; color: var(--accent); font-size: 22px; }
|
|
|
|
|
.nui-radio-art:empty::after { font-size: 96px; }
|
|
|
|
|
.nui-mini-radio .nui-pod-art img,
|
|
|
|
|
.nui-radio-art img { object-fit: contain; background: #fff; }
|
|
|
|
|
.nui-radio-live { text-align: center; font-size: 13px; color: var(--nui-muted); letter-spacing: 0.04em; }
|
|
|
|
|
.nui-radio-live.on { color: var(--accent); font-weight: 700; }
|
|
|
|
|
.nui-radio-stations { align-self: center; }
|
Podcasts im Browser: die Podcast-Seite der App statt des alten Podcast-Tabs
Der Podcast-Tab der Web-App zeigt jetzt dieselbe Oberfläche wie die
Android-App: native-podcast.js aus diora-android, unverändert kopiert nach
static/podcasts/ (tools/sync_podcast_ui.py, mit Quell-Commit im Kopf),
dazu die Podcast-Teile von native.css.
static/js/podcasts-web.js spielt im Browser die Rolle der App
(window.DioraPodcastHost statt DioraNative):
- Zustand aus /podcasts/state/, in localStorage für einen schnellen Start;
Änderungen sofort lokal und der Reihe nach an den Server (Outbox, übersteht
Neuladen und Offline), wie Podcasts.kt, inkl. „immer sortiert halten“
- eigener Player (nicht das Radio-Audio-Element), Warteschlange = Playlist,
wie RadioService.EpisodeTracker: Stelle fortsetzen, Intro/Outro, Fortschritt
alle 10 s und bei Pause, „gehört“ kurz vor Schluss (auch bei „nächste“),
automatisch weiter, nach Pause etwas zurück (0,8/3/10/20 s), Tempo und
Lautstärke (bis 1) pro Podcast, Sleep-Timer nur während des Abspielens mit
Ausblenden
- Sperrbildschirm und Medientasten über navigator.mediaSession
- Abspiel-Einstellungen dieses Geräts in localStorage (wie PlaybackPrefs)
- keine Downloads (die Oberfläche blendet sie aus)
- Radio und Podcast nie gleichzeitig: eine Folge stoppt das Radio, ein Sender
legt die Folge weg
- Bottom-Sheet und Mini-Player-Dock über der Radio-Leiste; auf breiten
Bildschirmen eine mittige Spalte (760 px)
In der App und der Desktop-App (window.DioraNative vorhanden) tut
podcasts-web.js nichts.
Entfernt: der alte Podcast-Tab (Markup, ~1000 Zeilen in app.js, CSS), die
Podcast-Leiste im Player, INITIAL_PODCAST_FEEDS und das Herunterladen von
Folgen in den Browser-Cache (der Service Worker räumt diora-podcast-v1 ab).
Service-Worker-Cache auf v52, neue Dateien im App-Shell.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 10:26:32 +02:00
|
|
|
|
|
|
|
|
#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; }
|
2026-10-02 13:12:59 +02:00
|
|
|
#nui-pod-mini [hidden] { display: none !important; }
|
Podcasts im Browser: die Podcast-Seite der App statt des alten Podcast-Tabs
Der Podcast-Tab der Web-App zeigt jetzt dieselbe Oberfläche wie die
Android-App: native-podcast.js aus diora-android, unverändert kopiert nach
static/podcasts/ (tools/sync_podcast_ui.py, mit Quell-Commit im Kopf),
dazu die Podcast-Teile von native.css.
static/js/podcasts-web.js spielt im Browser die Rolle der App
(window.DioraPodcastHost statt DioraNative):
- Zustand aus /podcasts/state/, in localStorage für einen schnellen Start;
Änderungen sofort lokal und der Reihe nach an den Server (Outbox, übersteht
Neuladen und Offline), wie Podcasts.kt, inkl. „immer sortiert halten“
- eigener Player (nicht das Radio-Audio-Element), Warteschlange = Playlist,
wie RadioService.EpisodeTracker: Stelle fortsetzen, Intro/Outro, Fortschritt
alle 10 s und bei Pause, „gehört“ kurz vor Schluss (auch bei „nächste“),
automatisch weiter, nach Pause etwas zurück (0,8/3/10/20 s), Tempo und
Lautstärke (bis 1) pro Podcast, Sleep-Timer nur während des Abspielens mit
Ausblenden
- Sperrbildschirm und Medientasten über navigator.mediaSession
- Abspiel-Einstellungen dieses Geräts in localStorage (wie PlaybackPrefs)
- keine Downloads (die Oberfläche blendet sie aus)
- Radio und Podcast nie gleichzeitig: eine Folge stoppt das Radio, ein Sender
legt die Folge weg
- Bottom-Sheet und Mini-Player-Dock über der Radio-Leiste; auf breiten
Bildschirmen eine mittige Spalte (760 px)
In der App und der Desktop-App (window.DioraNative vorhanden) tut
podcasts-web.js nichts.
Entfernt: der alte Podcast-Tab (Markup, ~1000 Zeilen in app.js, CSS), die
Podcast-Leiste im Player, INITIAL_PODCAST_FEEDS und das Herunterladen von
Folgen in den Browser-Cache (der Service Worker räumt diora-podcast-v1 ab).
Service-Worker-Cache auf v52, neue Dateien im App-Shell.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 10:26:32 +02:00
|
|
|
.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; }
|
|
|
|
|
|
Player-Sync: ein Player für alle Geräte (wie Spotify Connect)
Server: PlayerState und PlayerDevice (Migration 0012), /podcasts/player/
(Stand), report/ (das Gerät, das zu spielen anfängt, wird das aktive und
bleibt es auch pausiert, solange es online ist), command/ (Fernbedienung,
transfer auf ein anderes Gerät) und stream/ (Server-Sent Events, zugleich
die Anwesenheit der Geräte). seq steigt in einem UPDATE und nie zurück.
Browser: podcasts-web.js meldet Abspielen, Pause, Springen, Folgen- und
Senderwechsel (alle 10 s beim Spielen), hört den Stream, hört auf, wenn ein
anderes Gerät startet, führt Befehle aus, zeigt das andere Gerät als remote
und übernimmt, was ein verschwundenes Gerät zuletzt hatte. Eine pausierte
Folge folgt einem neueren Stand von anderswo; im Vordergrund wird nach
15 s neu geholt. Podcast-Seite neu kopiert, sw v58.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 15:18:38 +02:00
|
|
|
/* Another device plays (player sync): the bar and the player show it and control it there. */
|
|
|
|
|
.nui-mini-remote .nui-mini-track,
|
|
|
|
|
.nui-pod-remote-line { color: var(--accent); }
|
|
|
|
|
.nui-pod-remote-line { font-weight: 700; }
|
|
|
|
|
.nui-mini-devices,
|
|
|
|
|
.nui-mini-here { font-size: 20px; }
|
|
|
|
|
.nui-pod-here,
|
|
|
|
|
.nui-pod-devbtn { align-self: center; min-height: var(--nui-tap); }
|
|
|
|
|
.nui-pod-devnote { padding: 8px 16px 4px; }
|
|
|
|
|
body.eink .nui-mini-remote .nui-mini-track,
|
|
|
|
|
body.eink .nui-pod-remote-line { color: #000; }
|
|
|
|
|
|
Podcasts im Browser: die Podcast-Seite der App statt des alten Podcast-Tabs
Der Podcast-Tab der Web-App zeigt jetzt dieselbe Oberfläche wie die
Android-App: native-podcast.js aus diora-android, unverändert kopiert nach
static/podcasts/ (tools/sync_podcast_ui.py, mit Quell-Commit im Kopf),
dazu die Podcast-Teile von native.css.
static/js/podcasts-web.js spielt im Browser die Rolle der App
(window.DioraPodcastHost statt DioraNative):
- Zustand aus /podcasts/state/, in localStorage für einen schnellen Start;
Änderungen sofort lokal und der Reihe nach an den Server (Outbox, übersteht
Neuladen und Offline), wie Podcasts.kt, inkl. „immer sortiert halten“
- eigener Player (nicht das Radio-Audio-Element), Warteschlange = Playlist,
wie RadioService.EpisodeTracker: Stelle fortsetzen, Intro/Outro, Fortschritt
alle 10 s und bei Pause, „gehört“ kurz vor Schluss (auch bei „nächste“),
automatisch weiter, nach Pause etwas zurück (0,8/3/10/20 s), Tempo und
Lautstärke (bis 1) pro Podcast, Sleep-Timer nur während des Abspielens mit
Ausblenden
- Sperrbildschirm und Medientasten über navigator.mediaSession
- Abspiel-Einstellungen dieses Geräts in localStorage (wie PlaybackPrefs)
- keine Downloads (die Oberfläche blendet sie aus)
- Radio und Podcast nie gleichzeitig: eine Folge stoppt das Radio, ein Sender
legt die Folge weg
- Bottom-Sheet und Mini-Player-Dock über der Radio-Leiste; auf breiten
Bildschirmen eine mittige Spalte (760 px)
In der App und der Desktop-App (window.DioraNative vorhanden) tut
podcasts-web.js nichts.
Entfernt: der alte Podcast-Tab (Markup, ~1000 Zeilen in app.js, CSS), die
Podcast-Leiste im Player, INITIAL_PODCAST_FEEDS und das Herunterladen von
Folgen in den Browser-Cache (der Service Worker räumt diora-podcast-v1 ab).
Service-Worker-Cache auf v52, neue Dateien im App-Shell.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 10:26:32 +02:00
|
|
|
/* 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);
|
|
|
|
|
}
|
|
|
|
|
|
2026-10-02 12:44:49 +02:00
|
|
|
/* the top bar's "↓ 3/68" and the downloads overview (openDownloads) */
|
|
|
|
|
.nui-pod-dlind { min-width: 0 !important; padding: 0 8px; font-size: 13px !important; font-weight: 700; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
|
|
|
.nui-pod-dlind[hidden] { display: none !important; }
|
|
|
|
|
.nui-pod-dls .nui-pod-player-panel { min-height: 50%; }
|
|
|
|
|
.nui-pod-dls-head { display: flex; flex-direction: column; gap: 2px; }
|
|
|
|
|
.nui-pod-dls-head .nui-pod-summary { padding: 0 2px; text-align: center; }
|
|
|
|
|
.nui-pod-dls-head .nui-pod-offer-row { justify-content: center; }
|
|
|
|
|
.nui-pod-dls-head .btn { min-width: 0 !important; padding: 0 14px; font-size: 15px !important; }
|
|
|
|
|
.nui-pod-dls-sec { margin-top: 10px; padding: 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nui-muted); border-bottom: 1px solid var(--border); }
|
|
|
|
|
.nui-pod-dlrow { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--border); -webkit-tap-highlight-color: transparent; }
|
|
|
|
|
.nui-pod-dlrow:active { background: #141414; }
|
|
|
|
|
.nui-pod-dlrow .nui-pod-title { font-size: 14px; -webkit-line-clamp: 1; }
|
|
|
|
|
.nui-pod-dlrow .nui-icon { font-size: 18px; color: var(--nui-muted); }
|
|
|
|
|
.nui-pod-dlrow-failed .nui-pod-dlstatus { color: var(--yellow); }
|
|
|
|
|
.nui-pod-dls-done { padding: 8px 2px; white-space: normal; }
|
|
|
|
|
body.eink .nui-pod-dlind { color: #000; }
|
|
|
|
|
body.eink .nui-pod-dlrow:active { background: #ddd; }
|
|
|
|
|
body.eink .nui-pod-dlrow-failed .nui-pod-dlstatus { color: #000; font-weight: 700; }
|
|
|
|
|
body.eink .nui-pod-dls-sec { color: #000; border-bottom-color: #000; }
|
|
|
|
|
|
Podcasts im Browser: die Podcast-Seite der App statt des alten Podcast-Tabs
Der Podcast-Tab der Web-App zeigt jetzt dieselbe Oberfläche wie die
Android-App: native-podcast.js aus diora-android, unverändert kopiert nach
static/podcasts/ (tools/sync_podcast_ui.py, mit Quell-Commit im Kopf),
dazu die Podcast-Teile von native.css.
static/js/podcasts-web.js spielt im Browser die Rolle der App
(window.DioraPodcastHost statt DioraNative):
- Zustand aus /podcasts/state/, in localStorage für einen schnellen Start;
Änderungen sofort lokal und der Reihe nach an den Server (Outbox, übersteht
Neuladen und Offline), wie Podcasts.kt, inkl. „immer sortiert halten“
- eigener Player (nicht das Radio-Audio-Element), Warteschlange = Playlist,
wie RadioService.EpisodeTracker: Stelle fortsetzen, Intro/Outro, Fortschritt
alle 10 s und bei Pause, „gehört“ kurz vor Schluss (auch bei „nächste“),
automatisch weiter, nach Pause etwas zurück (0,8/3/10/20 s), Tempo und
Lautstärke (bis 1) pro Podcast, Sleep-Timer nur während des Abspielens mit
Ausblenden
- Sperrbildschirm und Medientasten über navigator.mediaSession
- Abspiel-Einstellungen dieses Geräts in localStorage (wie PlaybackPrefs)
- keine Downloads (die Oberfläche blendet sie aus)
- Radio und Podcast nie gleichzeitig: eine Folge stoppt das Radio, ein Sender
legt die Folge weg
- Bottom-Sheet und Mini-Player-Dock über der Radio-Leiste; auf breiten
Bildschirmen eine mittige Spalte (760 px)
In der App und der Desktop-App (window.DioraNative vorhanden) tut
podcasts-web.js nichts.
Entfernt: der alte Podcast-Tab (Markup, ~1000 Zeilen in app.js, CSS), die
Podcast-Leiste im Player, INITIAL_PODCAST_FEEDS und das Herunterladen von
Folgen in den Browser-Cache (der Service Worker räumt diora-podcast-v1 ab).
Service-Worker-Cache auf v52, neue Dateien im App-Shell.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 10:26:32 +02:00
|
|
|
/* 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); }
|
2026-10-02 12:44:49 +02:00
|
|
|
.nui-pod-offer { padding: 10px 12px; margin: 8px 0; border: 1px solid var(--nui-muted); border-radius: 6px; line-height: 1.45; font-size: 14px; }
|
|
|
|
|
.nui-pod-offer-row { display: flex; gap: 8px; margin-top: 8px; }
|
Podcasts im Browser: die Podcast-Seite der App statt des alten Podcast-Tabs
Der Podcast-Tab der Web-App zeigt jetzt dieselbe Oberfläche wie die
Android-App: native-podcast.js aus diora-android, unverändert kopiert nach
static/podcasts/ (tools/sync_podcast_ui.py, mit Quell-Commit im Kopf),
dazu die Podcast-Teile von native.css.
static/js/podcasts-web.js spielt im Browser die Rolle der App
(window.DioraPodcastHost statt DioraNative):
- Zustand aus /podcasts/state/, in localStorage für einen schnellen Start;
Änderungen sofort lokal und der Reihe nach an den Server (Outbox, übersteht
Neuladen und Offline), wie Podcasts.kt, inkl. „immer sortiert halten“
- eigener Player (nicht das Radio-Audio-Element), Warteschlange = Playlist,
wie RadioService.EpisodeTracker: Stelle fortsetzen, Intro/Outro, Fortschritt
alle 10 s und bei Pause, „gehört“ kurz vor Schluss (auch bei „nächste“),
automatisch weiter, nach Pause etwas zurück (0,8/3/10/20 s), Tempo und
Lautstärke (bis 1) pro Podcast, Sleep-Timer nur während des Abspielens mit
Ausblenden
- Sperrbildschirm und Medientasten über navigator.mediaSession
- Abspiel-Einstellungen dieses Geräts in localStorage (wie PlaybackPrefs)
- keine Downloads (die Oberfläche blendet sie aus)
- Radio und Podcast nie gleichzeitig: eine Folge stoppt das Radio, ein Sender
legt die Folge weg
- Bottom-Sheet und Mini-Player-Dock über der Radio-Leiste; auf breiten
Bildschirmen eine mittige Spalte (760 px)
In der App und der Desktop-App (window.DioraNative vorhanden) tut
podcasts-web.js nichts.
Entfernt: der alte Podcast-Tab (Markup, ~1000 Zeilen in app.js, CSS), die
Podcast-Leiste im Player, INITIAL_PODCAST_FEEDS und das Herunterladen von
Folgen in den Browser-Cache (der Service Worker räumt diora-podcast-v1 ab).
Service-Worker-Cache auf v52, neue Dateien im App-Shell.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 10:26:32 +02:00
|
|
|
.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; }
|
2026-10-02 12:44:49 +02:00
|
|
|
body.eink .nui-pod-offer { border-color: #000; }
|
Podcasts im Browser: die Podcast-Seite der App statt des alten Podcast-Tabs
Der Podcast-Tab der Web-App zeigt jetzt dieselbe Oberfläche wie die
Android-App: native-podcast.js aus diora-android, unverändert kopiert nach
static/podcasts/ (tools/sync_podcast_ui.py, mit Quell-Commit im Kopf),
dazu die Podcast-Teile von native.css.
static/js/podcasts-web.js spielt im Browser die Rolle der App
(window.DioraPodcastHost statt DioraNative):
- Zustand aus /podcasts/state/, in localStorage für einen schnellen Start;
Änderungen sofort lokal und der Reihe nach an den Server (Outbox, übersteht
Neuladen und Offline), wie Podcasts.kt, inkl. „immer sortiert halten“
- eigener Player (nicht das Radio-Audio-Element), Warteschlange = Playlist,
wie RadioService.EpisodeTracker: Stelle fortsetzen, Intro/Outro, Fortschritt
alle 10 s und bei Pause, „gehört“ kurz vor Schluss (auch bei „nächste“),
automatisch weiter, nach Pause etwas zurück (0,8/3/10/20 s), Tempo und
Lautstärke (bis 1) pro Podcast, Sleep-Timer nur während des Abspielens mit
Ausblenden
- Sperrbildschirm und Medientasten über navigator.mediaSession
- Abspiel-Einstellungen dieses Geräts in localStorage (wie PlaybackPrefs)
- keine Downloads (die Oberfläche blendet sie aus)
- Radio und Podcast nie gleichzeitig: eine Folge stoppt das Radio, ein Sender
legt die Folge weg
- Bottom-Sheet und Mini-Player-Dock über der Radio-Leiste; auf breiten
Bildschirmen eine mittige Spalte (760 px)
In der App und der Desktop-App (window.DioraNative vorhanden) tut
podcasts-web.js nichts.
Entfernt: der alte Podcast-Tab (Markup, ~1000 Zeilen in app.js, CSS), die
Podcast-Leiste im Player, INITIAL_PODCAST_FEEDS und das Herunterladen von
Folgen in den Browser-Cache (der Service Worker räumt diora-podcast-v1 ab).
Service-Worker-Cache auf v52, neue Dateien im App-Shell.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 10:26:32 +02:00
|
|
|
body.eink .nui-pod-seg { color: #444; }
|
|
|
|
|
body.eink .nui-pod-seg.current { color: #000; background: #e6e6e6; }
|
Podcast-Listen: Zähler pro Abo, kombinierbare Folgen-Filter, Suche in Shownotes, mehrere Favoriten; Oberfläche aus diora-android, sw v62
- feeds/ und state/: pro Abo episode_count, unplayed_count, new_count (wie
„Neu“), last_played_at und link – zwei Abfragen, egal wie viele Abos.
- feeds/<id>/episodes/: favorite pro Folge; description, link, rss_url und
last_refreshed_at des Podcasts für die Infoseite.
- episodes/: filter mit Komma kombinierbar (alle müssen passen), neuer Filter
queued, ids= (die auf einem Gerät geladenen), sort= (new, old, long, short,
title, played), notes=1 sucht q auch in den Shownotes (Titeltreffer zuerst).
- POST episodes/favorite/: mehrere Folgen auf einmal (ent)favorisieren.
- Tests dafür; Podcast-Oberfläche aus diora-android übernommen.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 16:23:00 +02:00
|
|
|
|
|
|
|
|
/* lists: search sections, the number at a podcast, its info page */
|
|
|
|
|
.nui-pod-sec { margin-top: 14px; padding: 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nui-muted); border-bottom: 1px solid var(--border); }
|
|
|
|
|
.nui-pod-search + .nui-pod-sec { margin-top: 4px; }
|
|
|
|
|
.nui-pod-sec-note { padding: 10px 2px; font-size: 13px; color: var(--nui-muted); }
|
|
|
|
|
.nui-pod-feedcount { flex: none; }
|
|
|
|
|
.nui-pod-infobtn { flex: none; font-size: 20px; color: var(--nui-muted); }
|
|
|
|
|
.nui-pod-info-desc { font-size: 14px; font-weight: 400; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
|
|
|
|
|
.nui-pod-facts { font-weight: 400; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 10px 0 4px; font-size: 14px; }
|
|
|
|
|
.nui-pod-facts dt { color: var(--nui-muted); }
|
|
|
|
|
.nui-pod-facts dd { margin: 0; min-width: 0; font-weight: 400; overflow-wrap: anywhere; }
|
|
|
|
|
.nui-pod-facts a { color: var(--accent); }
|
|
|
|
|
.nui-pod-info-url { display: block; font-size: 12px; color: var(--nui-muted); }
|
|
|
|
|
.nui-pod-info-actions { display: flex; gap: 8px; margin-top: 6px; }
|
|
|
|
|
.nui-pod-info-actions .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
|
|
|
|
|
body.eink .nui-pod-sec { color: #000; border-bottom-color: #000; }
|
|
|
|
|
body.eink .nui-pod-facts a { color: #000; text-decoration: underline; }
|