Skip to content

Commit

Permalink
Refactor voice messages touch interaction (#1970)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
alfogrillo authored Oct 27, 2023
1 parent 11563c6 commit adfe855
Show file tree
Hide file tree
Showing 15 changed files with 118 additions and 229 deletions.
8 changes: 4 additions & 4 deletions ElementX.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -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 */; };
Expand Down Expand Up @@ -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 */; };
Expand Down Expand Up @@ -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>"; };
Expand Down Expand Up @@ -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>"; };
Expand Down Expand Up @@ -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>";
Expand Down Expand Up @@ -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 */,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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))
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
}

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ struct ComposerToolbar: View {

@ViewBuilder
private var mainTopBarContent: some View {
ZStack {
ZStack(alignment: .bottom) {
topBarLayout {
if !context.composerActionsEnabled {
RoomAttachmentPicker(context: context)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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)
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 1 addition & 5 deletions ElementX/Sources/Screens/RoomScreen/RoomScreenModels.swift
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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
Expand Down
5 changes: 0 additions & 5 deletions ElementX/Sources/Screens/RoomScreen/RoomScreenViewModel.swift
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -50,8 +49,6 @@ struct LongPressWithFeedback: ViewModifier {

if Task.isCancelled { return }

guard !disabled() else { return }

action()
feedbackGenerator.impactOccurred()
}
Expand All @@ -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))
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit adfe855

Please sign in to comment.