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.

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

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
         

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()

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
             }
         }

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)
     }
 }