AppleMusic.swift

import SwiftUI
import PlaygroundSupport

struct Album: View { 
    var body: some View { 
        VStack (spacing: 16) { 
            Rectangle()
                .fill(LinearGradient(
                    gradient: Gradient(stops: [
                        .init(color: Color(#colorLiteral(red: 1, green: 0.6745098233222961, blue: 0.7764706015586853, alpha: 1)), location: 0), 
                        .init(color: Color(#colorLiteral(red: 0.7137255072593689, green: 0.8784313797950745, blue: 0.9607843160629272, alpha: 1)), location: 1)]),
                    startPoint: UnitPoint(x: -0.46, y: 0.51),
                    endPoint: UnitPoint(x: 0.51, y: 1.49)))
                .frame(width: 300, height: 300)
                .cornerRadius(16)
        }
    }
}

struct PlayerTimeline: View { 
    var body: some View { 
        VStack { 
            ZStack { 
                Rectangle()
                    .frame(height: 3)
                    .cornerRadius(3)
                    .foregroundColor(Color(UIColor.tertiaryLabel))
                Circle()
                    .frame(height: 8)
                    .foregroundColor(Color(UIColor.gray))
            }
            
            HStack {
                Text("2:01")
                    .font(.footnote)
                    .foregroundColor(Color(UIColor.tertiaryLabel))
                Spacer()
                Text("4:00")
                    .font(.footnote)
                    .foregroundColor(Color(UIColor.tertiaryLabel))
            }
        }
    }
}

struct SongArtist: View { 
    var body: some View { 
        HStack { 
            Group { 
                VStack (alignment: .leading, spacing: 4) { 
                    Text("Crystals")
                        .font(.title)
                        .fontWeight(.semibold)
                    Text("Of Monsters and Men")
                        .font(.title)
                        .foregroundColor(Color(UIColor.systemPink))
                }
                Spacer()
                VStack (alignment: .leading) {
                    ZStack {
                        Image(systemName: "circle.fill")
                            .foregroundColor(Color(UIColor.systemPink))
                            .font(.system(size: 40))
                            .opacity(0.2)
                        Image(systemName: "ellipsis")
                            .foregroundColor(Color(UIColor.systemPink))
                            .font(.system(size: 24))
                    }
                }
            }
        }
    }
}

struct controls: View {
    @State var isPlaying = false
    @State var pressed = false
    var body: some View { 
        VStack { 
            HStack { 
                Image(systemName: "backward.fill")
                    .font(.system(size: 32))
                Spacer()
                Image(systemName: self.isPlaying ? "play.fill" : "pause.fill")
                    .onTapGesture {
                        self.isPlaying.toggle()
                }
                    .font(.system(size: 48))
                    .scaleEffect(self.pressed ? 0.9 : 1.0)
                    .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
                        withAnimation(.easeInOut(duration: 0.1)) {
                            self.pressed = pressing
                        }
                    }, perform: { })
                Spacer()
                Image(systemName: "forward.fill")
                    .font(.system(size: 32))
            }
            .frame(width: 250)
        }
    }
}

struct volume: View {
    @State var volume = 25.0
    var body: some View { 
        VStack { 
            HStack(spacing: 12) {
                Image(systemName: "volume.fill")
                    .font(.system(size: 16))
                    .foregroundColor(Color(UIColor.tertiaryLabel))
                Slider(value: $volume, in: 0...100)
                    .accentColor(Color(UIColor.gray))
                Image(systemName: "volume.3.fill")
                    .font(.system(size: 16))
                    .foregroundColor(Color(UIColor.tertiaryLabel))
            }
        }
    }
}

struct IconRow: View {
    @State var airplayActive = true
    @State var pressed = false
    var body: some View { 
        VStack (spacing: 16) { 
            HStack { 
                Image(systemName: "quote.bubble")
                    .font(.system(size: 24))
                Spacer()
                Image(systemName: "airplayaudio")
                    .onTapGesture {
                        self.airplayActive.toggle()
                }
                .scaleEffect(self.pressed ? 0.9 : 1.0)
                .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
                    withAnimation(.easeInOut(duration: 0.1)) {
                        self.pressed = pressing
                    }
                }, perform: { })
                    .font(.system(size: 24))
                    .foregroundColor(Color(self.airplayActive ? UIColor.systemPink :  UIColor.white))
                Spacer()
                Image(systemName: "list.bullet")
                    .font(.system(size: 24))
                    .foregroundColor(Color(UIColor.systemPink))
            }
            HStack {
                if airplayActive == true { 
                    Text("iPhone → Desk Homepod")
                        .font(.caption)
                        .fontWeight(.semibold)
                        .foregroundColor(Color(UIColor.systemPink))
                } else {
                    Text(" ")
                        .font(.caption)
                        .fontWeight(.semibold)
                }
            }
        }
        .frame(width: 250)
    }
}

struct Screen: View { 
    var body: some View {
        VStack (spacing: 24) { 
            Spacer()
            Album()
            Spacer()
            VStack (spacing: 20) { 
                SongArtist()
                PlayerTimeline()
            }
            Spacer()
            controls()
            Spacer()
            volume()
            Spacer()
            IconRow()
        }
    .frame(width: 350, height: 812)
    .padding(32)
    .background(Color(UIColor.secondarySystemBackground))
    }
}

PlaygroundPage.current.setLiveView(Screen())