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,60 +128,71 @@ 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';
-      mainAxisSize: MainAxisSize.min,
+    return Padding(
-      children: <Widget>[
+      padding: const EdgeInsets.symmetric(horizontal: 6.0),
-        SizedBox(
+      child: Row(
-          width: 30,
+        mainAxisSize: MainAxisSize.min,
-          child: status == AudioPlayerStatus.downloading
+        children: <Widget>[
-              ? const CircularProgressIndicator.adaptive(strokeWidth: 2)
+          SizedBox(
-              : IconButton(
+            width: buttonSize,
-                  icon: Icon(
+            height: buttonSize,
-                    audioPlayer.state == PlayerState.PLAYING
+            child: status == AudioPlayerStatus.downloading
-                        ? Icons.pause_outlined
+                ? CircularProgressIndicator(strokeWidth: 2, color: widget.color)
-                        : Icons.play_arrow_outlined,
+                : InkWell(
-                    color: widget.color,
+                    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,
+                      ),
+                    ),
+                    onLongPress: () => widget.event.saveFile(context),
+                    onTap: () {
+                      if (status == AudioPlayerStatus.downloaded) {
+                        _playAction();
+                      } else {
+                        _downloadAction();
+                      }
+                    },
                   ),
-                  tooltip: audioPlayer.state == PlayerState.PLAYING
-                      ? L10n.of(context).audioPlayerPause
-                      : L10n.of(context).audioPlayerPlay,
-                  onPressed: () {
-                    if (status == AudioPlayerStatus.downloaded) {
-                      _playAction();
-                    } else {
-                      _downloadAction();
-                    }
-                  },
-                ),
-        ),
-        Expanded(
-          child: Slider(
-            activeColor: Theme.of(context).colorScheme.secondaryVariant,
-            inactiveColor: widget.color.withAlpha(64),
-            value: currentPosition,
-            onChanged: (double position) =>
-                audioPlayer.seek(Duration(milliseconds: position.toInt())),
-            max: status == AudioPlayerStatus.downloaded ? maxPosition : 0,
-            min: 0,
           ),
-        ),
+          Expanded(
-        Text(
+            child: Slider(
-          statusText,
+              activeColor: Theme.of(context).colorScheme.secondaryVariant,
-          style: TextStyle(
+              inactiveColor: widget.color.withAlpha(64),
-            color: widget.color,
+              value: currentPosition,
+              onChanged: (double position) =>
+                  audioPlayer.seek(Duration(milliseconds: position.toInt())),
+              max: status == AudioPlayerStatus.downloaded ? maxPosition : 0,
+              min: 0,
+            ),
           ),
-        ),
+          Text(
-        const SizedBox(width: 8),
+            statusText,
-        IconButton(
+            style: TextStyle(
-          icon: Icon(
+              color: widget.color,
-            Icons.download_outlined,
+            ),
-            color: widget.color,
           ),
-          onPressed: () => widget.event.saveFile(context),
+        ],
-        ),
+      ),
-      ],
     );
   }
 }