bukovinafilip/Atoll
1
0
Fork 0
mirror of https://github.com/FBukovina/Atoll.git synced 2026-10-28 15:44:32 +00:00
Code Issues Projects Releases Packages Wiki Activity

Atoll: keep lockscreen player legible over Spotify Canvas wallpaper

Browse source 
Replace the transparent canvas-fallback panel background with a soft
ultra-thin dark scrim plus a gentle vertical gradient and hairline
stroke, and add a subtle drop shadow on the foreground so titles, time
labels, and controls stay readable on bright or busy canvas videos.
Restore consistent horizontal and vertical padding in canvas-fallback
mode so the marquee title and inline elapsed/remaining timers no longer
hug the panel edges.

Signed-off-by: Jis G Jacob <studiokeys@blissroms.org>
This commit is contained in:
Jis G Jacob 2026-05-12 22:51:05 +05:30
commit b6591bca18
1 changed files with 37 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

45
DynamicIsland/components/LockScreen/LockScreenMusicPanel.swift
View file

@ -153,6 +153,12 @@ struct LockScreenMusicPanel: View {
ZStack(alignment: .topLeading) { ZStack(alignment: .topLeading) {
panelBackgroundLayer panelBackgroundLayer
panelForeground panelForeground
.shadow(
color: usesSpotifyCanvasFallbackContentPresentation ? Color.black.opacity(0.55) : .clear,
radius: usesSpotifyCanvasFallbackContentPresentation ? 10 : 0,
x: 0,
y: usesSpotifyCanvasFallbackContentPresentation ? 2 : 0
)
} }
.frame(width: currentSize.width, height: currentSize.height, alignment: .topLeading) .frame(width: currentSize.width, height: currentSize.height, alignment: .topLeading)
.clipShape(RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous)) .clipShape(RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous))
@ -162,10 +168,10 @@ struct LockScreenMusicPanel: View {
} }
} }
.shadow( .shadow(
color: usesSpotifyCanvasFallbackContentPresentation ? .clear : Color.black.opacity(0.3), color: usesSpotifyCanvasFallbackContentPresentation ? Color.black.opacity(0.35) : Color.black.opacity(0.3),
radius: usesSpotifyCanvasFallbackContentPresentation ? 0 : 20, radius: usesSpotifyCanvasFallbackContentPresentation ? 26 : 20,
x: 0, x: 0,
y: usesSpotifyCanvasFallbackContentPresentation ? 0 : 10 y: usesSpotifyCanvasFallbackContentPresentation ? 14 : 10
) )
.contentShape(Rectangle()) .contentShape(Rectangle())
.animation(.easeInOut(duration: 0.28), value: isExpanded) .animation(.easeInOut(duration: 0.28), value: isExpanded)
@ -253,8 +259,8 @@ struct LockScreenMusicPanel: View {
collapsedLayout collapsedLayout
} }
} }
.padding(.horizontal, usesSpotifyCanvasFallbackContentPresentation ? 8 : (isExpanded ? 24 : 20)) .padding(.horizontal, usesSpotifyCanvasFallbackContentPresentation ? (isExpanded ? 24 : 22) : (isExpanded ? 24 : 20))
.padding(.vertical, usesSpotifyCanvasFallbackContentPresentation ? 0 : (isExpanded ? 22 : 16)) .padding(.vertical, usesSpotifyCanvasFallbackContentPresentation ? (isExpanded ? 18 : 14) : (isExpanded ? 22 : 16))
.frame( .frame(
maxWidth: .infinity, maxWidth: .infinity,
maxHeight: .infinity, maxHeight: .infinity,
@ -1138,9 +1144,7 @@ struct LockScreenMusicPanel: View {
@ViewBuilder @ViewBuilder
private var panelBackgroundLayer: some View { private var panelBackgroundLayer: some View {
if usesSpotifyCanvasFallbackContentPresentation { if usesSpotifyCanvasFallbackContentPresentation {
Color.clear canvasFallbackScrim
.allowsHitTesting(false)
.accessibilityHidden(true)
} else if usesCustomLiquidGlass { } else if usesCustomLiquidGlass {
customLiquidPanelBackdrop customLiquidPanelBackdrop
} else if usesStandardLiquidGlass { } else if usesStandardLiquidGlass {
@ -1152,6 +1156,31 @@ struct LockScreenMusicPanel: View {
} }
} }
private var canvasFallbackScrim: some View {
RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous)
.fill(.ultraThinMaterial)
.environment(\.colorScheme, .dark)
.overlay {
LinearGradient(
colors: [
Color.black.opacity(0.32),
Color.black.opacity(0.18),
Color.black.opacity(0.32)
],
startPoint: .top,
endPoint: .bottom
)
.clipShape(RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous))
}
.overlay {
RoundedRectangle(cornerRadius: panelCornerRadius, style: .continuous)
.stroke(Color.white.opacity(0.10), lineWidth: 0.6)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.allowsHitTesting(false)
.accessibilityHidden(true)
}
@ViewBuilder @ViewBuilder
private var standardLiquidPanelBackdrop: some View { private var standardLiquidPanelBackdrop: some View {
if #available(macOS 26.0, *) { if #available(macOS 26.0, *) {