element-hq · alfogrillo · Oct 27, 2023 · Oct 25, 2023 · Oct 26, 2023 · Oct 26, 2023
@@ -356,6 +356,7 @@
  62910B515BCB4B455E24D7C1 /* AdvancedSettingsScreenViewModelProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = D086854995173E897F993C26 /* AdvancedSettingsScreenViewModelProtocol.swift */; };
  6298AB0906DDD3525CD78C6B /* LRUCache in Frameworks */ = {isa = PBXBuildFile; productRef = 1081D3630AAD3ACEDDEC3A98 /* LRUCache */; };
  62A7FC3A0191BC7181AA432B /* AudioRecorder.swift in Sources */ = {isa = PBXBuildFile; fileRef = 907FA4DE17DEA1A3738EFB83 /* AudioRecorder.swift */; };
+ 63CDC201A5980F304F6D0A1C /* WaveformInteractionModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = BFEE91FB8ABB5F5884B6D940 /* WaveformInteractionModifier.swift */; };
  63E46D18B91D08E15FC04125 /* ExpiringTaskRunner.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7B25F959A434BB9923A3223F /* ExpiringTaskRunner.swift */; };
  642DF13C49ED4121C148230E /* TestablePreview.swift in Sources */ = {isa = PBXBuildFile; fileRef = B1E227F34BE43B08E098796E /* TestablePreview.swift */; };
  6448F8D1D3CA4CD27BB4CADD /* RoomMemberProxy.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F36C5D9B37E50915ECBD3EE /* RoomMemberProxy.swift */; };
@@ -587,7 +588,6 @@
  9D2E03DB175A6AB14589076D /* AnalyticsEvents in Frameworks */ = {isa = PBXBuildFile; productRef = 2A3F7BCCB18C15B30CCA39A9 /* AnalyticsEvents */; };
  9D79B94493FB32249F7E472F /* PlaceholderAvatarImage.swift in Sources */ = {isa = PBXBuildFile; fileRef = C705E605EF57C19DBE86FFA1 /* PlaceholderAvatarImage.swift */; };
  9D9690D2FD4CD26FF670620F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = C75EF87651B00A176AB08E97 /* AppDelegate.swift */; };
- 9D9EF9DD484E58A2E8877187 /* WaveformViewDragGestureModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = 03BA7958A4BB9C22CA8884EF /* WaveformViewDragGestureModifier.swift */; };
  9DC5FB22B8F86C3B51E907C1 /* HomeScreenUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D6E4C37E9F0E53D3DF951AC /* HomeScreenUITests.swift */; };
  9DD5AA10E85137140FEA86A3 /* MediaProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = F17EFA1D3D09FC2F9C5E1CB2 /* MediaProvider.swift */; };
  9DD84E014ADFB2DD813022D5 /* RoomDetailsEditScreenViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 00E5B2CBEF8F96424F095508 /* RoomDetailsEditScreenViewModelTests.swift */; };
@@ -1033,7 +1033,6 @@
  035177BCD8E8308B098AC3C2 /* WindowManager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WindowManager.swift; sourceTree = "<group>"; };
  0376C429FAB1687C3D905F3E /* MockCoder.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MockCoder.swift; sourceTree = "<group>"; };
  0392E3FDE372C9B56FEEED8B /* test_voice_message.m4a */ = {isa = PBXFileReference; path = test_voice_message.m4a; sourceTree = "<group>"; };
- 03BA7958A4BB9C22CA8884EF /* WaveformViewDragGestureModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WaveformViewDragGestureModifier.swift; sourceTree = "<group>"; };
  03DD998E523D4EC93C7ED703 /* RoomNotificationSettingsScreenViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomNotificationSettingsScreenViewModelProtocol.swift; sourceTree = "<group>"; };
  03FABD73FD8086EFAB699F42 /* MediaUploadPreviewScreenViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MediaUploadPreviewScreenViewModelTests.swift; sourceTree = "<group>"; };
  045253F9967A535EE5B16691 /* Label.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Label.swift; sourceTree = "<group>"; };
@@ -1681,6 +1680,7 @@
  BFC9F57320EC80C7CE34FE4A /* VoiceMessagePreviewComposer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VoiceMessagePreviewComposer.swift; sourceTree = "<group>"; };
  BFDCAC6CAAD65A2C24EA9C4B /* Dictionary.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Dictionary.swift; sourceTree = "<group>"; };
  BFEA446F8618DBA79A9239CC /* MessageForwardingScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MessageForwardingScreen.swift; sourceTree = "<group>"; };
+ BFEE91FB8ABB5F5884B6D940 /* WaveformInteractionModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WaveformInteractionModifier.swift; sourceTree = "<group>"; };
  C024C151639C4E1B91FCC68B /* ElementXAttributeScope.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ElementXAttributeScope.swift; sourceTree = "<group>"; };
  C070FD43DC6BF4E50217965A /* LocalizationTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LocalizationTests.swift; sourceTree = "<group>"; };
  C08E9043618AE5B0BF7B07E1 /* TemplateScreenViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TemplateScreenViewModelTests.swift; sourceTree = "<group>"; };
@@ -3861,8 +3861,8 @@
  AD0FF64B0E6470F66F42E182 /* EstimatedWaveformView.swift */,
  B8516302ACCA94A0E680AB3B /* VoiceMessageButton.swift */,
  FB9EABCA9348DFA27439A809 /* WaveformCursorView.swift */,
+ BFEE91FB8ABB5F5884B6D940 /* WaveformInteractionModifier.swift */,
  94028A227645FA880B966211 /* WaveformSource.swift */,
- 03BA7958A4BB9C22CA8884EF /* WaveformViewDragGestureModifier.swift */,
  );
  path = VoiceMessage;
  sourceTree = "<group>";
@@ -5898,8 +5898,8 @@
  CF3827071B0BC9638BD44F5D /* WaitlistScreenViewModel.swift in Sources */,
  B717A820BE02C6FE2CB53F6E /* WaitlistScreenViewModelProtocol.swift in Sources */,
  CA12AE0DCD57D49CD96C699A /* WaveformCursorView.swift in Sources */,
+ 63CDC201A5980F304F6D0A1C /* WaveformInteractionModifier.swift in Sources */,
  B773ACD8881DB18E876D950C /* WaveformSource.swift in Sources */,
- 9D9EF9DD484E58A2E8877187 /* WaveformViewDragGestureModifier.swift in Sources */,
  D871C8CF46950F959C9A62C3 /* WelcomeScreen.swift in Sources */,
  383055C6ABE5BE058CEE1DDB /* WelcomeScreenScreenCoordinator.swift in Sources */,
  BD2BF1EC73FFB0C01552ECDA /* WelcomeScreenScreenModels.swift in Sources */,

@@ -19,7 +19,7 @@ import SwiftUI
 
 extension View {
  func progressCursor<CursorView: View>(progress: CGFloat,
- cursorView: @escaping () -> CursorView) -> some View {
+ @ViewBuilder cursorView: @escaping () -> CursorView) -> some View {
  modifier(ProgressCursorModifier(progress: progress,
  cursorView: cursorView))
  }

@@ -0,0 +1,65 @@
+//
+// 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 SwiftUI
+
+extension View {
+ func waveformInteraction(isDragging: GestureState<Bool>, progress: Double, showCursor: Bool, onSeek: @escaping (Double) -> Void) -> some View {
+ modifier(WaveformInteractionModifier(isDragging: isDragging, progress: progress, showCursor: showCursor, onSeek: onSeek))
+ }
+}
+
+private struct WaveformInteractionModifier: ViewModifier {
+ let isDragging: GestureState<Bool>
+ let progress: Double
+ let showCursor: Bool
+ let onSeek: (Double) -> Void
+
+ @ScaledMetric private var cursorVisibleWidth = 2.0
+ @ScaledMetric private var cursorVisibleHeight = 24.0
+ private let cursorInteractiveSize: CGFloat = 50
+
+ func body(content: Content) -> some View {
+ GeometryReader { geometry in
+ content
+ .gesture(SpatialTapGesture()
+ .onEnded { tapGesture in
+ let progress = tapGesture.location.x / geometry.size.width
+ onSeek(max(0, min(progress, 1.0)))
+ })
+ .progressCursor(progress: progress) {
+ WaveformCursorView(color: .compound.iconAccentTertiary)
+ .frame(width: cursorVisibleWidth, height: cursorVisibleHeight)
+ .opacity(showCursor ? 1 : 0)
+ .frame(width: cursorInteractiveSize)
+ .frame(maxHeight: cursorInteractiveSize)
+ .contentShape(Rectangle())
+ .gesture(DragGesture(coordinateSpace: .named(Self.namespaceName))
+ .updating(isDragging) { dragGesture, isDragging, _ in
+ isDragging = true
+ let progress = dragGesture.location.x / geometry.size.width
+ onSeek(max(0, min(progress, 1.0)))
+ }
+ )
+ .offset(x: -cursorInteractiveSize / 2, y: 0)
+ }
+ }
+ .coordinateSpace(name: Self.namespaceName)
+ .animation(nil, value: progress)
+ }
+
+ private static let namespaceName = "voice-message-waveform"
+}
@@ -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 {