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

Auf dem Telefon stand ein Plakat im Aufmacher — zweimal derselbe Name

Browse Source 
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>
This commit is contained in:
Scarriffle
2026-10-01 12:57:42 +02:00
co-authored by Claude Opus 5
parent 2ab05ee8f6
commit c37087fd34
6 changed files with 92 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Flixy/Session/HeroArtwork.swift
+50 -16
View File
@@ -22,26 +22,59 @@ import MediaKit
/// Adresse, der Zwischenspeicher trifft daneben und der Aufmacher blendet auf
/// eine graue Fläche über.
enum HeroArtwork {
/// Wofür das Bild gebraucht wird.
///
/// **Auf einem breiten Bildschirm macht das keinen Unterschied** — dort
/// ist beides ein 16:9-Hintergrundbild über die ganze Breite. Schmal
/// gehen die beiden auseinander, und zwar aus einem inhaltlichen Grund:
///
/// Im **Karussell** sucht man noch. Dort soll eine Szene stehen, kein
/// Plakat: das Plakat trägt den Titel selbst, und darüber liegt noch der
/// freigestellte Schriftzug — derselbe Name zweimal.
///
/// Auf einer **Detailseite** hat man sich entschieden. Dort ist das
/// Plakat das Bild dieses Films, und der Kopf der Seite darf die Höhe
/// nehmen, die ein Plakat braucht.
enum Placement {
/// Der Aufmacher auf der Startseite.
case carousel
/// Der Kopf einer Detailseite.
case detailHeader
}
/// Ob der Rahmen hochkant ist.
///
/// Die eine Stelle, an der die Entscheidung fällt — Maße, Verhältnis und
/// Reihenfolge der Bildpfade hängen alle daran, und sie müssen
/// zusammenpassen.
private static func isPortrait(_ placement: Placement, compact: Bool) -> Bool {
compact && placement == .detailHeader
}
/// Die Maße, in denen das Bild angefordert wird.
///
/// Im Seitenverhältnis des Rahmens, in dem es landet — sonst schneidet der
/// Server zu, und man sieht einen Streifen aus der Mitte.
static func size(compact: Bool) -> (width: Int, height: Int) {
compact ? (600, 900) : (1920, 1080)
static func size(_ placement: Placement = .carousel, compact: Bool) -> (width: Int, height: Int) {
if isPortrait(placement, compact: compact) { return (600, 900) }
// Schmal landet das Querbild in einem 4:3-Rahmen von höchstens 440
// Punkten Breite — bei dreifacher Auflösung rund 1320 Bildpunkte.
// Zwölfhundert ist genug und spart gegenüber 1920 ein Drittel.
return compact ? (1200, 900) : (1920, 1080)
}
static func aspectRatio(compact: Bool) -> CGFloat {
compact ? FlixyAspectRatio.poster : FlixyAspectRatio.hero
static func aspectRatio(_ placement: Placement = .carousel, compact: Bool) -> CGFloat {
if isPortrait(placement, compact: compact) { return FlixyAspectRatio.poster }
return compact ? FlixyAspectRatio.heroCompact : FlixyAspectRatio.hero
}
/// Auf einem schmalen Bildschirm das **Plakat**, sonst das Hintergrundbild.
///
/// Ein Hintergrundbild ist 16:9. Hochkant gezeigt fehlen ihm links und
/// rechts je ein Viertel, und zu sehen ist ein Ausschnitt aus der Mitte —
/// vom Bild bleibt wenig übrig. Ein Plakat ist von vornherein hochkant;
/// es passt in den Rahmen, ohne dass etwas weggeschnitten werden muss.
static func backdropURL(for item: MediaItem, backend: any MediaBackend, compact: Bool) -> URL? {
backdropURLs(for: item, backend: backend, compact: compact).first
static func backdropURL(
for item: MediaItem,
backend: any MediaBackend,
placement: Placement = .carousel,
compact: Bool
) -> URL? {
backdropURLs(for: item, backend: backend, placement: placement, compact: compact).first
}
/// Alle Kandidaten, vom besten zum schlechtesten.
@@ -57,13 +90,14 @@ enum HeroArtwork {
static func backdropURLs(
for item: MediaItem,
backend: any MediaBackend,
placement: Placement = .carousel,
compact: Bool
) -> [URL] {
let size = size(compact: compact)
let pfade: [String?] = compact
let size = size(placement, compact: compact)
let pfade: [String?] = isPortrait(placement, compact: compact)
// Hochkant: das Plakat der Folge, dann das der Staffel, dann das
// der Serie. Ein Hintergrundbild kommt hier zuletzt — es ist
// quer und verliert hochkant die Hälfte.
// der Serie. Ein Hintergrundbild kommt hier zuletzt — es ist quer
// und verliert hochkant die Hälfte.
? [item.posterArtworkPath, item.thumb, item.parentThumb, item.seriesThumb, item.art]
// Quer: das eigene Hintergrundbild, dann das der Staffel, dann
// das der Serie — und erst danach das Vorschaubild der Folge.