ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-03 16:10:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor voice messages touch interaction (#1970)

Browse Source 
* 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
This commit is contained in:
Alfonso Grillo
2023-10-27 12:08:30 +02:00
committed by GitHub
parent 11563c6297
commit adfe855b99
15 changed files with 118 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/Progress/ProgressCursorModifier.swift
+1 -1
View File
@@ -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))
}
ElementX/Sources/Other/VoiceMessage/WaveformInteractionModifier.swift
+65
View File
@@ -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"
}
ElementX/Sources/Other/VoiceMessage/WaveformViewDragGestureModifier.swift
-98
View File
@@ -1,98 +0,0 @@
//
// 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 DSWaveformImageViews
import Foundation
import SwiftUI
struct WaveformViewDragGestureModifier: ViewModifier {
@GestureState private var dragGestureState = WaveformViewDragState.inactive
@Binding var dragState: WaveformViewDragState
let minimumDragDistance: Double
func body(content: Content) -> some View {
GeometryReader { geometry in
content
.gesture(SpatialTapGesture()
.simultaneously(with: LongPressGesture())
.sequenced(before: DragGesture(minimumDistance: minimumDragDistance, coordinateSpace: .local))
.updating($dragGestureState) { value, state, _ in
switch value {
// (SpatialTap, LongPress) begins.
case .first(let spatialLongPress):
// Compute the progress with the spatialTap location
let progress = (spatialLongPress.first?.location ?? .zero).x / geometry.size.width
state = .pressing(progress: progress)
// Long press confirmed, dragging may begin.
case .second(let spatialLongPress, let drag) where spatialLongPress.second ?? false:
var progress: Double = dragState.progress
// Compute the progress with drag location
if let location = drag?.location {
progress = location.x / geometry.size.width
}
state = .dragging(progress: progress)
// Dragging ended or the long press cancelled.
default:
state = .inactive
}
})
}
.onChange(of: dragGestureState) { value in
dragState = value
}
}
}
extension View {
func waveformDragGesture(_ dragState: Binding<WaveformViewDragState>, minimumDragDistance: Double = 0) -> some View {
modifier(WaveformViewDragGestureModifier(dragState: dragState,
minimumDragDistance: minimumDragDistance))
}
}
enum WaveformViewDragState: Equatable {
case inactive
case pressing(progress: Double)
case dragging(progress: Double)
var progress: Double {
switch self {
case .inactive:
return .zero
case .pressing(let progress), .dragging(let progress):
return progress
}
}
var isActive: Bool {
switch self {
case .inactive:
return false
case .pressing, .dragging:
return true
}
}
var isDragging: Bool {
switch self {
case .inactive, .pressing:
return false
case .dragging:
return true
}
}
}
ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift
+1 -1
View File
@@ -116,7 +116,7 @@ struct ComposerToolbar: View {
@ViewBuilder
private var mainTopBarContent: some View {
ZStack {
ZStack(alignment: .bottom) {
topBarLayout {
if !context.composerActionsEnabled {
RoomAttachmentPicker(context: context)
ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessagePreviewComposer.swift
+16 -28
View File
@@ -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,
ElementX/Sources/Screens/RoomScreen/RoomScreenModels.swift
+1 -5
View File
@@ -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
ElementX/Sources/Screens/RoomScreen/RoomScreenViewModel.swift
-5
View File
@@ -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,
ElementX/Sources/Screens/RoomScreen/View/Style/LongPressWithFeedback.swift
+2 -5
View File
@@ -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))
}
}
ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift
+1 -1
View File
@@ -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 {
ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift
+1 -1
View File
@@ -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 {
ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/VoiceMessages/VoiceMessageRoomPlaybackView.swift
+24 -73
View File
@@ -22,42 +22,26 @@ struct VoiceMessageRoomPlaybackView: View {
@ObservedObject var playerState: AudioPlayerState
@ScaledMetric private var waveformLineWidth = 2.0
@ScaledMetric private var waveformLinePadding = 2.0
@GestureState var isDragging = false
let onPlayPause: () -> Void
let onSeek: (Double) -> Void
let onScrubbing: (Bool) -> Void
private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy)
@State private var sendFeedback = false
private static let elapsedTimeFormatter: DateFormatter = {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "m:ss"
return dateFormatter
}()
private static let longElapsedTimeFormatter: DateFormatter = {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "mm:ss"
return dateFormatter
}()
@State var dragState: WaveformViewDragState = .inactive
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)
if playerState.duration >= 600 {
return Self.longElapsedTimeFormatter.string(from: elapsed)
return DateFormatter.longElapsedTimeFormatter.string(from: elapsed)
} else {
return Self.elapsedTimeFormatter.string(from: elapsed)
return DateFormatter.elapsedTimeFormatter.string(from: elapsed)
}
}
var showWaveformCursor: Bool {
playerState.playbackState == .playing || dragState.isDragging
playerState.playbackState == .playing || isDragging
}
var body: some View {
@@ -73,32 +57,18 @@ struct VoiceMessageRoomPlaybackView: 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) { newDragState in
switch newDragState {
case .inactive:
onScrubbing(false)
case .pressing:
onScrubbing(true)
feedbackGenerator.prepare()
sendFeedback = true
case .dragging(let progress):
if sendFeedback {
feedbackGenerator.impactOccurred()
sendFeedback = false
}
onSeek(max(0, min(progress, 1.0)))
}
.waveformInteraction(isDragging: $isDragging,
progress: playerState.progress,
showCursor: showWaveformCursor,
onSeek: onSeek)
}
.padding(.leading, 2)
.padding(.trailing, 8)
.onChange(of: isDragging) { isDragging in
onScrubbing(isDragging)
}
}
@ViewBuilder
@@ -122,37 +92,18 @@ struct VoiceMessageRoomPlaybackView: View {
}
}
private enum DragState: Equatable {
case inactive
case pressing(progress: Double)
case dragging(progress: Double)
var progress: Double {
switch self {
case .inactive, .pressing:
return .zero
case .dragging(let progress):
return progress
}
}
var isActive: Bool {
switch self {
case .inactive:
return false
case .pressing, .dragging:
return true
}
}
var isDragging: Bool {
switch self {
case .inactive, .pressing:
return false
case .dragging:
return true
}
}
private extension DateFormatter {
static let elapsedTimeFormatter: DateFormatter = {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "m:ss"
return dateFormatter
}()
static let longElapsedTimeFormatter: DateFormatter = {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "mm:ss"
return dateFormatter
}()
}
struct VoiceMessageRoomPlaybackView_Previews: PreviewProvider, TestablePreview {
ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/VoiceMessages/VoiceMessageRoomTimelineView.swift
-2
View File
@@ -52,9 +52,7 @@ struct VoiceMessageRoomTimelineView: View {
resumePlaybackAfterScrubbing = true
context.send(viewAction: .playPauseAudio(itemID: timelineItem.id))
}
context.send(viewAction: .disableLongPress(itemID: timelineItem.id))
} else {
context.send(viewAction: .enableLongPress(itemID: timelineItem.id))
if resumePlaybackAfterScrubbing {
context.send(viewAction: .playPauseAudio(itemID: timelineItem.id))
resumePlaybackAfterScrubbing = false