Der leuchtende Streifen war die Reihenfolge der Überlagerungen

Ein negativer Rand dehnt, was er umschließt, meldet nach außen aber die alte
Breite. Er stand ganz oben, also legten sich Verlauf und Schrift nur über den
alten Bereich — und die zwölf Punkte daneben blieben ohne Verlauf und damit
hell. Gemessen: dort 60 Helligkeit, im Inhaltsbereich 19, bei gleichem Bild.

Jetzt wird erst der Verlauf gelegt, dann gedehnt, dann die Schrift gesetzt. Der
Verlauf deckt bis zum Rand, die Schrift bleibt auf der gemeldeten Breite und
fängt von selbst dort an, wo auch die Reihen darunter anfangen.

Der Weg dorthin ging über drei Irrtümer, die alle widerlegt sind: nicht
`glassEffect` (der Streifen blieb bei undurchsichtiger Fläche), nicht der
Platzhalter (er blieb bei grünem Platzhalter), nicht der Scroll-Anzeiger (er
blieb ohne Bildlaufansicht). Die Bildlaufansicht in der Leiste ist trotzdem
draußen — sie wurde nicht gebraucht.

Dazu: der Aufmacher nimmt die volle Höhe statt achtundachtzig Prozent, der
Haarstrich der Leiste ist zurückhaltender, und auf dem iPhone ist der Aufmacher
das **Plakat** statt des Hintergrundbilds. Ein 16:9-Bild hochkant zeigt einen
Ausschnitt aus der Mitte; ein Plakat ist von vornherein hochkant und passt
ohne Beschnitt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-13 20:26:32 +02:00
co-authored by Claude Opus 5
parent 873b8a4405
commit dba645d168
4 changed files with 55 additions and 37 deletions
+15 -10
View File
@@ -17,25 +17,30 @@ import MediaKit
/// Adresse, der Zwischenspeicher trifft daneben und der Aufmacher blendet auf
/// eine graue Fläche über.
enum HeroArtwork {
/// Die Maße, in denen das Hintergrundbild angefordert wird.
/// Die Maße, in denen das Bild angefordert wird.
///
/// Groß genug für ein breites Fenster, und im Seitenverhältnis des
/// Rahmens, damit nichts beschnitten werden muss.
/// 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 ? (900, 1200) : (1920, 1080)
compact ? (600, 900) : (1920, 1080)
}
static func aspectRatio(compact: Bool) -> CGFloat {
compact ? FlixyAspectRatio.heroCompact : FlixyAspectRatio.hero
compact ? FlixyAspectRatio.poster : 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? {
let size = size(compact: compact)
return backend.artworkURL(
path: item.art ?? item.seriesArt ?? item.thumb,
width: size.width,
height: size.height
)
let path = compact
? (item.posterArtworkPath ?? item.art)
: (item.art ?? item.seriesArt ?? item.thumb)
return backend.artworkURL(path: path, width: size.width, height: size.height)
}
/// Der freigestellte Schriftzug — ohne Bild-Transcoder.
+3 -4
View File
@@ -88,13 +88,12 @@ struct HeroCarousel: View {
// Die Höhe: fast das ganze Fenster.
//
// Ein Aufmacher, der nur ein Drittel hoch ist, sieht aus wie ein
// breites Vorschaubild. Die zwölf Prozent, die übrig bleiben,
// sind Absicht — dort lugt die erste Reihe herein und sagt, dass
// es weitergeht.
// breites Vorschaubild. So hoch wie die Seitenleiste soll er sein,
// und die ist so hoch wie das Fenster.
//
// Auf einem schmalen Gerät nicht: dort ist der Aufmacher hochkant
// und rechnet sich seine Höhe aus der Breite aus.
.modifier(HeroHeight(fraction: sizeClass == .compact ? nil : 0.88))
.modifier(HeroHeight(fraction: sizeClass == .compact ? nil : 1))
// **Kein** Seitenverhältnis hier: der Aufmacher bringt sein
// eigenes mit, und eines darüber legte ihn auf die Breite des
// Inhaltsbereichs fest. Weil er nach links unter die Seitenleiste
+19 -11
View File
@@ -76,9 +76,9 @@ struct FlixySidebar: View {
shape.strokeBorder(
LinearGradient(
stops: [
.init(color: .white.opacity(0.55), location: 0),
.init(color: .white.opacity(0.10), location: 0.5),
.init(color: .white.opacity(0.30), location: 1),
.init(color: .white.opacity(0.30), location: 0),
.init(color: .white.opacity(0.05), location: 0.5),
.init(color: .white.opacity(0.16), location: 1),
],
startPoint: .topLeading,
endPoint: .bottomTrailing
@@ -96,16 +96,24 @@ struct FlixySidebar: View {
VStack(alignment: .leading, spacing: 0) {
header
ScrollView {
VStack(alignment: .leading, spacing: FlixySpacing.regular) {
ForEach(groups) { group in
section(group)
}
// Ohne Bildlaufansicht.
//
// Sie war der helle Streifen an der rechten Kante: ihr Anzeiger,
// zwölf Punkte breit, in gleichbleibender Helligkeit, genau so
// hoch wie die Liste. `.scrollIndicators(.never)` half nicht — auf
// dem Mac zeichnet das System ihn trotzdem.
//
// Gebraucht wird sie ohnehin nicht: die Einträge sind wenige und
// passen. Sollten es einmal so viele Mediatheken werden, dass sie
// nicht passen, ist das eine eigene Aufgabe — und dann mit
// abgeschaltetem Anzeiger von Hand.
VStack(alignment: .leading, spacing: FlixySpacing.regular) {
ForEach(groups) { group in
section(group)
}
.padding(.horizontal, FlixySpacing.snug)
.padding(.bottom, FlixySpacing.regular)
}
.scrollIndicators(.never)
.padding(.horizontal, FlixySpacing.snug)
.padding(.bottom, FlixySpacing.regular)
Spacer(minLength: 0)