Audio_levels.swift

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    @State private var played = false
    @State private var yScaleIndicator1 = false
    @State private var yScaleIndicator2 = false
    @State private var yScaleIndicator3 = false
    @State private var yScaleIndicator4 = false
    
    
    var body: some View {
        HStack(){
            Image(systemName: "circle.fill")
                .font(.largeTitle)
                .overlay(Image(systemName: "pause.fill").foregroundColor(Color(.systemBlue)))
            
            VStack(alignment: .leading){
                Text("SwiftUI Essential Training")
                
                Text("1m 33s")
                    .font(.caption)
                .foregroundColor(Color(.systemGray4))
            }
            Spacer()
            ZStack{ // Slider
                Rectangle() //Inactive
                    .frame(width: 120, height: 2)
                    .cornerRadius(2)
                    .foregroundColor(Color(.systemGray2))
                
                Rectangle() //Active
                    .frame(width: 120, height: 2)
                    .cornerRadius(2)
                    .scaleEffect(x: played ? 1 : 0, y: 1, anchor: .leading)
                    .foregroundColor(Color(.systemTeal))
                    .animation(Animation.easeInOut(duration: 93))
                    .onAppear(){
                    self.played.toggle()
                }
                
            }
            Spacer()
            
            HStack(spacing: 2){ // 1
                Rectangle()
                    .frame(width: 5, height: 15)
                    .scaleEffect(x: 1, y: yScaleIndicator1 ? 1 : 0.7, anchor: .center)
                    .animation(Animation.easeInOut(duration: 0.2).repeatForever(autoreverses: true))
                    .onAppear(){
                        self.yScaleIndicator1 .toggle()
                }
                
                Rectangle() // 2
                    .frame(width: 5, height: 20)
                    .scaleEffect(x: 1, y: yScaleIndicator2 ? 0.8 : 1, anchor: .center)
                    .animation(Animation.easeInOut(duration: 0.2).repeatForever(autoreverses: true))
                    .onAppear(){
                        self.yScaleIndicator2 .toggle()
                }
                
                
                Rectangle() // 3
                    .frame(width: 5, height: 20)
                    .scaleEffect(x: 1, y: yScaleIndicator3 ? 1 : 0.7, anchor: .center)
                    .animation(Animation.easeInOut(duration: 0.2).repeatForever(autoreverses: true))
                    .onAppear(){
                        self.yScaleIndicator3 .toggle()
                }
                
                Rectangle()  // 4
                    .frame(width: 5, height: 15)
                    .scaleEffect(x: 1, y: yScaleIndicator4 ? 0.8 : 1, anchor: .center)
                    .animation(Animation.easeInOut(duration: 0.2).repeatForever(autoreverses: true))
                    .onAppear(){
                        self.yScaleIndicator4 .toggle()
                }
            }
        }.frame(maxWidth: .infinity).padding().background(Color(.systemBlue)).cornerRadius(12)
        .shadow(color: .gray, radius: 2, x: 0, y: 0.2)
    }
}
let ContentView_Previews = ContentView().previewDevice("iPhone XS Max").previewDisplayName("iPhone XS Max")
let vc = UIHostingController(rootView: ContentView_Previews)
PlaygroundPage.current.liveView = vc