Scarriffle/Flaro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Player: vier Knöpfe, die vorher fehlten oder nichts sagten

Browse Source 
**Eine Taste zum Vergrößern** unten rechts auf der Kachel. Das Antippen der
Fläche vergrößert weiterhin, aber auf derselben Fläche liegen schon das Ziehen
und das Aufziehen — und was dabei danebengeht, sieht aus wie „reagiert nicht".
Ein Knopf geht nicht daneben.

**Ton und Untertitel getrennt.** Es sind zwei verschiedene Fragen: die Tonspur
stellt man einmal am Anfang um, die Untertitel mitten im Film. In einem
gemeinsamen Blatt scrollte man jedes Mal an der anderen Liste vorbei. Das
Untertitel-Symbol ist gefüllt, solange welche laufen — so sieht man es, ohne
das Blatt zu öffnen. Und eine Auswahl schließt das Blatt jetzt selbst.

**AirPlay.** Nicht nachgebaut, sondern die Systemstelle: sie kennt Geräte, die
eine App nie aufzählen könnte. Der Knopf erscheint nur beim Systemplayer — VLC
zeichnet selbst und kann kein AirPlay, und ein Knopf, der dort ins Leere
führte, wäre schlimmer als keiner.

**Die Qualität steht als Text da**, nicht als drei Schieberegler: „1080p",
„720p", „Auto". Bei „automatisch" steht dort, was gerade tatsächlich ankommt —
das weiß nur der Player, und ihn zu fragen ist ehrlicher, als „Auto"
hinzuschreiben und die Antwort schuldig zu bleiben.

Dazu die Einstellungen mit farbigen Symbolen und einer Kopfkarte je Bereich.
Das ist nicht nur Zierde: in einer Liste aus zehn gleich aussehenden Zeilen
findet das Auge nichts wieder, und „das mit dem blauen Zahnrad" ist eine
brauchbare Beschreibung. Die Farben sind fest und ausdrücklich **nicht** die
Akzentfarbe — trüge alles dieselbe, unterschiede sie nichts mehr.

Und der Aufmacher läuft jetzt unter der Seitenleiste weiter
(`backgroundExtensionEffect`): die Ränder werden gespiegelt und weich
fortgeschrieben, während Titel und Knöpfe stehen bleiben. Vorher endete das
Bild an der Kante der Leiste, und beim Weiterwandern schob sich das nächste an
einer harten Linie ins Bild.

263 Tests grün. Player-Knöpfe und Einstellungen angesehen; den Aufmacher hinter
der Leiste konnte ich an den einfarbigen Flächen der Attrappe nicht sicher
beurteilen — der Simulator ist dabei erneut abgestürzt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-13 15:36:24 +02:00
co-authored by Claude Opus 5
parent 95723588c2
commit 21c5a8b46b
15 changed files with 453 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Flixy/Views/Player/AirPlayButton.swift
+27
View File
@@ -0,0 +1,27 @@
import AVKit
import SwiftUI
/// Der Knopf, der die Empfängerliste öffnet.
///
/// Kein eigener Knopf mit eigener Liste: `AVRoutePickerView` ist die Stelle,
/// die das System dafür vorsieht, und sie kennt Geräte, die eine App nie
/// aufzählen könnte — Apple TVs, AirPlay-Lautsprecher, HomePods im Verbund.
/// Sie nachzubauen hieße, eine unvollständige Liste zu zeigen.
struct AirPlayButton: UIViewRepresentable {
let tint: Color
func makeUIView(context: Context) -> AVRoutePickerView {
let view = AVRoutePickerView()
view.tintColor = .white
view.activeTintColor = UIColor(tint)
// Bild vor Ton: bei einem Film soll die Liste die Fernseher zuerst
// zeigen, nicht die Lautsprecher.
view.prioritizesVideoDevices = true
view.setContentHuggingPriority(.required, for: .horizontal)
return view
}
func updateUIView(_ view: AVRoutePickerView, context: Context) {
view.activeTintColor = UIColor(tint)
}
}
Flixy/Views/Player/MiniPlayer.swift
+17
View File
@@ -137,9 +137,26 @@ struct MiniPlayer: View {
playback.close()
}
}
Spacer()
HStack {
Spacer()
// Ein eigener Knopf, obwohl auch das Antippen der Fläche
// vergrößert. Beim Ziehen und Aufziehen liegen auf derselben
// Fläche schon zwei Gesten, und was daneben geht, sieht aus
// wie „reagiert nicht". Ein Knopf geht nicht daneben.
tileButton(
"arrow.up.left.and.arrow.down.right",
label: "miniPlayer.expand"
) {
playback.expand()
}
}
}
.padding(FlixySpacing.tight)
// Über dem Fortschrittsbalken, nicht darauf.
.padding(.bottom, FlixySpacing.tight)
}
/// Ein kleiner Knopf, der auf jedem Bild lesbar bleibt.
Flixy/Views/Player/PlayerModel.swift
+21
View File
@@ -77,6 +77,27 @@ final class PlayerModel {
/// Ob das Bild gezeigt werden soll.
var showsVideo: Bool { quality.showsVideo }
/// Die eingestellte Stufe in zwei bis fünf Zeichen.
///
/// Steht auf dem Knopf im Player. „Automatisch" heißt dabei: was gerade
/// tatsächlich ankommt — bei einem HLS-Strom entscheidet der Player selbst,
/// und ihn danach zu fragen ist ehrlicher, als „Auto" hinzuschreiben und
/// die Antwort schuldig zu bleiben.
var qualityLabel: String {
switch quality {
case .automatic:
if let height = statistics?.height, height > 0 { return "\(height)p" }
return String(localized: "quality.autoShort")
case .original:
if let height = currentMedia?.pixelHeight { return "\(height)p" }
return String(localized: "quality.originalShort")
case .limited(let rung):
return "\(rung.height)p"
case .audioOnly:
return String(localized: "quality.audioShort")
}
}
/// Die Bildebene des Systemplayers.
///
/// Gehört dem Modell, nicht der Ansicht: das Modell überlebt den Wechsel
Flixy/Views/Player/PlayerView.swift
+58 -15
View File
@@ -23,7 +23,7 @@ struct PlayerView: View {
@Environment(\.flixyAccent) private var accent
@State private var showsControls = true
@State private var showsTrackPicker = false
@State private var trackPicker: TrackPickerSheet.Kind?
@State private var showsQualityChoice = false
@State private var hideTask: Task<Void, Never>?
@State private var scrubbing: Double?
@@ -108,8 +108,8 @@ struct PlayerView: View {
// Für alles außerhalb der Sprungflächen: Tippen zeigt und verbirgt
// die Bedienelemente wie bisher.
.onTapGesture { toggleControls() }
.sheet(isPresented: $showsTrackPicker) {
TrackPickerSheet(model: model)
.sheet(item: $trackPicker) { kind in
TrackPickerSheet(model: model, kind: kind)
}
.sheet(isPresented: $showsQualityChoice) {
QualitySheet(model: model)
@@ -184,16 +184,33 @@ struct PlayerView: View {
Spacer()
if !model.audioTracks.isEmpty || !model.subtitleTracks.isEmpty {
Button {
showsTrackPicker = true
hideTask?.cancel()
} label: {
Image(systemName: "captions.bubble")
.font(.title3)
.padding(FlixySpacing.snug)
}
.accessibilityLabel(Text("player.tracks"))
// Getrennte Knöpfe, weil es zwei verschiedene Fragen sind: die
// Tonspur stellt man einmal am Anfang um, die Untertitel mitten im
// Film. Ein gemeinsames Blatt bedeutete jedes Mal Scrollen an der
// anderen Liste vorbei.
if !model.audioTracks.isEmpty {
trackButton(
symbol: "waveform",
label: "player.audioTracks",
kind: .audio
)
}
if !model.subtitleTracks.isEmpty {
trackButton(
symbol: model.selectedSubtitleTrack == nil
? "captions.bubble"
: "captions.bubble.fill",
label: "player.subtitleTracks",
kind: .subtitles
)
}
if model.engine?.supportsAirPlay == true {
AirPlayButton(tint: accent)
.frame(width: 28, height: 28)
.padding(FlixySpacing.snug)
.accessibilityLabel(Text("player.airPlay"))
}
if !model.isOffline {
@@ -203,6 +220,22 @@ struct PlayerView: View {
.foregroundStyle(.white)
}
private func trackButton(
symbol: String,
label: LocalizedStringKey,
kind: TrackPickerSheet.Kind
) -> some View {
Button {
trackPicker = kind
hideTask?.cancel()
} label: {
Image(systemName: symbol)
.font(.title3)
.padding(FlixySpacing.snug)
}
.accessibilityLabel(Text(label))
}
/// Der Knopf für die Qualitätsstufe.
///
/// Ein `Menu` stand hier vorher — und war der Grund dafür, dass sich der
@@ -218,8 +251,18 @@ struct PlayerView: View {
if model.isChangingQuality {
ProgressView().controlSize(.small).tint(.white)
} else {
Image(systemName: "slider.horizontal.3")
.font(.title3)
// Die Stufe **als Text**, nicht als Symbol. Drei Schieberegler
// sagen nicht, was eingestellt ist; „1080p" schon — und genau
// das ist die Frage, wegen der man hier hintippt.
Text(model.qualityLabel)
.font(.flixyCaption.weight(.semibold))
.monospacedDigit()
.padding(.horizontal, FlixySpacing.snug)
.padding(.vertical, FlixySpacing.tight)
.overlay {
RoundedRectangle(cornerRadius: FlixyRadius.card)
.strokeBorder(.white.opacity(0.5), lineWidth: 1)
}
.padding(FlixySpacing.snug)
}
}
Flixy/Views/Player/TrackPickerSheet.swift
+47 -29
View File
@@ -2,9 +2,28 @@ import SwiftUI
import FlixyDesign
import FlixyPlayback
/// Auswahl von Ton- und Untertitelspur.
/// Auswahl einer Spur — Ton **oder** Untertitel, nicht beides.
///
/// Getrennt, weil es zwei verschiedene Fragen sind: die Tonspur wechselt man
/// einmal am Anfang, die Untertitel mitten im Film. Beide in einem Blatt
/// bedeutete jedes Mal Scrollen an der anderen Liste vorbei.
struct TrackPickerSheet: View {
enum Kind: Identifiable {
case audio
case subtitles
var id: Self { self }
var title: LocalizedStringKey {
switch self {
case .audio: "player.audioTracks"
case .subtitles: "player.subtitleTracks"
}
}
}
let model: PlayerModel
let kind: Kind
@Environment(\.dismiss) private var dismiss
@Environment(\.flixyAccent) private var accent
@@ -12,45 +31,44 @@ struct TrackPickerSheet: View {
var body: some View {
NavigationStack {
List {
if !model.audioTracks.isEmpty {
Section("player.audioTracks") {
ForEach(model.audioTracks) { track in
row(
title: track.displayName,
isSelected: model.selectedAudioTrack == track
) {
model.selectAudioTrack(track)
}
switch kind {
case .audio:
ForEach(model.audioTracks) { track in
row(
title: track.displayName,
isSelected: model.selectedAudioTrack == track
) {
model.selectAudioTrack(track)
dismiss()
}
}
}
if !model.subtitleTracks.isEmpty {
Section("player.subtitleTracks") {
// „Aus" gehört in dieselbe Liste wie die Spuren, nicht
// als eigener Schalter daneben: es ist eine Auswahl
// unter mehreren, keine getrennte Eigenschaft.
case .subtitles:
// „Aus" gehört in dieselbe Liste wie die Spuren, nicht als
// eigener Schalter daneben: es ist eine Auswahl unter
// mehreren, keine getrennte Eigenschaft.
row(
title: String(localized: "player.subtitlesOff"),
isSelected: model.selectedSubtitleTrack == nil
) {
model.selectSubtitleTrack(nil)
dismiss()
}
ForEach(model.subtitleTracks) { track in
row(
title: String(localized: "player.subtitlesOff"),
isSelected: model.selectedSubtitleTrack == nil
title: track.displayName,
isSelected: model.selectedSubtitleTrack == track
) {
model.selectSubtitleTrack(nil)
}
ForEach(model.subtitleTracks) { track in
row(
title: track.displayName,
isSelected: model.selectedSubtitleTrack == track
) {
model.selectSubtitleTrack(track)
}
model.selectSubtitleTrack(track)
dismiss()
}
}
}
}
.scrollContentBackground(.hidden)
.background(Color.flixyCanvas)
.navigationTitle(Text("player.tracks"))
.navigationTitle(Text(kind.title))
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .confirmationAction) {
Flixy/Views/Settings/DownloadSettingsView.swift
+7
View File
@@ -17,6 +17,13 @@ struct DownloadSettingsView: View {
@Bindable var downloads = downloads
Form {
SettingsHeader(
symbol: "arrow.down.circle",
colour: SettingsPalette.downloads,
title: "sidebar.downloads",
explanation: "settings.downloadsHeaderExplanation"
)
Section {
Toggle("downloads.wifiOnly", isOn: $downloads.isWiFiOnly)
Flixy/Views/Settings/LanguagesView.swift
+7
View File
@@ -25,6 +25,13 @@ struct LanguagesView: View {
@Bindable var settings = settings
Form {
SettingsHeader(
symbol: "captions.bubble",
colour: SettingsPalette.languages,
title: "languages.title",
explanation: "languages.headerExplanation"
)
Section {
Picker("languages.audio", selection: $settings.preferredAudioLanguage) {
Text("languages.serverDefault").tag("")
Flixy/Views/Settings/PlaybackSettingsView.swift
+7
View File
@@ -15,6 +15,13 @@ struct PlaybackSettingsView: View {
@Bindable var settings = settings
Form {
SettingsHeader(
symbol: "play.rectangle",
colour: SettingsPalette.playback,
title: "settings.playback",
explanation: "settings.playbackExplanation"
)
Section {
Picker("settings.qualityWifi", selection: $settings.wifiQuality) {
ForEach(PlaybackSettings.Quality.allCases) { quality in
Flixy/Views/Settings/SettingsChrome.swift
+68
View File
@@ -0,0 +1,68 @@
import SwiftUI
import FlixyDesign
/// Das farbige Symbol vor einer Einstellungszeile.
///
/// Nicht Zierde: in einer Liste aus zehn gleich aussehenden Zeilen findet das
/// Auge nichts wieder. Eine Farbe je Bereich macht „das mit dem blauen Zahnrad"
/// zu einer brauchbaren Beschreibung — und genau so sucht man Einstellungen,
/// die man schon einmal gesehen hat.
///
/// Die Farben sind fest und **nicht** die Akzentfarbe: wenn alles die gleiche
/// Farbe trägt, unterscheidet sie nichts mehr.
struct SettingsIcon: View {
let symbol: String
let colour: Color
var body: some View {
Image(systemName: symbol)
.font(.caption.weight(.semibold))
.foregroundStyle(.white)
.frame(width: 28, height: 28)
.background(colour.gradient, in: .rect(cornerRadius: 7))
}
}
/// Die Kopfkarte eines Einstellungsbildschirms.
///
/// Sagt in einem Satz, worum es hier geht. Das klingt nach Zierde, ist aber
/// der Unterschied zwischen „Wiedergabe" und „hier stelle ich ein, wie weit
/// der Doppeltipp springt" — und erspart das Durchprobieren aller Schalter.
struct SettingsHeader: View {
let symbol: String
let colour: Color
let title: LocalizedStringKey
let explanation: LocalizedStringKey
var body: some View {
VStack(alignment: .leading, spacing: FlixySpacing.regular) {
Image(systemName: symbol)
.font(.title2.weight(.semibold))
.foregroundStyle(.white)
.frame(width: 52, height: 52)
.background(colour.gradient, in: .rect(cornerRadius: 13))
Text(title)
.font(.flixyTitle)
.foregroundStyle(Color.flixyTextPrimary)
Text(explanation)
.font(.flixyCaption)
.foregroundStyle(Color.flixyTextSecondary)
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.vertical, FlixySpacing.snug)
.listRowBackground(Color.flixySurface)
}
}
/// Die Farben der Bereiche, an einer Stelle.
enum SettingsPalette {
static let server = Color.gray
static let appearance = Color.blue
static let home = Color.green
static let playback = Color.pink
static let languages = Color.teal
static let downloads = Color.indigo
static let diagnostics = Color.orange
}
Flixy/Views/Settings/SettingsView.swift
+33 -9
View File
@@ -25,25 +25,41 @@ struct SettingsView: View {
Text(session.serverName)
.foregroundStyle(Color.flixyTextSecondary)
} label: {
Label("settings.server", systemImage: "externaldrive.connected.to.line.below")
row(
"settings.server",
symbol: "externaldrive.connected.to.line.below",
colour: SettingsPalette.server
)
}
}
}
}
Section("settings.section.look") {
row("appearance.title", symbol: "paintpalette") { AppearanceView() }
row("homeLayout.title", symbol: "rectangle.stack") { HomeLayoutView() }
link("appearance.title", symbol: "paintpalette", colour: SettingsPalette.appearance) {
AppearanceView()
}
link("homeLayout.title", symbol: "rectangle.stack", colour: SettingsPalette.home) {
HomeLayoutView()
}
}
Section("settings.section.playing") {
row("settings.playback", symbol: "play.rectangle") { PlaybackSettingsView() }
row("languages.title", symbol: "captions.bubble") { LanguagesView() }
row("sidebar.downloads", symbol: "arrow.down.circle") { DownloadSettingsView() }
link("settings.playback", symbol: "play.rectangle", colour: SettingsPalette.playback) {
PlaybackSettingsView()
}
link("languages.title", symbol: "captions.bubble", colour: SettingsPalette.languages) {
LanguagesView()
}
link("sidebar.downloads", symbol: "arrow.down.circle", colour: SettingsPalette.downloads) {
DownloadSettingsView()
}
}
Section {
row("diagnostics.title", symbol: "stethoscope") { DiagnosticsView() }
link("diagnostics.title", symbol: "stethoscope", colour: SettingsPalette.diagnostics) {
DiagnosticsView()
}
}
Section("settings.app") {
@@ -80,15 +96,23 @@ struct SettingsView: View {
}
}
private func row<Destination: View>(
private func link<Destination: View>(
_ title: LocalizedStringKey,
symbol: String,
colour: Color,
@ViewBuilder destination: @escaping () -> Destination
) -> some View {
NavigationLink {
destination()
} label: {
Label(title, systemImage: symbol)
row(title, symbol: symbol, colour: colour)
}
}
private func row(_ title: LocalizedStringKey, symbol: String, colour: Color) -> some View {
HStack(spacing: FlixySpacing.regular) {
SettingsIcon(symbol: symbol, colour: colour)
Text(title)
}
}
}