fix!: 🐛 Implement logic to manage voice message playback during recording and manage currently playing voice messages

Author: japanshah-simform

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 * **Fix**: [423](https://github.com/SimformSolutionsPvtLtd/chatview/pull/423)
   Rendering issue in attached image preview when sending message on web.
+* **Feat**: [420](https://github.com/SimformSolutionsPvtLtd/chatview/pull/420) Added support for
+  `playerMode` in `VoiceMessageConfiguration` with `single` and `multi`.
 
 ## [3.0.0]
 

doc/documentation.md

@@ -786,6 +786,19 @@ ChatView(
       },
       iconColor: Colors.black,
     ),
+    voiceMessageConfig: VoiceMessageConfiguration(
+      // Determines whether single or multi player mode is enabled for audio playback.
+      // Note: Defaults to multi-player mode.
+      //
+      // PlayerMode.single:
+      //   - Only one audio can be played at a time.
+      //   - Starting recording will stop any currently playing audio.
+      //
+      // PlayerMode.multi:
+      //   - Multiple audios can be played simultaneously.
+      //   - Starting recording will not affect any currently playing audio.
+      playerMode: PlayerMode.single,
+    )
   ),
   // ...
 )

lib/src/models/config_models/voice_message_configuration.dart

@@ -23,6 +23,7 @@
 import 'package:audio_waveforms/audio_waveforms.dart';
 import 'package:flutter/material.dart';
 
+import '../../values/enumeration.dart';
 import '../../values/typedefs.dart';
 
 /// A configuration model class for voice message bubble.
@@ -43,6 +44,7 @@ class VoiceMessageConfiguration {
     this.waveformMargin,
     this.waveformPadding,
     this.enableSeekGesture = true,
+    this.playerMode = PlayerMode.multi,
   });
 
   /// Applies style to waveform.
@@ -86,4 +88,16 @@ class VoiceMessageConfiguration {
 
   /// Enable/disable seeking with gestures. Enabled by default.
   final bool enableSeekGesture;
+
+  /// Determines whether single or multi player mode is enabled for audio playback.
+  /// Defaults to PlayerMode.multi.
+  ///
+  /// If PlayerMode.single:
+  ///   - Only one audio can be played at a time.
+  ///   - Note: Starting recording will stop any currently playing audio.
+  ///
+  /// If PlayerMode.multi:
+  ///   - Multiple audios can be played simultaneously.
+  ///   - Note: Starting recording will not affect any currently playing audio.
+  final PlayerMode playerMode;
 }

lib/src/values/enumeration.dart

@@ -125,3 +125,27 @@ enum UserActiveStatusAlignment {
 
   bool get isBottomRight => this == bottomRight;
 }
+
+/// Defines the audio player mode,
+/// controlling whether single or multiple audio files can be
+/// played simultaneously.
+enum PlayerMode {
+  /// Only one audio can be played at a time.
+  ///
+  /// Note: Starting recording will stop any currently playing audio.
+  single,
+
+  /// Multiple audios can be played simultaneously.
+  ///
+  /// Note: Starting recording will not affect any currently playing audio.
+  multi;
+}
+
+/// Extension methods for PlayerMode enum.
+extension PlayerModeExtension on PlayerMode {
+  /// Checks if the player mode is single.
+  bool get isSingle => this == PlayerMode.single;
+
+  /// Checks if the player mode is multi.
+  bool get isMulti => this == PlayerMode.multi;
+}

lib/src/widgets/chatui_textfield.dart

@@ -28,10 +28,12 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+import '../extensions/extensions.dart';
 import '../models/config_models/send_message_configuration.dart';
 import '../utils/constants/constants.dart';
 import '../utils/debounce.dart';
 import '../utils/package_strings.dart';
+import '../values/enumeration.dart';
 import '../values/typedefs.dart';
 import 'action_widgets/camera_action_button.dart';
 import 'action_widgets/gallery_action_button.dart';
@@ -76,6 +78,8 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
 
   RecorderController? controller;
 
+  final playerController = PlayerController();
+
   ValueNotifier<bool> isRecording = ValueNotifier(false);
 
   bool Function(KeyEvent)? _keyboardHandler;
@@ -137,6 +141,7 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
       HardwareKeyboard.instance.removeHandler(handler);
     }
     widget.textEditingController.removeListener(_listenTextEditingController);
+    playerController.dispose();
     super.dispose();
   }
 
@@ -426,6 +431,11 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
       'Voice messages are only supported with android and ios platform',
     );
     if (!isRecording.value) {
+      if (chatListConfig
+              .messageConfig?.voiceMessageConfig?.playerMode.isSingle ??
+          false) {
+        playerController.pauseAllPlayers();
+      }
       await controller?.record(
         recorderSettings: voiceRecordingConfig.recorderSettings,
       );

lib/src/widgets/voice_message_view.dart

@@ -30,6 +30,7 @@ import 'package:flutter/material.dart';
 import '../models/chat_bubble.dart';
 import '../models/config_models/message_reaction_configuration.dart';
 import '../models/config_models/voice_message_configuration.dart';
+import '../values/enumeration.dart';
 import 'reaction_widget.dart';
 
 class VoiceMessageView extends StatefulWidget {
@@ -192,6 +193,9 @@ class _VoiceMessageViewState extends State<VoiceMessageView> {
     if (playerState.isInitialised ||
         playerState.isPaused ||
         playerState.isStopped) {
+      if (widget.config?.playerMode.isSingle ?? false) {
+        controller.pauseAllPlayers();
+      }
       controller.startPlayer();
       controller.setFinishMode(finishMode: FinishMode.pause);
     } else {