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" : { "Connected" : {
"extractionState" : "stale",
"localizations" : { "localizations" : {
"fr" : { "fr" : {
"stringUnit" : { "stringUnit" : {

View file

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

View file

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

View file

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