Der Aufmacher nimmt jetzt achtundachtzig Prozent der sichtbaren Höhe, statt sich seine Höhe aus 16:9 auszurechnen. Ein Aufmacher, der ein Drittel hoch ist, sieht aus wie ein breites Vorschaubild; die zwölf Prozent Rest sind Absicht, dort lugt die erste Reihe herein und sagt, dass es weitergeht. Auf schmalen Geräten bleibt es beim Hochformat. `FlixyArtwork` kann dafür den Rahmen ausfüllen, den es bekommt. Das Seitenverhältnis bleibt trotzdem wichtig — danach werden die Bilder beim Server angefordert. Und `glassEffect` ist raus. Er zeichnet an seiner Kante einen Lichtsaum, und über einem hellen Aufmacher wurde daraus ein heller Balken von mehreren Punkten Breite neben der Leiste — kein Rand, sondern ein Streifen. Von einer Kante war gleichzeitig nichts zu erkennen. Von Hand sind es drei Lagen: ein trübes Material, ein Schleier gegen die durchziehende Startseite, und ein Haarstrich, der oben links aufhellt und unten rechts nachlässt. Dazu ein Schatten — was schwebt, wirft einen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
120 lines
4.1 KiB
Swift
120 lines
4.1 KiB
Swift
import SwiftUI
|
|
|
|
/// Ein Bild vom Server mit Lade- und Fehlerzustand.
|
|
///
|
|
/// Der Austausch, den die frühere Notiz hier angekündigt hat, ist vollzogen:
|
|
/// statt `AsyncImage` lädt `ArtworkLoader`. Der Grund stand schon da — eine
|
|
/// Startseite zeigt dutzende Bilder gleichzeitig, und `AsyncImage` lädt sie bei
|
|
/// jedem Erscheinen neu. Auf dem Mac wurde daraus ein sichtbarer Fehler: der
|
|
/// Aufmacher und die Hälfte der Plakate blieben grau.
|
|
public struct FlixyArtwork: View {
|
|
private let url: URL?
|
|
private let aspectRatio: CGFloat
|
|
/// Ob das Bild den Rahmen einnimmt, den es bekommt, statt sich seine Höhe
|
|
/// aus dem Seitenverhältnis auszurechnen.
|
|
///
|
|
/// Für den Aufmacher: der soll so hoch sein wie das Fenster und nicht so
|
|
/// hoch, wie 16:9 es vorgibt. Das Seitenverhältnis bleibt trotzdem
|
|
/// wichtig — danach werden die Bilder beim Server angefordert.
|
|
private let fillsFrame: Bool
|
|
private let fallbackSymbol: String
|
|
private let contentMode: ContentMode
|
|
|
|
/// - Parameter contentMode: `.fill` füllt die Fläche und schneidet ab —
|
|
/// richtig für Plakate und Szenenbilder, die ohnehin formatfüllend
|
|
/// gedacht sind. `.fit` zeigt das ganze Bild. Das braucht alles, was
|
|
/// kein festes Seitenverhältnis hat: **Sendersymbole** sind mal breit,
|
|
/// mal schmal, und formatfüllend in einem Quadrat fehlten links und
|
|
/// rechts genau die Teile, an denen man den Sender erkennt.
|
|
public init(
|
|
url: URL?,
|
|
aspectRatio: CGFloat,
|
|
fillsFrame: Bool = false,
|
|
fallbackSymbol: String = "film",
|
|
contentMode: ContentMode = .fill
|
|
) {
|
|
self.url = url
|
|
self.aspectRatio = aspectRatio
|
|
self.fillsFrame = fillsFrame
|
|
self.fallbackSymbol = fallbackSymbol
|
|
self.contentMode = contentMode
|
|
}
|
|
|
|
@State private var loaded: PlatformImage?
|
|
@State private var hasFailed = false
|
|
|
|
public var body: some View {
|
|
placeholder
|
|
.overlay {
|
|
content
|
|
}
|
|
.clipped()
|
|
.task(id: url) { await load() }
|
|
}
|
|
|
|
@ViewBuilder
|
|
private var placeholder: some View {
|
|
if fillsFrame {
|
|
Rectangle().fill(Color.flixyPlaceholder)
|
|
} else {
|
|
Rectangle().fill(Color.flixyPlaceholder).aspectRatio(aspectRatio, contentMode: .fit)
|
|
}
|
|
}
|
|
|
|
/// Das Bild, das jetzt gezeigt werden kann.
|
|
///
|
|
/// Der Blick in den Speicher steht **hier**, nicht in `load()`: eine
|
|
/// Kachel, die zum zweiten Mal erscheint, zeigt ihr Bild damit schon im
|
|
/// ersten Bild und blitzt nicht kurz grau auf. Über ein `await` ginge das
|
|
/// nicht — das kostet immer einen Durchlauf.
|
|
private var available: PlatformImage? {
|
|
if let loaded { return loaded }
|
|
guard let url else { return nil }
|
|
return ArtworkLoader.cachedImage(for: url)
|
|
}
|
|
|
|
@ViewBuilder
|
|
private var content: some View {
|
|
if let loaded = available {
|
|
switch contentMode {
|
|
case .fill: Image(platform: loaded).resizable().scaledToFill()
|
|
case .fit: Image(platform: loaded).resizable().scaledToFit()
|
|
}
|
|
} else if hasFailed {
|
|
// Kein Fehlertext: bei einer Reihe aus zwanzig Kacheln wäre das
|
|
// mehr Lärm als Hilfe. Das Symbol sagt genug.
|
|
Image(systemName: fallbackSymbol)
|
|
.font(.title2)
|
|
.foregroundStyle(Color.flixyTextMuted)
|
|
} else {
|
|
ShimmerPlaceholder()
|
|
}
|
|
}
|
|
|
|
private func load() async {
|
|
guard let url else {
|
|
hasFailed = false
|
|
loaded = nil
|
|
return
|
|
}
|
|
|
|
// Was schon da ist, zeigt `available` bereits — hier bleibt nur das
|
|
// Nachladen.
|
|
if ArtworkLoader.cachedImage(for: url) != nil {
|
|
hasFailed = false
|
|
return
|
|
}
|
|
|
|
loaded = nil
|
|
hasFailed = false
|
|
|
|
let image = await ArtworkLoader.shared.image(for: url)
|
|
guard !Task.isCancelled else { return }
|
|
|
|
withAnimation(.easeOut(duration: 0.2)) {
|
|
loaded = image
|
|
hasFailed = image == nil
|
|
}
|
|
}
|
|
}
|