Startseite: der Aufmacher wechselt, die Neuzugänge stimmen

Vier Dinge aus dem ersten Blick auf einen echten Jellyfin-Server.

**„Zuletzt hinzugefügt" waren nicht die Neuzugänge**, sondern eine
alphabetische Liste. Die Reihe kommt jetzt von `/Users/{id}/Items/Latest` —
dem Endpunkt, den Jellyfin dafür hat. Das behebt zwei Fehler auf einmal: die
Sortierung nach Anlegedatum kam alphabetisch zurück, und selbst wenn sie
gegriffen hätte, wäre sie falsch gewesen. Das Anlegedatum einer Serie ist der
Tag, an dem sie in die Mediathek kam; eine Serie, die seit zwei Jahren dort
steht und gestern eine neue Folge bekommen hat, wäre nie aufgetaucht. Die
Antwort ist dort ein nacktes Feld ohne `Items`-Hülle — dafür gibt es einen
Test, sonst bliebe die Startseite eines Tages stumm leer.

**Der Aufmacher war einer und blieb es.** Jetzt sind es bis zu fünf, die alle
sieben Sekunden weiterwandern und sich auch von Hand durchblättern lassen.
Der Zeitgeber hängt an der aktuellen Seite und fängt bei jedem Wechsel von
vorn an — sonst rutscht der Aufmacher genau dann weiter, wenn man sich einen
Titel ansieht. Wer Bewegung abgestellt hat, blättert selbst. Titel ohne
Hintergrundbild werden übersprungen, solange es andere gibt: eine graue
Fläche mit Text ist keine Bühne.

**Die Seitenleiste ist durchscheinend** statt undurchsichtig, und der
Schleier darunter dunkelt schwächer ab — ein voller Schleier hätte aus dem
Milchglas wieder eine Wand gemacht.

**Der Suchlauf ist aus der Mediathek verschwunden.** Er stand im
Dreipunktmenü, einen Tipp neben „Filter" und „Ansicht wechseln", und
beschäftigt den Server minutenlang. Er steht jetzt in den Einstellungen neben
der Mediathek, zu der er gehört.

Dazu eine Jellyfin-Attrappe unter Tools/: ein Server, der gerade genug kann,
dass sich die Oberfläche ansehen lässt. Damit ist diese Runde tatsächlich
angeschaut worden — Anmeldung per Code, Startseite, wandernder Aufmacher,
Seitenleiste, Einstellungen — ohne einen echten Server anzufassen.

Was weiter aussteht: die Seitenleiste oben statt seitlich, und ihre Einträge
selbst zusammenzustellen. Das ist die nächste Runde, nicht diese.

250 Tests grün.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-13 13:36:57 +02:00
co-authored by Claude Opus 5
parent 5696254034
commit 370f7f94f1
11 changed files with 419 additions and 52 deletions
+40 -2
View File
@@ -34,6 +34,7 @@
"isCommentAutoGenerated": true
},
"action.addFavourite": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -203,6 +204,7 @@
}
},
"action.removeFavourite": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -1891,6 +1893,7 @@
}
},
"library.kind.liveTV": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -1907,6 +1910,7 @@
}
},
"library.kind.movie": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -1923,6 +1927,7 @@
}
},
"library.kind.music": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -1939,6 +1944,7 @@
}
},
"library.kind.other": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -1955,6 +1961,7 @@
}
},
"library.kind.photo": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -1971,6 +1978,7 @@
}
},
"library.kind.show": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -2492,6 +2500,7 @@
}
},
"player.jellyfinPending": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -3250,6 +3259,7 @@
}
},
"settings.account": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -3687,6 +3697,22 @@
}
}
},
"settings.scanExplanation": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Der Suchlauf durchsucht die Ordner auf dem Server nach neuen Dateien. Das kann einige Minuten dauern."
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "A scan looks through the folders on the server for new files. It can take a few minutes."
}
}
}
},
"settings.server": {
"extractionState": "stale",
"localizations": {
@@ -3705,6 +3731,7 @@
}
},
"settings.serverKind": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -3992,6 +4019,7 @@
}
},
"signIn.jellyfin.addressMissing": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4008,6 +4036,7 @@
}
},
"signIn.jellyfin.addressPlaceholder": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4040,6 +4069,7 @@
}
},
"signIn.jellyfin.codeExpired": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4088,6 +4118,7 @@
}
},
"signIn.jellyfin.notFound": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4104,6 +4135,7 @@
}
},
"signIn.jellyfin.otherAddress": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4120,6 +4152,7 @@
}
},
"signIn.jellyfin.password": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4184,6 +4217,7 @@
}
},
"signIn.jellyfin.searching": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4200,6 +4234,7 @@
}
},
"signIn.jellyfin.signingIn": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4248,6 +4283,7 @@
}
},
"signIn.jellyfin.useCode": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4264,6 +4300,7 @@
}
},
"signIn.jellyfin.usePassword": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4280,6 +4317,7 @@
}
},
"signIn.jellyfin.userName": {
"extractionState": "stale",
"localizations": {
"de": {
"stringUnit": {
@@ -4345,6 +4383,7 @@
}
},
"signIn.tagline": {
"comment": "Untertitel auf dem Anmeldebildschirm",
"localizations": {
"de": {
"stringUnit": {
@@ -4358,8 +4397,7 @@
"value": "Your library, nicer."
}
}
},
"comment": "Untertitel auf dem Anmeldebildschirm"
}
},
"signIn.timedOut": {
"comment": "Die Anmeldung wurde nicht innerhalb der Gültigkeit des Codes abgeschlossen",
+74
View File
@@ -0,0 +1,74 @@
import SwiftUI
import FlixyDesign
import MediaKit
/// Der Aufmacher oben auf der Startseite — mehrere Titel, die sich abwechseln.
///
/// Ein einzelnes Bild sagt jedes Mal dasselbe. Hier wandert der Aufmacher
/// alle paar Sekunden weiter und lässt sich auch von Hand durchblättern; die
/// Punkte darunter zeigen, wie viele es sind und wo man gerade ist.
///
/// Das Weiterwandern hält an, sobald jemand selbst blättert — der Zeitgeber
/// hängt an der aktuellen Seite und fängt bei jedem Wechsel von vorn an.
/// Sonst rutschte der Aufmacher genau in dem Moment weiter, in dem man sich
/// einen Titel ansieht.
struct HeroCarousel: View {
let items: [MediaItem]
/// Wie lange ein Titel stehen bleibt.
///
/// Lang genug, um Titel, Beschreibung und Knöpfe zu lesen — bei drei
/// Sekunden ist der Satz zu Ende, bevor man ihn gelesen hat.
private static let dwell: Duration = .seconds(7)
@State private var index = 0
/// Bewegung, die von selbst losgeht, ist für manche Menschen unangenehm
/// bis unbrauchbar. Wer sie abgestellt hat, blättert von Hand.
@Environment(\.accessibilityReduceMotion) private var reduceMotion
@Environment(\.flixyAccent) private var accent
var body: some View {
VStack(spacing: FlixySpacing.regular) {
TabView(selection: $index) {
ForEach(Array(items.enumerated()), id: \.element.id) { position, item in
HeroSection(item: item)
.tag(position)
}
}
.tabViewStyle(.page(indexDisplayMode: .never))
// Die eigene Anzeige des TabView läge über dem Bild und damit über
// den Knöpfen. Die Höhe kommt aus dem Seitenverhältnis, weil ein
// TabView sonst nimmt, was es kriegen kann.
.aspectRatio(FlixyAspectRatio.hero, contentMode: .fit)
if items.count > 1 { indicator }
}
.task(id: index) { await advance() }
.onChange(of: items.map(\.id)) { _, ids in
// Nach dem Aktualisieren kann die Liste kürzer sein als die
// Stelle, an der man gerade war.
if index >= ids.count { index = 0 }
}
}
private var indicator: some View {
HStack(spacing: FlixySpacing.snug) {
ForEach(items.indices, id: \.self) { position in
Capsule()
.fill(position == index ? accent : Color.flixyTextMuted.opacity(0.4))
.frame(width: position == index ? 18 : 6, height: 6)
}
}
.animation(.snappy(duration: 0.25), value: index)
.accessibilityHidden(true)
}
private func advance() async {
guard items.count > 1, !reduceMotion else { return }
try? await Task.sleep(for: Self.dwell)
guard !Task.isCancelled else { return }
withAnimation(.easeInOut(duration: 0.5)) {
index = (index + 1) % items.count
}
}
}
+21 -8
View File
@@ -58,8 +58,9 @@ struct HomeView: View {
private func content(hubs: [MediaRowGroup]) -> some View {
ScrollView {
LazyVStack(alignment: .leading, spacing: FlixySpacing.section) {
if let featured = heroItem(in: hubs) {
HeroSection(item: featured)
let featured = heroItems(in: hubs)
if !featured.isEmpty {
HeroCarousel(items: featured)
}
ForEach(hubs) { hub in
@@ -71,14 +72,26 @@ struct HomeView: View {
.scrollIndicators(.hidden)
}
/// Wie viele Titel der Aufmacher durchwechselt.
private static let heroCount = 5
/// Was oben groß gezeigt wird.
///
/// Erste Wahl ist etwas Angefangenes — wer die App öffnet, will meistens
/// weiterschauen. Erst wenn es nichts Angefangenes gibt, tritt der
/// Neuzugang an die Stelle.
private func heroItem(in hubs: [MediaRowGroup]) -> MediaItem? {
let continuing = hubs.first(where: \.isContinueWatching)
return continuing?.items.first ?? hubs.first?.items.first
/// Angefangenes zuerst — wer die App öffnet, will meistens weiterschauen.
/// Aufgefüllt wird aus den übrigen Reihen: bei einer einzigen angefangenen
/// Folge gäbe es sonst nichts zu blättern.
private func heroItems(in hubs: [MediaRowGroup]) -> [MediaItem] {
let continuing = hubs.first(where: \.isContinueWatching)?.items ?? []
let rest = hubs.filter { !$0.isContinueWatching }.flatMap(\.items)
var seen = Set<String>()
let candidates = (continuing + rest).filter { seen.insert($0.id).inserted }
// Ohne Hintergrundbild ist der Aufmacher eine graue Fläche mit Text.
// Lieber einen Titel überspringen als eine leere Bühne zeigen — es sei
// denn, keiner hätte eines.
let withArtwork = candidates.filter { $0.art != nil || $0.seriesArt != nil }
return Array((withArtwork.isEmpty ? candidates : withArtwork).prefix(Self.heroCount))
}
private func load() async {
-29
View File
@@ -15,7 +15,6 @@ struct LibraryView: View {
@State private var page: MediaPage?
@State private var isLoadingMore = false
@State private var showsFilters = false
@State private var isScanning = false
var body: some View {
Group {
@@ -142,37 +141,9 @@ struct LibraryView: View {
.accessibilityLabel(Text("library.toggleLayout"))
}
ToolbarItem(placement: .topBarTrailing) {
Menu {
Button {
Task { await scan() }
} label: {
Label("library.scan", systemImage: "arrow.triangle.2.circlepath")
}
.disabled(isScanning)
} label: {
Image(systemName: "ellipsis.circle")
}
}
SearchToolbarItem()
}
/// Stößt einen Suchlauf auf dem Server an.
///
/// Der Server meldet nicht, wann er fertig ist — die Liste wird deshalb
/// nach kurzer Wartezeit neu geholt. Wer gerade Dateien abgelegt hat,
/// sieht sie damit meistens schon.
private func scan() async {
guard let server = session.backend, !isScanning else { return }
isScanning = true
defer { isScanning = false }
try? await server.refreshLibrary(library)
try? await Task.sleep(for: .seconds(3))
await reload()
}
// MARK: - Laden
private func reload() async {
+4 -2
View File
@@ -35,7 +35,10 @@ struct DrawerContainer<Sidebar: View, Content: View>: View {
if openness > 0 {
Color.flixyScrim
.opacity(openness)
// Schwächer als früher: die Leiste darüber ist jetzt
// durchscheinend, und ein voller Schleier machte aus dem
// Milchglas wieder eine Wand.
.opacity(openness * 0.7)
.ignoresSafeArea()
.onTapGesture { setOpen(false) }
// Ohne diese Beschriftung ist die Fläche für VoiceOver ein
@@ -48,7 +51,6 @@ struct DrawerContainer<Sidebar: View, Content: View>: View {
sidebar
.frame(width: width)
.frame(maxHeight: .infinity)
.background(Color.flixySurface)
.offset(x: (openness - 1) * width)
.accessibilityHidden(!isOpen)
}
+4 -1
View File
@@ -40,7 +40,10 @@ struct SidebarView: View {
.padding(.vertical, FlixySpacing.section)
}
.scrollBounceBehavior(.basedOnSize)
.background(Color.flixySurface)
// Milchig statt undurchsichtig: der Inhalt dahinter bleibt zu ahnen,
// und die Leiste wirkt wie eine Schicht darüber statt wie eine zweite
// Seite daneben. Ein Vollton stand vorher wie eine Wand im Bild.
.background(.ultraThinMaterial)
}
private var header: some View {
+75 -2
View File
@@ -39,9 +39,19 @@ struct SettingsView: View {
}
}
Section("settings.libraries") {
Section {
ForEach(session.libraries) { library in
LabeledContent(library.title, value: library.kind.label)
LibraryRow(library: library)
}
} header: {
Text("settings.libraries")
} footer: {
// Der Suchlauf stand vorher im Dreipunktmenü der Mediathek
// — einen Tipp neben „Filter" und „Ansicht wechseln". Er
// beschäftigt den Server minutenlang und gehört nicht in
// eine Reihe mit Dingen, die man im Vorbeigehen antippt.
if session.backend?.capabilities.contains(.libraryScan) == true {
Text("settings.scanExplanation")
}
}
}
@@ -233,3 +243,66 @@ extension MediaLibrary.Kind {
}
}
}
/// Eine Mediathek in den Einstellungen, mit dem Suchlauf daneben.
private struct LibraryRow: View {
let library: MediaLibrary
@Environment(FlixySession.self) private var session
@Environment(\.flixyAccent) private var accent
@State private var phase: Phase = .idle
private enum Phase { case idle, running, done }
var body: some View {
LabeledContent {
HStack(spacing: FlixySpacing.regular) {
// Nur, wenn es nicht dasselbe Wort ist: eine Mediathek namens
// „Filme" stand sonst als „Filme — Filme" da.
if library.title.localizedCaseInsensitiveCompare(library.kind.label) != .orderedSame {
Text(library.kind.label)
.foregroundStyle(Color.flixyTextSecondary)
}
if session.backend?.capabilities.contains(.libraryScan) == true {
Button {
Task { await scan() }
} label: {
symbol
}
.buttonStyle(.borderless)
.disabled(phase == .running)
.accessibilityLabel(Text("library.scan"))
}
}
} label: {
Text(library.title)
}
}
@ViewBuilder
private var symbol: some View {
switch phase {
case .idle:
Image(systemName: "arrow.triangle.2.circlepath")
case .running:
ProgressView().controlSize(.small)
case .done:
Image(systemName: "checkmark").foregroundStyle(accent)
}
}
/// Stößt einen Suchlauf auf dem Server an.
///
/// Der Server meldet nicht, wann er fertig ist. Deshalb steht hier kein
/// Fortschritt, sondern nur ein Haken dafür, dass der Auftrag angekommen
/// ist — ein Balken, der etwas anderes behauptet, wäre erfunden.
private func scan() async {
guard let backend = session.backend, phase != .running else { return }
phase = .running
try? await backend.refreshLibrary(library)
phase = .done
try? await Task.sleep(for: .seconds(4))
phase = .idle
}
}