AppleTV4KRemote.swift

import SwiftUI
import PlaygroundSupport

struct divider: View { 
    var body: some View { 
        VStack { 
            Rectangle()
                .frame(height: 1)
                .opacity(0.1)
        }
    }
}

struct optionsMenu: View { 
    var body: some View {
        VStack (spacing: 2) { 
            HStack {
                HStack (spacing: 24) { 
                    Image(systemName: "tv.fill")
                        .foregroundColor(Color.white)
                    Text("Living Room Apple TV")
                        .font(.body)
                        .foregroundColor(Color.white)
                }
                Spacer()
                HStack { 
                    Image(systemName: "checkmark")
                        .foregroundColor(Color.white)
                }
            }
            .animation(.easeInOut(duration: 0.25))
            .padding(.top, 16)
            .padding(.bottom, 16)
            .frame(maxWidth: .infinity)
            
            divider()
            
            HStack {
                HStack (spacing: 24) { 
                    Image(systemName: "tv.fill")
                        .foregroundColor(Color.white)
                    Text("Bedroom Apple TV")
                        .font(.body)
                        .foregroundColor(Color.white)
                }
                Spacer()
            }
            .animation(.easeInOut(duration: 0.25))
            .padding(.top, 16)
            .frame(maxWidth: .infinity)
        }
    }
}

struct ContentView: View { 
    @State var isExpanded = false
    var body: some View { 
        VStack {
            Spacer()
            VStack (spacing: 16) { 
                HStack {
                    VStack { 
                        Button(action: {
                            self.isExpanded.toggle()
                        }) {
                            Text("Living Room")
                                .font(.system(size: 20))
                                .foregroundColor(Color.white)
                        }
                    }
                    
                    VStack { 
                        Image(systemName: "chevron.down")
                            .font(.title3)
                            .foregroundColor(Color.secondary)
                    }
                    .rotationEffect(self.isExpanded ? Angle(degrees: -180): Angle(degrees: 0))
                    .animation(.easeInOut(duration: 0.25))
                    .onTapGesture {
                        self.isExpanded.toggle()
                    }
                }
                
                HStack { 
                    if isExpanded == true { 
                        HStack { 
                            optionsMenu()
                        }
                    }
                }
                .animation(.easeInOut(duration: 0.25))
                .frame(maxWidth: .infinity)
            }
            
            HStack {
                Image(systemName: "speaker.slash.fill")
                Spacer()
                Image(systemName: "list.dash")
                Spacer()
                Image(systemName: "power")
            }
            .font(.system(size: 24))
            .padding(.trailing, 24)
            .padding(.leading, 24)
            
            HStack { 
                Rectangle()
                    .foregroundColor(Color(UIColor.systemBackground))
                    .cornerRadius(50)
                    .animation(.easeInOut(duration: 0.25))
            }
            .padding(.top, 16)
            
            
            HStack { 
                VStack (spacing: 16) { 
                    remoteButton(icon: "tv")
                    remoteButton(icon: "playpause.fill")
                }
                
                Spacer()
                
                VStack { 
                    Image(systemName: "chevron.left")
                        .font(.system(size: 40))
                        .foregroundColor(.secondary)
                }
                .frame(width: 144, height: 144)
                .background(Color(UIColor.systemBackground))
                .cornerRadius(144)
                
                Spacer()
                
                VStack (spacing: 24) { 
                    longRemoteButton()
                }
            }
            .padding(16)
        }
        .padding(16)
        .frame(width: 375, height: 812)
        .background(Color(UIColor.black))
    }
}

struct remoteButton: View { 
    @State var pressed = false
    var icon: String
    
    var body: some View { 
        VStack { 
            Image(systemName: icon)
        }
        .frame(width: 64, height: 64)
        .background(Color(UIColor.systemBackground))
        .foregroundColor(Color.secondary)
        .font(.system(size: 18))
        .cornerRadius(32)
        .scaleEffect(self.pressed ? 0.95 : 1.0)
        .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
            withAnimation(.easeInOut(duration: 0.1)) {
                self.pressed = pressing
            }
        }, perform: { })
    }
}

struct longRemoteButton: View { 
    @State var pressed = false
    
    var body: some View { 
        VStack { 
            Spacer()
            Image(systemName: "chevron.up")
            Spacer()
            Text("CH")
            Spacer()
            Image(systemName: "chevron.down")
            Spacer()
        }
        .frame(width: 64, height: 144)
        .background(Color(UIColor.systemBackground))
        .foregroundColor(Color.secondary)
        .font(.system(size: 18))
        .cornerRadius(40)
        .scaleEffect(self.pressed ? 0.95 : 1.0)
        .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
            withAnimation(.easeInOut(duration: 0.1)) {
                self.pressed = pressing
            }
        }, perform: { })
    }
}


PlaygroundPage.current.setLiveView(ContentView())