Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.