mirror of
https://github.com/FBukovina/Atoll.git
synced 2026-10-27 15:14:33 +00:00
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:
parent
81ed7c1ec2
commit
854eb3e4bd
1 changed files with 19 additions and 18 deletions
|
|
@ -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
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue