Bei VLC sass das Bild nie richtig — und der Knopf wirkte nie

Zwei Fehler, die dieselbe Ursache haben: alles, was über VLC läuft, ging
an der Bildebene vorbei, an der die App gedreht hat.

**Das Bild sass nicht mittig.** Nicht ein paar Punkte daneben — gemessen
eine Anzeigefläche von 1200×480 Punkt in einer Zeichenfläche von 711×400,
unten rechts angeschlagen, im falschen Seitenverhältnis. Der Grund steht
im Vertrag von `VLCDrawable`: VLCKit fragt die Grösse **einmal** beim
Anlegen ab und überlässt seine Anzeigefläche danach der
Autoresizing-Maske. Eine Maske hält aber den Unterschied fest, nicht das
Verhältnis — was beim Anlegen zu gross war, bleibt für immer um denselben
Betrag zu gross. Und angelegt wird sie mitten in der Drehung ins
Querformat, während SwiftUI sie einblendet: also regelmässig falsch.

Die Zeichenfläche ist jetzt eine eigene Klasse, die ihrer Anzeigefläche
bei jedem Layout wieder die eigene Grösse gibt. Danach gemessen: 695,7 ×
400 Punkt, Rand links 130,0, rechts 130,3 — mittig.

**Der Knopf für einpassen/füllen tat nichts.** Er schrieb `videoGravity`
auf eine `AVPlayerLayer`, die bei VLC gar nicht im Baum hängt. Die
Einstellung geht deshalb jetzt durch die Engine: `setVideoFit` am
Protokoll, beim Systemplayer eine Voreinstellung, die nichts tut — dort
macht es die Bildebene —, bei VLC `videoFitMode`. `smaller` heisst bei
libvlc „fit inside", `larger` „fit outside".

Gemessen, im Querformat auf einem Pro Max, über VLC:

    eingepasst   695,7 × 400 pt   Rand l/r 130,0/130,3   o/u 20,0/20,0
    füllend      935,3 × 440 pt   Rand l/r  10,3/ 10,3   o/u  0,0/ 0,0

**Zurückgenommen:** im Kommentar an `videoFit` stand, ein `didSet` auf
einer `@Observable`-Klasse werde nicht gemeldet. Das stimmt nicht —
`HomeLayoutSettings` lebt davon. Ein Kommentar, der einen falschen
Mechanismus behauptet, schickt den nächsten in die falsche Richtung;
jetzt steht der belegte Grund dort.

Dazu, damit dieser Weg überhaupt prüfbar ist: die Attrappe meldet mit
`--vlc` DTS-Ton. AVFoundation kann das nicht, also fällt die App auf
VLCKit zurück. Die Beispieldatei bleibt dieselbe — geprüft wird der Weg,
nicht der Ton. Ohne diesen Schalter ist der VLC-Zweig im Simulator gar
nicht zu erreichen, und genau deshalb lagen beide Fehler so lange da.

Ebenfalls dabei: `EdgeInsets.symmetrical` mit fünf Tests und das Polster
im Player, das damit nicht mehr verschiebt statt einrückt.

iOS und tvOS bauen, 465 Tests grün.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Packages/FlixyKit/Sources/FlixyDesign/SymmetricInsets.swift

@@ -0,0 +1,28 @@
+import SwiftUI
+
+extension EdgeInsets {
+    /// Dieselben Ränder, aber auf beiden Seiten gleich — der jeweils grössere.
+    ///
+    /// **Wofür das da ist.** Ein Sicherheitsrand ist selten symmetrisch: im
+    /// Querformat sitzt die Notch auf **einer** Seite, also zweiundsechzig
+    /// Punkte links und null rechts; im Hochformat sind es zweiundsechzig oben
+    /// und vierunddreissig unten. Wer damit ein Bild einrückt, rückt es nicht
+    /// ein — er **verschiebt** es, und zwar um die halbe Differenz.
+    ///
+    /// Genau das war zu sehen: einunddreissig Punkte nach rechts im
+    /// Querformat, vierzehn nach unten im Hochformat. Gemessen an den
+    /// Bildschirmfotos: vierunddreissig und elfeinhalb.
+    ///
+    /// **Für Bild, nicht für Knöpfe.** Ein Film soll mittig stehen, auch wenn
+    /// er dafür auf der freien Seite ein paar Punkte Balken mehr bekommt. Eine
+    /// Bedienleiste soll dagegen an der Kante kleben — die nimmt weiter die
+    /// echten, unsymmetrischen Werte.
+    public var symmetrical: EdgeInsets {
+        let senkrecht = max(top, bottom)
+        let waagerecht = max(leading, trailing)
+        return EdgeInsets(
+            top: senkrecht, leading: waagerecht,
+            bottom: senkrecht, trailing: waagerecht
+        )
+    }
+}

Packages/FlixyKit/Sources/FlixyPlayback/Engine/VideoPlayerEngine.swift

@@ -54,6 +54,18 @@ public enum PlaybackEvent: Sendable, Equatable {
     case reachedEnd
 }
 
+/// Wo das Bild aufhört.
+///
+/// **Hier und nicht in der App**, weil es beide Engines angeht. Am Bild
+/// einzupassen ist nur zur Hälfte Sache der Ansicht: sie bestimmt die Fläche,
+/// die Engine bestimmt, wie das Bild darin liegt.
+public enum VideoFit: Sendable {
+    /// Ganz sichtbar, mit schwarzen Balken.
+    case fit
+    /// Bildfüllend, oben und unten beschnitten.
+    case fill
+}
+
 /// Der gemeinsame Nenner von AVPlayer und VLCKit.
 ///
 /// Alles, was die Oberfläche zum Steuern braucht — und nichts darüber hinaus.
@@ -84,6 +96,18 @@ public protocol VideoPlayerEngine: AnyObject {
     func seek(to time: Duration) async
     func setRate(_ rate: Double)
 
+    /// Wie das Bild in seiner Fläche liegt.
+    ///
+    /// **Muss durch die Engine, nicht nur über die Fläche.** Wer die Fläche
+    /// auf den ganzen Schirm wachsen lässt, hat damit erst die Hälfte gesagt:
+    /// VLC zeichnet selbst und passt sein Bild von sich aus ein, also wird
+    /// der Balken daneben nur breiter. Beschneiden muss man ihm sagen.
+    ///
+    /// Der Systemplayer braucht es nicht — seine Bildebene gehört der App,
+    /// und die stellt `videoGravity` selbst. Deshalb steht unten eine
+    /// Voreinstellung, die nichts tut.
+    func setVideoFit(_ fit: VideoFit)
+
     var audioTracks: [MediaTrack] { get }
     var subtitleTracks: [MediaTrack] { get }
     func selectAudioTrack(_ track: MediaTrack?)
@@ -238,4 +262,8 @@ extension VideoPlayerEngine {
 
     /// Wer nichts dazu sagt, kann es nicht.
     public var supportsAirPlay: Bool { false }
+
+    /// Der Systemplayer regelt es über seine Bildebene, und die hält die App —
+    /// siehe `PlayerModel.applyVideoFit()`. Hier ist nichts zu tun.
+    public func setVideoFit(_ fit: VideoFit) {}
 }

Packages/FlixyKit/Tests/FlixyDesignTests/SymmetricInsetsTests.swift

@@ -0,0 +1,58 @@
+import SwiftUI
+import Testing
+@testable import FlixyDesign
+
+@Suite("Ränder gleichmachen")
+struct SymmetricInsetsTests {
+
+    /// **Der Fall aus dem Querformat.** Notch links, nichts rechts — mit den
+    /// rohen Werten stünde das Bild einunddreissig Punkte zu weit rechts.
+    @Test("Die Notch-Seite bestimmt beide Seiten")
+    func landscapeNotch() {
+        let roh = EdgeInsets(top: 0, leading: 62, bottom: 21, trailing: 0)
+        let gleich = roh.symmetrical
+        #expect(gleich.leading == 62)
+        #expect(gleich.trailing == 62)
+        #expect(gleich.top == 21)
+        #expect(gleich.bottom == 21)
+    }
+
+    /// Und aus dem Hochformat: oben zweiundsechzig, unten vierunddreissig.
+    @Test("Oben und unten wird der grössere genommen")
+    func portrait() {
+        let gleich = EdgeInsets(top: 62, leading: 0, bottom: 34, trailing: 0).symmetrical
+        #expect(gleich.top == 62)
+        #expect(gleich.bottom == 62)
+        #expect(gleich.leading == 0)
+        #expect(gleich.trailing == 0)
+    }
+
+    /// Was schon gleich ist, bleibt gleich — sonst würde die Rechnung auf
+    /// einem iPad ohne Notch Balken erfinden, wo keine hingehören.
+    @Test("Symmetrisches bleibt unverändert")
+    func alreadySymmetric() {
+        let roh = EdgeInsets(top: 20, leading: 50, bottom: 20, trailing: 50)
+        #expect(roh.symmetrical == roh)
+    }
+
+    @Test("Ohne Ränder bleibt es ohne")
+    func zero() {
+        let gleich = EdgeInsets().symmetrical
+        #expect(gleich == EdgeInsets())
+    }
+
+    /// **Die Zusage, auf die es ankommt.** Egal wie schief der Rand ankommt —
+    /// danach ist die Mitte des verbleibenden Platzes die Mitte des Schirms.
+    @Test("Die Mitte bleibt die Mitte")
+    func centreStaysCentred() {
+        for roh in [
+            EdgeInsets(top: 0, leading: 62, bottom: 21, trailing: 0),
+            EdgeInsets(top: 62, leading: 0, bottom: 34, trailing: 0),
+            EdgeInsets(top: 5, leading: 1, bottom: 99, trailing: 40),
+        ] {
+            let g = roh.symmetrical
+            #expect(g.leading - g.trailing == 0)
+            #expect(g.top - g.bottom == 0)
+        }
+    }
+}

Packages/FlixyVLC/Sources/FlixyVLC/VLCPlayerEngine.swift

@@ -17,7 +17,7 @@ import UIKit
 public final class VLCPlayerEngine: NSObject, VideoPlayerEngine {
     /// Die Fläche, in die VLC zeichnet. Die Ansicht hängt sie in ihren
     /// Hierarchiebaum.
-    public let videoView = UIView()
+    public let videoView: UIView = VLCSurfaceView()
 
     private let player = VLCMediaPlayer()
 
@@ -85,6 +85,14 @@ public final class VLCPlayerEngine: NSObject, VideoPlayerEngine {
     private var continuation: AsyncStream<PlaybackEvent>.Continuation?
     private var pendingStartTime: Duration = .zero
 
+    /// Wie das Bild in `videoView` liegen soll.
+    ///
+    /// **Gemerkt und nicht nur weitergegeben.** Solange VLC keine
+    /// Bildausgabe hat, gibt es nichts, worauf die Einstellung wirken könnte;
+    /// vor dem ersten Bild gesetzt, ist sie weg. Deshalb steht sie hier und
+    /// wird beim Anlaufen erneut gelegt.
+    private var fit: VideoFit = .fit
+
     public override init() {
         super.init()
         videoView.backgroundColor = .black
@@ -135,6 +143,20 @@ public final class VLCPlayerEngine: NSObject, VideoPlayerEngine {
         player.rate = Float(rate)
     }
 
+    public func setVideoFit(_ fit: VideoFit) {
+        self.fit = fit
+        applyFit()
+    }
+
+    /// Legt die gemerkte Einstellung auf den Player.
+    ///
+    /// `smaller` heisst bei libvlc ausdrücklich „fit inside", `larger`
+    /// „fit outside" — also einpassen mit Balken beziehungsweise füllen mit
+    /// Beschnitt. Die Namen sagen es nicht von selbst; die Kopfdatei tut es.
+    private func applyFit() {
+        player.videoFitMode = fit == .fill ? .larger : .smaller
+    }
+
     public func selectAudioTrack(_ track: MediaTrack?) {
         select(track, from: player.audioTracks)
     }
@@ -202,6 +224,9 @@ extension VLCPlayerEngine: VLCMediaPlayerDelegate {
                 state = .playing
                 applyPendingStartTime()
                 refreshTracks()
+                // Siehe `fit`: vor dem ersten Bild wäre sie ins Leere
+                // gegangen. Hier gibt es eine Ausgabe.
+                applyFit()
             case .paused:
                 state = .paused
             case .stopped, .stopping:
@@ -318,3 +343,33 @@ enum AudioSessionBridge {
         try? AVAudioSession.sharedInstance().setActive(false, options: .notifyOthersOnDeactivation)
     }
 }
+
+/// Die Fläche, die VLC als Zeichenfläche bekommt.
+///
+/// **Eine eigene Klasse, weil VLC seine Anzeigefläche nur ein einziges Mal
+/// misst.** `VLCDrawable` verlangt vom Aufnehmenden zwei Dinge: `addSubview:`
+/// und `bounds`. VLCKit fragt die Grösse beim Anlegen ab, legt seine
+/// `VLCVideoUIView` genau so gross an und überlässt sie danach der
+/// Autoresizing-Maske. Eine Maske hält aber den **Unterschied** fest, nicht
+/// das Verhältnis: was beim Anlegen zu gross war, bleibt für immer um denselben
+/// Betrag zu gross.
+///
+/// Und beim Anlegen ist die Grösse regelmässig falsch — die Fläche entsteht
+/// mitten in der Drehung ins Querformat, während SwiftUI sie gerade einblendet.
+/// Gemessen: eine Anzeigefläche von 1200×480 Punkt in einer Zeichenfläche von
+/// 711×400. Auf dem Bildschirm sah man davon das Stück, das hineinpasste —
+/// unten rechts angeschlagen, in falschem Seitenverhältnis. Genau das war
+/// „das Bild sitzt nicht mittig" bei allem, was über VLC läuft.
+///
+/// Hier bekommt die Anzeigefläche bei jedem Layout wieder genau die eigene
+/// Grösse. Das ist keine Notlösung, sondern der Teil des Vertrags, den nur der
+/// Aufnehmende erfüllen kann: VLC kennt den Grund für eine Grössenänderung
+/// nicht, die Ansicht kennt ihn.
+final class VLCSurfaceView: UIView {
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        for view in subviews where view.frame != bounds {
+            view.frame = bounds
+        }
+    }
+}