Add voice message rendering to the timeline (#1776)

2026-11-03 16:10:20 +00:00 · 2023-09-21 16:36:21 +02:00
parent eba3e25373
commit b8e5611c00
31 changed files with 660 additions and 20 deletions
@@ -40,6 +40,7 @@ final class AppSettings {
        case readReceiptsEnabled
        case hasShownWelcomeScreen
        case swiftUITimelineEnabled
+        case voiceMessageEnabled
    }
    
    private static var suiteName: String = InfoPlistReader.main.appGroupIdentifier
@@ -244,4 +245,7 @@ final class AppSettings {
    
    @UserPreference(key: UserDefaultsKeys.swiftUITimelineEnabled, defaultValue: false, storageType: .volatile)
    var swiftUITimelineEnabled
+    
+    @UserPreference(key: UserDefaultsKeys.voiceMessageEnabled, defaultValue: false, storageType: .userDefaults(store))
+    var voiceMessageEnabled
 }
@@ -312,7 +312,8 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
        let timelineItemFactory = RoomTimelineItemFactory(userID: userID,
                                                          mediaProvider: userSession.mediaProvider,
                                                          attributedStringBuilder: AttributedStringBuilder(permalinkBaseURL: appSettings.permalinkBaseURL),
-                                                          stateEventStringBuilder: RoomStateEventStringBuilder(userID: userID))
+                                                          stateEventStringBuilder: RoomStateEventStringBuilder(userID: userID),
+                                                          appSettings: appSettings)
        
        let timelineController = roomTimelineControllerFactory.buildRoomTimelineController(roomProxy: roomProxy,
                                                                                           timelineItemFactory: timelineItemFactory,
@@ -181,7 +181,7 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
    static let viewModel = RoomScreenViewModel.mock
    
    static let replyTypes: [TimelineItemReplyDetails] = [
-        .loaded(sender: .init(id: "Dave"), contentType: .audio(.init(body: "Audio: Ride the lightning", duration: 100, source: nil, contentType: nil))),
+        .loaded(sender: .init(id: "Dave"), contentType: .audio(.init(body: "Audio: Ride the lightning", duration: 100, waveform: nil, source: nil, contentType: nil))),
        .loaded(sender: .init(id: "James"), contentType: .emote(.init(body: "Emote: James thinks he's the phantom lord"))),
        .loaded(sender: .init(id: "Robert"), contentType: .file(.init(body: "File: Crash course in brain surgery.pdf", source: nil, thumbnailSource: nil, contentType: nil))),
        .loaded(sender: .init(id: "Cliff"), contentType: .image(.init(body: "Image: Pushead",
@@ -75,6 +75,11 @@ enum RoomScreenViewAction {
    case cancelSend(itemID: TimelineItemIdentifier)
    
    case scrolledToBottom
+    
+    case enableLongPress(itemID: TimelineItemIdentifier)
+    case disableLongPress(itemID: TimelineItemIdentifier)
+    case playPauseAudio(itemID: TimelineItemIdentifier)
+    case seekAudio(itemID: TimelineItemIdentifier, progress: Double)
 }

 enum RoomScreenComposerAction {
@@ -95,11 +100,15 @@ struct RoomScreenViewState: BindableState {
    var isEncryptedOneToOneRoom = false
    var timelineViewState = TimelineViewState() // check the doc before changing this
    var swiftUITimelineEnabled = false
+    var longPressDisabledItemID: TimelineItemIdentifier?

    var bindings: RoomScreenViewStateBindings
    
    /// A closure providing the actions to show when long pressing on an item in the timeline.
    var timelineItemMenuActionProvider: (@MainActor (_ itemId: TimelineItemIdentifier) -> TimelineItemMenuActions?)?
+    
+    /// A closure providing the associated audio playback view state for an item in the timeline.
+    var audioPlaybackViewStateProvider: (@MainActor (_ itemId: TimelineItemIdentifier) -> VoiceRoomPlaybackViewState?)?
 }

 struct RoomScreenViewStateBindings {
@@ -76,6 +76,12 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            return self.timelineItemMenuActionsForItemId(itemId)
        }

+        state.audioPlaybackViewStateProvider = { [weak self] itemId -> VoiceRoomPlaybackViewState? in
+            guard let self else { return nil }
+            
+            return self.audioPlaybackViewState(for: itemId)
+        }
+        
        buildTimelineViews()

        // Note: beware if we get to e.g. restore a reply / edit,
@@ -139,6 +145,15 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
        case let .selectedPollOption(pollStartID, optionID):
            sendPollResponse(pollStartID: pollStartID, optionID: optionID)
+        case .playPauseAudio(let itemID):
+            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
        }
    }

@@ -845,6 +860,12 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
        }
    }
+    
+    // MARK: - Audio
+    
+    private func audioPlaybackViewState(for itemID: TimelineItemIdentifier) -> VoiceRoomPlaybackViewState? {
+        timelineController.playbackViewState(for: itemID)
+    }
 }

 private extension RoomProxyProtocol {
@@ -30,7 +30,7 @@ struct TimelineReplyView: View {
            switch timelineItemReplyDetails {
            case .loaded(let sender, let content):
                switch content {
-                case .audio(let content):
+                case .audio(let content), .voice(let content):
                    ReplyView(sender: sender,
                              plainBody: content.body,
                              formattedBody: nil,
@@ -204,6 +204,7 @@ struct TimelineReplyView_Previews: PreviewProvider, TestablePreview {
                              timelineItemReplyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
                                                                contentType: .audio(.init(body: "Some audio",
                                                                                          duration: 0,
+                                                                                          waveform: nil,
                                                                                          source: nil,
                                                                                          contentType: nil))))
            
@@ -18,6 +18,7 @@ import SwiftUI

 struct LongPressWithFeedback: ViewModifier {
    let action: () -> Void
+    let disabled: () -> Bool
    
    @State private var triggerTask: Task<Void, Never>?
    @State private var isLongPressing = false
@@ -48,7 +49,9 @@ struct LongPressWithFeedback: ViewModifier {
                    try? await Task.sleep(for: .seconds(0.35))
                    
                    if Task.isCancelled { return }
-                    
+
+                    guard !disabled() else { return }
+
                    action()
                    feedbackGenerator.impactOccurred()
                }
@@ -57,8 +60,8 @@ struct LongPressWithFeedback: ViewModifier {
 }

 extension View {
-    func longPressWithFeedback(action: @escaping () -> Void) -> some View {
-        modifier(LongPressWithFeedback(action: action))
+    func longPressWithFeedback(disabled: @escaping @autoclosure () -> Bool = false, action: @escaping () -> Void) -> some View {
+        modifier(LongPressWithFeedback(action: action, disabled: disabled))
    }
 }

@@ -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 {
+            .longPressWithFeedback(disabled: context.viewState.longPressDisabledItemID == timelineItem.id) {
                context.send(viewAction: .timelineItemMenu(itemID: timelineItem.id))
            }
            .swipeRightAction {
@@ -435,10 +435,12 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider, TestablePreview
                                                      sender: .init(id: ""),
                                                      content: .init(body: "audio.ogg",
                                                                     duration: 100,
+                                                                     waveform: Waveform.mockWaveform,
                                                                     source: nil,
                                                                     contentType: nil),
                                                      replyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
                                                                            contentType: .text(.init(body: "Short")))))
+            
            FileRoomTimelineView(timelineItem: .init(id: .init(timelineID: ""),
                                                     timestamp: "10:42",
                                                     isOutgoing: false,
@@ -482,6 +484,21 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider, TestablePreview
                                                                        geoURI: .init(latitude: 41.902782, longitude: 12.496366), description: nil),
                                                         replyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
                                                                               contentType: .text(.init(body: "Short")))))
+            
+            VoiceRoomTimelineView(timelineItem: .init(id: .init(timelineID: ""),
+                                                      timestamp: "10:42",
+                                                      isOutgoing: true,
+                                                      isEditable: false,
+                                                      isThreaded: true,
+                                                      sender: .init(id: ""),
+                                                      content: .init(body: "audio.ogg",
+                                                                     duration: 100,
+                                                                     waveform: Waveform.mockWaveform,
+                                                                     source: nil,
+                                                                     contentType: nil),
+                                                      replyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
+                                                                            contentType: .text(.init(body: "Short")))),
+                                  playbackViewState: VoiceRoomPlaybackViewState(duration: 10, waveform: Waveform.mockWaveform))
        }
        .environmentObject(viewModel.context)
    }
@@ -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 {
+        .longPressWithFeedback(disabled: context.viewState.longPressDisabledItemID == timelineItem.id) {
            context.send(viewAction: .timelineItemMenu(itemID: timelineItem.id))
        }
        .swipeRightAction {
@@ -164,6 +164,7 @@ struct TimelineItemPlainStylerView_Previews: PreviewProvider, TestablePreview {
                                                      sender: .init(id: ""),
                                                      content: .init(body: "audio.ogg",
                                                                     duration: 100,
+                                                                     waveform: nil,
                                                                     source: nil,
                                                                     contentType: nil),
                                                      replyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
@@ -211,6 +212,20 @@ struct TimelineItemPlainStylerView_Previews: PreviewProvider, TestablePreview {
                                                                        geoURI: .init(latitude: 41.902782, longitude: 12.496366), description: nil),
                                                         replyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
                                                                               contentType: .text(.init(body: "Short")))))
+            VoiceRoomTimelineView(timelineItem: .init(id: .init(timelineID: ""),
+                                                      timestamp: "10:42",
+                                                      isOutgoing: true,
+                                                      isEditable: false,
+                                                      isThreaded: true,
+                                                      sender: .init(id: ""),
+                                                      content: .init(body: "audio.ogg",
+                                                                     duration: 100,
+                                                                     waveform: Waveform.mockWaveform,
+                                                                     source: nil,
+                                                                     contentType: nil),
+                                                      replyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
+                                                                            contentType: .text(.init(body: "Short")))),
+                                  playbackViewState: VoiceRoomPlaybackViewState(duration: 10, waveform: Waveform.mockWaveform))
        }
        .environmentObject(viewModel.context)
    }
@@ -24,6 +24,7 @@ struct SwipeRightAction<Label: View>: ViewModifier {
    private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy)
    
    @State private var canStartAction = false
+    @State private var animate = false
    @GestureState private var dragGestureActive = false
    
    @State private var hasReachedActionThreshold = false
@@ -39,7 +40,7 @@ struct SwipeRightAction<Label: View>: ViewModifier {
    func body(content: Content) -> some View {
        content
            .offset(x: xOffset, y: 0.0)
-            .animation(.interactiveSpring().speed(0.5), value: xOffset)
+            .animation(.interactiveSpring().speed(0.5), value: animate)
            .gesture(DragGesture()
                .updating($dragGestureActive) { _, state, _ in
                    // Available actions should be computed on the fly so we use a gesture state change
@@ -68,6 +69,7 @@ struct SwipeRightAction<Label: View>: ViewModifier {
                    } else {
                        hasReachedActionThreshold = false
                    }
+                    animate = true
                }
                .onEnded { _ in
                    if xOffset > actionThreshold {
@@ -75,6 +77,7 @@ struct SwipeRightAction<Label: View>: ViewModifier {
                    }
                    
                    xOffset = 0.0
+                    animate = false
                }
            )
            .onChange(of: dragGestureActive, perform: { value in
@@ -52,6 +52,6 @@ struct AudioRoomTimelineView_Previews: PreviewProvider, TestablePreview {
                                                                  isEditable: false,
                                                                  isThreaded: false,
                                                                  sender: .init(id: "Bob"),
-                                                                  content: .init(body: "audio.ogg", duration: 300, source: nil, contentType: nil)))
+                                                                  content: .init(body: "audio.ogg", duration: 300, waveform: nil, source: nil, contentType: nil)))
    }
 }
@@ -49,6 +49,7 @@ protocol DeveloperOptionsProtocol: AnyObject {
    var userSuggestionsEnabled: Bool { get set }
    var readReceiptsEnabled: Bool { get set }
    var swiftUITimelineEnabled: Bool { get set }
+    var voiceMessageEnabled: Bool { get set }
 }

 extension AppSettings: DeveloperOptionsProtocol { }
@@ -52,6 +52,12 @@ struct DeveloperOptionsScreen: View {
                    Text("User suggestions")
                }
            }
+            
+            Section("Voice message") {
+                Toggle(isOn: $context.voiceMessageEnabled) {
+                    Text("Enable voice messages")
+                }
+            }

            Section {
                Button {
@@ -82,6 +82,16 @@ class MockRoomTimelineController: RoomTimelineControllerProtocol {
        
    func retryDecryption(for sessionID: String) async { }
    
+    func playbackViewState(for itemID: TimelineItemIdentifier) -> VoiceRoomPlaybackViewState? {
+        VoiceRoomPlaybackViewState(duration: 10.0,
+                                   waveform: nil,
+                                   progress: 0.0)
+    }
+    
+    func playPauseAudio(for itemID: TimelineItemIdentifier) async { }
+    
+    func seekAudio(for itemID: TimelineItemIdentifier, progress: Double) async { }
+    
    // MARK: - UI Test signalling
    
    /// The cancellable used for UI Tests signalling.
@@ -36,7 +36,8 @@ class RoomTimelineController: RoomTimelineControllerProtocol {
    let callbacks = PassthroughSubject<RoomTimelineControllerCallback, Never>()
    
    private(set) var timelineItems = [RoomTimelineItemProtocol]()
-    
+    private var timelineAudioPlaybackViewStates = [TimelineItemIdentifier: VoiceRoomPlaybackViewState]()
+
    var roomID: String {
        roomProxy.id
    }
@@ -220,6 +221,34 @@ class RoomTimelineController: RoomTimelineControllerProtocol {
    func retryDecryption(for sessionID: String) async {
        await roomProxy.retryDecryption(for: sessionID)
    }
+    
+    func playbackViewState(for itemID: TimelineItemIdentifier) -> VoiceRoomPlaybackViewState? {
+        guard let timelineItem = timelineItems.firstUsingStableID(itemID) else {
+            MXLog.error("timelineItem not found")
+            return .none
+        }
+        
+        switch timelineItem {
+        case let item as VoiceRoomTimelineItem:
+            if let playbackViewState = timelineAudioPlaybackViewStates[itemID] {
+                return playbackViewState
+            }
+            let playbackViewState = VoiceRoomPlaybackViewState(duration: item.content.duration,
+                                                               waveform: item.content.waveform)
+            timelineAudioPlaybackViewStates[itemID] = playbackViewState
+            return playbackViewState
+        default:
+            return .none
+        }
+    }
+    
+    func playPauseAudio(for itemID: TimelineItemIdentifier) async { }
+    
+    func seekAudio(for itemID: TimelineItemIdentifier, progress: Double) async {
+        Task {
+            timelineAudioPlaybackViewStates[itemID]?.updateState(progress: progress)
+        }
+    }

    // MARK: - Private
    
@@ -64,6 +64,12 @@ protocol RoomTimelineControllerProtocol {
    func debugInfo(for itemID: TimelineItemIdentifier) -> TimelineItemDebugInfo
    
    func retryDecryption(for sessionID: String) async
+    
+    func playbackViewState(for itemID: TimelineItemIdentifier) -> VoiceRoomPlaybackViewState?
+    
+    func playPauseAudio(for itemID: TimelineItemIdentifier) async
+    
+    func seekAudio(for itemID: TimelineItemIdentifier, progress: Double) async
 }

 extension RoomTimelineControllerProtocol {
@@ -25,6 +25,7 @@ enum EventBasedMessageTimelineItemContentType: Hashable {
    case text(TextRoomTimelineItemContent)
    case video(VideoRoomTimelineItemContent)
    case location(LocationRoomTimelineItemContent)
+    case voice(AudioRoomTimelineItemContent)
 }

 protocol EventBasedMessageTimelineItemProtocol: EventBasedTimelineItemProtocol {
@@ -20,6 +20,7 @@ import UniformTypeIdentifiers
 struct AudioRoomTimelineItemContent: Hashable {
    let body: String
    let duration: TimeInterval
+    let waveform: Waveform?
    let source: MediaSourceProxy?
    let contentType: UTType?
 }
@@ -0,0 +1,167 @@
+//
+// 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
+
+struct VoiceRoomPlaybackView: View {
+    @ObservedObject var playbackViewState: VoiceRoomPlaybackViewState
+
+    private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy)
+    @State private var sendFeedback = false
+    
+    private let waveformMaxWidth: CGFloat = 150
+    private let playPauseButtonSize = CGSize(width: 32, height: 32)
+    
+    private static let elapsedTimeFormatter: DateFormatter = {
+        let dateFormatter = DateFormatter()
+        dateFormatter.dateFormat = "m:ss"
+        return dateFormatter
+    }()
+    
+    var onPlayPause: () -> Void = { }
+    var onSeek: (Double) -> Void = { _ in }
+    var onWaveformDragStateChanged: (Bool) -> Void = { _ in }
+    
+    private enum DragState: Equatable {
+        case inactive
+        case pressing
+        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
+            }
+        }
+    }
+    
+    @GestureState private var dragState = DragState.inactive
+    
+    var timeLabelContent: String {
+        // Display the duration if progress is 0.0
+        let percent = playbackViewState.progress > 0.0 ? playbackViewState.progress : 1.0
+        return Self.elapsedTimeFormatter.string(from: Date(timeIntervalSinceReferenceDate: playbackViewState.duration * percent))
+    }
+    
+    var body: some View {
+        HStack {
+            HStack {
+                playPauseButton
+                Text(timeLabelContent)
+                    .font(.compound.bodySMSemibold)
+                    .foregroundColor(.compound.textSecondary)
+                    .monospacedDigit()
+            }
+            .padding(.vertical, 6)
+            GeometryReader { geometry in
+                WaveformView(waveform: playbackViewState.waveform, progress: playbackViewState.progress)
+                    // Add a gesture to drag the waveform
+                    .gesture(LongPressGesture()
+                        .sequenced(before: DragGesture(coordinateSpace: .local))
+                        .updating($dragState) { value, state, _ in
+                            switch value {
+                            // Long press begins.
+                            case .first(true):
+                                state = .pressing
+                            // Long press confirmed, dragging may begin.
+                            case .second(true, let drag):
+                                let progress: Double = (drag?.location.x ?? .zero) / geometry.size.width
+                                state = .dragging(progress: progress)
+                            // Dragging ended or the long press cancelled.
+                            default:
+                                state = .inactive
+                            }
+                        })
+            }
+            .frame(maxWidth: waveformMaxWidth)
+        }
+        .onChange(of: dragState) { newDragState in
+            switch newDragState {
+            case .inactive:
+                onWaveformDragStateChanged(false)
+            case .pressing:
+                onWaveformDragStateChanged(true)
+                feedbackGenerator.prepare()
+                sendFeedback = true
+            case .dragging(let progress):
+                if sendFeedback {
+                    feedbackGenerator.impactOccurred()
+                    sendFeedback = false
+                }
+                if abs(progress - playbackViewState.progress) > 0.01 {
+                    onSeek(max(0, min(progress, 1.0)))
+                }
+            }
+        }
+        .padding(.vertical, 2)
+        .padding(.horizontal, 8)
+    }
+    
+    @ViewBuilder
+    var playPauseButton: some View {
+        Button {
+            onPlayPause()
+        } label: {
+            Image(systemName: playbackViewState.playing ? "pause.fill" : "play.fill")
+                .foregroundColor(.compound.iconSecondary)
+                .background(
+                    Circle()
+                        .frame(width: playPauseButtonSize.width,
+                               height: playPauseButtonSize.height)
+                        .foregroundColor(.compound.bgCanvasDefault)
+                )
+                .padding(.trailing, 7)
+        }
+    }
+}
+
+struct VoiceRoomPlaybackView_Previews: PreviewProvider, TestablePreview {
+    static let waveform = Waveform(data: [3, 127, 400, 266, 126, 122, 373, 251, 45, 112,
+                                          334, 205, 99, 138, 397, 354, 125, 361, 199, 51,
+                                          294, 131, 19, 2, 3, 3, 1, 2, 0, 0,
+                                          0, 0, 0, 0, 0, 3])
+    
+    static let playbackViewState = VoiceRoomPlaybackViewState(duration: 10.0,
+                                                              waveform: waveform,
+                                                              progress: 0.3)
+    
+    static var previews: some View {
+        VoiceRoomPlaybackView(playbackViewState: playbackViewState,
+                              onPlayPause: { playbackViewState.updateState(playing: !playbackViewState.playing) },
+                              onSeek: { playbackViewState.updateState(progress: $0) })
+            .fixedSize(horizontal: false, vertical: true)
+    }
+}
@@ -0,0 +1,43 @@
+//
+// 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 Combine
+import Foundation
+
+@MainActor
+class VoiceRoomPlaybackViewState: ObservableObject {
+    let duration: Double
+    let waveform: Waveform
+    @Published private(set) var loading: Bool
+    @Published private(set) var playing: Bool
+    @Published private(set) var progress: Double
+        
+    init(duration: Double = 0.0, waveform: Waveform? = nil, progress: Double = 0.0) {
+        self.duration = duration
+        self.waveform = waveform ?? Waveform(data: [])
+        self.progress = progress
+        loading = false
+        playing = false
+    }
+    
+    func updateState(progress: Double) {
+        self.progress = max(0.0, min(progress, 1.0))
+    }
+    
+    func updateState(playing: Bool) {
+        self.playing = playing
+    }
+}
@@ -0,0 +1,92 @@
+//
+// 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 Foundation
+import SwiftUI
+
+struct VoiceRoomTimelineView: View {
+    @EnvironmentObject private var context: RoomScreenViewModel.Context
+    let timelineItem: VoiceRoomTimelineItem
+    let playbackViewState: VoiceRoomPlaybackViewState
+    
+    init(timelineItem: VoiceRoomTimelineItem, playbackViewState: VoiceRoomPlaybackViewState?) {
+        self.timelineItem = timelineItem
+        if playbackViewState == nil {
+            MXLog.error("[VoiceRoomTimelineView] Voice audio playback state is missing")
+        }
+        self.playbackViewState = playbackViewState ?? VoiceRoomPlaybackViewState()
+    }
+    
+    var body: some View {
+        TimelineStyler(timelineItem: timelineItem) {
+            VoiceRoomPlaybackView(playbackViewState: playbackViewState,
+                                  onPlayPause: onPlaybackPlayPause,
+                                  onSeek: onPlaybackSeek(_:),
+                                  onWaveformDragStateChanged: onPlaybackDragStateChanged(_:))
+                .fixedSize(horizontal: false, vertical: true)
+        }
+    }
+    
+    private func onPlaybackPlayPause() {
+        context.send(viewAction: .playPauseAudio(itemID: timelineItem.id))
+    }
+    
+    private func onPlaybackSeek(_ progress: Double) {
+        context.send(viewAction: .seekAudio(itemID: timelineItem.id, progress: progress))
+    }
+    
+    private func onPlaybackDragStateChanged(_ dragging: Bool) {
+        if dragging {
+            context.send(viewAction: .disableLongPress(itemID: timelineItem.id))
+        } else {
+            context.send(viewAction: .enableLongPress(itemID: timelineItem.id))
+        }
+    }
+}
+
+struct VoiceRoomTimelineView_Previews: PreviewProvider, TestablePreview {
+    static let viewModel = RoomScreenViewModel.mock
+
+    static let voiceRoomTimelineItem = VoiceRoomTimelineItem(id: .random,
+                                                             timestamp: "Now",
+                                                             isOutgoing: false,
+                                                             isEditable: false,
+                                                             isThreaded: false,
+                                                             sender: .init(id: "Bob"),
+                                                             content: .init(body: "audio.ogg",
+                                                                            duration: 300,
+                                                                            waveform: Waveform.mockWaveform,
+                                                                            source: nil,
+                                                                            contentType: nil))
+    
+    static let playbackViewState = VoiceRoomPlaybackViewState(duration: 10.0,
+                                                              waveform: Waveform.mockWaveform,
+                                                              progress: 0.4)
+    
+    static var previews: some View {
+        body.environmentObject(viewModel.context)
+            .previewDisplayName("Bubble")
+        body
+            .environment(\.timelineStyle, .plain)
+            .environmentObject(viewModel.context)
+            .previewDisplayName("Plain")
+    }
+    
+    static var body: some View {
+        VoiceRoomTimelineView(timelineItem: voiceRoomTimelineItem, playbackViewState: playbackViewState)
+            .fixedSize(horizontal: false, vertical: true)
+    }
+}
@@ -0,0 +1,88 @@
+//
+// 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
+
+struct Waveform: Equatable, Hashable {
+    let data: [UInt16]
+}
+
+extension Waveform {
+    func normalisedData(count: Int) -> [Float] {
+        guard count > 0 else {
+            return []
+        }
+        let stride = max(1, Int(data.count / count))
+        let data = data.striding(by: stride)
+        let max = data.max().flatMap { Float($0) } ?? 0
+        return data.map { Float($0) / max }
+    }
+}
+
+extension Waveform {
+    static let mockWaveform = Waveform(data: [0, 0, 0, 3, 3, 127, 400, 266, 126, 122, 373, 251, 45, 112,
+                                              334, 205, 99, 138, 397, 354, 125, 361, 199, 51,
+                                              294, 131, 19, 2, 3, 3, 1, 2, 0, 0,
+                                              0, 0])
+}
+
+struct WaveformView: View {
+    let lineWidth: CGFloat = 2
+    let linePadding: CGFloat = 2
+    var waveform: Waveform
+    let minimumGraphAmplitude: CGFloat = 1
+    var progress: CGFloat = 0.0
+    
+    var body: some View {
+        GeometryReader { geometry in
+            ZStack(alignment: .leading) {
+                Rectangle().fill(Color.compound.iconQuaternary)
+                    .frame(width: geometry.size.width, height: geometry.size.height)
+                Rectangle().fill(Color.compound.iconSecondary)
+                    .frame(width: max(0.0, geometry.size.width * progress), height: geometry.size.height)
+            }
+            .mask(alignment: .leading) {
+                Path { path in
+                    let width = geometry.size.width
+                    let height = geometry.size.height
+                    let centerY = geometry.size.height / 2
+                    let visibleSamplesCount = Int(width / (lineWidth + linePadding))
+                    let normalisedData = waveform.normalisedData(count: visibleSamplesCount)
+                    var xOffset: CGFloat = lineWidth / 2
+                    var index = 0
+                    
+                    while xOffset < width - lineWidth {
+                        let sample = CGFloat(index >= normalisedData.count ? 0 : normalisedData[index])
+                        let drawingAmplitude = max(minimumGraphAmplitude, sample * height)
+
+                        path.move(to: CGPoint(x: xOffset, y: centerY - drawingAmplitude / 2))
+                        path.addLine(to: CGPoint(x: xOffset, y: centerY + drawingAmplitude / 2))
+                        xOffset += lineWidth + linePadding
+                        index += 1
+                    }
+                }
+                .stroke(Color.compound.iconSecondary, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round))
+            }
+        }
+    }
+}
+
+struct WaveformView_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        WaveformView(waveform: Waveform.mockWaveform)
+            .frame(width: 140, height: 50)
+    }
+}
@@ -0,0 +1,40 @@
+//
+// 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 Foundation
+
+struct VoiceRoomTimelineItem: EventBasedMessageTimelineItemProtocol, Equatable {
+    let id: TimelineItemIdentifier
+    let timestamp: String
+    let isOutgoing: Bool
+    let isEditable: Bool
+    let isThreaded: Bool
+    let sender: TimelineItemSender
+    
+    let content: AudioRoomTimelineItemContent
+    
+    var replyDetails: TimelineItemReplyDetails?
+
+    var properties = RoomTimelineItemProperties()
+    
+    var body: String {
+        content.body
+    }
+    
+    var contentType: EventBasedMessageTimelineItemContentType {
+        .voice(content)
+    }
+}
@@ -22,6 +22,7 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
    private let mediaProvider: MediaProviderProtocol
    private let attributedStringBuilder: AttributedStringBuilderProtocol
    private let stateEventStringBuilder: RoomStateEventStringBuilder
+    private let appSettings: AppSettings
    
    /// The Matrix ID of the current user.
    private let userID: String
@@ -29,11 +30,13 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
    init(userID: String,
         mediaProvider: MediaProviderProtocol,
         attributedStringBuilder: AttributedStringBuilderProtocol,
-         stateEventStringBuilder: RoomStateEventStringBuilder) {
+         stateEventStringBuilder: RoomStateEventStringBuilder,
+         appSettings: AppSettings) {
        self.userID = userID
        self.mediaProvider = mediaProvider
        self.attributedStringBuilder = attributedStringBuilder
        self.stateEventStringBuilder = stateEventStringBuilder
+        self.appSettings = appSettings
    }
    
    func buildTimelineItem(for eventItemProxy: EventTimelineItemProxy) -> RoomTimelineItemProtocol? {
@@ -95,7 +98,11 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
        case .emote(content: let content):
            return buildEmoteTimelineItem(for: eventItemProxy, messageTimelineItem, content, isOutgoing, isThreaded)
        case .audio(let content):
-            return buildAudioTimelineItem(for: eventItemProxy, messageTimelineItem, content, isOutgoing, isThreaded)
+            if appSettings.voiceMessageEnabled, content.voice != nil {
+                return buildVoiceTimelineItem(for: eventItemProxy, messageTimelineItem, content, isOutgoing, isThreaded)
+            } else {
+                return buildAudioTimelineItem(for: eventItemProxy, messageTimelineItem, content, isOutgoing, isThreaded)
+            }
        case .location(let content):
            return buildLocationTimelineItem(for: eventItemProxy, messageTimelineItem, content, isOutgoing, isThreaded)
        case .none:
@@ -256,6 +263,25 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
                                                                     orderedReadReceipts: orderReadReceipts(eventItemProxy.readReceipts)))
    }
    
+    private func buildVoiceTimelineItem(for eventItemProxy: EventTimelineItemProxy,
+                                        _ messageTimelineItem: Message,
+                                        _ messageContent: AudioMessageContent,
+                                        _ isOutgoing: Bool,
+                                        _ isThreaded: Bool) -> RoomTimelineItemProtocol {
+        VoiceRoomTimelineItem(id: eventItemProxy.id,
+                              timestamp: eventItemProxy.timestamp.formatted(date: .omitted, time: .shortened),
+                              isOutgoing: isOutgoing,
+                              isEditable: eventItemProxy.isEditable,
+                              isThreaded: isThreaded,
+                              sender: eventItemProxy.sender,
+                              content: buildAudioTimelineItemContent(messageContent),
+                              replyDetails: buildReplyToDetailsFrom(details: messageTimelineItem.inReplyTo()),
+                              properties: RoomTimelineItemProperties(isEdited: messageTimelineItem.isEdited(),
+                                                                     reactions: aggregateReactions(eventItemProxy.reactions),
+                                                                     deliveryStatus: eventItemProxy.deliveryStatus,
+                                                                     orderedReadReceipts: orderReadReceipts(eventItemProxy.readReceipts)))
+    }
+    
    private func buildFileTimelineItem(for eventItemProxy: EventTimelineItemProxy,
                                       _ messageTimelineItem: Message,
                                       _ messageContent: FileMessageContent,
@@ -428,10 +454,16 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
    }
    
    private func buildAudioTimelineItemContent(_ messageContent: AudioMessageContent) -> AudioRoomTimelineItemContent {
-        AudioRoomTimelineItemContent(body: messageContent.body,
-                                     duration: messageContent.info?.duration ?? 0,
-                                     source: MediaSourceProxy(source: messageContent.source, mimeType: messageContent.info?.mimetype),
-                                     contentType: UTType(mimeType: messageContent.info?.mimetype, fallbackFilename: messageContent.body))
+        var waveform: Waveform?
+        if let audioWaveform = messageContent.audio?.waveform {
+            waveform = Waveform(data: audioWaveform)
+        }
+
+        return AudioRoomTimelineItemContent(body: messageContent.body,
+                                            duration: messageContent.info?.duration ?? 0,
+                                            waveform: waveform,
+                                            source: MediaSourceProxy(source: messageContent.source, mimeType: messageContent.info?.mimetype),
+                                            contentType: UTType(mimeType: messageContent.info?.mimetype, fallbackFilename: messageContent.body))
    }

    private func buildImageTimelineItemContent(_ messageContent: ImageMessageContent) -> ImageRoomTimelineItemContent {
@@ -583,7 +615,11 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
            let replyContent: EventBasedMessageTimelineItemContentType
            switch timelineItem.asMessage()?.msgtype() {
            case .audio(let content):
-                replyContent = .audio(buildAudioTimelineItemContent(content))
+                if appSettings.voiceMessageEnabled, content.voice != nil {
+                    replyContent = .voice(buildAudioTimelineItemContent(content))
+                } else {
+                    replyContent = .audio(buildAudioTimelineItemContent(content))
+                }
            case .emote(let content):
                replyContent = .emote(buildEmoteTimelineItemContent(senderDisplayName: sender.displayName, senderID: sender.id, messageContent: content))
            case .file(let content):
@@ -74,6 +74,8 @@ struct RoomTimelineItemView: View {
            LocationRoomTimelineView(timelineItem: item)
        case .poll(let item):
            PollRoomTimelineView(timelineItem: item)
+        case .voice(let item):
+            VoiceRoomTimelineView(timelineItem: item, playbackViewState: context.viewState.audioPlaybackViewStateProvider?(item.id))
        }
    }

@@ -69,6 +69,7 @@ enum RoomTimelineItemType: Equatable {
    case group(CollapsibleTimelineItem)
    case location(LocationRoomTimelineItem)
    case poll(PollRoomTimelineItem)
+    case voice(VoiceRoomTimelineItem)

    init(item: RoomTimelineItemProtocol) {
        switch item {
@@ -112,6 +113,8 @@ enum RoomTimelineItemType: Equatable {
            self = .location(item)
        case let item as PollRoomTimelineItem:
            self = .poll(item)
+        case let item as VoiceRoomTimelineItem:
+            self = .voice(item)
        default:
            fatalError("Unknown timeline item")
        }
@@ -138,7 +141,8 @@ enum RoomTimelineItemType: Equatable {
             .state(let item as RoomTimelineItemProtocol),
             .group(let item as RoomTimelineItemProtocol),
             .location(let item as RoomTimelineItemProtocol),
-             .poll(let item as RoomTimelineItemProtocol):
+             .poll(let item as RoomTimelineItemProtocol),
+             .voice(let item as RoomTimelineItemProtocol):
            return item.id
        }
    }
@@ -146,7 +150,7 @@ enum RoomTimelineItemType: Equatable {
    /// Whether or not it is possible to send a reaction to this timeline item.
    var isReactable: Bool {
        switch self {
-        case .text, .image, .video, .audio, .file, .emote, .notice, .sticker, .location, .poll:
+        case .text, .image, .video, .audio, .file, .emote, .notice, .sticker, .location, .poll, .voice:
            return true
        case .redacted, .encrypted, .unsupported, .state: // Event based items that aren't reactable
            return false