feat: Nicer audio message design and send duration

lib/pages/chat.dart

@@ -356,22 +356,26 @@ class ChatController extends State<Chat> {
 
   void voiceMessageAction() async {
     if (await Record().hasPermission() == false) return;
-    final result = await showDialog<String>(
+    final result = await showDialog<Map>(
       context: context,
       useRootNavigator: false,
       builder: (c) => const RecordingDialog(),
     );
     if (result == null) return;
-    final audioFile = File(result);
+    final audioFile = File(result['path']);
-    // as we already explicitly say send in the recording dialog,
+    final file = MatrixAudioFile(
-    // we do not need the send file dialog anymore. We can just send this straight away.
+      bytes: audioFile.readAsBytesSync(),
+      name: audioFile.path,
+    );
     await showFutureLoadingDialog(
       context: context,
-      future: () => room.sendFileEvent(
+      future: () =>
-        MatrixAudioFile(
+          room.sendFileEvent(file, inReplyTo: replyEvent, extraContent: {
-            bytes: audioFile.readAsBytesSync(), name: audioFile.path),
+        'info': {
-        inReplyTo: replyEvent,
+          ...file.info,
-      ),
+          'duration': result['duration'],
+        }
+      }),
     );
     setState(() {
       replyEvent = null;

lib/pages/recording_dialog.dart

@@ -133,8 +133,10 @@ class _RecordingDialogState extends State<RecordingDialog> {
               onPressed: () async {
                 _recorderSubscription?.cancel();
                 await _audioRecorder.stop();
-                Navigator.of(context, rootNavigator: false)
+                Navigator.of(context, rootNavigator: false).pop<Map>({
-                    .pop<String>(_recordedPath);
+                  'path': _recordedPath,
+                  'duration': _duration.inMilliseconds,
+                });
               },
               child: Text(L10n.of(context).send.toUpperCase()),
             ),

lib/widgets/event_content/audio_player.dart

@@ -36,7 +36,7 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
   StreamSubscription onPlayerStateChanged;
   StreamSubscription onPlayerError;
 
-  String statusText = '00:00';
+  String statusText;
   double currentPosition = 0;
   double maxPosition = 0;
 
@@ -128,26 +128,44 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
     }
   }
 
+  static const double buttonSize = 36;
+
+  String get _durationString {
+    final durationInt = widget.event.content
+        .tryGetMap<String, dynamic>('info')
+        ?.tryGet<int>('duration');
+    if (durationInt == null) return null;
+    final duration = Duration(milliseconds: durationInt);
+    return '${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Row(
+    statusText ??= _durationString ?? '00:00';
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 6.0),
+      child: Row(
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           SizedBox(
-          width: 30,
+            width: buttonSize,
+            height: buttonSize,
             child: status == AudioPlayerStatus.downloading
-              ? const CircularProgressIndicator.adaptive(strokeWidth: 2)
+                ? CircularProgressIndicator(strokeWidth: 2, color: widget.color)
-              : IconButton(
+                : InkWell(
-                  icon: Icon(
+                    borderRadius: BorderRadius.circular(64),
+                    child: Material(
+                      color: widget.color.withAlpha(64),
+                      borderRadius: BorderRadius.circular(64),
+                      child: Icon(
                         audioPlayer.state == PlayerState.PLAYING
                             ? Icons.pause_outlined
                             : Icons.play_arrow_outlined,
                         color: widget.color,
                       ),
-                  tooltip: audioPlayer.state == PlayerState.PLAYING
+                    ),
-                      ? L10n.of(context).audioPlayerPause
+                    onLongPress: () => widget.event.saveFile(context),
-                      : L10n.of(context).audioPlayerPlay,
+                    onTap: () {
-                  onPressed: () {
                       if (status == AudioPlayerStatus.downloaded) {
                         _playAction();
                       } else {
@@ -173,15 +191,8 @@ class _AudioPlayerState extends State<AudioPlayerWidget> {
               color: widget.color,
             ),
           ),
-        const SizedBox(width: 8),
-        IconButton(
-          icon: Icon(
-            Icons.download_outlined,
-            color: widget.color,
-          ),
-          onPressed: () => widget.event.saveFile(context),
-        ),
         ],
+      ),
     );
   }
 }