Voice message: variable play back speed (#5121)

* Implement voice message variable playback speed * Move playback speed string to Untranslated https://github.com/element-hq/element-x-ios/pull/5121#discussion_r2822631371 * Address review feedback for voice message playback speed - Persist voice message playback speed as an enum in AppSettings instead of storing an index. - Update playback speed cycling to derive from enum allCases and safely fall back to `.default` if the stored value cannot be resolved. - Apply runtime speed updates in AudioPlayer only when the player is in the `.playing` state. - Keep MediaPlayerProviderTests formatting/indentation style intact while retaining mock playback speed setup. - Regenerate preview snapshots for: - PlaybackSpeedButton - VoiceMessageRoomPlaybackView - VoiceMessageRoomTimelineView * Move VoiceMessagePlaybackSpeed outside AppSettings, remove speedRatio * Stabilize PlaybackSpeedButton width * Sync voice-message speed label - Add voiceMessagePlaybackSpeed to TimelineViewState and bind it from appSettings.$voiceMessagePlaybackSpeed. - Pass that timeline-level speed into VoiceMessageRoomPlaybackView and use it for PlaybackSpeedButton, so labels update consistently across items. - Use @EnvironmentObject in VoiceMessageRoomTimelineContent so the view re-renders when timeline context state changes. - In WaveformInteractionModifier, add .allowsHitTesting(showCursor) to the cursor interaction view so hidden pre-playback cursor hit area does not steal taps from the speed button.
2026-02-19 14:02:26 +01:00
parent 173b39a07f
commit 5f724941ee
33 changed files with 269 additions and 39 deletions
--- a/ElementX/Resources/Localizations/en.lproj/Untranslated.strings
+++ b/ElementX/Resources/Localizations/en.lproj/Untranslated.strings
@@ -4,6 +4,9 @@
 /* Used for testing */
 "untranslated" = "Untranslated";

+// MARK: - Voice message playback speed
+"a11y_playback_speed" = "Playback speed %1$@";
+
 // MARK: - Soft logout

 "soft_logout_signin_title" = "Sign in";
--- a/ElementX/Sources/Application/Settings/AppSettings.swift
+++ b/ElementX/Sources/Application/Settings/AppSettings.swift
@@ -82,6 +82,8 @@ final class AppSettings {
        case spaceSettingsEnabled
        case createSpaceEnabled
        
+        case voiceMessagePlaybackSpeed
+
        // Doug's tweaks 🔧
        case hideUnreadMessagesBadge
        case hideQuietNotificationAlerts
@@ -359,7 +361,10 @@ final class AppSettings {
    
    @UserPreference(key: UserDefaultsKeys.optimizeMediaUploads, defaultValue: true, storageType: .userDefaults(store))
    var optimizeMediaUploads
-    
+
+    @UserPreference(key: UserDefaultsKeys.voiceMessagePlaybackSpeed, defaultValue: VoiceMessagePlaybackSpeed.default, storageType: .userDefaults(store))
+    var voiceMessagePlaybackSpeed: VoiceMessagePlaybackSpeed
+
    /// Whether or not to show a warning on the media caption composer so the user knows
    /// that captions might not be visible to users who are using other Matrix clients.
    let shouldShowMediaCaptionWarning = true
@@ -447,3 +452,10 @@ final class AppSettings {
 }

 extension AppSettings: CommonSettingsProtocol { }
+
+enum VoiceMessagePlaybackSpeed: Float, CaseIterable, Codable {
+    case `default` = 1.0
+    case fast = 1.5
+    case fastest = 2.0
+    case slow = 0.5
+}
--- a/ElementX/Sources/Generated/Strings+Untranslated.swift
+++ b/ElementX/Sources/Generated/Strings+Untranslated.swift
@@ -10,6 +10,10 @@ import Foundation
 // swiftlint:disable explicit_type_interface function_parameter_count identifier_name line_length
 // swiftlint:disable nesting type_body_length type_name vertical_whitespace_opening_braces
 internal enum UntranslatedL10n {
+  /// Playback speed %1$@
+  internal static func a11yPlaybackSpeed(_ p1: Any) -> String {
+    return UntranslatedL10n.tr("Untranslated", "a11y_playback_speed", String(describing: p1))
+  }
  /// Clear all data currently stored on this device?
  /// Sign in again to access your account data and messages.
  internal static var softLogoutClearDataDialogContent: String { return UntranslatedL10n.tr("Untranslated", "soft_logout_clear_data_dialog_content") }
--- a/ElementX/Sources/Mocks/Generated/GeneratedMocks.swift
+++ b/ElementX/Sources/Mocks/Generated/GeneratedMocks.swift
@@ -1222,6 +1222,11 @@ class AudioPlayerMock: AudioPlayerProtocol, @unchecked Sendable {
        set(value) { underlyingState = value }
    }
    var underlyingState: MediaPlayerState!
+    var playbackSpeed: Float {
+        get { return underlyingPlaybackSpeed }
+        set(value) { underlyingPlaybackSpeed = value }
+    }
+    var underlyingPlaybackSpeed: Float!
    var actions: AnyPublisher<AudioPlayerAction, Never> {
        get { return underlyingActions }
        set(value) { underlyingActions = value }
@@ -1450,6 +1455,47 @@ class AudioPlayerMock: AudioPlayerProtocol, @unchecked Sendable {
        }
        await seekToClosure?(progress)
    }
+    //MARK: - setPlaybackSpeed
+
+    var setPlaybackSpeedUnderlyingCallsCount = 0
+    var setPlaybackSpeedCallsCount: Int {
+        get {
+            if Thread.isMainThread {
+                return setPlaybackSpeedUnderlyingCallsCount
+            } else {
+                var returnValue: Int? = nil
+                DispatchQueue.main.sync {
+                    returnValue = setPlaybackSpeedUnderlyingCallsCount
+                }
+
+                return returnValue!
+            }
+        }
+        set {
+            if Thread.isMainThread {
+                setPlaybackSpeedUnderlyingCallsCount = newValue
+            } else {
+                DispatchQueue.main.sync {
+                    setPlaybackSpeedUnderlyingCallsCount = newValue
+                }
+            }
+        }
+    }
+    var setPlaybackSpeedCalled: Bool {
+        return setPlaybackSpeedCallsCount > 0
+    }
+    var setPlaybackSpeedReceivedSpeed: Float?
+    var setPlaybackSpeedReceivedInvocations: [Float] = []
+    var setPlaybackSpeedClosure: ((Float) -> Void)?
+
+    func setPlaybackSpeed(_ speed: Float) {
+        setPlaybackSpeedCallsCount += 1
+        setPlaybackSpeedReceivedSpeed = speed
+        DispatchQueue.main.async {
+            self.setPlaybackSpeedReceivedInvocations.append(speed)
+        }
+        setPlaybackSpeedClosure?(speed)
+    }
 }
 class AudioRecorderMock: AudioRecorderProtocol, @unchecked Sendable {
    var actions: AnyPublisher<AudioRecorderAction, Never> {
--- a/ElementX/Sources/Other/TestablePreview/TestablePreviewsDictionary.swift
+++ b/ElementX/Sources/Other/TestablePreview/TestablePreviewsDictionary.swift
@@ -110,6 +110,7 @@ enum TestablePreviewsDictionary {
        "PinnedItemsIndicatorView_Previews" : PinnedItemsIndicatorView_Previews.self,
        "PlaceholderAvatarImage_Previews" : PlaceholderAvatarImage_Previews.self,
        "PlaceholderScreen_Previews" : PlaceholderScreen_Previews.self,
+        "PlaybackSpeedButton_Previews" : PlaybackSpeedButton_Previews.self,
        "PollFormScreen_Previews" : PollFormScreen_Previews.self,
        "PollOptionView_Previews" : PollOptionView_Previews.self,
        "PollRoomTimelineView_Previews" : PollRoomTimelineView_Previews.self,
--- a/ElementX/Sources/Other/VoiceMessage/PlaybackSpeedButton.swift
+++ b/ElementX/Sources/Other/VoiceMessage/PlaybackSpeedButton.swift
@@ -0,0 +1,53 @@
+//
+// Copyright 2025 Element Creations Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+import SwiftUI
+
+struct PlaybackSpeedButton: View {
+    let speed: Float
+    let onTap: () -> Void
+
+    var body: some View {
+        Button(action: onTap) {
+            ZStack {
+                Text("0.0x")
+                    .font(.compound.bodyXSSemibold)
+                    .hidden()
+
+                Text(speedLabel)
+                    .font(.compound.bodyXSSemibold)
+                    .foregroundColor(.compound.iconSecondary)
+            }
+            .padding(.horizontal, 8)
+            .padding(.vertical, 2)
+            .background(.compound.bgCanvasDefault, in: RoundedRectangle(cornerRadius: 12))
+        }
+        .buttonStyle(.plain)
+        .accessibilityLabel(UntranslatedL10n.a11yPlaybackSpeed(speedLabel))
+    }
+
+    private var speedLabel: String {
+        if speed == Float(Int(speed)) {
+            "\(Int(speed))x"
+        } else {
+            String(format: "%gx", speed)
+        }
+    }
+}
+
+struct PlaybackSpeedButton_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        HStack(spacing: 8) {
+            PlaybackSpeedButton(speed: 0.5) { }
+            PlaybackSpeedButton(speed: 1.0) { }
+            PlaybackSpeedButton(speed: 1.5) { }
+            PlaybackSpeedButton(speed: 2.0) { }
+        }
+        .padding()
+        .background(Color.gray)
+    }
+}
--- a/ElementX/Sources/Other/VoiceMessage/WaveformInteractionModifier.swift
+++ b/ElementX/Sources/Other/VoiceMessage/WaveformInteractionModifier.swift
@@ -41,6 +41,7 @@ private struct WaveformInteractionModifier: ViewModifier {
                                onSeek(max(0, min(progress, 1.0)))
                            })
                        .offset(x: -cursorInteractiveSize / 2, y: 0)
+                        .allowsHitTesting(showCursor)
                }
                .gesture(SpatialTapGesture()
                    .onEnded { tapGesture in
--- a/ElementX/Sources/Screens/Timeline/TimelineInteractionHandler.swift
+++ b/ElementX/Sources/Screens/Timeline/TimelineInteractionHandler.swift
@@ -417,7 +417,21 @@ class TimelineInteractionHandler {
    }
    
    // MARK: Audio Playback
-    
+
+    func changePlaybackSpeed(for itemID: TimelineItemIdentifier) {
+        let availableSpeeds = VoiceMessagePlaybackSpeed.allCases
+        guard let currentIndex = availableSpeeds.firstIndex(of: appSettings.voiceMessagePlaybackSpeed) else {
+            appSettings.voiceMessagePlaybackSpeed = .default
+            audioPlayerState(for: itemID)?.setPlaybackSpeed(VoiceMessagePlaybackSpeed.default.rawValue)
+            return
+        }
+
+        let nextIndex = (currentIndex + 1) % availableSpeeds.count
+        let nextSpeed = availableSpeeds[nextIndex]
+        appSettings.voiceMessagePlaybackSpeed = nextSpeed
+        audioPlayerState(for: itemID)?.setPlaybackSpeed(nextSpeed.rawValue)
+    }
+
    func playPauseAudio(for itemID: TimelineItemIdentifier) async {
        MXLog.info("Toggle play/pause audio for itemID \(itemID)")
        guard let timelineItem = timelineController.timelineItems.firstUsingStableID(itemID) else {
@@ -447,6 +461,7 @@ class TimelineInteractionHandler {
        // Ensure this one is attached
        if !audioPlayerState.isAttached {
            audioPlayerState.attachAudioPlayer(audioPlayer)
+            audioPlayerState.setPlaybackSpeed(appSettings.voiceMessagePlaybackSpeed.rawValue)
        }

        // Detach all other states
--- a/ElementX/Sources/Screens/Timeline/TimelineModels.swift
+++ b/ElementX/Sources/Screens/Timeline/TimelineModels.swift
@@ -42,6 +42,7 @@ enum TimelineViewPollAction {
 enum TimelineAudioPlayerAction {
    case playPause(itemID: TimelineItemIdentifier)
    case seek(itemID: TimelineItemIdentifier, progress: Double)
+    case changePlaybackSpeed(itemID: TimelineItemIdentifier)
 }

 enum TimelineViewAction {
@@ -114,6 +115,7 @@ struct TimelineViewState: BindableState {
    var isViewSourceEnabled: Bool
    var areThreadsEnabled: Bool
    var linkPreviewsEnabled: Bool
+    var voiceMessagePlaybackSpeed = VoiceMessagePlaybackSpeed.default.rawValue
    
    let hasPredecessor: Bool
        
--- a/ElementX/Sources/Screens/Timeline/TimelineViewModel.swift
+++ b/ElementX/Sources/Screens/Timeline/TimelineViewModel.swift
@@ -102,6 +102,7 @@ class TimelineViewModel: TimelineViewModelType, TimelineViewModelProtocol {
                                                       isViewSourceEnabled: appSettings.viewSourceEnabled,
                                                       areThreadsEnabled: appSettings.threadsEnabled,
                                                       linkPreviewsEnabled: appSettings.linkPreviewsEnabled,
+                                                       voiceMessagePlaybackSpeed: appSettings.voiceMessagePlaybackSpeed.rawValue,
                                                       hasPredecessor: roomProxy.predecessorRoom != nil,
                                                       pinnedEventIDs: roomProxy.infoPublisher.value.pinnedEventIDs,
                                                       emojiProvider: emojiProvider,
@@ -370,6 +371,8 @@ class TimelineViewModel: TimelineViewModelType, TimelineViewModelProtocol {
            Task { await timelineInteractionHandler.playPauseAudio(for: itemID) }
        case .seek(let itemID, let progress):
            Task { await timelineInteractionHandler.seekAudio(for: itemID, progress: progress) }
+        case .changePlaybackSpeed(let itemID):
+            timelineInteractionHandler.changePlaybackSpeed(for: itemID)
        }
    }
    
@@ -540,6 +543,11 @@ class TimelineViewModel: TimelineViewModelType, TimelineViewModelProtocol {
        appSettings.$threadsEnabled
            .weakAssign(to: \.state.areThreadsEnabled, on: self)
            .store(in: &cancellables)
+
+        appSettings.$voiceMessagePlaybackSpeed
+            .map(\.rawValue)
+            .weakAssign(to: \.state.voiceMessagePlaybackSpeed, on: self)
+            .store(in: &cancellables)
        
        userSession.clientProxy.timelineMediaVisibilityPublisher
            .removeDuplicates()
--- a/ElementX/Sources/Screens/Timeline/View/TimelineItemViews/VoiceMessageRoomTimelineView.swift
+++ b/ElementX/Sources/Screens/Timeline/View/TimelineItemViews/VoiceMessageRoomTimelineView.swift
@@ -23,7 +23,7 @@ struct VoiceMessageRoomTimelineView: View {
 }

 struct VoiceMessageRoomTimelineContent: View {
-    @Environment(\.timelineContext) private var context
+    @EnvironmentObject private var context: TimelineViewModel.Context
    @State private var resumePlaybackAfterScrubbing = false
    
    let timelineItem: VoiceMessageRoomTimelineItem
@@ -33,27 +33,33 @@ struct VoiceMessageRoomTimelineContent: View {
        VoiceMessageRoomPlaybackView(playerState: playerState,
                                     onPlayPause: onPlaybackPlayPause,
                                     onSeek: { onPlaybackSeek($0) },
-                                     onScrubbing: { onPlaybackScrubbing($0) })
+                                     onScrubbing: { onPlaybackScrubbing($0) },
+                                     playbackSpeed: context.viewState.voiceMessagePlaybackSpeed,
+                                     onPlaybackSpeedChange: onPlaybackSpeedChange)
            .fixedSize(horizontal: false, vertical: true)
    }
-    
+
    private func onPlaybackPlayPause() {
-        context?.send(viewAction: .handleAudioPlayerAction(.playPause(itemID: timelineItem.id)))
+        context.send(viewAction: .handleAudioPlayerAction(.playPause(itemID: timelineItem.id)))
+    }
+
+    private func onPlaybackSpeedChange() {
+        context.send(viewAction: .handleAudioPlayerAction(.changePlaybackSpeed(itemID: timelineItem.id)))
    }
    
    private func onPlaybackSeek(_ progress: Double) {
-        context?.send(viewAction: .handleAudioPlayerAction(.seek(itemID: timelineItem.id, progress: progress)))
+        context.send(viewAction: .handleAudioPlayerAction(.seek(itemID: timelineItem.id, progress: progress)))
    }
    
    private func onPlaybackScrubbing(_ dragging: Bool) {
        if dragging {
            if playerState.playbackState == .playing {
                resumePlaybackAfterScrubbing = true
-                context?.send(viewAction: .handleAudioPlayerAction(.playPause(itemID: timelineItem.id)))
+                context.send(viewAction: .handleAudioPlayerAction(.playPause(itemID: timelineItem.id)))
            }
        } else {
            if resumePlaybackAfterScrubbing {
-                context?.send(viewAction: .handleAudioPlayerAction(.playPause(itemID: timelineItem.id)))
+                context.send(viewAction: .handleAudioPlayerAction(.playPause(itemID: timelineItem.id)))
                resumePlaybackAfterScrubbing = false
            }
        }
--- a/ElementX/Sources/Screens/Timeline/View/VoiceMessageRoomPlaybackView.swift
+++ b/ElementX/Sources/Screens/Timeline/View/VoiceMessageRoomPlaybackView.swift
@@ -19,18 +19,23 @@ struct VoiceMessageRoomPlaybackView: View {
    let onPlayPause: () -> Void
    let onSeek: (Double) -> Void
    let onScrubbing: (Bool) -> Void
-    
+    let playbackSpeed: Float
+    let onPlaybackSpeedChange: () -> Void
+
    var body: some View {
        HStack(spacing: 8) {
            VoiceMessageButton(state: .init(playerState.playerButtonPlaybackState),
                               size: .medium,
                               action: onPlayPause)
-            Text(timeLabelContent)
-                .lineLimit(1)
-                .font(.compound.bodySMSemibold)
-                .foregroundColor(.compound.textSecondary)
-                .monospacedDigit()
-                .fixedSize(horizontal: true, vertical: true)
+            VStack(spacing: 2) {
+                PlaybackSpeedButton(speed: playbackSpeed, onTap: onPlaybackSpeedChange)
+                Text(timeLabelContent)
+                    .lineLimit(1)
+                    .font(.compound.bodyXSSemibold)
+                    .foregroundColor(.compound.textSecondary)
+                    .monospacedDigit()
+                    .fixedSize(horizontal: true, vertical: true)
+            }

            waveformView
                .waveformInteraction(isDragging: $isDragging,
@@ -129,7 +134,9 @@ struct VoiceMessageRoomPlaybackView_Previews: PreviewProvider, TestablePreview {
        VoiceMessageRoomPlaybackView(playerState: playerState,
                                     onPlayPause: { },
                                     onSeek: { value in Task { await playerState.updateState(progress: value) } },
-                                     onScrubbing: { _ in })
+                                     onScrubbing: { _ in },
+                                     playbackSpeed: playerState.playbackSpeed,
+                                     onPlaybackSpeedChange: { })
            .fixedSize(horizontal: false, vertical: true)
    }
 }
--- a/ElementX/Sources/Services/Audio/Player/AudioPlayer.swift
+++ b/ElementX/Sources/Services/Audio/Player/AudioPlayer.swift
@@ -48,7 +48,8 @@ class AudioPlayer: NSObject, AudioPlayerProtocol {
    private let releaseAudioSessionTimeoutInterval = 5.0
    
    private(set) var playbackURL: URL?
-    
+    private(set) var playbackSpeed: Float = 1.0
+
    private var deinitInProgress = false
    
    var duration: TimeInterval {
@@ -106,7 +107,7 @@ class AudioPlayer: NSObject, AudioPlayerProtocol {
    func play() {
        isStopped = false
        setupAudioSession()
-        internalAudioPlayer?.play()
+        internalAudioPlayer?.rate = playbackSpeed
    }
    
    func pause() {
@@ -128,7 +129,14 @@ class AudioPlayer: NSObject, AudioPlayerProtocol {
        let time = progress * duration
        await internalAudioPlayer.seek(to: CMTime(seconds: time, preferredTimescale: 60))
    }
-    
+
+    func setPlaybackSpeed(_ speed: Float) {
+        playbackSpeed = speed
+        if state == .playing {
+            internalAudioPlayer?.rate = speed
+        }
+    }
+
    // MARK: - Private
    
    private func setupAudioSession() {
--- a/ElementX/Sources/Services/Audio/Player/AudioPlayerProtocol.swift
+++ b/ElementX/Sources/Services/Audio/Player/AudioPlayerProtocol.swift
@@ -40,15 +40,17 @@ protocol AudioPlayerProtocol: AnyObject {
    var currentTime: TimeInterval { get }
    var playbackURL: URL? { get }
    var state: MediaPlayerState { get }
-    
+    var playbackSpeed: Float { get }
+
    var actions: AnyPublisher<AudioPlayerAction, Never> { get }
-    
+
    func load(sourceURL: URL, playbackURL: URL, autoplay: Bool)
    func reset()
    func play()
    func pause()
    func stop()
    func seek(to progress: Double) async
+    func setPlaybackSpeed(_ speed: Float)
 }

 // sourcery: AutoMockable
--- a/ElementX/Sources/Services/Audio/Player/AudioPlayerState.swift
+++ b/ElementX/Sources/Services/Audio/Player/AudioPlayerState.swift
@@ -36,6 +36,7 @@ class AudioPlayerState: ObservableObject, Identifiable {
    /// It's similar to `playbackState`, with the a difference: `.loading`
    /// updates are delayed by a fixed amount of time
    @Published private(set) var playerButtonPlaybackState: AudioPlayerPlaybackState
+    @Published private(set) var playbackSpeed: Float = 1.0

    private weak var audioPlayer: AudioPlayerProtocol?
    private var audioPlayerSubscription: AnyCancellable?
@@ -110,7 +111,12 @@ class AudioPlayerState: ObservableObject, Identifiable {
    func reportError() {
        playbackState = .error
    }
-    
+
+    func setPlaybackSpeed(_ speed: Float) {
+        playbackSpeed = speed
+        audioPlayer?.setPlaybackSpeed(speed)
+    }
+
    // MARK: - Private
    
    private func subscribeToAudioPlayer(audioPlayer: AudioPlayerProtocol) {