Scarriffle/Flaro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navigation: Glas, oben oder seitlich, und mehr Reihen auf der Startseite

Browse Source 
Drei Dinge aus dem letzten Durchgang.

**Die Startseite hatte zu wenig anzubieten.** Es gab eine Reihe „Zuletzt
hinzugefügt" für alles zusammen. Jetzt gibt es eine je Mediathek — „Neu in
Filme" und „Neu in Serien" sind zwei verschiedene Fragen, und wer nach einem
Film sucht, blättert in einer gemeinsamen Reihe an Folgen vorbei. Dazu
Favoriten, die es bei Jellyfin ohnehin gibt. Die drei Abfragen laufen
nebeneinander; nur die Mediatheken werden streng geholt, weil sie die Probe
darauf sind, ob der Server überhaupt antwortet.

**Die Seitenleiste ist jetzt echtes Glas**, nicht das alte Material: im
ausfahrbaren Blatt über `glassEffect`, in der geteilten Ansicht auf dem iPad
vom System selbst — dort lag mein eigener Hintergrund darüber und machte ihn
stumpf. Die zum Inhalt zeigende Kante ist gerundet, damit das Blatt sichtbar
über der Seite liegt statt daneben zu stehen.

**Die Navigation kann nach oben.** Eine Einstellung unter Erscheinungsbild,
seitlich oder oben. Oben stehen alle Einträge gleichzeitig da, als Glaskapseln
in einer waagerecht scrollenden Reihe — die Zahl der Mediatheken kommt vom
Server, und zusammengequetschte Beschriftungen wären die schlechtere Antwort
als eine Reihe, die weiterläuft.

Angesehen auf iPhone und iPad: beide Formen, das Glas in beiden Leisten, die
neuen Reihen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-13 14:31:09 +02:00
co-authored by Claude Opus 5
parent 5763d866bf
commit 5cebfed36b
9 changed files with 3490 additions and 3176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Flixy/FlixyApp.swift
+2
View File
@@ -25,6 +25,7 @@ struct FlixyApp: App {
/// läuft statt bei jedem Öffnen des Players neu zu starten.
@State private var network = NetworkConditions()
@State private var homeLayout = HomeLayoutSettings()
@State private var navigation = NavigationSettings()
@State private var diagnostics = PlaybackDiagnostics()
@State private var downloads: DownloadCoordinator
@@ -66,6 +67,7 @@ struct FlixyApp: App {
.environment(network)
.environment(downloads)
.environment(homeLayout)
.environment(navigation)
.environment(diagnostics)
.environment(theme)
// Akzentfarbe und Tönung setzt RootView, nicht diese Stelle.
Flixy/Resources/Localizable.xcstrings
+3209 -3144
View File
File diff suppressed because it is too large Load Diff
Flixy/Session/NavigationSettings.swift
+36
View File
@@ -0,0 +1,36 @@
import Foundation
import Observation
/// Wo die Navigation sitzt.
///
/// Eine Einstellung, kein fester Aufbau: auf einem großen Bildschirm ist eine
/// Leiste an der Seite richtig, auf einem kleinen nimmt sie Platz weg, den man
/// lieber dem Bild gäbe. Wer welche Form will, entscheidet nicht die App.
@MainActor
@Observable
final class NavigationSettings {
enum Placement: String, CaseIterable, Identifiable, Sendable {
/// Seitlich — auf dem iPhone ausfahrbar, auf dem iPad dauerhaft.
case side
/// Oben als Reihe über dem Inhalt.
case top
var id: String { rawValue }
}
private enum Key {
static let placement = "flixy.navigation.placement"
}
private let defaults: UserDefaults
var placement: Placement {
didSet { defaults.set(placement.rawValue, forKey: Key.placement) }
}
init(defaults: UserDefaults = .standard) {
self.defaults = defaults
self.placement = defaults.string(forKey: Key.placement)
.flatMap(Placement.init(rawValue:)) ?? .side
}
}
Flixy/Views/Navigation/RootView.swift
+33
View File
@@ -18,6 +18,7 @@ struct RootView: View {
@Environment(NetworkConditions.self) private var network
@Environment(DownloadCoordinator.self) private var downloads
@Environment(PlaybackDiagnostics.self) private var diagnostics
@Environment(NavigationSettings.self) private var navigation
/// Der laufende Player — hier gehalten, weil diese Ansicht immer da ist.
///
@@ -142,12 +143,43 @@ struct RootView: View {
@ViewBuilder
private var library: some View {
switch navigation.placement {
case .top:
topLayout
case .side:
if sizeClass == .regular {
splitLayout
} else {
drawerLayout
}
}
}
/// Die Navigation als Reihe über dem Inhalt.
///
/// Ohne Seitenleiste und ohne Blatt: die Einträge stehen alle gleichzeitig
/// da. Auf einem Fernseher und auf einem breiten Fenster ist das die
/// natürlichere Form — und auf dem Handy für den, der lieber tippt als
/// wischt.
private var topLayout: some View {
NavigationStack {
destination
.safeAreaInset(edge: .top, spacing: 0) {
TopNavigationBar(items: allDestinations, selection: $selection)
}
}
.miniPlayer(player, isVisible: playback.presentation == .mini)
}
/// Alle Einträge in einer Reihe — für die Navigation oben, die keine
/// Abschnitte kennt.
private var allDestinations: [SidebarDestination] {
var items: [SidebarDestination] = [.home]
items.append(contentsOf: sidebarDestinations)
if session.supportsLiveTV { items.append(.liveTV) }
items.append(contentsOf: [.downloads, .settings])
return items
}
private var sidebarDestinations: [SidebarDestination] {
session.libraries.map { .library(key: $0.id, title: $0.title) }
@@ -157,6 +189,7 @@ struct RootView: View {
private var splitLayout: some View {
NavigationSplitView {
SidebarView(
presentation: .column,
libraries: sidebarDestinations,
showsLiveTV: session.supportsLiveTV,
selection: $selection,
Flixy/Views/Navigation/SidebarView.swift
+37 -4
View File
@@ -7,6 +7,14 @@ import FlixyDesign
/// lässt sie sich auf dem iPhone in den Drawer und auf dem iPad in die
/// `NavigationSplitView` stecken, ohne etwas zu ändern.
struct SidebarView: View {
/// Wo diese Leiste steckt.
///
/// In der geteilten Ansicht bringt das System die Glasfläche selbst mit —
/// eine eigene läge darüber und machte sie stumpf. Im ausfahrbaren Blatt
/// gibt es keine, also kommt sie von hier.
enum Presentation { case drawer, column }
var presentation: Presentation = .drawer
let libraries: [SidebarDestination]
/// Ob der aktive Server Live-TV anbietet.
///
@@ -40,10 +48,7 @@ struct SidebarView: View {
.padding(.vertical, FlixySpacing.section)
}
.scrollBounceBehavior(.basedOnSize)
// 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)
.modifier(SidebarBackground(presentation: presentation))
}
private var header: some View {
@@ -106,3 +111,31 @@ private struct SidebarRow: View {
.accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
}
}
/// Die Fläche hinter der Seitenleiste.
///
/// Ein eigener Modifikator, weil die beiden Fälle verschiedene Ergebnistypen
/// haben und ein `if` im Ansichtskörper sie nicht zusammenbringt.
private struct SidebarBackground: ViewModifier {
let presentation: SidebarView.Presentation
func body(content: Content) -> some View {
switch presentation {
case .drawer:
// Die zum Inhalt zeigende Kante ist gerundet: so liegt das Blatt
// sichtbar **über** der Seite, statt eine zweite Seite daneben zu
// sein. Ein Vollton stand vorher wie eine Wand im Bild.
content.glassEffect(
.regular,
in: .rect(
topLeadingRadius: 0,
bottomLeadingRadius: 0,
bottomTrailingRadius: FlixyRadius.sheet,
topTrailingRadius: FlixyRadius.sheet
)
)
case .column:
content
}
}
}
Flixy/Views/Navigation/TopNavigationBar.swift
+57
View File
@@ -0,0 +1,57 @@
import SwiftUI
import FlixyDesign
/// Die Navigation als Reihe über dem Inhalt.
///
/// Dieselben Einträge wie in der Seitenleiste, nur nebeneinander statt
/// untereinander. Sie scrollt waagerecht, weil die Zahl der Mediatheken vom
/// Server kommt und niemand weiß, wie viele es sind — zusammengequetschte
/// Beschriftungen wären die schlechtere Antwort als eine Reihe, die weiterläuft.
struct TopNavigationBar: View {
let items: [SidebarDestination]
@Binding var selection: SidebarDestination
@Environment(\.flixyAccent) private var accent
@Namespace private var glass
var body: some View {
ScrollView(.horizontal) {
// Ein gemeinsamer Behälter: nebeneinanderliegende Glasflächen
// verschmelzen darin, statt als einzelne Scheiben übereinander zu
// liegen.
GlassEffectContainer(spacing: FlixySpacing.snug) {
HStack(spacing: FlixySpacing.snug) {
ForEach(items, id: \.self) { item in
chip(for: item)
}
}
}
.padding(.horizontal, FlixySpacing.screenMargin)
.padding(.vertical, FlixySpacing.snug)
}
.scrollIndicators(.hidden)
.scrollClipDisabled()
}
private func chip(for item: SidebarDestination) -> some View {
let isSelected = item == selection
return Button {
selection = item
} label: {
Label(item.sidebarLabel, systemImage: item.symbol)
.font(.flixyCardTitle)
.lineLimit(1)
.foregroundStyle(isSelected ? accent : Color.flixyTextSecondary)
.padding(.horizontal, FlixySpacing.regular)
.padding(.vertical, FlixySpacing.snug)
}
.buttonStyle(.plain)
.glassEffect(
isSelected ? .regular.tint(accent.opacity(0.28)).interactive() : .regular.interactive(),
in: .capsule
)
.glassEffectID(item, in: glass)
.accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
}
}
Flixy/Views/Settings/AppearanceView.swift
+24
View File
@@ -9,6 +9,7 @@ import FlixyDesign
/// stillschweigend zu verändern.
struct AppearanceView: View {
@Environment(FlixyTheme.self) private var theme
@Environment(NavigationSettings.self) private var navigation
@State private var customHex: String = ""
@State private var showsCustomField = false
@@ -16,6 +17,20 @@ struct AppearanceView: View {
var body: some View {
Form {
Section {
Picker("appearance.navigation", selection: Bindable(navigation).placement) {
ForEach(NavigationSettings.Placement.allCases) { placement in
Text(placement.label).tag(placement)
}
}
.pickerStyle(.segmented)
.padding(.vertical, FlixySpacing.tight)
} header: {
Text("appearance.navigation")
} footer: {
Text("appearance.navigationExplanation")
}
Section {
LazyVGrid(columns: columns, spacing: FlixySpacing.regular) {
ForEach(AccentOption.palette) { option in
@@ -142,3 +157,12 @@ private struct PreviewRow: View {
.listRowBackground(Color.flixySurface)
}
}
extension NavigationSettings.Placement {
var label: LocalizedStringKey {
switch self {
case .side: "appearance.navigationSide"
case .top: "appearance.navigationTop"
}
}
}
Packages/FlixyKit/Sources/JellyfinKit/JellyfinBackend.swift
+51 -19
View File
@@ -54,40 +54,66 @@ public struct JellyfinBackend: MediaBackend {
// wird aus einzelnen Abfragen zusammengesetzt. Das ist kein Mangel:
// so steht hier, was die Reihen bedeuten, statt dass es der Server
// entscheidet.
// „Zuletzt hinzugefügt" wird streng geholt: scheitert es, ist der
// Server nicht erreichbar, und dann gehört eine Fehlermeldung hin.
let latest = try await latestItems(limit: 20)
//
// Die Mediatheken werden streng geholt: sie sind die Probe darauf, ob
// der Server überhaupt antwortet. Alles Weitere ist nachsichtig —
// fällt „Als Nächstes" aus, soll deshalb nicht die ganze Startseite
// leer bleiben.
let libraries = try await libraries().filter(\.isSupported)
// Die beiden anderen nachsichtig: fällt „Als Nächstes" aus, soll
// deshalb nicht die ganze Startseite leer bleiben.
let resuming = try? await rowItems(path: "/Users/\(account.userID)/Items/Resume", query: [
async let resuming = try? rowItems(path: "/Users/\(account.userID)/Items/Resume", query: [
URLQueryItem(name: "Limit", value: "20"),
URLQueryItem(name: "MediaTypes", value: "Video"),
URLQueryItem(name: "Fields", value: Self.fields),
])
let nextUp = try? await rowItems(path: "/Shows/NextUp", query: [
async let nextUp = try? rowItems(path: "/Shows/NextUp", query: [
URLQueryItem(name: "userId", value: account.userID),
URLQueryItem(name: "Limit", value: "20"),
URLQueryItem(name: "Fields", value: Self.fields),
])
async let favourites = try? rowItems(path: "/Users/\(account.userID)/Items", query: [
URLQueryItem(name: "Filters", value: "IsFavorite"),
URLQueryItem(name: "Recursive", value: "true"),
URLQueryItem(name: "IncludeItemTypes", value: "Movie,Series"),
URLQueryItem(name: "Limit", value: "20"),
URLQueryItem(name: "Fields", value: Self.fields),
])
let rows = [
var rows = [
MediaRowGroup(
id: "resume",
title: String(localized: "row.continueWatching", bundle: .module),
items: resuming ?? []
items: await resuming ?? []
),
MediaRowGroup(
id: "nextup",
title: String(localized: "row.nextUp", bundle: .module),
items: nextUp ?? []
),
MediaRowGroup(
id: "latest",
title: String(localized: "row.recentlyAdded", bundle: .module),
items: latest
items: await nextUp ?? []
),
]
// Je Mediathek eine eigene Reihe. „Neu in Filme" und „Neu in Serien"
// sind zwei verschiedene Fragen — in einer gemeinsamen Reihe steht am
// Ende beides durcheinander, und wer nach einem Film sucht, blättert
// an Folgen vorbei.
for library in libraries {
let items = try? await latestItems(limit: 20, inLibrary: library.id)
rows.append(MediaRowGroup(
id: "latest.\(library.id)",
title: String(
localized: "row.latestIn \(library.title)",
bundle: .module
),
items: items ?? []
))
}
rows.append(MediaRowGroup(
id: "favourites",
title: String(localized: "row.favourites", bundle: .module),
items: await favourites ?? []
))
// Leere Reihen wären auf der Startseite nur Überschriften ohne Inhalt.
return rows.filter { !$0.items.isEmpty }
}
@@ -330,15 +356,21 @@ public struct JellyfinBackend: MediaBackend {
///
/// Die Antwort ist hier ausnahmsweise ein nacktes Feld, kein Objekt mit
/// `Items` darin.
private func latestItems(limit: Int) async throws(MediaBackendError) -> [MediaItem] {
let items = try await client.send(
JellyfinRequest(path: "/Users/\(account.userID)/Items/Latest", query: [
private func latestItems(
limit: Int,
inLibrary libraryID: String? = nil
) async throws(MediaBackendError) -> [MediaItem] {
var query = [
URLQueryItem(name: "Limit", value: String(limit)),
URLQueryItem(name: "Fields", value: Self.fields),
// Neue Folgen erscheinen als ihre Serie statt als zwölf
// Einzelkacheln, die alle dasselbe Plakat tragen.
URLQueryItem(name: "GroupItems", value: "true"),
]),
]
if let libraryID { query.append(URLQueryItem(name: "ParentId", value: libraryID)) }
let items = try await client.send(
JellyfinRequest(path: "/Users/\(account.userID)/Items/Latest", query: query),
as: [JellyfinItem].self
)
return items.map { $0.asMediaItem(imageBase: images) }
Packages/FlixyKit/Sources/JellyfinKit/Localizable.xcstrings
+32
View File
@@ -34,6 +34,38 @@
}
}
},
"row.favourites": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Favoriten"
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "Favourites"
}
}
}
},
"row.latestIn %@": {
"localizations": {
"de": {
"stringUnit": {
"state": "translated",
"value": "Neu in %@"
}
},
"en": {
"stringUnit": {
"state": "translated",
"value": "New in %@"
}
}
}
},
"row.nextUp": {
"localizations": {
"de": {