Add Liquid Glass effect to player controls bar

Refactor controls bar background styling with platform-specific effects:
- Add Liquid Glass effect for iOS 26+ using new glassEffect API
- Fallback to ultraThinMaterial for iOS 15-25
- Fallback to blurred black overlay for iOS 14 and earlier
- Extract background logic into reusable applyControlsBackground modifier
- Adjust controls bar vertical offset for better alignment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Arkadiusz Fal
2025-11-09 14:14:58 +01:00
parent 757b4cb671
commit 2d73c57426
2 changed files with 54 additions and 7 deletions

View File

@@ -49,18 +49,15 @@ struct ControlsBar: View {
.frame(maxWidth: 120)
}
}
.buttonStyle(.plain)
.labelStyle(.iconOnly)
.padding(.horizontal, 10)
.padding(.vertical, 2)
.frame(maxHeight: barHeight)
.padding(.trailing, expansionState == .mini && !controlsWhenMinimized ? 8 : 0)
.modifier(ControlBackgroundModifier(enabled: backgroundEnabled))
.clipShape(RoundedRectangle(cornerRadius: expansionState == .full || !playerBar ? 0 : 6))
.overlay(
RoundedRectangle(cornerRadius: expansionState == .full || !playerBar ? 0 : 6)
.stroke(Color("ControlsBorderColor"), lineWidth: 0.5)
.applyControlsBackground(
enabled: backgroundEnabled,
cornerRadius: expansionState == .full || !playerBar ? 0 : 6
)
#if os(iOS)
.background(
@@ -342,3 +339,53 @@ struct ControlsBar_Previews: PreviewProvider {
.injectFixtureEnvironmentObjects()
}
}
// MARK: - View Extension for Conditional Modifiers
extension View {
@ViewBuilder
func `if`<Transform: View>(_ condition: Bool, transform: (Self) -> Transform) -> some View {
if condition {
transform(self)
} else {
self
}
}
@ViewBuilder
func applyControlsBackground(enabled: Bool, cornerRadius: CGFloat) -> some View {
if enabled {
if #available(iOS 26.0, macOS 26.0, tvOS 26.0, *) {
// Use Liquid Glass on iOS 26+
self.glassEffect(
.regular.interactive(),
in: .rect(cornerRadius: cornerRadius)
)
} else if #available(iOS 15.0, macOS 12.0, tvOS 15.0, *) {
// Fallback to ultraThinMaterial for iOS 15+
self
.background(
RoundedRectangle(cornerRadius: cornerRadius)
.fill(.ultraThinMaterial)
)
.overlay(
RoundedRectangle(cornerRadius: cornerRadius)
.stroke(Color("ControlsBorderColor"), lineWidth: 0.5)
)
} else {
// Fallback for iOS 14 and earlier
self
.background(
RoundedRectangle(cornerRadius: cornerRadius)
.fill(Color.black.opacity(0.3))
.blur(radius: 10)
)
.overlay(
RoundedRectangle(cornerRadius: cornerRadius)
.stroke(Color("ControlsBorderColor"), lineWidth: 0.5)
)
}
} else {
self.background(Color.clear)
}
}
}