My version of Overcast's Now playing view in SwiftUI

OvercastStyleNowPlayingViewWatch.swift

//
//  ContentView.swift
//  FakeOvercast WatchKit Extension
//
//  Created by Paul Wood on 8/8/19.
//  Copyright © 2019 Paul Wood. All rights reserved.
//

import SwiftUI
import SFSafeSymbols

struct ContentView: View {
  
  @State var progress: CGFloat = 0.5
  
  var body: some View {
    EmptyView()
  }
}

struct NowPlayingView: View {
  @State var progress: CGFloat = 0.5
  
  var body: some View {
    ZStack {
      VStack {
        GeometryReader { geometry in
          ProgressBar(progress: self.$progress,
                      backgroundColor: .constant(Color.gray),
                      foregroundColor: .constant(Color.orange))
            .frame(width: geometry.size.width, height: 2)
        }
        
        VStack(alignment: .leading, spacing: 2) {
          Text("Accidental Tech Podcast").font(.footnote).opacity(0.6)
          Text("338: Double Chunking").font(.headline)
        }.padding(.vertical, 8)
        
        HStack{
          Image(systemSymbol: .gobackward15)
            .font(.title)
            .scaleEffect(2/3)
            .padding(2)
          Spacer()
          Image(systemName: "play.fill")
            .font(.largeTitle)
          
          Spacer()
          Image(systemSymbol: .goforward15)
            .font(.title)
            .scaleEffect(2/3)
            .padding(2)
        }.padding(.bottom, 15)
        
        VolumeButton()

      }
    }.navigationBarTitle(
      Text("29m")
    )
  }
}

struct VolumeButton: View {

  var body: some View {
    ZStack {
      Circle()
        .stroke(Color.white.opacity(0.3), lineWidth:5)
        .rotationEffect(.degrees(-90), anchor: .center)
        .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
        .frame(width: 50, height: 50, alignment: .center)
      
      Circle()
        .trim(from:  2/3, to: 1.0)
        .stroke(Color.orange, style: StrokeStyle(lineWidth: 5.25,
                                                 lineCap: .round))
        .rotationEffect(.degrees(-90), anchor: .center)
        .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
        .frame(width: 50, height: 50, alignment: .center)

      Image(uiImage: UIImage(named: "myVolume.2.fill")!
        .withConfiguration(UIImage.SymbolConfiguration(textStyle: .title3))
        .withRenderingMode(.alwaysTemplate))
        .accentColor(Color.white)
    }
  }
}

struct ProgressBar: View {
  
  @Binding var progress: CGFloat
  @Binding var backgroundColor: Color
  @Binding var foregroundColor: Color
  @State var isShowing = true
  
  var body: some View {
    GeometryReader { geometry in
      ZStack(alignment: .leading) {
        Rectangle()
          .foregroundColor(self.backgroundColor)
          .opacity(0.3)
          .frame(width: geometry.size.width, height: geometry.size.height)
        Rectangle()
          .foregroundColor(self.foregroundColor)
          .frame(width: self.isShowing ? geometry.size.width * self.progress : 0.0,
                 height: geometry.size.height)
          .animation(.linear(duration: 0.6))
      }
      .onAppear {
        self.isShowing = true
      }
      .cornerRadius(geometry.size.height / 2.0)
    }
  }
}


#if DEBUG

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    Group {
      NowPlayingView()
      .previewDevice(PreviewDevice(rawValue: "Apple Watch Series 4 - 44mm"))
    }
  }
}
#endif