From b11e75dd532a3abc9a14e40a4d797596b3c9b869 Mon Sep 17 00:00:00 2001
From: ryanzhao <ryanzhaors@qq.com>
Date: Tue, 31 Oct 2023 16:54:43 +1100
Subject: [PATCH] refactor voice message view to swift ui

---
 .../VoiceMessageView_SwiftUI.swift            | 57 +++++++++++++++++--
 1 file changed, 52 insertions(+), 5 deletions(-)

diff --git a/Session/Conversations/Message Cells/Content Views/VoiceMessageView_SwiftUI.swift b/Session/Conversations/Message Cells/Content Views/VoiceMessageView_SwiftUI.swift
index 5a1c378df..00bd2dd2e 100644
--- a/Session/Conversations/Message Cells/Content Views/VoiceMessageView_SwiftUI.swift	
+++ b/Session/Conversations/Message Cells/Content Views/VoiceMessageView_SwiftUI.swift	
@@ -5,17 +5,63 @@ import SessionUIKit
 import SessionMessagingKit
 
 struct VoiceMessageView_SwiftUI: View {
+    @State var isPlaying: Bool = false
+    @State var time: String = "0:00"
+    @State var speed: String = "1.5×"
+    @State var progress: Double = 1.0
     
     private static let width: CGFloat = 160
     private static let toggleContainerSize: CGFloat = 20
     
     var body: some View {
-        HStack(
-            alignment: .center,
-            spacing: Values.mediumSpacing
-        ) {
+        ZStack(alignment: .leading) {
+            Rectangle()
+                .foregroundColor(themeColor: .messageBubble_overlay)
+                .frame(width: Self.width * progress)
             
-        }.frame(
+            HStack(
+                alignment: .center,
+                spacing: 0
+            ) {
+                ZStack {
+                    Circle()
+                        .foregroundColor(themeColor: .backgroundSecondary)
+                        .frame(
+                            width: Self.toggleContainerSize,
+                            height: Self.toggleContainerSize
+                        )
+                    if let toggleImage: UIImage = UIImage(named: isPlaying ? "Pause" : "Play")?.withRenderingMode(.alwaysTemplate) {
+                        Image(uiImage: toggleImage)
+                            .resizable()
+                            .foregroundColor(themeColor: .textPrimary)
+                            .scaledToFit()
+                            .frame(
+                                width: 8,
+                                height: 8
+                            )
+                    }
+                }
+                
+                Rectangle()
+                    .foregroundColor(themeColor: .backgroundSecondary)
+                    .frame(height: 1)
+                
+                ZStack {
+                    Capsule()
+                        .foregroundColor(themeColor: .backgroundSecondary)
+                        .frame(
+                            width: 44,
+                            height: Self.toggleContainerSize
+                        )
+                    
+                    Text(time)
+                        .foregroundColor(themeColor: .textPrimary)
+                        .font(.system(size: Values.smallFontSize))
+                }
+            }
+            .padding(.horizontal, Values.smallSpacing)
+        }
+        .frame(
             width: Self.width
         )
     }
@@ -24,5 +70,6 @@ struct VoiceMessageView_SwiftUI: View {
 struct VoiceMessageView_SwiftUI_Previews: PreviewProvider {
     static var previews: some View {
         VoiceMessageView_SwiftUI()
+            .frame(height: 58)
     }
 }