Im Commit davor blendete nur noch das Bild über; Schriftzug, Zeile und
Knöpfe standen still und wechselten schlagartig. Das war zu viel
weggenommen: die Bewegung gehört dazu.
Jetzt wandert der Text wieder mit — aber an der richtigen Stelle im
Stapel. Der Aufmacher zeichnet seinen Inhalt während eines Wechsels
zweimal: den weichenden deckend, den kommenden mit demselben Einblenden
und demselben Hereinrutschen wie das Bild darunter. Beides liegt **über**
dem Verlauf, und dort kostet es ihn nichts.
Der Unterschied zum alten Aufbau ist genau diese Reihenfolge. Vorher
lagen zwei **vollständige** Aufmacher übereinander, jeder mit eigenem
Verlauf — und zwei halbdurchsichtige Verläufe ergeben zusammen keinen
ganzen. Jetzt gibt es einen Verlauf, einmal, in voller Stärke.
Nachgemessen über einen auf sechs Sekunden gestreckten Wechsel, an
derselben Stelle im Bild:
ursprünglich 68 .. 154
jetzt 63 .. 75
Dafür ist der Textsatz in `HeroBanner` eine eigene Funktion geworden —
es gibt ihn während eines Wechsels zweimal — und `HeroSection.metadata`
ist `static`, weil die Zeile auch für den weichenden Titel gebraucht
wird. `titleView` und `plainTitle` sind darin aufgegangen.
iOS und tvOS bauen, 476 Tests grün.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
99 lines
4.5 KiB
Swift
99 lines
4.5 KiB
Swift
import SwiftUI
|
|
import FlixyDesign
|
|
import MediaKit
|
|
|
|
/// Der Aufmacher oben auf der Startseite.
|
|
struct HeroSection: View {
|
|
let item: MediaItem
|
|
/// Der Titel, dessen Bild gerade verschwindet — nur im Karussell gesetzt.
|
|
var outgoing: MediaItem?
|
|
/// Wie weit das neue Bild schon deckt.
|
|
var crossfade: CGFloat = 1
|
|
/// Wie weit es dabei hereinrutscht.
|
|
var incomingOffset: CGFloat = 0
|
|
|
|
@Environment(FlixySession.self) private var session
|
|
@Environment(PlaybackCoordinator.self) private var playback
|
|
@Environment(QuickPlay.self) private var quickPlay
|
|
@Environment(\.flixyAccent) private var accent
|
|
@Environment(\.horizontalSizeClass) private var sizeClass
|
|
|
|
var body: some View {
|
|
HeroBanner(
|
|
title: item.rowTitle,
|
|
metadata: metadata,
|
|
summary: item.summary,
|
|
artworkURLs: session.backend.map {
|
|
HeroArtwork.backdropURLs(for: item, backend: $0, compact: sizeClass == .compact)
|
|
} ?? [],
|
|
outgoingArtworkURLs: session.backend.flatMap { backend in
|
|
outgoing.map { HeroArtwork.backdropURLs(for: $0, backend: backend, compact: sizeClass == .compact) }
|
|
} ?? [],
|
|
outgoingTitle: outgoing?.rowTitle,
|
|
outgoingMetadata: outgoing.flatMap(Self.metadata(for:)),
|
|
outgoingLogoURL: session.backend.flatMap { backend in
|
|
outgoing.flatMap { HeroArtwork.logoURL(for: $0, backend: backend) }
|
|
},
|
|
crossfade: crossfade,
|
|
incomingOffset: incomingOffset,
|
|
logoURL: session.backend.flatMap { HeroArtwork.logoURL(for: item, backend: $0) },
|
|
// Auf dem iPhone hochkant: 16:9 ließ dem Text so wenig Platz, dass
|
|
// Schriftzug und Beschreibung übereinanderlagen.
|
|
aspectRatio: HeroArtwork.aspectRatio(compact: sizeClass == .compact),
|
|
// Auf einem großen Bildschirm nimmt der Aufmacher die Höhe, die
|
|
// das Karussell ihm gibt — sonst wäre er so hoch, wie 16:9 es
|
|
// vorschreibt, und darüber und darunter bliebe der halbe
|
|
// Bildschirm leer.
|
|
fillsAvailableSpace: sizeClass != .compact
|
|
) {
|
|
Button {
|
|
// **Über QuickPlay, nicht unmittelbar.** Steht im Aufmacher
|
|
// eine Serie — und Jellyfins „Zuletzt hinzugefügt" liefert
|
|
// neue Folgen als ihre Serie —, schickte der direkte Weg
|
|
// deren eigene Kennung an den Player, und der scheiterte mit
|
|
// „keine abspielbare Datei". Eine Serie hat keine Fassungen.
|
|
quickPlay.start(item, backend: session.backend, coordinator: playback)
|
|
} label: {
|
|
Label(playLabel, systemImage: "play.fill")
|
|
.font(.flixyCardTitle)
|
|
.padding(.horizontal, FlixySpacing.loose)
|
|
.padding(.vertical, FlixySpacing.snug)
|
|
}
|
|
.buttonStyle(.borderedProminent)
|
|
.tint(accent)
|
|
|
|
NavigationLink(value: MediaRoute(ratingKey: item.id, title: item.title)) {
|
|
Label("hero.details", systemImage: "info.circle")
|
|
.font(.flixyCardTitle)
|
|
.padding(.horizontal, FlixySpacing.loose)
|
|
.padding(.vertical, FlixySpacing.snug)
|
|
}
|
|
.buttonStyle(.bordered)
|
|
.tint(Color.flixyTextSecondary)
|
|
}
|
|
}
|
|
|
|
/// „Weiterschauen" statt „Abspielen", wenn schon etwas gesehen wurde —
|
|
/// sonst wäre nicht erkennbar, dass der Film an der alten Stelle weitergeht.
|
|
private var playLabel: LocalizedStringKey {
|
|
item.watchProgress == nil ? "hero.play" : "hero.resume"
|
|
}
|
|
|
|
private var metadata: String? { Self.metadata(for: item) }
|
|
|
|
/// Die Zeile unter dem Titel.
|
|
///
|
|
/// `static`, weil sie während eines Wechsels auch für den weichenden
|
|
/// Titel gebraucht wird — und der ist nicht `item`.
|
|
static func metadata(for item: MediaItem) -> String? {
|
|
var pieces: [String] = []
|
|
if item.kind == .episode, let season = item.parentIndex, let episode = item.index {
|
|
pieces.append(String(localized: "episode.short \(season) \(episode)"))
|
|
}
|
|
if let year = item.year { pieces.append(String(year)) }
|
|
if let duration = item.duration { pieces.append(Duration.milliseconds(duration).runtimeLabel) }
|
|
if let rating = item.contentRating { pieces.append(rating) }
|
|
return pieces.isEmpty ? nil : pieces.joined(separator: " · ")
|
|
}
|
|
}
|