Atoll: tighten minimalist music player layout

- Push content below notch cutout, tighten album art halo
- Resize play/pause and side buttons to fit inside notch bounds
- Scope progress bar clipping so album art glow renders fully

Signed-off-by: Jis G Jacob <studiokeys@blissroms.org>
This commit is contained in:
Jis G Jacob 2026-05-18 09:51:42 +05:30
commit 854eb3e4bd

View file

@ -113,6 +113,7 @@ struct MinimalisticMusicPlayerView: View {
// Compact progress bar // Compact progress bar
progressBar progressBar
.padding(.top, 6) .padding(.top, 6)
.clipped()
// Compact playback controls // Compact playback controls
if shouldShowControlHUDRow { if shouldShowControlHUDRow {
@ -133,7 +134,7 @@ struct MinimalisticMusicPlayerView: View {
reminderList reminderList
} }
.padding(.horizontal, 12) .padding(.horizontal, 12)
.padding(.top, -15) .padding(.top, 12)
.padding(.bottom, ReminderLiveActivityManager.baselineMinimalisticBottomPadding) .padding(.bottom, ReminderLiveActivityManager.baselineMinimalisticBottomPadding)
.frame(maxWidth: .infinity) .frame(maxWidth: .infinity)
.frame(height: calculateDynamicHeight(), alignment: .top) .frame(height: calculateDynamicHeight(), alignment: .top)
@ -254,7 +255,7 @@ struct MinimalisticMusicPlayerView: View {
height += 6 + 4 // progress bar + top padding height += 6 + 4 // progress bar + top padding
// Add playback controls height // Add playback controls height
height += 40 + 2 // controls + top padding height += 54 + 2 // controls + top padding
// Add lyrics height if enabled in settings (reserve space even while loading) // Add lyrics height if enabled in settings (reserve space even while loading)
if enableLyrics { if enableLyrics {
@ -706,7 +707,7 @@ private struct MinimalisticReminderDetailsView: View {
// MARK: - Playback Controls (Larger) // MARK: - Playback Controls (Larger)
private var playbackControls: some View { private var playbackControls: some View {
HStack(spacing: 16) { HStack(spacing: 10) {
ForEach(Array(displayedSlots.enumerated()), id: \.offset) { _, slot in ForEach(Array(displayedSlots.enumerated()), id: \.offset) { _, slot in
slotView(for: slot) slotView(for: slot)
} }
@ -834,10 +835,10 @@ private struct MinimalisticReminderDetailsView: View {
private var playPauseButton: some View { private var playPauseButton: some View {
MinimalisticSquircircleButton( MinimalisticSquircircleButton(
icon: musicManager.isPlaying ? (musicManager.isLiveStream ? "stop.fill" : "pause.fill") : "play.fill", icon: musicManager.isPlaying ? (musicManager.isLiveStream ? "stop.fill" : "pause.fill") : "play.fill",
fontSize: 28, fontSize: 26,
fontWeight: .semibold, fontWeight: .semibold,
frameSize: CGSize(width: 60, height: 60), frameSize: CGSize(width: 54, height: 54),
cornerRadius: 24, cornerRadius: 22,
foregroundColor: .white, foregroundColor: .white,
pressEffect: .none, pressEffect: .none,
symbolEffectStyle: .replace, symbolEffectStyle: .replace,
@ -867,8 +868,8 @@ private struct MinimalisticReminderDetailsView: View {
icon: icon, icon: icon,
fontSize: size, fontSize: size,
fontWeight: .medium, fontWeight: .medium,
frameSize: CGSize(width: 40, height: 40), frameSize: CGSize(width: 36, height: 36),
cornerRadius: 16, cornerRadius: 14,
foregroundColor: isActive ? resolvedActiveColor : .white.opacity(0.85), foregroundColor: isActive ? resolvedActiveColor : .white.opacity(0.85),
pressEffect: pressEffect, pressEffect: pressEffect,
symbolEffectStyle: symbolEffect, symbolEffectStyle: symbolEffect,
@ -991,8 +992,8 @@ private struct MinimalisticReminderDetailsView: View {
icon: routeManager.activeDevice?.iconName ?? "speaker.wave.2", icon: routeManager.activeDevice?.iconName ?? "speaker.wave.2",
fontSize: 18, fontSize: 18,
fontWeight: .medium, fontWeight: .medium,
frameSize: CGSize(width: 40, height: 40), frameSize: CGSize(width: 36, height: 36),
cornerRadius: 16, cornerRadius: 14,
foregroundColor: .white.opacity(0.85), foregroundColor: .white.opacity(0.85),
symbolEffectStyle: .replace symbolEffectStyle: .replace
) { ) {
@ -1051,8 +1052,8 @@ private struct MinimalisticReminderDetailsView: View {
icon: "airplayaudio", icon: "airplayaudio",
fontSize: 18, fontSize: 18,
fontWeight: .medium, fontWeight: .medium,
frameSize: CGSize(width: 40, height: 40), frameSize: CGSize(width: 36, height: 36),
cornerRadius: 16, cornerRadius: 14,
foregroundColor: .white.opacity(0.85), foregroundColor: .white.opacity(0.85),
symbolEffectStyle: .replace symbolEffectStyle: .replace
) { ) {
@ -1144,17 +1145,17 @@ struct MinimalisticAlbumArtView: View {
) )
.clipped() .clipped()
.clipShape(RoundedRectangle(cornerRadius: albumArtCornerRadius)) .clipShape(RoundedRectangle(cornerRadius: albumArtCornerRadius))
.scaleEffect(x: 1.3, y: 1.4) .scaleEffect(x: 1.08, y: 1.1)
.rotationEffect(.degrees(92)) .rotationEffect(.degrees(92))
.blur(radius: 35) .blur(radius: 16)
.opacity( .opacity(
usesLiveCanvasArtwork usesLiveCanvasArtwork
? (musicManager.isPlaying ? 0.68 : 0.22) ? (musicManager.isPlaying ? 0.55 : 0.18)
: min(0.6, 1 - max(musicManager.albumArt.getBrightness(), 0.3)) : min(0.45, 1 - max(musicManager.albumArt.getBrightness(), 0.3))
) )
.shadow( .shadow(
color: Color(nsColor: musicManager.avgColor).opacity(usesLiveCanvasArtwork ? 0.28 : 0.16), color: Color(nsColor: musicManager.avgColor).opacity(usesLiveCanvasArtwork ? 0.22 : 0.12),
radius: usesLiveCanvasArtwork ? 18 : 12, radius: usesLiveCanvasArtwork ? 10 : 7,
x: 0, x: 0,
y: 0 y: 0
) )