ScarriffleandClaude Opus 5
c37087fd34
Der Aufmacher auf dem iPhone hat nicht das Hintergrundbild geholt,
sondern das **Plakat**. Dafür gab es einen Grund, und er stimmte: ein
16:9-Bild in einem 2:3-Rahmen ist ein Streifen aus der Mitte.
Nur war der Rahmen das Problem, nicht das Bild. Ein Plakat trägt den
Titel selbst, und darüber legt der Aufmacher noch den freigestellten
Schriftzug — derselbe Name zweimal, einmal gesetzt und einmal gemalt.
**Jetzt ein Querbild in einem 4:3-Rahmen.** 16:9 ginge nicht: das sind
auf 440 Punkten Breite 248 Punkte Höhe, und darin sollen Schriftzug,
Zeile, ein Satz Beschreibung und zwei Knöpfe stehen. Sie standen schon
einmal übereinander, das ist der dokumentierte Grund für das Hochformat.
4:3 gibt 330 Punkte — gemessen passt der Text hinein; dafür fehlt dem
Bild links und rechts zusammen ein Viertel.
**Die Detailseite bleibt hochkant.** Dort hat man sich schon entschieden;
das Plakat ist das Bild dieses Films, und du wolltest den Kopf der Seite
ausdrücklich höher. Beide Seiten lasen bisher aus **derselben**
Funktion — eine Änderung für den Aufmacher hätte die Detailseite von 660
auf 330 Punkte gestutzt, ohne dass irgendwo ein Fehler aufgetaucht wäre.
`HeroArtwork` kennt deshalb jetzt den Verwendungszweck:
HeroArtwork.aspectRatio(.detailHeader, compact: …) // 2:3
HeroArtwork.aspectRatio(compact: …) // 4:3 bzw. 16:9
Maße, Verhältnis und Reihenfolge der Bildpfade hängen alle an **einer**
privaten Abfrage — sie müssen zusammenpassen, sonst beschneidet der
Server anders als der Rahmen.
Die Maße schmal: 1200×900 statt 1920×1080. Der Rahmen ist dort höchstens
1320 Bildpunkte breit; das spart auf einer Mobilfunkverbindung ein
Drittel.
Gemessen im Simulator (iPhone 17 Pro Max): Aufmacher 4:3, Text passt,
Detailseite unverändert hochkant. iOS und tvOS bauen, 476 Tests grün.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
298 lines
12 KiB
Swift
298 lines
12 KiB
Swift
import SwiftUI
|
||
import FlixyDesign
|
||
import MediaKit
|
||
|
||
/// Die Detailseite von etwas, das sich direkt abspielen lässt — Film oder
|
||
/// einzelne Folge.
|
||
struct PlayableDetailView: View {
|
||
let item: MediaItem
|
||
|
||
@Environment(FlixySession.self) private var session
|
||
@Environment(PlaybackCoordinator.self) private var playback
|
||
@Environment(\.flixyAccent) private var accent
|
||
|
||
@Environment(\.horizontalSizeClass) private var sizeClass
|
||
@State private var selectedVersion = 0
|
||
@State private var showsTechnicalDetails = false
|
||
|
||
var body: some View {
|
||
ScrollView {
|
||
VStack(alignment: .leading, spacing: FlixySpacing.section) {
|
||
header
|
||
|
||
// Bei einer Folge nicht mehr: dorthin führt jetzt die Zeile
|
||
// unter dem Titel. Zwei Wege zum selben Ziel, einer davon als
|
||
// Knopfreihe am unteren Rand, waren einer zu viel.
|
||
if item.kind != .episode {
|
||
ParentLinks(item: item)
|
||
}
|
||
|
||
if item.hasMultipleVersions {
|
||
VersionPicker(media: item.versions, selection: $selectedVersion)
|
||
.padding(.horizontal, FlixySpacing.screenMargin)
|
||
}
|
||
|
||
if let summary = item.summary, !summary.isEmpty {
|
||
Text(summary)
|
||
.font(.flixyBody)
|
||
.foregroundStyle(Color.flixyTextSecondary)
|
||
.padding(.horizontal, FlixySpacing.screenMargin)
|
||
}
|
||
|
||
if !item.genres.isEmpty {
|
||
TagStrip(tags: item.genres)
|
||
}
|
||
|
||
if !item.cast.isEmpty {
|
||
CastRow(cast: item.cast)
|
||
}
|
||
|
||
if let media = currentMedia, let part = media.files.first {
|
||
TechnicalDetails(
|
||
media: media,
|
||
part: part,
|
||
isExpanded: $showsTechnicalDetails
|
||
)
|
||
.padding(.horizontal, FlixySpacing.screenMargin)
|
||
}
|
||
}
|
||
.padding(.bottom, FlixySpacing.section)
|
||
}
|
||
.scrollIndicators(.never)
|
||
.flixyRevealsTopChrome()
|
||
}
|
||
|
||
private var currentMedia: MediaVersion? {
|
||
guard item.versions.indices.contains(selectedVersion) else { return item.versions.first }
|
||
return item.versions[selectedVersion]
|
||
}
|
||
|
||
private var header: some View {
|
||
HeroBanner(
|
||
title: item.rowTitle,
|
||
metadata: item.kind == .episode ? nil : metadataLine,
|
||
metadataContent: item.kind == .episode ? AnyView(episodeMetadata) : nil,
|
||
summary: nil,
|
||
// Über `HeroArtwork`, nicht von Hand: hier standen 900×1200 —
|
||
// hochkant — für ein Bild, das im 16:9-Rahmen landet. Zu sehen war
|
||
// davon ein Streifen aus der Mitte. Derselbe Fehler war im
|
||
// Aufmacher schon einmal behoben worden, nur hier nicht.
|
||
artworkURLs: session.backend.map {
|
||
HeroArtwork.backdropURLs(
|
||
for: item,
|
||
backend: $0,
|
||
placement: .detailHeader,
|
||
compact: sizeClass == .compact
|
||
)
|
||
} ?? [],
|
||
logoURL: session.backend?.rawImageURL(path: item.clearLogoPath),
|
||
// **Dasselbe Verhältnis, in dem das Bild bestellt wurde.** Hier
|
||
// stand keines, also galt die Vorgabe 16∶9 — während `HeroArtwork`
|
||
// auf einem schmalen Gerät ein **Plakat** anfordert, also hochkant.
|
||
// Zu sehen war davon ein Streifen aus der Mitte: das Bild wirkte
|
||
// angeschnitten und der Kopf der Seite viel zu flach.
|
||
//
|
||
// Beides kommt deshalb aus derselben Quelle und mit demselben
|
||
// Verwendungszweck: `detailHeader` bleibt hochkant, auch seit das
|
||
// Karussell auf dem Telefon quer ist.
|
||
aspectRatio: HeroArtwork.aspectRatio(.detailHeader, compact: sizeClass == .compact)
|
||
) {
|
||
Button {
|
||
playback.play(item, mediaIndex: selectedVersion)
|
||
} label: {
|
||
Label(
|
||
item.watchProgress == nil ? "hero.play" : "hero.resume",
|
||
systemImage: "play.fill"
|
||
)
|
||
.font(.flixyCardTitle)
|
||
.padding(.horizontal, FlixySpacing.loose)
|
||
.padding(.vertical, FlixySpacing.snug)
|
||
}
|
||
.buttonStyle(.borderedProminent)
|
||
.tint(accent)
|
||
.disabled(currentMedia?.files.first == nil)
|
||
|
||
if let progress = item.watchProgress, progress > 0 {
|
||
Button {
|
||
playback.play(item, mediaIndex: selectedVersion, resuming: false)
|
||
} label: {
|
||
Label("detail.playFromStart", systemImage: "gobackward")
|
||
.labelStyle(.iconOnly)
|
||
.font(.flixyCardTitle)
|
||
.padding(FlixySpacing.snug)
|
||
}
|
||
.buttonStyle(.bordered)
|
||
.tint(Color.flixyTextSecondary)
|
||
}
|
||
|
||
DownloadButton(item: item, mediaIndex: selectedVersion)
|
||
}
|
||
}
|
||
|
||
/// Die Zeile unter dem Folgentitel — mit Wegen nach oben.
|
||
///
|
||
/// Serienname und „Staffel 2" führen dorthin, wohin sie zeigen. Vorher
|
||
/// stand hier „S2 E1" als Text und darunter eine Reihe Knöpfe; wer zur
|
||
/// Serie wollte, musste erst den Knopf finden. Der Name der Serie steht
|
||
/// ohnehin da — dann soll er auch der Weg sein.
|
||
@ViewBuilder
|
||
private var episodeMetadata: some View {
|
||
let plain = plainPieces
|
||
|
||
HStack(spacing: 0) {
|
||
if let series = item.seriesTitle, let showID = item.seriesID {
|
||
NavigationLink(value: MediaRoute(ratingKey: showID, title: series)) {
|
||
Text(series).underline()
|
||
}
|
||
.buttonStyle(.plain)
|
||
separator
|
||
} else if let series = item.seriesTitle {
|
||
Text(series)
|
||
separator
|
||
}
|
||
|
||
if let season = item.parentIndex {
|
||
let title = String(localized: "season.number \(season)")
|
||
if let seasonID = item.parentID {
|
||
NavigationLink(value: MediaRoute(ratingKey: seasonID, title: title)) {
|
||
Text(title).underline()
|
||
}
|
||
.buttonStyle(.plain)
|
||
} else {
|
||
Text(title)
|
||
}
|
||
separator
|
||
}
|
||
|
||
if let episode = item.index {
|
||
// Über `String(localized:)` wie die Staffel darüber, nicht als
|
||
// `LocalizedStringKey`. Bei der Schlüsselform ist der
|
||
// Platzhalter nicht eindeutig: Xcode trug beim Auslesen
|
||
// `%@` ein, während die Laufzeit `%lld` nachschlägt — und
|
||
// zwischen zwei verschiedenen Schlüsseln findet man nie einen.
|
||
Text(String(localized: "episode.number \(episode)"))
|
||
if !plain.isEmpty { separator }
|
||
}
|
||
|
||
Text(plain.joined(separator: " · "))
|
||
}
|
||
.lineLimit(1)
|
||
}
|
||
|
||
private var separator: some View {
|
||
Text(" · ")
|
||
}
|
||
|
||
/// Was in der Zeile nur dasteht und nirgendwohin führt.
|
||
private var plainPieces: [String] {
|
||
var pieces: [String] = []
|
||
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) }
|
||
if let resolution = currentMedia?.resolutionLabel { pieces.append(resolution) }
|
||
return pieces
|
||
}
|
||
|
||
private var metadataLine: String? {
|
||
var pieces: [String] = []
|
||
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) }
|
||
if let resolution = currentMedia?.resolutionLabel { pieces.append(resolution) }
|
||
return pieces.isEmpty ? nil : pieces.joined(separator: " · ")
|
||
}
|
||
|
||
}
|
||
|
||
/// Auswahl zwischen mehreren Fassungen desselben Titels.
|
||
struct VersionPicker: View {
|
||
let media: [MediaVersion]
|
||
@Binding var selection: Int
|
||
|
||
var body: some View {
|
||
VStack(alignment: .leading, spacing: FlixySpacing.snug) {
|
||
Text("detail.versions")
|
||
.font(.flixyRowHeader)
|
||
.foregroundStyle(Color.flixyTextPrimary)
|
||
|
||
Picker("detail.versions", selection: $selection) {
|
||
ForEach(Array(media.enumerated()), id: \.offset) { index, version in
|
||
Text(version.qualityLabel).tag(index)
|
||
}
|
||
}
|
||
.pickerStyle(.segmented)
|
||
.labelsHidden()
|
||
}
|
||
}
|
||
}
|
||
|
||
/// Genres als Streifen.
|
||
struct TagStrip: View {
|
||
let tags: [String]
|
||
|
||
var body: some View {
|
||
ScrollView(.horizontal) {
|
||
HStack(spacing: FlixySpacing.snug) {
|
||
ForEach(tags, id: \.self) { tag in
|
||
Text(tag)
|
||
.font(.flixyCaption)
|
||
.foregroundStyle(Color.flixyTextSecondary)
|
||
.padding(.horizontal, FlixySpacing.regular)
|
||
.padding(.vertical, FlixySpacing.tight)
|
||
.background(Color.flixyElevated, in: .capsule)
|
||
}
|
||
}
|
||
.padding(.horizontal, FlixySpacing.screenMargin)
|
||
}
|
||
.scrollIndicators(.never)
|
||
}
|
||
}
|
||
|
||
/// Die Besetzung mit Porträts.
|
||
struct CastRow: View {
|
||
let cast: [MediaPerson]
|
||
@Environment(FlixySession.self) private var session
|
||
|
||
var body: some View {
|
||
VStack(alignment: .leading, spacing: FlixySpacing.regular) {
|
||
Text("detail.cast")
|
||
.font(.flixyRowHeader)
|
||
.foregroundStyle(Color.flixyTextPrimary)
|
||
.padding(.horizontal, FlixySpacing.screenMargin)
|
||
|
||
ScrollView(.horizontal) {
|
||
HStack(alignment: .top, spacing: FlixySpacing.regular) {
|
||
ForEach(cast.prefix(20)) { role in
|
||
VStack(spacing: FlixySpacing.snug) {
|
||
FlixyArtwork(
|
||
url: session.backend?.artworkURL(path: role.thumb, width: 160, height: 160),
|
||
aspectRatio: 1,
|
||
fallbackSymbol: "person"
|
||
)
|
||
.frame(width: 72, height: 72)
|
||
.clipShape(.circle)
|
||
|
||
Text(role.name)
|
||
.font(.flixyCaption)
|
||
.foregroundStyle(Color.flixyTextPrimary)
|
||
.lineLimit(2)
|
||
.multilineTextAlignment(.center)
|
||
|
||
if let character = role.role {
|
||
Text(character)
|
||
.font(.flixyCaption)
|
||
.foregroundStyle(Color.flixyTextMuted)
|
||
.lineLimit(1)
|
||
}
|
||
}
|
||
.frame(width: 90)
|
||
.accessibilityElement(children: .combine)
|
||
}
|
||
}
|
||
.padding(.horizontal, FlixySpacing.screenMargin)
|
||
}
|
||
.scrollIndicators(.never)
|
||
}
|
||
}
|
||
}
|