BugFix: Media Player UI

This commit is contained in:
Hariharan Mudaliar 2025-10-28 11:30:40 +05:30
commit 26af1742fe
4 changed files with 55 additions and 33 deletions

View file

@ -5411,6 +5411,7 @@
}
},
"Connected" : {
"extractionState" : "stale",
"localizations" : {
"fr" : {
"stringUnit" : {

View file

@ -23,15 +23,20 @@ struct MinimalisticMusicView: View {
Rectangle()
.fill(.black)
.overlay(
HStack(alignment: .center) {
if !musicManager.songTitle.isEmpty {
MarqueeText(
.constant(musicManager.songTitle),
textColor: Defaults[.coloredSpectrogram] ? Color(nsColor: musicManager.avgColor) : Color.gray,
minDuration: 0.4,
frameWidth: 100
)
GeometryReader { geo in
HStack(alignment: .center) {
if !musicManager.songTitle.isEmpty {
MarqueeText(
$musicManager.songTitle,
font: .system(size: 12, weight: .semibold),
nsFont: .subheadline,
textColor: Defaults[.coloredSpectrogram] ? Color(nsColor: musicManager.avgColor) : Color.gray,
minDuration: 0.4,
frameWidth: max(0, geo.size.width - 8)
)
}
}
.frame(width: geo.size.width, height: geo.size.height, alignment: .center)
}
)
.frame(width: vm.closedNotchSize.width)

View file

@ -16,31 +16,40 @@ struct MinimalisticMusicPlayerView: View {
var body: some View {
VStack(spacing: 0) {
// Header area with album art (matching DynamicIslandHeader height of 24pt)
HStack(alignment: .center, spacing: 10) {
MinimalisticAlbumArtView(vm: vm, albumArtNamespace: albumArtNamespace)
.frame(width: 50, height: 50)
// Song info aligned to bottom of album art
VStack(alignment: .leading, spacing: 1) {
Text(MusicManager.shared.songTitle)
.font(.system(size: 12, weight: .semibold))
.foregroundColor(.white)
.lineLimit(1)
Text(MusicManager.shared.artistName)
.font(.system(size: 10, weight: .regular))
.foregroundColor(Defaults[.playerColorTinting] ? Color(nsColor: MusicManager.shared.avgColor).ensureMinimumBrightness(factor: 0.6) : .gray)
.lineLimit(1)
}
Spacer()
// Visualizer aligned to bottom
if useMusicVisualizer {
visualizer
GeometryReader { headerGeo in
let albumArtWidth: CGFloat = 50
let spacing: CGFloat = 10
let visualizerWidth: CGFloat = useMusicVisualizer ? 24 : 0
let textWidth = max(0, headerGeo.size.width - albumArtWidth - spacing - (useMusicVisualizer ? (visualizerWidth + spacing) : 0))
HStack(alignment: .center, spacing: spacing) {
MinimalisticAlbumArtView(vm: vm, albumArtNamespace: albumArtNamespace)
.frame(width: albumArtWidth, height: albumArtWidth)
VStack(alignment: .leading, spacing: 1) {
if !musicManager.songTitle.isEmpty {
MarqueeText(
$musicManager.songTitle,
font: .system(size: 12, weight: .semibold),
nsFont: .subheadline,
textColor: .white,
frameWidth: textWidth
)
}
Text(musicManager.artistName)
.font(.system(size: 10, weight: .regular))
.foregroundColor(Defaults[.playerColorTinting] ? Color(nsColor: musicManager.avgColor).ensureMinimumBrightness(factor: 0.6) : .gray)
.lineLimit(1)
}
.frame(width: textWidth, alignment: .leading)
if useMusicVisualizer {
visualizer
.frame(width: visualizerWidth)
}
}
}
.frame(height: 50) // Fixed height to accommodate album art
.frame(height: 50)
// Compact progress bar
progressBar

View file

@ -18,10 +18,14 @@ struct MusicPlayerView: View {
let showShuffleAndRepeat: Bool
var body: some View {
HStack {
HStack(alignment: .top, spacing: 12) {
AlbumArtView(vm: vm, albumArtNamespace: albumArtNamespace).padding(.all, 5)
MusicControlsView(showShuffleAndRepeat: showShuffleAndRepeat).drawingGroup().compositingGroup()
MusicControlsView(showShuffleAndRepeat: showShuffleAndRepeat)
.frame(maxWidth: .infinity, alignment: .leading)
.drawingGroup()
.compositingGroup()
}
.frame(maxWidth: .infinity, alignment: .leading)
}
}
@ -124,6 +128,7 @@ struct MusicControlsView: View {
playbackControls
}
.buttonStyle(PlainButtonStyle())
.frame(maxWidth: .infinity, alignment: .leading)
}
private var songInfoAndSlider: some View {
@ -135,6 +140,7 @@ struct MusicControlsView: View {
}
.padding(.top, 10)
.padding(.leading, 5)
.frame(maxWidth: .infinity, alignment: .leading)
}
private func songInfo(width: CGFloat) -> some View {
@ -252,6 +258,7 @@ struct NotchHomeView: View {
} else {
// Normal mode: Show full music player with optional calendar and webcam
MusicPlayerView(albumArtNamespace: albumArtNamespace, showShuffleAndRepeat: Defaults[.showShuffleAndRepeat])
.frame(maxWidth: .infinity, alignment: .leading)
if Defaults[.showCalendar] {
CalendarView()