MediumContentView.swift

//
//  MediumContentView.swift
//  Medium's Cumulative Clap Reaction
//
//  Created by getstream.io
//

import SwiftUI

struct MediumContentView: View {
    
    // Initial animation states
    @State private var didClap = 4
    @State private var moving = false
    @State private var showMediumSplash = false
    
    var body: some View {
        VStack {
            ZStack {
                Circle()
                    .frame(width: 54, height: 54)
                    .foregroundColor(.green)
                    .opacity(0.8)
                
                Text("+") + Text("\(didClap)")
                
                // Circular splash
                MediumSplashView()
                    .scaleEffect(showMediumSplash ? 1 : 0)
                    .rotationEffect(.degrees(showMediumSplash ? 30 : -15))
            }
            .opacity(moving ? 1 : 0)
            .offset(y: moving ? 0 : 50)
            
            HStack {
                Image(systemName: "hands.clap.fill")
                    .font(.largeTitle)
                    .accessibilityAddTraits(.isButton)
                    .onTapGesture {
                        didClap += 1
                        
                        // Show
                        withAnimation(.easeOut(duration: 0.5).repeatCount(1, autoreverses: false)){
                            moving = true
                        }
                        
                        // Dismiss
                        withAnimation(.easeInOut(duration: 0.6).delay(0.6).repeatCount(1, autoreverses: false)){
                            moving = false
                        }
                        
                        // Display the Splash immediately
                        withAnimation(.easeOut) {
                            showMediumSplash = true
                        }
                        
                        // Remove the splash afte 6 seconds
                        withAnimation(.easeOut(duration: 0.05).delay(0.6).repeatCount(1, autoreverses: false)){
                            showMediumSplash = false
                        }
                        
                    }
                
                Text("\(didClap)")
            }
        }
    }
}

struct MediumContentView_Previews: PreviewProvider {
    static var previews: some View {
        MediumContentView()
            .preferredColorScheme(.dark)
    }
}