Add a progress indicator to voice message preview (#1956)

ElementX/Sources/Other/Progress/ProgressCursorModifier.swift

@@ -0,0 +1,42 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Compound
+import SwiftUI
+
+extension View {
+    func progressCursor<CursorView: View>(progress: CGFloat,
+                                          cursorView: @escaping () -> CursorView) -> some View {
+        modifier(ProgressCursorModifier(progress: progress,
+                                        cursorView: cursorView))
+    }
+}
+
+private struct ProgressCursorModifier<CursorView: View>: ViewModifier {
+    let progress: CGFloat
+    @ViewBuilder var cursorView: () -> CursorView
+    
+    func body(content: Content) -> some View {
+        GeometryReader { geometry in
+            content
+                .overlay(alignment: .leading) {
+                    cursorView()
+                        .offset(CGSize(width: progress * geometry.size.width, height: 0.0))
+                        .frame(height: geometry.size.height)
+                }
+        }
+    }
+}

ElementX/Sources/Other/VoiceMessage/WaveformCursorView.swift

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Compound
+import SwiftUI
+
+struct WaveformCursorView: View {
+    var color: Color = .compound.iconAccentTertiary
+
+    var body: some View {
+        RoundedRectangle(cornerRadius: 1)
+            .fill(color)
+    }
+}
+
+struct WaveformCursorView_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        WaveformCursorView(color: .compound.iconAccentTertiary)
+            .frame(width: 2, height: 25)
+    }
+}

ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessagePreviewComposer.swift

@@ -49,7 +49,7 @@ struct VoiceMessagePreviewComposer: View {
     }
     
     var showWaveformCursor: Bool {
-        playerState.playbackState == .playing || dragState.isDragging
+        playerState.playbackState == .playing || dragState.isActive
     }
             
     var body: some View {
@@ -65,6 +65,11 @@ struct VoiceMessagePreviewComposer: View {
             }
             waveformView
                 .waveformDragGesture($dragState)
+                .progressCursor(progress: playerState.progress) {
+                    WaveformCursorView(color: .compound.iconAccentTertiary)
+                        .opacity(showWaveformCursor ? 1 : 0)
+                        .frame(width: waveformLineWidth)
+                }
                 .onChange(of: dragState) { dragState in
                     switch dragState {
                     case .inactive:

ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/VoiceMessages/VoiceMessageRoomPlaybackView.swift

@@ -74,18 +74,13 @@ struct VoiceMessageRoomPlaybackView: View {
                     .monospacedDigit()
                     .fixedSize(horizontal: true, vertical: true)
             }
-            GeometryReader { geometry in
-                waveformView
-                    .overlay(alignment: .leading) {
-                        // Display a cursor
-                        RoundedRectangle(cornerRadius: 1)
-                            .fill(Color.compound.iconAccentTertiary)
-                            .offset(CGSize(width: playerState.progress * geometry.size.width, height: 0.0))
-                            .frame(width: waveformLineWidth, height: geometry.size.height)
-                            .opacity(showWaveformCursor ? 1 : 0)
-                    }
-                    .waveformDragGesture($dragState)
-            }
+            waveformView
+                .waveformDragGesture($dragState)
+                .progressCursor(progress: playerState.progress) {
+                    WaveformCursorView(color: .compound.iconAccentTertiary)
+                        .opacity(showWaveformCursor ? 1 : 0)
+                        .frame(width: waveformLineWidth)
+                }
         }
         .onChange(of: dragState) { newDragState in
             switch newDragState {