feat: Background audio player

Signed-off-by: Christian Kußowski <c.kussowski@famedly.com>

lib/pages/chat/events/audio_player.dart

@@ -4,6 +4,7 @@ import 'dart:io';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
+import 'package:async/async.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:just_audio/just_audio.dart';
 import 'package:matrix/matrix.dart';
@@ -17,6 +18,7 @@ import 'package:fluffychat/utils/file_description.dart';
 import 'package:fluffychat/utils/localized_exception_extension.dart';
 import 'package:fluffychat/utils/url_launcher.dart';
 import '../../../utils/matrix_sdk_extensions/event_extension.dart';
+import '../../../widgets/matrix.dart';
 
 class AudioPlayerWidget extends StatefulWidget {
   final Color color;
@@ -24,8 +26,6 @@ class AudioPlayerWidget extends StatefulWidget {
   final double fontSize;
   final Event event;
 
-  static String? currentId;
-
   static const int wavesCount = 40;
 
   const AudioPlayerWidget(
@@ -43,48 +43,115 @@ class AudioPlayerWidget extends StatefulWidget {
 enum AudioPlayerStatus { notDownloaded, downloading, downloaded }
 
 class AudioPlayerState extends State<AudioPlayerWidget> {
+  static const double buttonSize = 36;
+
   AudioPlayerStatus status = AudioPlayerStatus.notDownloaded;
-  AudioPlayer? audioPlayer;
 
-  StreamSubscription? onAudioPositionChanged;
+  late final MatrixState matrix;
-  StreamSubscription? onDurationChanged;
+  late final List<int>? _waveform;
-  StreamSubscription? onPlayerStateChanged;
+  late final String? _durationString;
-  StreamSubscription? onPlayerError;
-
-  String? statusText;
-  double currentPosition = 0;
-  double maxPosition = 1;
-
-  MatrixFile? matrixFile;
-  File? audioFile;
 
   @override
   void dispose() {
-    if (audioPlayer?.playerState.playing == true) {
-      audioPlayer?.stop();
-    }
-    onAudioPositionChanged?.cancel();
-    onDurationChanged?.cancel();
-    onPlayerStateChanged?.cancel();
-    onPlayerError?.cancel();
-
     super.dispose();
-  }
+    final audioPlayer = matrix.voiceMessageEventId.value != widget.event.eventId
+        ? null
+        : matrix.audioPlayer;
+    if (audioPlayer != null) {
+      if (audioPlayer.playing && !audioPlayer.isAtEndPosition) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          ScaffoldMessenger.of(matrix.context).showMaterialBanner(
+            MaterialBanner(
+              padding: EdgeInsets.zero,
+              content: Row(
+                children: [
+                  StreamBuilder(
+                    stream: audioPlayer.playerStateStream.asBroadcastStream(),
+                    builder: (context, _) => IconButton(
+                      onPressed: () {
+                        if (audioPlayer.isAtEndPosition) {
+                          audioPlayer.seek(Duration.zero);
+                        } else if (audioPlayer.playing) {
+                          audioPlayer.pause();
+                        } else {
+                          audioPlayer.play();
+                        }
+                      },
+                      icon: audioPlayer.playing && !audioPlayer.isAtEndPosition
+                          ? const Icon(Icons.pause_outlined)
+                          : const Icon(Icons.play_arrow_outlined),
+                    ),
+                  ),
+                  Expanded(
+                    child: StreamBuilder(
+                      stream: audioPlayer.positionStream.asBroadcastStream(),
+                      builder: (context, _) {
+                        return Text(
+                          '🎙️ ${audioPlayer.position.minuteSecondString} / ${audioPlayer.duration?.minuteSecondString} - ${widget.event.senderFromMemoryOrFallback.calcDisplayname()}',
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        );
+                      },
+                    ),
+                  ),
+                ],
+              ),
+              actions: [
+                IconButton(
+                  onPressed: () {
+                    audioPlayer.pause();
+                    audioPlayer.dispose();
+                    matrix.voiceMessageEventId.value =
+                        matrix.audioPlayer = null;
 
-  void _startAction() {
+                    WidgetsBinding.instance.addPostFrameCallback((_) {
-    if (status == AudioPlayerStatus.downloaded) {
+                      ScaffoldMessenger.of(matrix.context)
-      _playAction();
+                          .clearMaterialBanners();
-    } else {
+                    });
-      _downloadAction();
+                  },
+                  icon: const Icon(Icons.close_outlined),
+                ),
+              ],
+            ),
+          );
+        });
+        return;
+      }
+      audioPlayer.pause();
+      audioPlayer.dispose();
+      matrix.voiceMessageEventId.value = matrix.audioPlayer = null;
     }
   }
 
-  Future<void> _downloadAction() async {
+  void _onButtonTap() async {
-    if (status != AudioPlayerStatus.notDownloaded) return;
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      ScaffoldMessenger.of(matrix.context).clearMaterialBanners();
+    });
+    final currentPlayer =
+        matrix.voiceMessageEventId.value != widget.event.eventId
+            ? null
+            : matrix.audioPlayer;
+    if (currentPlayer != null) {
+      if (currentPlayer.isAtEndPosition) {
+        currentPlayer.seek(Duration.zero);
+      } else if (currentPlayer.playing) {
+        currentPlayer.pause();
+      } else {
+        currentPlayer.play();
+      }
+      return;
+    }
+
+    matrix.voiceMessageEventId.value = widget.event.eventId;
+    matrix.audioPlayer
+      ?..stop()
+      ..dispose();
+    File? file;
+    MatrixFile? matrixFile;
+
     setState(() => status = AudioPlayerStatus.downloading);
     try {
-      final matrixFile = await widget.event.downloadAndDecryptAttachment();
+      matrixFile = await widget.event.downloadAndDecryptAttachment();
-      File? file;
 
       if (!kIsWeb) {
         final tempDir = await getTemporaryDirectory();
@@ -107,11 +174,8 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
       }
 
       setState(() {
-        audioFile = file;
-        this.matrixFile = matrixFile;
         status = AudioPlayerStatus.downloaded;
       });
-      _playAction();
     } catch (e, s) {
       Logs().v('Could not download audio file', e, s);
       ScaffoldMessenger.of(context).showSnackBar(
@@ -119,67 +183,47 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
           content: Text(e.toLocalizedString(context)),
         ),
       );
+      rethrow;
     }
-  }
+    if (!context.mounted) return;
+    if (matrix.voiceMessageEventId.value != widget.event.eventId) return;
 
-  void _playAction() async {
+    final audioPlayer = matrix.audioPlayer = AudioPlayer();
-    final audioPlayer = this.audioPlayer ??= AudioPlayer();
-    if (AudioPlayerWidget.currentId != widget.event.eventId) {
-      if (AudioPlayerWidget.currentId != null) {
-        if (audioPlayer.playerState.playing) {
-          await audioPlayer.stop();
-          setState(() {});
-        }
-      }
-      AudioPlayerWidget.currentId = widget.event.eventId;
-    }
-    if (audioPlayer.playerState.playing) {
-      await audioPlayer.pause();
-      return;
-    } else if (audioPlayer.position != Duration.zero) {
-      await audioPlayer.play();
-      return;
-    }
 
-    onAudioPositionChanged ??= audioPlayer.positionStream.listen((state) {
+    if (file != null) {
-      if (maxPosition <= 0) return;
+      audioPlayer.setFilePath(file.path);
-      setState(() {
-        statusText =
-            '${state.inMinutes.toString().padLeft(2, '0')}:${(state.inSeconds % 60).toString().padLeft(2, '0')}';
-        currentPosition = state.inMilliseconds.toDouble();
-      });
-      if (state.inMilliseconds.toDouble() == maxPosition) {
-        audioPlayer.stop();
-        audioPlayer.seek(null);
-      }
-    });
-    onDurationChanged ??= audioPlayer.durationStream.listen((max) {
-      if (max == null || max == Duration.zero) return;
-      setState(() => maxPosition = max.inMilliseconds.toDouble());
-    });
-    onPlayerStateChanged ??=
-        audioPlayer.playingStream.listen((_) => setState(() {}));
-    final audioFile = this.audioFile;
-    if (audioFile != null) {
-      audioPlayer.setFilePath(audioFile.path);
     } else {
-      await audioPlayer.setAudioSource(MatrixFileAudioSource(matrixFile!));
+      await audioPlayer.setAudioSource(MatrixFileAudioSource(matrixFile));
     }
+
     audioPlayer.play().onError(
           ErrorReporter(context, 'Unable to play audio message')
               .onErrorCallback,
         );
   }
 
-  static const double buttonSize = 36;
+  void _toggleSpeed() async {
-
+    final audioPlayer = matrix.audioPlayer;
-  String? get _durationString {
+    if (audioPlayer == null) return;
-    final durationInt = widget.event.content
+    switch (audioPlayer.speed) {
-        .tryGetMap<String, dynamic>('info')
+      case 1.0:
-        ?.tryGet<int>('duration');
+        await audioPlayer.setSpeed(1.25);
-    if (durationInt == null) return null;
+        break;
-    final duration = Duration(milliseconds: durationInt);
+      case 1.25:
-    return '${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
+        await audioPlayer.setSpeed(1.5);
+        break;
+      case 1.5:
+        await audioPlayer.setSpeed(2.0);
+        break;
+      case 2.0:
+        await audioPlayer.setSpeed(0.5);
+        break;
+      case 0.5:
+      default:
+        await audioPlayer.setSpeed(1.0);
+        break;
+    }
+    setState(() {});
   }
 
   List<int>? _getWaveform() {
@@ -203,36 +247,26 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
     return eventWaveForm.map((i) => i > 1024 ? 1024 : i).toList();
   }
 
-  late final List<int>? _waveform;
-
-  void _toggleSpeed() async {
-    final audioPlayer = this.audioPlayer;
-    if (audioPlayer == null) return;
-    switch (audioPlayer.speed) {
-      case 1.0:
-        await audioPlayer.setSpeed(1.25);
-        break;
-      case 1.25:
-        await audioPlayer.setSpeed(1.5);
-        break;
-      case 1.5:
-        await audioPlayer.setSpeed(2.0);
-        break;
-      case 2.0:
-        await audioPlayer.setSpeed(0.5);
-        break;
-      case 0.5:
-      default:
-        await audioPlayer.setSpeed(1.0);
-        break;
-    }
-    setState(() {});
-  }
-
   @override
   void initState() {
     super.initState();
+    matrix = Matrix.of(context);
     _waveform = _getWaveform();
+
+    if (matrix.voiceMessageEventId.value == widget.event.eventId &&
+        matrix.audioPlayer != null) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        ScaffoldMessenger.of(matrix.context).clearMaterialBanners();
+      });
+    }
+
+    final durationInt = widget.event.content
+        .tryGetMap<String, dynamic>('info')
+        ?.tryGet<int>('duration');
+    if (durationInt != null) {
+      final duration = Duration(milliseconds: durationInt);
+      _durationString = duration.minuteSecondString;
+    }
   }
 
   @override
@@ -240,186 +274,224 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
     final theme = Theme.of(context);
     final waveform = _waveform;
 
-    final statusText = this.statusText ??= _durationString ?? '00:00';
+    return ValueListenableBuilder(
-    final audioPlayer = this.audioPlayer;
+      valueListenable: matrix.voiceMessageEventId,
+      builder: (context, eventId, _) {
+        final audioPlayer =
+            eventId != widget.event.eventId ? null : matrix.audioPlayer;
 
-    final fileDescription = widget.event.fileDescription;
+        final fileDescription = widget.event.fileDescription;
 
-    final wavePosition =
+        return StreamBuilder<Object>(
-        (currentPosition / maxPosition) * AudioPlayerWidget.wavesCount;
+          stream: audioPlayer == null
+              ? null
+              : StreamGroup.merge([
+                  audioPlayer.positionStream.asBroadcastStream(),
+                  audioPlayer.playerStateStream.asBroadcastStream(),
+                ]),
+          builder: (context, _) {
+            final maxPosition =
+                audioPlayer?.duration?.inMilliseconds.toDouble() ?? 1.0;
+            var currentPosition =
+                audioPlayer?.position.inMilliseconds.toDouble() ?? 0.0;
+            if (currentPosition > maxPosition) currentPosition = maxPosition;
 
-    return Padding(
+            final wavePosition =
-      padding: const EdgeInsets.all(12.0),
+                (currentPosition / maxPosition) * AudioPlayerWidget.wavesCount;
-      child: Column(
+
-        mainAxisSize: MainAxisSize.min,
+            final statusText = audioPlayer == null
-        crossAxisAlignment: CrossAxisAlignment.start,
+                ? _durationString ?? '00:00'
-        children: [
+                : audioPlayer.position.minuteSecondString;
-          ConstrainedBox(
+            return Padding(
-            constraints:
+              padding: const EdgeInsets.all(12.0),
-                const BoxConstraints(maxWidth: FluffyThemes.columnWidth),
+              child: Column(
-            child: Row(
+                mainAxisSize: MainAxisSize.min,
-              mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
-              children: <Widget>[
+                children: [
-                SizedBox(
+                  ConstrainedBox(
-                  width: buttonSize,
+                    constraints: const BoxConstraints(
-                  height: buttonSize,
+                      maxWidth: FluffyThemes.columnWidth,
-                  child: status == AudioPlayerStatus.downloading
+                    ),
-                      ? CircularProgressIndicator(
+                    child: Row(
-                          strokeWidth: 2,
+                      mainAxisSize: MainAxisSize.min,
-                          color: widget.color,
+                      children: <Widget>[
-                        )
+                        SizedBox(
-                      : InkWell(
+                          width: buttonSize,
-                          borderRadius: BorderRadius.circular(64),
+                          height: buttonSize,
-                          onLongPress: () => widget.event.saveFile(context),
+                          child: status == AudioPlayerStatus.downloading
-                          onTap: _startAction,
+                              ? CircularProgressIndicator(
-                          child: Material(
+                                  strokeWidth: 2,
-                            color: widget.color.withAlpha(64),
+                                  color: widget.color,
-                            borderRadius: BorderRadius.circular(64),
+                                )
-                            child: Icon(
+                              : InkWell(
-                              audioPlayer?.playerState.playing == true
+                                  borderRadius: BorderRadius.circular(64),
-                                  ? Icons.pause_outlined
+                                  onLongPress: () =>
-                                  : Icons.play_arrow_outlined,
+                                      widget.event.saveFile(context),
-                              color: widget.color,
+                                  onTap: _onButtonTap,
-                            ),
+                                  child: Material(
-                          ),
+                                    color: widget.color.withAlpha(64),
-                        ),
+                                    borderRadius: BorderRadius.circular(64),
-                ),
+                                    child: Icon(
-                const SizedBox(width: 8),
+                                      audioPlayer?.playing == true &&
-                Expanded(
+                                              audioPlayer?.isAtEndPosition ==
-                  child: Stack(
+                                                  false
-                    children: [
+                                          ? Icons.pause_outlined
-                      if (waveform != null)
+                                          : Icons.play_arrow_outlined,
-                        Padding(
+                                      color: widget.color,
-                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-                          child: Row(
-                            children: [
-                              for (var i = 0;
-                                  i < AudioPlayerWidget.wavesCount;
-                                  i++)
-                                Expanded(
-                                  child: Container(
-                                    height: 32,
-                                    alignment: Alignment.center,
-                                    child: Container(
-                                      margin: const EdgeInsets.symmetric(
-                                        horizontal: 1,
-                                      ),
-                                      decoration: BoxDecoration(
-                                        color: i < wavePosition
-                                            ? widget.color
-                                            : widget.color.withAlpha(128),
-                                        borderRadius: BorderRadius.circular(64),
-                                      ),
-                                      height: 32 * (waveform[i] / 1024),
                                     ),
                                   ),
                                 ),
+                        ),
+                        const SizedBox(width: 8),
+                        Expanded(
+                          child: Stack(
+                            children: [
+                              if (waveform != null)
+                                Padding(
+                                  padding: const EdgeInsets.symmetric(
+                                    horizontal: 16.0,
+                                  ),
+                                  child: Row(
+                                    children: [
+                                      for (var i = 0;
+                                          i < AudioPlayerWidget.wavesCount;
+                                          i++)
+                                        Expanded(
+                                          child: Container(
+                                            height: 32,
+                                            alignment: Alignment.center,
+                                            child: Container(
+                                              margin:
+                                                  const EdgeInsets.symmetric(
+                                                horizontal: 1,
+                                              ),
+                                              decoration: BoxDecoration(
+                                                color: i < wavePosition
+                                                    ? widget.color
+                                                    : widget.color
+                                                        .withAlpha(128),
+                                                borderRadius:
+                                                    BorderRadius.circular(64),
+                                              ),
+                                              height: 32 * (waveform[i] / 1024),
+                                            ),
+                                          ),
+                                        ),
+                                    ],
+                                  ),
+                                ),
+                              SizedBox(
+                                height: 32,
+                                child: Slider(
+                                  thumbColor: widget.event.senderId ==
+                                          widget.event.room.client.userID
+                                      ? theme.colorScheme.onPrimary
+                                      : theme.colorScheme.primary,
+                                  activeColor: waveform == null
+                                      ? widget.color
+                                      : Colors.transparent,
+                                  inactiveColor: waveform == null
+                                      ? widget.color.withAlpha(128)
+                                      : Colors.transparent,
+                                  max: maxPosition,
+                                  value: currentPosition,
+                                  onChanged: (position) => audioPlayer == null
+                                      ? _onButtonTap()
+                                      : audioPlayer.seek(
+                                          Duration(
+                                            milliseconds: position.round(),
+                                          ),
+                                        ),
+                                ),
+                              ),
                             ],
                           ),
                         ),
-                      SizedBox(
+                        const SizedBox(width: 8),
-                        height: 32,
+                        SizedBox(
-                        child: Slider(
+                          width: 36,
-                          thumbColor: widget.event.senderId ==
-                                  widget.event.room.client.userID
-                              ? theme.colorScheme.onPrimary
-                              : theme.colorScheme.primary,
-                          activeColor: waveform == null
-                              ? widget.color
-                              : Colors.transparent,
-                          inactiveColor: waveform == null
-                              ? widget.color.withAlpha(128)
-                              : Colors.transparent,
-                          max: maxPosition,
-                          value: currentPosition,
-                          onChanged: (position) => audioPlayer == null
-                              ? _startAction()
-                              : audioPlayer.seek(
-                                  Duration(milliseconds: position.round()),
-                                ),
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-                const SizedBox(width: 8),
-                SizedBox(
-                  width: 36,
-                  child: Text(
-                    statusText,
-                    style: TextStyle(
-                      color: widget.color,
-                      fontSize: 12,
-                    ),
-                  ),
-                ),
-                const SizedBox(width: 8),
-                AnimatedCrossFade(
-                  firstChild: Padding(
-                    padding: const EdgeInsets.only(right: 8.0),
-                    child: Icon(
-                      Icons.mic_none_outlined,
-                      color: widget.color,
-                    ),
-                  ),
-                  secondChild: Material(
-                    color: widget.color.withAlpha(64),
-                    borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-                    child: InkWell(
-                      borderRadius:
-                          BorderRadius.circular(AppConfig.borderRadius),
-                      onTap: _toggleSpeed,
-                      child: SizedBox(
-                        width: 32,
-                        height: 20,
-                        child: Center(
                           child: Text(
-                            '${audioPlayer?.speed.toString()}x',
+                            statusText,
                             style: TextStyle(
                               color: widget.color,
-                              fontSize: 9,
+                              fontSize: 12,
                             ),
                           ),
                         ),
-                      ),
+                        const SizedBox(width: 8),
+                        AnimatedCrossFade(
+                          firstChild: Padding(
+                            padding: const EdgeInsets.only(right: 8.0),
+                            child: Icon(
+                              Icons.mic_none_outlined,
+                              color: widget.color,
+                            ),
+                          ),
+                          secondChild: Material(
+                            color: widget.color.withAlpha(64),
+                            borderRadius:
+                                BorderRadius.circular(AppConfig.borderRadius),
+                            child: InkWell(
+                              borderRadius:
+                                  BorderRadius.circular(AppConfig.borderRadius),
+                              onTap: _toggleSpeed,
+                              child: SizedBox(
+                                width: 32,
+                                height: 20,
+                                child: Center(
+                                  child: Text(
+                                    '${audioPlayer?.speed.toString()}x',
+                                    style: TextStyle(
+                                      color: widget.color,
+                                      fontSize: 9,
+                                    ),
+                                  ),
+                                ),
+                              ),
+                            ),
+                          ),
+                          alignment: Alignment.center,
+                          crossFadeState: audioPlayer == null
+                              ? CrossFadeState.showFirst
+                              : CrossFadeState.showSecond,
+                          duration: FluffyThemes.animationDuration,
+                        ),
+                      ],
                     ),
                   ),
-                  alignment: Alignment.center,
+                  if (fileDescription != null) ...[
-                  crossFadeState: audioPlayer == null
+                    const SizedBox(height: 8),
-                      ? CrossFadeState.showFirst
+                    Padding(
-                      : CrossFadeState.showSecond,
+                      padding: const EdgeInsets.symmetric(
-                  duration: FluffyThemes.animationDuration,
+                        horizontal: 16,
-                ),
+                        vertical: 8,
-              ],
+                      ),
-            ),
+                      child: Linkify(
-          ),
+                        text: fileDescription,
-          if (fileDescription != null) ...[
+                        textScaleFactor:
-            const SizedBox(height: 8),
+                            MediaQuery.textScalerOf(context).scale(1),
-            Padding(
+                        style: TextStyle(
-              padding: const EdgeInsets.symmetric(
+                          color: widget.color,
-                horizontal: 16,
+                          fontSize: widget.fontSize,
-                vertical: 8,
+                        ),
+                        options: const LinkifyOptions(humanize: false),
+                        linkStyle: TextStyle(
+                          color: widget.linkColor,
+                          fontSize: widget.fontSize,
+                          decoration: TextDecoration.underline,
+                          decorationColor: widget.linkColor,
+                        ),
+                        onOpen: (url) =>
+                            UrlLauncher(context, url.url).launchUrl(),
+                      ),
+                    ),
+                  ],
+                ],
               ),
-              child: Linkify(
+            );
-                text: fileDescription,
+          },
-                textScaleFactor: MediaQuery.textScalerOf(context).scale(1),
+        );
-                style: TextStyle(
+      },
-                  color: widget.color,
-                  fontSize: widget.fontSize,
-                ),
-                options: const LinkifyOptions(humanize: false),
-                linkStyle: TextStyle(
-                  color: widget.linkColor,
-                  fontSize: widget.fontSize,
-                  decoration: TextDecoration.underline,
-                  decorationColor: widget.linkColor,
-                ),
-                onOpen: (url) => UrlLauncher(context, url.url).launchUrl(),
-              ),
-            ),
-          ],
-        ],
-      ),
     );
   }
 }
@@ -443,3 +515,16 @@ class MatrixFileAudioSource extends StreamAudioSource {
     );
   }
 }
+
+extension on AudioPlayer {
+  bool get isAtEndPosition {
+    final duration = this.duration;
+    if (duration == null) return true;
+    return position >= duration;
+  }
+}
+
+extension on Duration {
+  String get minuteSecondString =>
+      '${inMinutes.toString().padLeft(2, '0')}:${(inSeconds % 60).toString().padLeft(2, '0')}';
+}

lib/widgets/matrix.dart

@@ -10,6 +10,7 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:http/http.dart' as http;
 import 'package:image_picker/image_picker.dart';
 import 'package:intl/intl.dart';
+import 'package:just_audio/just_audio.dart';
 import 'package:matrix/encryption.dart';
 import 'package:matrix/matrix.dart';
 import 'package:provider/provider.dart';
@@ -148,6 +149,9 @@ class MatrixState extends State<Matrix> with WidgetsBindingObserver {
 
   Client? _loginClientCandidate;
 
+  AudioPlayer? audioPlayer;
+  final ValueNotifier<String?> voiceMessageEventId = ValueNotifier(null);
+
   Client getLoginClient() {
     if (widget.clients.isNotEmpty && !client.isLogged()) {
       return client;