Miniplayer: antippen vergrößert wieder

Die Kachel ließ sich nicht mehr öffnen, und das war kein Zufall: das
Antippen zeigte erst die Bedienelemente, und die zweite Berührung sollte
vergrößern — traf dabei aber den Abspielknopf, der genau in der Mitte lag.
Jede weitere Berührung landete wieder dort. Vergrößern war damit überhaupt
nicht möglich.

Jetzt gehört die Mitte dem Vergrößern, und zwar beim ersten Antippen. Die
zwei Knöpfe — Pause und Schließen — sitzen dauerhaft sichtbar in den oberen
Ecken, auf einer dunklen Scheibe, damit sie auf hellen Filmbildern nicht
verschwinden. Unten bleibt der Fortschrittsbalken.

Dass die Kachel „einfach weg" war, konnte ich nicht nachstellen; der eine
Fall, den ich reproduziert habe, war mein eigener Attrappenserver mit einer
Fortsetzungsstelle jenseits des Dateiendes. Zwei Dinge machen es trotzdem
unwahrscheinlicher: die Knöpfe sind auch dann zu sehen, wenn das Bild
schwarz bliebe — vorher war eine schwarze Kachel in einer fast schwarzen
Oberfläche praktisch unsichtbar —, und die Bildfläche hängt jetzt in einer
eigenen Hülle je Ansicht. Beim Wechsel zwischen Kachel und Vollbild gibt es
beide kurz gleichzeitig, und eine `UIView` hat nur einen Vorgesetzten: wer
sie zuletzt bekommt, gewinnt. Gab SwiftUI sie unmittelbar heraus, konnte das
Abräumen der einen der anderen die Bildfläche wegnehmen.

Dazu etwas, das mir beim Ausprobieren selbst passiert ist: der Aufmacher
wanderte weiter, während ich nach „Abspielen" griff, und ich startete den
falschen Film. Er hört jetzt bei der ersten Berührung auf zu wandern. Wer
die Hand darauf hat, fährt selbst.

Nachgesehen auf iPhone und iPad: verkleinern, antippen, wieder im Vollbild.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-13 14:19:06 +02:00
co-authored by Claude Opus 5
parent fb418c842d
commit 5763d866bf
4 changed files with 95 additions and 61 deletions
+15 -1
View File
@@ -22,6 +22,14 @@ struct HeroCarousel: View {
private static let dwell: Duration = .seconds(7) private static let dwell: Duration = .seconds(7)
@State private var index = 0 @State private var index = 0
/// Ob noch von selbst weitergewandert wird.
///
/// Sobald jemand die Fläche berührt, hört es auf — und zwar für gut. Wer
/// hier die Hand hat, fährt selbst. Andernfalls rutscht der Aufmacher
/// genau in der Sekunde weiter, in der man nach „Abspielen" greift, und
/// man startet den falschen Film. Das ist mir beim Ausprobieren selbst
/// passiert.
@State private var isAdvancing = true
/// Bewegung, die von selbst losgeht, ist für manche Menschen unangenehm /// Bewegung, die von selbst losgeht, ist für manche Menschen unangenehm
/// bis unbrauchbar. Wer sie abgestellt hat, blättert von Hand. /// bis unbrauchbar. Wer sie abgestellt hat, blättert von Hand.
@Environment(\.accessibilityReduceMotion) private var reduceMotion @Environment(\.accessibilityReduceMotion) private var reduceMotion
@@ -40,6 +48,12 @@ struct HeroCarousel: View {
// den Knöpfen. Die Höhe kommt aus dem Seitenverhältnis, weil ein // den Knöpfen. Die Höhe kommt aus dem Seitenverhältnis, weil ein
// TabView sonst nimmt, was es kriegen kann. // TabView sonst nimmt, was es kriegen kann.
.aspectRatio(FlixyAspectRatio.hero, contentMode: .fit) .aspectRatio(FlixyAspectRatio.hero, contentMode: .fit)
// Gleichzeitig und ohne Mindestweg: fängt jede Berührung ab, ohne
// dem Blättern des TabView oder den Knöpfen darin etwas
// wegzunehmen.
.simultaneousGesture(
DragGesture(minimumDistance: 0).onChanged { _ in isAdvancing = false }
)
if items.count > 1 { indicator } if items.count > 1 { indicator }
} }
@@ -64,7 +78,7 @@ struct HeroCarousel: View {
} }
private func advance() async { private func advance() async {
guard items.count > 1, !reduceMotion else { return } guard items.count > 1, !reduceMotion, isAdvancing else { return }
try? await Task.sleep(for: Self.dwell) try? await Task.sleep(for: Self.dwell)
guard !Task.isCancelled else { return } guard !Task.isCancelled else { return }
withAnimation(.easeInOut(duration: 0.5)) { withAnimation(.easeInOut(duration: 0.5)) {
+43 -54
View File
@@ -26,8 +26,6 @@ struct MiniPlayer: View {
/// Verschiebung während des Ziehens, noch nicht eingerastet. /// Verschiebung während des Ziehens, noch nicht eingerastet.
@State private var drag: CGSize = .zero @State private var drag: CGSize = .zero
@State private var showsControls = false
@State private var hideTask: Task<Void, Never>?
private var side: MiniPlayerPlacement.Side { private var side: MiniPlayerPlacement.Side {
MiniPlayerPlacement.Side(rawValue: storedSide) ?? .trailing MiniPlayerPlacement.Side(rawValue: storedSide) ?? .trailing
@@ -92,9 +90,7 @@ struct MiniPlayer: View {
ProgressView().tint(.white) ProgressView().tint(.white)
} }
if showsControls { corners
controls.transition(.opacity)
}
// Bei einem laufenden Sender hat ein Fortschritt keine Bedeutung — // Bei einem laufenden Sender hat ein Fortschritt keine Bedeutung —
// es gibt kein Ende, auf das er zulaufen könnte. // es gibt kein Ende, auf das er zulaufen könnte.
@@ -112,53 +108,59 @@ struct MiniPlayer: View {
} }
.shadow(color: .black.opacity(0.5), radius: 12, y: 4) .shadow(color: .black.opacity(0.5), radius: 12, y: 4)
.contentShape(.rect) .contentShape(.rect)
.onTapGesture { // Antippen vergrößert, sofort. Vorher brauchte es zwei Berührungen:
// Antippen zeigt erst die Bedienelemente, dann öffnet es. Ein // die erste holte die Bedienelemente hervor, die zweite sollte
// sofortiges Aufklappen bei jeder Berührung wäre lästig, wenn man // öffnen — traf dabei aber den Abspielknopf, der genau in der Mitte
// die Kachel nur anfassen will. // lag. Vergrößern war damit überhaupt nicht möglich.
if showsControls { .onTapGesture { playback.expand() }
playback.expand()
} else {
reveal()
}
}
.accessibilityElement(children: .contain) .accessibilityElement(children: .contain)
.accessibilityLabel(Text(model.title)) .accessibilityLabel(Text(model.title))
} }
private var controls: some View { /// Die beiden Knöpfe in den oberen Ecken.
ZStack { ///
Color.black.opacity(0.45) /// Dauerhaft sichtbar statt auf Antippen hin. Die Fläche in der Mitte
/// gehört dem Vergrößern — sie ist das, was man an einer solchen Kachel
Button { /// am häufigsten tut, und sie darf nicht mit einem Knopf belegt sein.
model.togglePlayPause() /// Unten bleibt frei für den Fortschrittsbalken.
reveal() private var corners: some View {
} label: {
Image(systemName: model.isPlaying ? "pause.fill" : "play.fill")
.font(.title2)
.foregroundStyle(.white)
.padding(FlixySpacing.snug)
.contentShape(.rect)
}
.accessibilityLabel(Text(model.isPlaying ? "player.pause" : "player.play"))
VStack { VStack {
HStack { HStack {
tileButton(
model.isPlaying ? "pause.fill" : "play.fill",
label: model.isPlaying ? "player.pause" : "player.play"
) {
model.togglePlayPause()
}
Spacer() Spacer()
Button { tileButton("xmark", label: "miniPlayer.close") {
playback.close() playback.close()
} label: { }
Image(systemName: "xmark") }
Spacer()
}
.padding(FlixySpacing.tight)
}
/// Ein kleiner Knopf, der auf jedem Bild lesbar bleibt.
///
/// Die dunkle Scheibe darunter ist nicht Zierde: ein weißes Symbol auf
/// einer hellen Szene verschwindet, und die Kachel zeigt Filmbilder, deren
/// Helligkeit sich jede Sekunde ändert.
private func tileButton(
_ symbol: String,
label: LocalizedStringKey,
action: @escaping () -> Void
) -> some View {
Button(action: action) {
Image(systemName: symbol)
.font(.caption.weight(.bold)) .font(.caption.weight(.bold))
.foregroundStyle(.white) .foregroundStyle(.white)
.padding(FlixySpacing.snug) .frame(width: 26, height: 26)
.contentShape(.rect) .background(.black.opacity(0.55), in: .circle)
}
.accessibilityLabel(Text("miniPlayer.close"))
}
Spacer()
}
} }
.buttonStyle(.plain)
.accessibilityLabel(Text(label))
} }
/// Größer und kleiner durch Zusammen- und Auseinanderziehen. /// Größer und kleiner durch Zusammen- und Auseinanderziehen.
@@ -168,7 +170,6 @@ struct MiniPlayer: View {
private func zoomGesture(in bounds: CGSize) -> some Gesture { private func zoomGesture(in bounds: CGSize) -> some Gesture {
MagnifyGesture() MagnifyGesture()
.onChanged { value in .onChanged { value in
hideTask?.cancel()
zoom = value.magnification zoom = value.magnification
} }
.onEnded { _ in .onEnded { _ in
@@ -191,7 +192,6 @@ struct MiniPlayer: View {
) -> some Gesture { ) -> some Gesture {
DragGesture() DragGesture()
.onChanged { value in .onChanged { value in
hideTask?.cancel()
drag = value.translation drag = value.translation
} }
.onEnded { value in .onEnded { value in
@@ -209,17 +209,6 @@ struct MiniPlayer: View {
drag = .zero drag = .zero
} }
} }
/// Zeigt die Bedienelemente und blendet sie nach kurzer Zeit wieder aus.
private func reveal() {
withAnimation(.easeInOut(duration: 0.2)) { showsControls = true }
hideTask?.cancel()
hideTask = Task {
try? await Task.sleep(for: .seconds(3))
guard !Task.isCancelled else { return }
withAnimation(.easeInOut(duration: 0.2)) { showsControls = false }
}
}
} }
extension View { extension View {
+29 -2
View File
@@ -47,9 +47,36 @@ final class PlayerLayerView: UIView {
/// ///
/// Umhängen statt neu bauen: dieselbe `UIView` wandert zwischen Kachel und /// Umhängen statt neu bauen: dieselbe `UIView` wandert zwischen Kachel und
/// Vollbild hin und her, und die Wiedergabe merkt davon nichts. /// Vollbild hin und her, und die Wiedergabe merkt davon nichts.
///
/// Sie wird dabei **nicht** unmittelbar zurückgegeben, sondern in eine eigene
/// Hülle gehängt. Der Unterschied zählt genau in dem Moment, in dem es beide
/// Ansichten kurz gleichzeitig gibt — beim Wechsel zwischen Kachel und
/// Vollbild: eine `UIView` hat nur einen Vorgesetzten, und wer sie zuletzt
/// bekommt, gewinnt. Gab SwiftUI sie unmittelbar heraus, nahm das Abräumen der
/// einen Ansicht der anderen die Bildfläche weg, und übrig blieb eine schwarze
/// Kachel — in einer fast schwarzen Oberfläche also scheinbar gar keine.
///
/// Mit eigener Hülle gehört jeder Ansicht ihre eigene, und `updateUIView` holt
/// die Fläche zurück, falls sie zwischenzeitlich woanders eingehängt wurde.
private struct UIViewContainer: UIViewRepresentable { private struct UIViewContainer: UIViewRepresentable {
let view: UIView let view: UIView
func makeUIView(context: Context) -> UIView { view } func makeUIView(context: Context) -> UIView {
func updateUIView(_ uiView: UIView, context: Context) {} let host = UIView()
host.backgroundColor = .black
adopt(into: host)
return host
}
func updateUIView(_ host: UIView, context: Context) {
guard view.superview !== host else { return }
adopt(into: host)
}
private func adopt(into host: UIView) {
view.translatesAutoresizingMaskIntoConstraints = true
view.frame = host.bounds
view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
host.addSubview(view)
}
} }
+5 -1
View File
@@ -52,7 +52,11 @@ def item(key, name, kind, overview, *, resume=None, series=None):
}], }],
} }
if resume: if resume:
d["UserData"]["PlaybackPositionTicks"] = int(d["RunTimeTicks"] * resume) # Drei Sekunden, absolut: die Beispieldatei ist zehn Sekunden lang.
# Ein Anteil der angegebenen Laufzeit läge weit dahinter, und der
# Player stünde am Ende vor einem schwarzen Bild — was wie ein Fehler
# der App aussieht und keiner ist.
d["UserData"]["PlaybackPositionTicks"] = 3 * 10_000_000
if series: if series:
d.update({"SeriesId": series[0], "SeriesName": series[1], d.update({"SeriesId": series[0], "SeriesName": series[1],
"ParentIndexNumber": 1, "IndexNumber": series[2], "ParentIndexNumber": 1, "IndexNumber": series[2],