Online-Mediathek: Akkordeon-Layout und Provider-Suche (Teil 29)

Die Online-Mediathek zeigt Hörspielserien, die über Spotify oder Apple Music importiert wurden. Das Layout folgt dem gleichen Akkordeon-Muster wie die lokale Mediathek: Serien erscheinen als Kachelgrid, ein Klick auf eine Serie klappt die zugehörigen Episoden direkt unterhalb der gewählten Reihe auf. Zwei Mediatheken, ein Bedienkonzept — damit der Nutzer nicht zwei verschiedene Oberflächen lernen muss.

Zwei Mediatheken, ein Bedienkonzept

EchoPlay trennt klar zwischen lokal vorhandenen Hörspielen (Dateien auf dem Rechner) und online importierten Serien (aus Spotify/Apple Music). Beide Mediatheken nutzen dasselbe Akkordeon-Layout. Der entscheidende Unterschied: Lokale Folgen haben Tracks, die der eingebaute Player abspielt. Online-Folgen haben keine lokalen Dateien — stattdessen öffnet ein Klick die Folge im Browser bei Spotify oder Apple Music. Das Flag IsOnlineImported auf der Series-Entity trennt die beiden Welten sauber. Es wird nur beim expliziten Import gesetzt, nicht wenn der Folgencheck eine Apple Music ID cached.

Das Split-Pattern: Dynamische Grid-Teilung

Das Herzstück des Akkordeons ist die UpdateSeriesSplit()-Methode im Code-Behind. Die Herausforderung: Ein WinUI-3-GridView kennt kein Konzept von „füge ein Panel nach der dritten Reihe ein“. Stattdessen wird das Serien-Grid in zwei Teile aufgeteilt, und das Episoden-Panel liegt zwischen ihnen.

Die Berechnung läuft so: Zuerst wird die Fensterbreite durch die Kachelbreite (148 Pixel) geteilt, um die Kacheln pro Reihe zu bestimmen. Dann wird die Reihe der gewählten Serie berechnet. Der Split-Punkt liegt am Ende dieser Reihe — alle Serien davor kommen ins obere Grid, alle danach ins untere. Bei Fenstergrößenänderung wird der Split automatisch neu berechnet. Eine _isUpdatingSplit-Flag verhindert dabei Endlos-Rekursion: Wenn die ItemsSource der GridViews geändert wird, feuert WinUI SelectionChanged — ohne Flag würde das erneut UpdateSeriesSplit() aufrufen.

Inline-Provider-Suche

Die Online-Mediathek hat ein eigenes Suchfeld, das direkt beim Provider sucht — ohne Seitenwechsel. Beim Eingeben eines Suchbegriffs und Klick auf „Beim Anbieter suchen“ werden parallel Serien und Alben beim aktiven Provider gesucht. Die Ergebnisse erscheinen inline als Kacheln mit „Hinzufügen“-Button. Wird das Suchfeld geleert, verschwinden die Suchergebnisse und die Bibliotheks-Ansicht kehrt zurück. Die Suchergebnisse werden nach Relevanz sortiert: Treffer, deren Titel den Suchbegriff enthält, stehen oben. Innerhalb gleicher Relevanz entscheidet der Hörspiel-Score, den das Scoring-System anhand von Album-Strukturen und Tracklängen berechnet.

Episoden-Laden und Sortierung

Wenn der Nutzer eine Serie klickt, lädt SelectSeriesAsync() die Episoden aus der Datenbank. Die Karten werden sofort ohne Cover erzeugt — das sorgt für schnelles Rendern. Cover werden asynchron nachgeladen. Der Gehört-Status kommt aus der PlaybackState-Tabelle — dieselbe wie für lokale Folgen. Drei Sortieroptionen stehen zur Verfügung: nach Folgennummer aufsteigend (Standard), nach Nummer absteigend und nach Titel. Die Sortierung erfolgt clientseitig auf den bereits geladenen Daten — kein neuer Datenbankzugriff nötig.

Die gezeigten Code-Beispiele dienen zur Veranschaulichung. Nutzung auf eigene Verantwortung. Mehr dazu