Die Startseite am Fernseher — und die Ladeschicht nur einmal

Aufmacher, Reihen, Mediatheken, Raster. Der sichtbare Teil ist neu; der
Teil darunter ist derselbe wie am Telefon, und das war die eigentliche
Arbeit.

**Herausgelöst statt kopiert.** `HomeFeed` und `LibraryFeed` tragen jetzt,
was vorher in `HomeView` und `LibraryView` stand: laden, ordnen, den
Aufmacher auslosen, den Zwischenspeicher abziehen, entdoppeln, nach einem
Fehlschlag sperren. Das zu kopieren wäre der schlimmste Ausgang dieses
Vorhabens gewesen — an mindestens drei dieser Stellen klebte schon je ein
Fehler, der sich als „es sind nicht alle Filme drin" äusserte und sonst
nichts. Einer davon, das Los des Aufmachers an der Position statt am
Titel, wäre in einer Kopie ein zweites Mal zu finden gewesen.

Mitgewandert sind `rowTitle`, `rowArtworkPath`, `posterArtworkPath`,
`runtimeLabel` und `HeroArtwork`: reine Ableitungen, die in einer
Ansichtsdatei lagen und deshalb nur das Telefon übersetzte.

**Nachgeladen wird am Fokus, nicht am Erscheinen.** Die alte Regel hiess
„die letzten fünf" und hing daran, dass eine Kachel sichtbar wird. Beim
ersten Zeichnen erscheinen aber alle sechzig, auch die letzten fünf — das
Nachladen lief sofort los statt beim Blättern. Auf einem Raster aus sechs
Spalten sind fünf Einträge ausserdem nicht einmal eine Zeile. `PagingWindow`
rechnet deshalb in Zeilen; sechs Tests halten es fest, darunter der Fall,
der die alte Regel entlarvt.

**Der Fokus setzt den Aufmacher.** Wer durch „Zuletzt hinzugefügt"
wandert, sieht oben, was er gerade anschaut. Kein Wechsel im Sieben-
sekundentakt wie am Telefon: vor einem Fernseher wäre ein Bild, das sich
von allein austauscht, während man es liest, eine Zumutung.

**Drei Dinge, die erst der Simulator zeigte.** Die Seiten müssen
bildfüllend laufen, weil ein Aufmacher, der achtzig Punkte vor der
Bildschirmkante aufhört, nach Fehler aussieht — also trägt `screenMargin`
auf tvOS den Überscan mit. Die Karten brauchen einen Fokus-Rückruf, weil
`\.isFocused` den nächsten fokussierbaren Vorfahren meint und das in einer
Reihe aus Karten nicht verlässlich die Karte ist. Und der Bau scheiterte
an „Unable to resolve module dependency: VLCKit" — der Abhängigkeits-
Sucher prüft `canImport(FlixyVLC)` auch für ein Ziel, das es nie verlinkt.
Ein `&& !os(tvOS)` genügt; das Paket selbst bleibt unverändert.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Packages/FlixyKit/Sources/FlixyDesign/Components/TVCards.swift

@@ -0,0 +1,163 @@
+#if os(tvOS)
+import SwiftUI
+
+/// Ein Plakat, das auf den Fokus antwortet.
+///
+/// **Ein Knopf, kein Bild mit Geste.** Auf tvOS ist alles Bedienbare
+/// fokussierbar, und `.buttonStyle(.card)` bringt die Systemwirkung mit:
+/// Anheben, Schlagschatten und die Parallaxe, bei der sich die Ebenen beim
+/// Wischen gegeneinander verschieben. Die von Hand nachzubauen —
+/// `scaleEffect` und ein Schatten — sieht auf den ersten Blick gleich aus und
+/// auf den zweiten falsch: die Parallaxe ist der Teil, den man wiedererkennt.
+///
+/// Liegt in FlixyDesign und nicht im Fernseh-Ziel, aus demselben Grund wie
+/// `PosterCard`: das Paket kennt weder `MediaItem` noch die Wiedergabe, und
+/// das soll so bleiben. Herein kommen Zeichenketten und Adressen.
+public struct TVPosterCard: View {
+    private let title: String
+    private let subtitle: String?
+    private let artworkURL: URL?
+    private let progress: Double?
+    /// Meldet nach oben, wenn diese Karte den Fokus bekommt oder verliert.
+    ///
+    /// **Nach aussen als Rückruf, innen als `@FocusState`.** Die Umgebung
+    /// könnte es nicht beantworten — `\.isFocused` meint den nächsten
+    /// fokussierbaren Vorfahren, und das ist in einer Reihe aus Karten nicht
+    /// verlässlich diese. Wer es wissen will, bekommt es deshalb gesagt.
+    private let onFocusChange: (Bool) -> Void
+    private let action: () -> Void
+
+    /// **Ausdrücklich und nicht über `\.isFocused`.** Die Umgebungsvariable
+    /// beantwortet die Frage nach dem nächstgelegenen fokussierbaren
+    /// Vorfahren; in einer Reihe aus Karten ist das nicht verlässlich diese.
+    @FocusState private var isFocused: Bool
+
+    public init(
+        title: String,
+        subtitle: String? = nil,
+        artworkURL: URL?,
+        progress: Double? = nil,
+        onFocusChange: @escaping (Bool) -> Void = { _ in },
+        action: @escaping () -> Void
+    ) {
+        self.title = title
+        self.subtitle = subtitle
+        self.artworkURL = artworkURL
+        self.progress = progress
+        self.onFocusChange = onFocusChange
+        self.action = action
+    }
+
+    public var body: some View {
+        TVCard(
+            aspectRatio: PosterCard.aspectRatio,
+            title: title,
+            subtitle: subtitle,
+            artworkURL: artworkURL,
+            progress: progress,
+            isFocused: $isFocused,
+            onFocusChange: onFocusChange,
+            action: action
+        )
+    }
+}
+
+/// Dasselbe im Querformat — für „Weiterschauen".
+///
+/// Angefangenes erkennt man an der Szene, an der man aufgehört hat; wer
+/// dagegen aussucht, was als Nächstes kommt, sucht nach Plakaten.
+public struct TVLandscapeCard: View {
+    private let title: String
+    private let subtitle: String?
+    private let artworkURL: URL?
+    private let progress: Double?
+    /// Meldet nach oben, wenn diese Karte den Fokus bekommt oder verliert.
+    ///
+    /// **Nach aussen als Rückruf, innen als `@FocusState`.** Die Umgebung
+    /// könnte es nicht beantworten — `\.isFocused` meint den nächsten
+    /// fokussierbaren Vorfahren, und das ist in einer Reihe aus Karten nicht
+    /// verlässlich diese. Wer es wissen will, bekommt es deshalb gesagt.
+    private let onFocusChange: (Bool) -> Void
+    private let action: () -> Void
+
+    @FocusState private var isFocused: Bool
+
+    public init(
+        title: String,
+        subtitle: String? = nil,
+        artworkURL: URL?,
+        progress: Double? = nil,
+        onFocusChange: @escaping (Bool) -> Void = { _ in },
+        action: @escaping () -> Void
+    ) {
+        self.title = title
+        self.subtitle = subtitle
+        self.artworkURL = artworkURL
+        self.progress = progress
+        self.onFocusChange = onFocusChange
+        self.action = action
+    }
+
+    public var body: some View {
+        TVCard(
+            aspectRatio: FlixyAspectRatio.landscape,
+            title: title,
+            subtitle: subtitle,
+            artworkURL: artworkURL,
+            progress: progress,
+            isFocused: $isFocused,
+            onFocusChange: onFocusChange,
+            action: action
+        )
+    }
+}
+
+/// Was beide gemeinsam haben.
+private struct TVCard: View {
+    let aspectRatio: CGFloat
+    let title: String
+    let subtitle: String?
+    let artworkURL: URL?
+    let progress: Double?
+    @FocusState.Binding var isFocused: Bool
+    let onFocusChange: (Bool) -> Void
+    let action: () -> Void
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: FlixySpacing.snug) {
+            Button(action: action) {
+                FlixyArtwork(url: artworkURL, aspectRatio: aspectRatio)
+                    .overlay(alignment: .bottom) {
+                        if let progress { WatchProgressBar(fraction: progress) }
+                    }
+                    .clipShape(.rect(cornerRadius: FlixyRadius.card))
+            }
+            .buttonStyle(.card)
+            .focused($isFocused)
+
+            // **Die Höhe wird immer belegt, der Text nicht immer gezeigt.**
+            //
+            // Sonst wächst die Karte beim Fokussieren nach unten und schiebt
+            // die ganze Reihe — und man sieht nicht den Fokus, sondern ein
+            // Zucken. Und dauerhaft beschriftet wären zwanzig Plakate aus drei
+            // Metern eine Textwand.
+            VStack(alignment: .leading, spacing: 2) {
+                Text(title)
+                    .font(.flixyCardTitle)
+                    .foregroundStyle(Color.flixyTextPrimary)
+                    .lineLimit(1)
+                if let subtitle {
+                    Text(subtitle)
+                        .font(.flixyCaption)
+                        .foregroundStyle(Color.flixyTextMuted)
+                        .lineLimit(1)
+                }
+            }
+            .opacity(isFocused ? 1 : 0)
+            .animation(.easeOut(duration: 0.15), value: isFocused)
+        }
+        .onChange(of: isFocused) { _, neu in onFocusChange(neu) }
+        .accessibilityElement(children: .combine)
+    }
+}
+#endif

Packages/FlixyKit/Sources/FlixyDesign/FlixyFont.swift

@@ -87,13 +87,20 @@ public enum FlixySpacing {
     public static let regular: CGFloat = 24
     public static let loose: CGFloat = 32
     public static let section: CGFloat = 48
-    /// Der seitliche Rand des Inhalts — **zusätzlich** zum Sicherheitsrand.
+    /// Der seitliche Rand des Inhalts — **vom Bildschirmrand aus**.
     ///
-    /// **Nicht 90.** Die neunzig Punkte des Überscan-Bereichs liefert das
-    /// System als Sicherheitsrand; wer sie hier noch einmal aufschlägt, hat
-    /// hundertachtzig und ein Raster, das in der Bildmitte klebt. Hier steht
-    /// nur die Rinne innerhalb des sicheren Bereichs.
-    public static let screenMargin: CGFloat = 48
+    /// Achtzig Punkte Überscan plus achtundvierzig Punkte Rinne.
+    ///
+    /// **Warum die achtzig hier drinstehen.** SwiftUI legt sie von selbst als
+    /// Sicherheitsrand an, und normalerweise nähme man sie geschenkt. Der
+    /// Aufmacher muss aber bis an die Bildschirmkante reichen — ein Bild, das
+    /// achtzig Punkte vor dem Rand aufhört, sieht auf einem Fernseher nach
+    /// Fehler aus. Also laufen die Seiten dieser App bildfüllend
+    /// (`ignoresSafeArea`), und dann muss der Rand hier wieder dazu.
+    ///
+    /// Das heisst zugleich: wer diesen Wert benutzt, ignoriert den
+    /// Sicherheitsrand. Beides gehört zusammen.
+    public static let screenMargin: CGFloat = 128
     #else
     public static let tight: CGFloat = 4
     public static let snug: CGFloat = 8

Packages/FlixyKit/Sources/MediaKit/PagingWindow.swift

@@ -0,0 +1,37 @@
+import Foundation
+
+/// Wann nachgeladen wird.
+///
+/// **Nicht „die letzten fünf".** So stand es bisher, und zwei Dinge daran
+/// gehen schief. Erstens ist das auf einem Raster aus sechs Spalten nicht
+/// einmal eine Zeile: wer dort ankommt, wartet trotzdem. Zweitens — und das
+/// ist der eigentliche Fehler — hing es am **Erscheinen** der Kachel. Beim
+/// ersten Zeichnen erscheinen alle sechzig gleichzeitig, auch die letzten
+/// fünf; das Nachladen lief also sofort los statt beim Scrollen.
+///
+/// Gemessen wird deshalb in **Zeilen**, und der Auslöser ist auf dem
+/// Fernseher der Fokus statt des Erscheinens. Auf einem breiten Raster ist
+/// das nicht Feinschliff: dort sind sechs Kacheln eine Zeile, und mit der
+/// alten Regel wäre schon die erste Bildschirmseite „fast am Ende".
+public struct PagingWindow: Sendable, Equatable {
+    /// Wie viele Kacheln nebeneinander stehen.
+    public let columns: Int
+    /// Wie viele Zeilen Vorlauf gewünscht sind.
+    public let rowsAhead: Int
+
+    public init(columns: Int, rowsAhead: Int = 2) {
+        self.columns = columns
+        self.rowsAhead = rowsAhead
+    }
+
+    /// - Parameter focusedIndex: Wo der Fokus gerade steht.
+    /// - Parameter loaded: Wie viele Einträge schon dastehen.
+    /// - Parameter total: Wie viele der Server insgesamt meldet.
+    public func shouldLoad(focusedIndex: Int, loaded: Int, total: Int) -> Bool {
+        // `columns <= 0` ist keine sinnvolle Frage, aber eine mögliche: ein
+        // Raster kennt seine Spaltenzahl erst nach dem ersten Zeichnen. Null
+        // zurückzugeben ist richtiger, als durch null zu teilen.
+        guard columns > 0, loaded > 0, loaded < total else { return false }
+        return focusedIndex >= loaded - columns * rowsAhead
+    }
+}