Die Seitenleiste war zu hoch — und der Player ging deshalb hinaus

Dreimal habe ich an den Rändern geschraubt, und dreimal war es nicht das.
Der Fehler sass in der Navigation und zeigte sich im Player.

**Gemessen statt vermutet.** Auf einem iPhone Pro Max im Querformat:

    Fenster  956×440, Rand 0,62,62,20  →  erwartet 832×420
    Wurzel   832×558,67 @62,−69,33     →  138,67 zu hoch

Der Wurzelbaum ist zu gross für den Vorschlag und wird darin zentriert;
(420 − 558,67) / 2 ergibt exakt −69,33. Der Player liegt als Überlagerung
darin und erbt den Kasten — oben fielen neunundsechzig Punkte heraus,
unten neunundvierzig. Genau dort sitzen Kopfzeile und Zeitangaben.

**Die Ursache:** `FlixySidebar` war eine `VStack` ohne Bildlaufansicht,
mit dem Kommentar „die Einträge sind wenige und passen". Auf einem iPad
und im Hochformat stimmt das. Ein grosses iPhone ist quer
vierhundertvierzig Punkte hoch, und die Leiste braucht mit Kopf, Gruppen,
Trenner und Kontozeile gut fünfhundertdreissig. Eine `VStack` schrumpft
dann nicht — sie überragt, der `HStack` nimmt das Maximum, und alles
darüber wächst mit.

Deshalb war es nur dort zu sehen: nur auf einem grossen iPhone ist die
Anordnung quer `regular`, und nur dann gibt es überhaupt eine
Seitenleiste. Auf einem 17 Pro ist quer `compact` — dort stimmte jede
Messung, und genau deshalb konnte ich es dreimal nicht nachstellen.

Jetzt scrollt die Leiste, wenn sie muss (`basedOnSize`). Wo die Einträge
passen, sieht man keinen Unterschied. Nachgemessen: Wurzel 832×420,
Rahmen des Players 956×440 @0,0 — deckungsgleich mit dem Fenster.

**Mitgenommen:** `statusBarHeight` kam aus `proxy.safeAreaInsets.top` und
ging über `topInset` in einen `safeAreaInset` am selben Baum zurück. Das
Layout lief dadurch in Runden auf die richtige Grösse zu, jede Runde
zweiundsechzig Punkte. Der Wert kommt jetzt aus dem Fenster, das ihn ohne
Rückkopplung kennt — eine Runde statt drei.

`ScreenSafeArea` liegt dafür nicht mehr beim Player, sondern bei den
Modellen: es beantwortet jetzt für zwei Stellen dieselbe Frage.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-30 17:15:50 +02:00
co-authored by Claude Opus 5
parent 7bcef03c25
commit 5f635c699a
4 changed files with 53 additions and 58 deletions
-37
View File
@@ -49,16 +49,6 @@ struct PlayerView: View {
/// genau der Moment des Drehens, und genau dann stimmen die alten Werte
/// nicht mehr.
@State private var safeArea = EdgeInsets()
#if DEBUG
/// Wie gross der Player gezeichnet wird und wo er anfängt.
///
/// **Die Frage, an der alles hängt.** Ist der Rahmen grösser als der
/// Bildschirm, liegt es nicht an den Rändern — dann wird der Player in
/// einen zu grossen Kasten gelegt und mittig darin ausgerichtet, und
/// oben wie unten fällt gleich viel heraus. Genau so sieht es aus, wenn
/// die Kopfzeile fehlt und die Zeitangaben auch.
@State private var rahmen: CGRect = .zero
#endif
@State private var showsControls = true
@State private var trackPicker: TrackPickerSheet.Kind?
@State private var showsQualityChoice = false
@@ -251,11 +241,6 @@ struct PlayerView: View {
} action: { _ in
safeArea = ScreenSafeArea.current
}
#if DEBUG
.onGeometryChange(for: CGRect.self) { proxy in
proxy.frame(in: .global)
} action: { rahmen = $0 }
#endif
.onAppear { safeArea = ScreenSafeArea.current }
// **Auch beim Zurückholen der App.** Eine Drehung im Hintergrund
// ändert die Fläche, ohne dass `onGeometryChange` hier feuert — die
@@ -379,7 +364,6 @@ struct PlayerView: View {
transport(for: model)
Spacer()
scrubber(for: model)
diagnose(for: model)
}
.padding(FlixySpacing.loose)
// **Zusätzlich zum Polster, nicht statt.** Der Sicherheitsrand sagt,
@@ -404,27 +388,6 @@ struct PlayerView: View {
}
}
/// Was der Player über seinen Platz weiss.
///
/// **Nur im Entwicklerbau, und nur, weil zweimal Raten nicht gereicht
/// hat.** Sitzen die Knöpfe ausserhalb des Bildschirms, gibt es genau
/// drei Möglichkeiten: die Ränder kommen als null an, sie kommen falsch
/// an, oder sie stimmen und der Rahmen ist grösser als der Schirm. Von
/// aussen sehen alle drei gleich aus. Diese Zeile unterscheidet sie.
///
/// Die Schirmgrösse daneben ist dabei der Schlüssel: steht dort etwas
/// anderes als die Fläche, auf der die Knöpfe liegen, liegt es nicht an
/// den Rändern.
@ViewBuilder
private func diagnose(for model: PlayerModel) -> some View {
#if DEBUG
let schirm = ScreenSafeArea.screenSize
Text(verbatim: "SA \(Int(safeArea.top)),\(Int(safeArea.leading)),\(Int(safeArea.trailing)),\(Int(safeArea.bottom)) Rahmen \(Int(rahmen.width))×\(Int(rahmen.height)) @\(Int(rahmen.minX)),\(Int(rahmen.minY)) Schirm \(Int(schirm.width))×\(Int(schirm.height)) \(model.videoFit == .fill ? "füllen" : "einpassen")")
.font(.system(size: 11).monospaced())
.foregroundStyle(.yellow)
#endif
}
private func topBar(for model: PlayerModel) -> some View {
HStack(alignment: .top, spacing: FlixySpacing.regular) {
// Der Pfeil verkleinert, er beendet nicht. Das ist der ganze