A native player bar, and the Glass look it sits in (#2)
The first native surface, and the one that settles how the rest will look. Glass.swift is not a port of the stylesheet. ipx's Glass is already an approximation of what UIKit gives away -- panels are a 70% colour under blur(24px) saturate(180%) with an inset top highlight, which is a material, and the palette names Apple's own colours in its own comments. So where the CSS had to write #409cff in dark and #0055aa in light, because no single blue clears AA over the wash, this asks for the system blue and gets both. Only the wash keeps its hex values: there the colour is the design and there is no system equivalent to ask for. PlayerBarView draws what Playback knows, and Playback is the same object the lock screen and the remote commands drive, so all of them agree without anything being kept in step by hand. Back 15 and forward 30 match the page and the lock screen, so every way of skipping moves by the same amount. Seeking waits for the finger to lift rather than sending a stream of seeks at a player still answering the last one. The page's own bar is hidden rather than left to sit under ours. Its play buttons still work -- they post to the host either way -- but two bars for one player would be two sets of buttons disagreeing about what is playing, and only one of them is what CarPlay will be driving. One test had to be rewritten rather than the code: it asserted that one of the fixture's two episodes had a file, which stops being true the moment the event test asks the daemon to scan. The daemon is shared and keeps what earlier tests did to it, so the assertion now asks what the downloaded filter means instead of how many things match it today. Thirteen pass, twice over the same accumulated state. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
117
ios/Sources/Glass.swift
Normal file
117
ios/Sources/Glass.swift
Normal file
@@ -0,0 +1,117 @@
|
||||
import SwiftUI
|
||||
|
||||
/// The Glass theme, natively.
|
||||
///
|
||||
/// Not a port. ipx's Glass is already an approximation of what UIKit gives away: its panels are
|
||||
/// `color-mix(panel 70%, transparent)` under `backdrop-filter: blur(24px) saturate(180%)` with an
|
||||
/// inset top highlight, which is a material; and its palette names Apple's own colours in its own
|
||||
/// comments. Built here it is the thing the theme was imitating, with real backdrop sampling,
|
||||
/// vibrancy and dynamic type, and light and dark at no cost.
|
||||
///
|
||||
/// The values are taken from web/app.css so the two agree. Where ipx had to name a hex because
|
||||
/// CSS has no system colours, this names the system colour instead.
|
||||
enum Glass {
|
||||
// MARK: - colour
|
||||
|
||||
/// Text. ipx calls these `--fg`, `--dim` and `--faint`, and its comments give them away as
|
||||
/// Apple's label colours; the system versions adapt to contrast settings as well as to dark.
|
||||
static let text = Color.primary
|
||||
static let dim = Color.secondary
|
||||
static let faint = Color(uiColor: .tertiaryLabel)
|
||||
|
||||
/// `--accent`. ipx has to use #409cff in dark and #0055aa in light because a single blue
|
||||
/// cannot clear AA over its wash; the system blue already varies with appearance.
|
||||
static let accent = Color.accentColor
|
||||
/// `--accent2`, the amber the EQ bars and the unread dot use.
|
||||
static let highlight = Color(uiColor: .systemOrange)
|
||||
static let good = Color(uiColor: .systemGreen)
|
||||
static let bad = Color(uiColor: .systemRed)
|
||||
|
||||
/// `--line`, the hairline between panels.
|
||||
static let line = Color(uiColor: .separator)
|
||||
|
||||
// MARK: - surfaces
|
||||
|
||||
/// What `backdrop-filter: blur(24px) saturate(180%)` over a 70% panel was reaching for.
|
||||
static let panel: Material = .ultraThinMaterial
|
||||
/// The toolbar and list headers, which ipx frosts a little more strongly because the list
|
||||
/// scrolls under them -- the one place the blur has something to blur.
|
||||
static let sticky: Material = .thinMaterial
|
||||
|
||||
/// `box-shadow: inset 0 1px 0 var(--glass-hi)`: the light catching the top edge of a pane.
|
||||
/// It is what stops a material reading as flat grey.
|
||||
struct TopHighlight: ViewModifier {
|
||||
func body(content: Content) -> some View {
|
||||
content.overlay(alignment: .top) {
|
||||
Rectangle()
|
||||
.fill(Color.white.opacity(0.14))
|
||||
.frame(height: 1)
|
||||
.blendMode(.plusLighter)
|
||||
.allowsHitTesting(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - the wash
|
||||
|
||||
/// The three radial gradients ipx lays under everything, so the frosting has colour to pick
|
||||
/// up. Without it a material over a flat background is just grey.
|
||||
struct Wash: View {
|
||||
@Environment(\.colorScheme) private var scheme
|
||||
|
||||
private var base: Color { scheme == .dark ? Color(hex: 0x0b0d14) : Color(hex: 0xeef1f7) }
|
||||
|
||||
var body: some View {
|
||||
GeometryReader { geo in
|
||||
let w = geo.size.width, h = geo.size.height
|
||||
ZStack {
|
||||
base
|
||||
// Positions and sizes as the stylesheet has them: 8% 0%, 92% 18%, 60% 100%.
|
||||
blob(Color(hex: 0x4078ff).opacity(scheme == .dark ? 0.30 : 0.18),
|
||||
at: CGPoint(x: w * 0.08, y: 0), size: CGSize(width: w * 1.2, height: h * 1.1))
|
||||
blob(Color(hex: 0xaf52de).opacity(scheme == .dark ? 0.24 : 0.14),
|
||||
at: CGPoint(x: w * 0.92, y: h * 0.18), size: CGSize(width: w, height: h))
|
||||
blob(Color(hex: 0x30b0c7).opacity(scheme == .dark ? 0.20 : 0.12),
|
||||
at: CGPoint(x: w * 0.60, y: h), size: CGSize(width: w * 1.2, height: h * 1.2))
|
||||
}
|
||||
.ignoresSafeArea()
|
||||
}
|
||||
}
|
||||
|
||||
private func blob(_ colour: Color, at centre: CGPoint, size: CGSize) -> some View {
|
||||
RadialGradient(colors: [colour, colour.opacity(0)],
|
||||
center: .center, startRadius: 0, endRadius: max(size.width, size.height) / 2)
|
||||
.frame(width: size.width, height: size.height)
|
||||
.position(centre)
|
||||
.blendMode(.plusLighter)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - metrics
|
||||
|
||||
/// Corner radii, from the stylesheet: cards 20, toasts 14, controls 10.
|
||||
enum Radius {
|
||||
static let card: CGFloat = 20
|
||||
static let toast: CGFloat = 14
|
||||
static let control: CGFloat = 10
|
||||
}
|
||||
}
|
||||
|
||||
extension View {
|
||||
/// A frosted pane with the light on its top edge, as every panel in Glass has.
|
||||
func glassPane(_ material: Material = Glass.panel) -> some View {
|
||||
background(material).modifier(Glass.TopHighlight())
|
||||
}
|
||||
}
|
||||
|
||||
extension Color {
|
||||
/// Only for the wash, where the colour is the design rather than a semantic role and there
|
||||
/// is no system equivalent to ask for.
|
||||
init(hex: UInt32) {
|
||||
self.init(.sRGB,
|
||||
red: Double((hex >> 16) & 0xff) / 255,
|
||||
green: Double((hex >> 8) & 0xff) / 255,
|
||||
blue: Double(hex & 0xff) / 255,
|
||||
opacity: 1)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user