Async voice messages (#415)

Author: martinmitrevski

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

@@ -20,6 +20,8 @@ public struct MessageComposerView<Factory: ViewFactory>: View, KeyboardReadable
     private var channelConfig: ChannelConfig?
     @Binding var quotedMessage: ChatMessage?
     @Binding var editedMessage: ChatMessage?
+    
+    private let recordingViewHeight: CGFloat = 80
 
     public init(
         viewFactory: Factory,
@@ -81,6 +83,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 +105,33 @@ 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
+                        )
+                        .frame(height: 60)
+                    } else if viewModel.recordingState == .locked || viewModel.recordingState == .stopped {
+                        factory.makeComposerRecordingLockedView(viewModel: viewModel)
+                            .frame(height: recordingViewHeight)
+                    } else if viewModel.recordingState == .showingTip {
+                        factory.makeComposerRecordingTipView()
+                            .offset(y: -composerHeight + 12)
+                    } else {
+                        EmptyView()
+                    }
+                }
+            )
+            .frame(height: viewModel.recordingState.showsComposer ? nil : recordingViewHeight)
 
             if viewModel.sendInChannelShown {
                 factory.makeSendInChannelView(
@@ -194,6 +219,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 +319,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()
+    }
+}