Async voice messages

CHANGELOG.md

@@ -3,6 +3,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 # Upcoming
 
+### ✅ Added
+- Recording of async voice messages
+- Rendering and playing async voice messages
+
 ### 🔄 Changed
 
 # [4.45.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.45.0)

DemoAppSwiftUI/AppDelegate.swift

@@ -63,7 +63,8 @@ class AppDelegate: NSObject, UIApplicationDelegate {
         #endif
 
         let utils = Utils(
-            messageListConfig: MessageListConfig(dateIndicatorPlacement: .messageList)
+            messageListConfig: MessageListConfig(dateIndicatorPlacement: .messageList),
+            composerConfig: ComposerConfig(isVoiceRecordingEnabled: true)
         )
         streamChat = StreamChat(chatClient: chatClient, utils: utils)
 

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift

@@ -686,10 +686,18 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         scrolledId = messages.first?.messageId
     }
 
+    private func cleanupAudioPlayer() {
+        utils.audioPlayer.seek(to: 0)
+        utils.audioPlayer.updateRate(.normal)
+        utils.audioPlayer.stop()
+        utils._audioPlayer = nil
+    }
+
     deinit {
         messageCachingUtils.clearCache()
         if messageController == nil {
             utils.channelControllerFactory.clearCurrentController()
+            cleanupAudioPlayer()
             ImageCache.shared.trim(toCost: utils.messageListConfig.cacheSizeOnChatDismiss)
             if !channelDataSource.hasLoadedAllNextMessages {
                 channelDataSource.loadFirstPage { _ in }

Sources/StreamChatSwiftUI/ChatChannel/Composer/ComposerConfig.swift

@@ -8,6 +8,7 @@ import SwiftUI
 /// Config for customizing the composer.
 public struct ComposerConfig {
 
+    public var isVoiceRecordingEnabled: Bool
     public var inputViewMinHeight: CGFloat
     public var inputViewMaxHeight: CGFloat
     public var inputViewCornerRadius: CGFloat
@@ -19,6 +20,7 @@ public struct ComposerConfig {
     public var attachmentPayloadConverter: (ChatMessage) -> [AnyAttachmentPayload]
 
     public init(
+        isVoiceRecordingEnabled: Bool = false,
         inputViewMinHeight: CGFloat = 38,
         inputViewMaxHeight: CGFloat = 76,
         inputViewCornerRadius: CGFloat = 20,
@@ -39,6 +41,7 @@ public struct ComposerConfig {
         self.attachmentPayloadConverter = attachmentPayloadConverter
         self.gallerySupportedTypes = gallerySupportedTypes
         self.inputPaddingsConfig = inputPaddingsConfig
+        self.isVoiceRecordingEnabled = isVoiceRecordingEnabled
     }
 
     public static var defaultAttachmentPayloadConverter: (ChatMessage) -> [AnyAttachmentPayload] = { message in

Sources/StreamChatSwiftUI/ChatChannel/Composer/ComposerModels.swift

@@ -71,3 +71,17 @@ public struct CustomAttachment: Identifiable, Equatable {
         self.content = content
     }
 }
+
+/// Represents an added voice recording.
+public struct AddedVoiceRecording: Identifiable, Equatable {
+    public var id: String {
+        url.absoluteString
+    }
+
+    /// The URL of the recording.
+    public let url: URL
+    /// The duration of the recording.
+    public let duration: TimeInterval
+    /// The waveform of the recording.
+    public let waveform: [Float]
+}

Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerView.swift

@@ -81,6 +81,7 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
                     shouldScroll: viewModel.inputComposerShouldScroll,
                     removeAttachmentWithId: viewModel.removeAttachment(with:)
                 )
+                .environmentObject(viewModel)
                 .alert(isPresented: $viewModel.attachmentSizeExceeded) {
                     Alert(
                         title: Text(L10n.Attachment.MaxSize.title),
@@ -102,11 +103,32 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
                         onMessageSent()
                     }
                 }
+                .environmentObject(viewModel)
                 .alert(isPresented: $viewModel.errorShown) {
                     Alert.defaultErrorAlert
                 }
             }
             .padding(.all, 8)
+            .opacity(viewModel.recordingState.showsComposer ? 1 : 0)
+            .overlay(
+                ZStack {
+                    if case let .recording(location) = viewModel.recordingState {
+                        factory.makeComposerRecordingView(
+                            viewModel: viewModel,
+                            gestureLocation: location
+                        )
+                    } else if viewModel.recordingState == .locked || viewModel.recordingState == .stopped {
+                        factory.makeComposerRecordingLockedView(viewModel: viewModel)
+                            .frame(height: 80)
+                    } else if viewModel.recordingState == .showingTip {
+                        factory.makeComposerRecordingTipView()
+                            .offset(y: -composerHeight + 12)
+                    } else {
+                        EmptyView()
+                    }
+                }
+            )
+            .frame(height: viewModel.recordingState.showsComposer ? nil : 80)
 
             if viewModel.sendInChannelShown {
                 factory.makeSendInChannelView(
@@ -194,6 +216,8 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
 /// View for the composer's input (text and media).
 public struct ComposerInputView<Factory: ViewFactory>: View {
 
+    @EnvironmentObject var viewModel: MessageComposerViewModel
+
     @Injected(\.colors) private var colors
     @Injected(\.fonts) private var fonts
     @Injected(\.images) private var images
@@ -292,6 +316,15 @@ public struct ComposerInputView<Factory: ViewFactory>: View {
                 )
                 .padding(.trailing, 8)
             }
+
+            if !viewModel.addedVoiceRecordings.isEmpty {
+                AddedVoiceRecordingsView(
+                    addedVoiceRecordings: viewModel.addedVoiceRecordings,
+                    onDiscardAttachment: removeAttachmentWithId
+                )
+                .padding(.trailing, 8)
+                .padding(.top, 8)
+            }
 
             if !addedCustomAttachments.isEmpty {
                 factory.makeCustomAttachmentPreviewView(

Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerViewModel+Recording.swift

@@ -0,0 +1,128 @@
+//
+// Copyright © 2023 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import SwiftUI
+
+public struct AudioRecordingInfo: Equatable {
+    /// The waveform of the recording.
+    public var waveform: [Float]
+    /// The duration of the recording.
+    public var duration: TimeInterval
+
+    mutating func update(with entry: Float, duration: TimeInterval) {
+        waveform.append(entry)
+        self.duration = duration
+    }
+}
+
+extension AudioRecordingInfo {
+    static let initial = AudioRecordingInfo(waveform: [], duration: 0)
+}
+
+extension MessageComposerViewModel: AudioRecordingDelegate {
+    public func audioRecorder(
+        _ audioRecorder: AudioRecording,
+        didUpdateContext: AudioRecordingContext
+    ) {
+        audioRecordingInfo.update(
+            with: didUpdateContext.averagePower,
+            duration: didUpdateContext.duration
+        )
+    }
+
+    public func audioRecorder(
+        _ audioRecorder: AudioRecording,
+        didFinishRecordingAtURL location: URL
+    ) {
+        if audioRecordingInfo == .initial { return }
+        audioAnalysisFactory?.waveformVisualisation(
+            fromAudioURL: location,
+            for: waveformTargetSamples,
+            completionHandler: { [weak self] result in
+                guard let self else { return }
+                switch result {
+                case let .success(waveform):
+                    DispatchQueue.main.async {
+                        let recording = AddedVoiceRecording(
+                            url: location,
+                            duration: self.audioRecordingInfo.duration,
+                            waveform: waveform
+                        )
+                        if self.recordingState == .stopped {
+                            self.pendingAudioRecording = recording
+                            self.audioRecordingInfo.waveform = waveform
+                        } else {
+                            self.addedVoiceRecordings.append(recording)
+                            self.recordingState = .initial
+                            self.audioRecordingInfo = .initial
+                        }
+                    }
+                case let .failure(error):
+                    log.error(error)
+                    self.recordingState = .initial
+                }
+            }
+        )
+    }
+
+    public func audioRecorder(
+        _ audioRecorder: AudioRecording,
+        didFailWithError error: Error
+    ) {
+        log.error(error)
+        recordingState = .initial
+        audioRecordingInfo = .initial
+    }
+}
+
+extension MessageComposerViewModel {
+    public func startRecording() {
+        utils.audioSessionFeedbackGenerator.feedbackForBeginRecording()
+        audioRecorder.beginRecording {
+            log.debug("started recording")
+        }
+    }
+
+    public func stopRecording() {
+        utils.audioSessionFeedbackGenerator.feedbackForStopRecording()
+        audioRecorder.stopRecording()
+    }
+
+    public func resumeRecording() {
+        utils.audioSessionFeedbackGenerator.feedbackForBeginRecording()
+        audioRecorder.resumeRecording()
+    }
+
+    public func pauseRecording() {
+        utils.audioSessionFeedbackGenerator.feedbackForPause()
+        audioRecorder.pauseRecording()
+    }
+}
+
+extension MessageComposerViewModel {
+    public func discardRecording() {
+        recordingState = .initial
+        audioRecordingInfo = .initial
+        stopRecording()
+    }
+
+    public func confirmRecording() {
+        if recordingState == .stopped {
+            if let pending = pendingAudioRecording {
+                addedVoiceRecordings.append(pending)
+                pendingAudioRecording = nil
+                audioRecordingInfo = .initial
+                recordingState = .initial
+            }
+        } else {
+            stopRecording()
+        }
+    }
+
+    public func previewRecording() {
+        recordingState = .stopped
+        stopRecording()
+    }
+}

Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerViewModel.swift

@@ -10,7 +10,7 @@ import SwiftUI
 /// View model for the `MessageComposerView`.
 open class MessageComposerViewModel: ObservableObject {
     @Injected(\.chatClient) private var chatClient
-    @Injected(\.utils) private var utils
+    @Injected(\.utils) internal var utils
 
     @Published public var pickerState: AttachmentPickerState = .photos {
         didSet {
@@ -69,6 +69,12 @@ open class MessageComposerViewModel: ObservableObject {
             checkPickerSelectionState()
         }
     }
+
+    @Published public var addedVoiceRecordings = [AddedVoiceRecording]() {
+        didSet {
+            checkPickerSelectionState()
+        }
+    }
 
     @Published public var addedCustomAttachments = [CustomAttachment]() {
         didSet {
@@ -124,9 +130,40 @@ open class MessageComposerViewModel: ObservableObject {
     @Published public var suggestions = [String: Any]()
     @Published public var cooldownDuration: Int = 0
     @Published public var attachmentSizeExceeded: Bool = false
+    @Published public var recordingState: RecordingState = .initial {
+        didSet {
+            if case let .recording(location) = recordingState {
+                if location.y < RecordingConstants.lockMaxDistance {
+                    recordingState = .locked
+                } else if location.x < RecordingConstants.cancelMaxDistance {
+                    audioRecordingInfo = .initial
+                    recordingState = .initial
+                    stopRecording()
+                }
+            } else if recordingState == .showingTip {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) { [weak self] in
+                    self?.recordingState = .initial
+                }
+            }
+        }
+    }
+
+    @Published public var audioRecordingInfo = AudioRecordingInfo.initial
 
     public let channelController: ChatChannelController
     public var messageController: ChatMessageController?
+    public var waveformTargetSamples: Int = 100
+    public internal(set) var pendingAudioRecording: AddedVoiceRecording?
+
+    internal lazy var audioRecorder: AudioRecording = {
+        let audioRecorder = StreamAudioRecorder()
+        audioRecorder.subscribe(self)
+        return audioRecorder
+    }()
+
+    internal lazy var audioAnalysisFactory: AudioAnalysisEngine? = try? .init(
+        assetPropertiesLoader: StreamAssetPropertyLoader()
+    )
 
     private var timer: Timer?
     private var cooldownPeriod = 0
@@ -222,6 +259,17 @@ open class MessageComposerViewModel: ObservableObject {
                 _ = url.startAccessingSecurityScopedResource()
                 return try AnyAttachmentPayload(localFileURL: url, attachmentType: .file)
             }
+            attachments += try addedVoiceRecordings.map { recording in
+                _ = recording.url.startAccessingSecurityScopedResource()
+                var localMetadata = AnyAttachmentLocalMetadata()
+                localMetadata.duration = recording.duration
+                localMetadata.waveformData = recording.waveform
+                return try AnyAttachmentPayload(
+                    localFileURL: recording.url,
+                    attachmentType: .voiceRecording,
+                    localMetadata: localMetadata
+                )
+            }
 
             attachments += addedCustomAttachments.map { attachment in
                 attachment.content
@@ -282,7 +330,8 @@ open class MessageComposerViewModel: ObservableObject {
         return !addedAssets.isEmpty ||
             !text.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty ||
             !addedFileURLs.isEmpty ||
-            !addedCustomAttachments.isEmpty
+            !addedCustomAttachments.isEmpty ||
+            !addedVoiceRecordings.isEmpty
     }
 
     public var sendInChannelShown: Bool {
@@ -347,7 +396,17 @@ open class MessageComposerViewModel: ObservableObject {
                     urls.append(added)
                 }
             }
-            addedFileURLs = urls
+            if addedFileURLs.count == urls.count {
+                var addedRecordings = [AddedVoiceRecording]()
+                for added in addedVoiceRecordings {
+                    if added.url != url {
+                        addedRecordings.append(added)
+                    }
+                }
+                addedVoiceRecordings = addedRecordings
+            } else {
+                addedFileURLs = urls
+            }
         } else {
             var images = [AddedAsset]()
             for image in addedAssets {
@@ -511,6 +570,7 @@ open class MessageComposerViewModel: ObservableObject {
         text = ""
         addedAssets = []
         addedFileURLs = []
+        addedVoiceRecordings = []
         addedCustomAttachments = []
         composerCommand = nil
         mentionedUsers = Set<ChatUser>()