Phase 0: Projektgerüst, Design-Tokens und Navigation
Legt das Fundament für den Plex-Client an: - XcodeGen-Projekt nach dem Muster von Onyx (com.scarriffleservices, strict concurrency, Projektdatei nicht eingecheckt) - FlixyKit mit vier Modulen: PlexKit, FlixyDesign, FlixyPlayback, FlixyDownloads. macOS steht als Plattform mit drin, damit die Logik-Tests ohne Simulator laufen. - FlixyDesign: dunkle Farb-Tokens, Schriftskala, Poster- und Querformat-Kacheln, Aufmacher-Bild. Die Akzentfarbe fließt über die Umgebung und wird per WCAG-Rechnung lesbar gehalten. - PlexKit: Kopfzeilen-Identität, Transport-Protokoll, Fehlerarten und die Medienmodelle samt nachsichtigem Decoder. - FlixyPlayback: VideoPlayerEngine-Protokoll und PlaybackDecider — die eine Funktion, an der Phase 2 das Transcoding andockt. - Ausfahrbare Seitenleiste auf dem iPhone, Split-View auf dem iPad. - 45 Tests, alle grün. VLCKit 4.0.0-a24 ist vorab geprüft: baut über SPM unter Swift 6 mit strict concurrency. Die iOS-Slice ist mit 239 MB allerdings gewichtig, deshalb bekommt sie in Phase 1 ein eigenes Target. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Guido
Claude Opus 5
@@ -0,0 +1,89 @@
|
||||
import SwiftUI
|
||||
import FlixyDesign
|
||||
|
||||
/// Die ausfahrbare Seitenleiste auf dem iPhone.
|
||||
///
|
||||
/// Sie legt sich über den Inhalt und dunkelt ihn ab, statt ihn zur Seite zu
|
||||
/// schieben — dadurch bleibt die Position im Inhalt erhalten und das Zumachen
|
||||
/// fühlt sich an wie das Wegwischen eines Blattes.
|
||||
struct DrawerContainer<Sidebar: View, Content: View>: View {
|
||||
@Binding var isOpen: Bool
|
||||
|
||||
@ViewBuilder let sidebar: Sidebar
|
||||
@ViewBuilder let content: Content
|
||||
|
||||
/// Breit genug für lange Mediatheksnamen, schmal genug, dass vom Inhalt
|
||||
/// dahinter noch etwas zu sehen bleibt.
|
||||
private let width: CGFloat = 280
|
||||
/// Ab wie weit gezogen die Leiste offen bleibt, statt zurückzuschnappen.
|
||||
private let commitThreshold: CGFloat = 0.4
|
||||
|
||||
@GestureState private var drag: CGFloat = 0
|
||||
@Environment(\.layoutDirection) private var layoutDirection
|
||||
|
||||
/// 0 = zu, 1 = offen. Fasst Zustand und laufende Geste zusammen, damit
|
||||
/// Abdunklung und Position immer zueinander passen.
|
||||
private var openness: CGFloat {
|
||||
let base = isOpen ? width : 0
|
||||
return ((base + drag) / width).clamped()
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ZStack(alignment: .leading) {
|
||||
content
|
||||
.accessibilityHidden(isOpen)
|
||||
|
||||
if openness > 0 {
|
||||
Color.flixyScrim
|
||||
.opacity(openness)
|
||||
.ignoresSafeArea()
|
||||
.onTapGesture { setOpen(false) }
|
||||
// Ohne diese Beschriftung ist die Fläche für VoiceOver ein
|
||||
// stummer Block, der den Inhalt verdeckt.
|
||||
.accessibilityLabel(Text("sidebar.close"))
|
||||
.accessibilityAddTraits(.isButton)
|
||||
.accessibilityAction { setOpen(false) }
|
||||
}
|
||||
|
||||
sidebar
|
||||
.frame(width: width)
|
||||
.frame(maxHeight: .infinity)
|
||||
.background(Color.flixySurface)
|
||||
.offset(x: (openness - 1) * width)
|
||||
.accessibilityHidden(!isOpen)
|
||||
}
|
||||
.gesture(dragGesture)
|
||||
.animation(.snappy(duration: 0.28), value: isOpen)
|
||||
}
|
||||
|
||||
private var dragGesture: some Gesture {
|
||||
DragGesture(minimumDistance: 12, coordinateSpace: .global)
|
||||
.updating($drag) { value, state, _ in
|
||||
// Bei geschlossener Leiste zählt nur ein Zug, der am linken
|
||||
// Rand beginnt. Sonst würde jedes waagerechte Wischen in einer
|
||||
// Reihe die Seitenleiste hervorziehen.
|
||||
if !isOpen {
|
||||
guard value.startLocation.x < 24 else { return }
|
||||
state = max(0, value.translation.width)
|
||||
} else {
|
||||
state = min(0, value.translation.width)
|
||||
}
|
||||
}
|
||||
.onEnded { value in
|
||||
guard isOpen || value.startLocation.x < 24 else { return }
|
||||
let projected = openness + (value.predictedEndTranslation.width - value.translation.width) / width
|
||||
setOpen(projected > commitThreshold)
|
||||
}
|
||||
}
|
||||
|
||||
private func setOpen(_ open: Bool) {
|
||||
guard open != isOpen else { return }
|
||||
withAnimation(.snappy(duration: 0.28)) { isOpen = open }
|
||||
}
|
||||
}
|
||||
|
||||
extension CGFloat {
|
||||
fileprivate func clamped(to range: ClosedRange<CGFloat> = 0...1) -> CGFloat {
|
||||
Swift.min(Swift.max(self, range.lowerBound), range.upperBound)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import SwiftUI
|
||||
import FlixyDesign
|
||||
|
||||
/// Die Wurzelansicht.
|
||||
///
|
||||
/// Legt fest, in welcher Form die Seitenleiste erscheint: auf dem iPhone als
|
||||
/// ausfahrbares Blatt, auf dem iPad dauerhaft neben dem Inhalt. Beide Wege
|
||||
/// nutzen dieselbe `SidebarView` — der Unterschied liegt nur im Rahmen.
|
||||
struct RootView: View {
|
||||
@Environment(\.horizontalSizeClass) private var sizeClass
|
||||
|
||||
@State private var selection: SidebarDestination = .home
|
||||
@State private var isSidebarOpen = false
|
||||
/// Kommt in Phase 1 vom Server. Solange leer, blendet die Seitenleiste den
|
||||
/// Abschnitt aus, statt eine leere Überschrift zu zeigen.
|
||||
@State private var libraries: [SidebarDestination] = []
|
||||
|
||||
var body: some View {
|
||||
Group {
|
||||
if sizeClass == .regular {
|
||||
splitLayout
|
||||
} else {
|
||||
drawerLayout
|
||||
}
|
||||
}
|
||||
.background(Color.flixyCanvas)
|
||||
}
|
||||
|
||||
/// iPad: die Seitenleiste ist Teil des Fensters und lässt sich über den
|
||||
/// Systemknopf einklappen.
|
||||
private var splitLayout: some View {
|
||||
NavigationSplitView {
|
||||
SidebarView(libraries: libraries, selection: $selection, showsHeader: false) {}
|
||||
.navigationTitle(Branding.appName)
|
||||
.toolbar(removing: .sidebarToggle)
|
||||
} detail: {
|
||||
NavigationStack {
|
||||
destination
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// iPhone: die Seitenleiste fährt über den Inhalt.
|
||||
private var drawerLayout: some View {
|
||||
DrawerContainer(isOpen: $isSidebarOpen) {
|
||||
SidebarView(libraries: libraries, selection: $selection) {
|
||||
isSidebarOpen = false
|
||||
}
|
||||
} content: {
|
||||
NavigationStack {
|
||||
destination
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .topBarLeading) {
|
||||
Button {
|
||||
withAnimation(.snappy(duration: 0.28)) { isSidebarOpen = true }
|
||||
} label: {
|
||||
Image(systemName: "line.3.horizontal")
|
||||
}
|
||||
.accessibilityLabel(Text("sidebar.open"))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var destination: some View {
|
||||
switch selection {
|
||||
case .home:
|
||||
PlaceholderScreen(destination: .home)
|
||||
case .library(let key, let title):
|
||||
PlaceholderScreen(destination: .library(key: key, title: title))
|
||||
case .liveTV:
|
||||
PlaceholderScreen(destination: .liveTV)
|
||||
case .downloads:
|
||||
PlaceholderScreen(destination: .downloads)
|
||||
case .settings:
|
||||
PlaceholderScreen(destination: .settings)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import Foundation
|
||||
|
||||
/// Was in der Seitenleiste steht.
|
||||
///
|
||||
/// Die Mediatheken kommen erst zur Laufzeit vom Server, deshalb trägt
|
||||
/// `library` den Schlüssel des Abschnitts statt eines festen Falls.
|
||||
enum SidebarDestination: Hashable {
|
||||
case home
|
||||
case library(key: String, title: String)
|
||||
case liveTV
|
||||
case downloads
|
||||
case settings
|
||||
|
||||
/// Der Titel in der Navigationsleiste.
|
||||
///
|
||||
/// Auf der Startseite steht dort der Name der App — in der Seitenleiste
|
||||
/// wäre das nur eine Dopplung der Überschrift, deshalb hat sie mit
|
||||
/// `sidebarLabel` einen eigenen Text.
|
||||
var title: String {
|
||||
switch self {
|
||||
case .home: Branding.appName
|
||||
case .library(_, let title): title
|
||||
case .liveTV: String(localized: "sidebar.liveTV")
|
||||
case .downloads: String(localized: "sidebar.downloads")
|
||||
case .settings: String(localized: "sidebar.settings")
|
||||
}
|
||||
}
|
||||
|
||||
/// Die Beschriftung in der Seitenleiste.
|
||||
var sidebarLabel: String {
|
||||
switch self {
|
||||
case .home: String(localized: "sidebar.home")
|
||||
default: title
|
||||
}
|
||||
}
|
||||
|
||||
var symbol: String {
|
||||
switch self {
|
||||
case .home: "house"
|
||||
case .library: "film"
|
||||
case .liveTV: "dot.radiowaves.left.and.right"
|
||||
case .downloads: "arrow.down.circle"
|
||||
case .settings: "gearshape"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import SwiftUI
|
||||
import FlixyDesign
|
||||
|
||||
/// Der Inhalt der Seitenleiste.
|
||||
///
|
||||
/// Kennt keine Navigation — sie meldet nur, was ausgewählt wurde. Dadurch
|
||||
/// lässt sie sich auf dem iPhone in den Drawer und auf dem iPad in die
|
||||
/// `NavigationSplitView` stecken, ohne etwas zu ändern.
|
||||
struct SidebarView: View {
|
||||
let libraries: [SidebarDestination]
|
||||
@Binding var selection: SidebarDestination
|
||||
/// Auf dem iPad trägt die Navigationsleiste den Namen bereits — dort wäre
|
||||
/// eine eigene Überschrift die dritte Nennung auf demselben Bildschirm.
|
||||
var showsHeader: Bool = true
|
||||
let onSelect: () -> Void
|
||||
|
||||
var body: some View {
|
||||
ScrollView {
|
||||
VStack(alignment: .leading, spacing: FlixySpacing.section) {
|
||||
if showsHeader { header }
|
||||
|
||||
section(title: nil, items: [.home])
|
||||
|
||||
if !libraries.isEmpty {
|
||||
section(title: String(localized: "sidebar.libraries"), items: libraries)
|
||||
}
|
||||
|
||||
section(
|
||||
title: String(localized: "sidebar.more"),
|
||||
items: [.liveTV, .downloads, .settings]
|
||||
)
|
||||
}
|
||||
.padding(.horizontal, FlixySpacing.regular)
|
||||
.padding(.vertical, FlixySpacing.section)
|
||||
}
|
||||
.scrollBounceBehavior(.basedOnSize)
|
||||
.background(Color.flixySurface)
|
||||
}
|
||||
|
||||
private var header: some View {
|
||||
Text(Branding.appName)
|
||||
.font(.flixyTitle)
|
||||
.foregroundStyle(Color.flixyTextPrimary)
|
||||
.padding(.horizontal, FlixySpacing.snug)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func section(title: String?, items: [SidebarDestination]) -> some View {
|
||||
VStack(alignment: .leading, spacing: FlixySpacing.tight) {
|
||||
if let title {
|
||||
Text(title)
|
||||
.font(.flixyCaption)
|
||||
.foregroundStyle(Color.flixyTextMuted)
|
||||
.textCase(.uppercase)
|
||||
.padding(.horizontal, FlixySpacing.snug)
|
||||
.padding(.bottom, FlixySpacing.tight)
|
||||
}
|
||||
ForEach(items, id: \.self) { item in
|
||||
SidebarRow(destination: item, isSelected: item == selection) {
|
||||
selection = item
|
||||
onSelect()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private struct SidebarRow: View {
|
||||
let destination: SidebarDestination
|
||||
let isSelected: Bool
|
||||
let action: () -> Void
|
||||
|
||||
@Environment(\.flixyAccent) private var accent
|
||||
|
||||
var body: some View {
|
||||
Button(action: action) {
|
||||
Label {
|
||||
Text(destination.sidebarLabel).font(.flixyBody)
|
||||
} icon: {
|
||||
Image(systemName: destination.symbol)
|
||||
// Feste Breite, damit die Beschriftungen auf einer Linie
|
||||
// stehen — SF-Symbole sind unterschiedlich breit.
|
||||
.frame(width: 22)
|
||||
}
|
||||
.foregroundStyle(isSelected ? accent : Color.flixyTextSecondary)
|
||||
.padding(.horizontal, FlixySpacing.snug)
|
||||
.padding(.vertical, FlixySpacing.regular)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.background {
|
||||
if isSelected {
|
||||
RoundedRectangle(cornerRadius: FlixyRadius.control)
|
||||
.fill(accent.opacity(0.14))
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user