Now Playing

// Now Playing · syxUI · https://syxui.dev/components/music-nowplaying
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

extension View {
    /// iOS 26 Liquid Glass with an ultraThinMaterial fallback for earlier versions.
    @ViewBuilder func liquidGlass<S: Shape>(_ shape: S) -> some View {
        if #available(iOS 26.0, *) { self.glassEffect(.regular, in: shape) }
        else { self.background(.ultraThinMaterial, in: shape) }
    }
}

/// ✨ A now-playing screen with Liquid Glass transport controls over album art.
struct MusicNowPlaying: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            Image("carAlbum").resizable().aspectRatio(contentMode: .fill).frame(width: 300, height: 400).clipped()
            VStack(spacing: 14) {
                VStack(spacing: 3) { Text("Liquid Dreams").font(.system(size: 20, weight: .bold)); Text("Aurora Waves").font(.system(size: 14)).foregroundStyle(.white.opacity(0.85)) }
                VStack(spacing: 4) { GeometryReader { g in ZStack(alignment: .leading) { Capsule().fill(.white.opacity(0.25)).frame(height: 4); Capsule().fill(.white).frame(width: g.size.width * 0.4, height: 4); Circle().fill(.white).frame(width: 12, height: 12).offset(x: g.size.width * 0.4 - 6) }.frame(maxHeight: .infinity, alignment: .center) }.frame(height: 12); HStack { Text("1:24").font(.system(size: 10)); Spacer(); Text("-2:38").font(.system(size: 10)) }.foregroundStyle(.white.opacity(0.8)) }
                HStack(spacing: 28) { Image(systemName: "backward.fill").font(.system(size: 20)); Image(systemName: "pause.fill").font(.system(size: 30)); Image(systemName: "forward.fill").font(.system(size: 20)) }.foregroundStyle(.white)
            }
            .foregroundStyle(.white).padding(18).liquidGlass(RoundedRectangle(cornerRadius: 24, style: .continuous)).padding(12)
        }
        .frame(width: 300, height: 400).clipShape(RoundedRectangle(cornerRadius: 24, style: .continuous))
    }
}