Refactor voice messages touch interaction (#1970)

* Remove enable/disable long press actions * Working poc * Refactor interaction in VoiceMessageRoomPlaybackView * Cleanup DateFormatter * Fix VoiceMessagePreviewComposer * Cleanup * Delete WaveformViewDragState * Refactor WaveformCursorView * Cleanup * Add WaveformInteractionModifier * Add selection hapitc feedback * Fix ComposerToolbar ZStack alignment * Refine cursor size * Remove haptic feedback * Fix preview test * Delete longPressDisabledItemID * Remove progress animation * Project file
2026-11-05 11:58:32 +00:00 · 2023-10-27 12:08:30 +02:00
parent 11563c6297
commit adfe855b99
15 changed files with 118 additions and 229 deletions
@@ -116,7 +116,7 @@ struct ComposerToolbar: View {

    @ViewBuilder
    private var mainTopBarContent: some View {
-        ZStack {
+        ZStack(alignment: .bottom) {
            topBarLayout {
                if !context.composerActionsEnabled {
                    RoomAttachmentPicker(context: context)
@@ -25,29 +25,22 @@ struct VoiceMessagePreviewComposer: View {
    @ScaledMetric private var waveformLineWidth = 2.0
    @ScaledMetric private var waveformLinePadding = 2.0
    @State private var resumePlaybackAfterScrubbing = false
+    @GestureState var isDragging = false

    let onPlay: () -> Void
    let onPause: () -> Void
    let onSeek: (Double) -> Void

-    @State var dragState: WaveformViewDragState = .inactive
-    
-    private static let elapsedTimeFormatter: DateFormatter = {
-        let dateFormatter = DateFormatter()
-        dateFormatter.dateFormat = "mm:ss"
-        return dateFormatter
-    }()
-        
    var timeLabelContent: String {
        // Display the duration if progress is 0.0
        let percent = playerState.progress > 0.0 ? playerState.progress : 1.0
        // If the duration is greater or equal 10 minutes, use the long format
        let elapsed = Date(timeIntervalSinceReferenceDate: playerState.duration * percent)
-        return Self.elapsedTimeFormatter.string(from: elapsed)
+        return DateFormatter.elapsedTimeFormatter.string(from: elapsed)
    }
    
    var showWaveformCursor: Bool {
-        playerState.playbackState == .playing || dragState.isActive
+        playerState.playbackState == .playing || isDragging
    }
            
    var body: some View {
@@ -63,25 +56,12 @@ struct VoiceMessagePreviewComposer: View {
                    .monospacedDigit()
                    .fixedSize(horizontal: true, vertical: true)
            }
+
            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:
-                        onScrubbing(false)
-                    case .pressing(let progress):
-                        onScrubbing(true)
-                        onSeek(max(0, min(progress, 1.0)))
-                    case .dragging(let progress):
-                        onSeek(max(0, min(progress, 1.0)))
-                    }
-                    self.dragState = dragState
-                }
+                .waveformInteraction(isDragging: $isDragging,
+                                     progress: playerState.progress,
+                                     showCursor: showWaveformCursor,
+                                     onSeek: onSeek)
        }
        .padding(.vertical, 4.0)
        .padding(.horizontal, 6.0)
@@ -135,6 +115,14 @@ struct VoiceMessagePreviewComposer: View {
    }
 }

+private extension DateFormatter {
+    static let elapsedTimeFormatter: DateFormatter = {
+        let dateFormatter = DateFormatter()
+        dateFormatter.dateFormat = "mm:ss"
+        return dateFormatter
+    }()
+}
+
 struct VoiceMessagePreviewComposer_Previews: PreviewProvider, TestablePreview {
    static let playerState = AudioPlayerState(id: .recorderPreview,
                                              duration: 10.0,
@@ -80,9 +80,6 @@ enum RoomScreenViewAction {
    
    case scrolledToBottom
    
-    case enableLongPress(itemID: TimelineItemIdentifier)
-    case disableLongPress(itemID: TimelineItemIdentifier)
-    
    case playPauseAudio(itemID: TimelineItemIdentifier)
    case seekAudio(itemID: TimelineItemIdentifier, progress: Double)
    
@@ -107,8 +104,7 @@ struct RoomScreenViewState: BindableState {
    var isEncryptedOneToOneRoom = false
    var timelineViewState = TimelineViewState() // check the doc before changing this
    var swiftUITimelineEnabled = false
-    
-    var longPressDisabledItemID: TimelineItemIdentifier?
+
    var ownUserID: String
    
    var showCallButton = false
@@ -158,11 +158,6 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            Task { await timelineController.playPauseAudio(for: itemID) }
        case .seekAudio(let itemID, let progress):
            Task { await timelineController.seekAudio(for: itemID, progress: progress) }
-        case .enableLongPress(let itemID):
-            guard state.longPressDisabledItemID == itemID else { return }
-            state.longPressDisabledItemID = nil
-        case .disableLongPress(let itemID):
-            state.longPressDisabledItemID = itemID
        case let .endPoll(pollStartID):
            state.bindings.confirmationAlertInfo = .init(id: .init(),
                                                         title: L10n.actionEndPoll,
@@ -18,7 +18,6 @@ import SwiftUI

 struct LongPressWithFeedback: ViewModifier {
    let action: () -> Void
-    let disabled: () -> Bool
    
    @State private var triggerTask: Task<Void, Never>?
    @State private var isLongPressing = false
@@ -50,8 +49,6 @@ struct LongPressWithFeedback: ViewModifier {
                    
                    if Task.isCancelled { return }

-                    guard !disabled() else { return }
-
                    action()
                    feedbackGenerator.impactOccurred()
                }
@@ -60,8 +57,8 @@ struct LongPressWithFeedback: ViewModifier {
 }

 extension View {
-    func longPressWithFeedback(disabled: @escaping @autoclosure () -> Bool = false, action: @escaping () -> Void) -> some View {
-        modifier(LongPressWithFeedback(action: action, disabled: disabled))
+    func longPressWithFeedback(action: @escaping () -> Void) -> some View {
+        modifier(LongPressWithFeedback(action: action))
    }
 }

@@ -128,7 +128,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
            }
            // We need a tap gesture before this long one so that it doesn't
            // steal away the gestures from the scroll view
-            .longPressWithFeedback(disabled: context.viewState.longPressDisabledItemID == timelineItem.id) {
+            .longPressWithFeedback {
                context.send(viewAction: .timelineItemMenu(itemID: timelineItem.id))
            }
            .swipeRightAction {
@@ -73,7 +73,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
        }
        // We need a tap gesture before this long one so that it doesn't
        // steal away the gestures from the scroll view
-        .longPressWithFeedback(disabled: context.viewState.longPressDisabledItemID == timelineItem.id) {
+        .longPressWithFeedback {
            context.send(viewAction: .timelineItemMenu(itemID: timelineItem.id))
        }
        .swipeRightAction {