From 4291396f987158612eff69ade384257f0a9f5e93 Mon Sep 17 00:00:00 2001
From: Krille <c.kussowski@famedly.com>
Date: Tue, 7 May 2024 12:36:35 +0200
Subject: [PATCH] design: Improve design of Voice Messages and add 1.25 as
 speed

---
 lib/pages/chat/events/audio_player.dart | 79 ++++++++++++++-----------
 1 file changed, 44 insertions(+), 35 deletions(-)

diff --git a/lib/pages/chat/events/audio_player.dart b/lib/pages/chat/events/audio_player.dart
index 7d399e6f..77eb2683 100644
--- a/lib/pages/chat/events/audio_player.dart
+++ b/lib/pages/chat/events/audio_player.dart
@@ -38,8 +38,8 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
   StreamSubscription? onPlayerError;
 
   String? statusText;
-  int currentPosition = 0;
-  double maxPosition = 0;
+  double currentPosition = 0.0;
+  double maxPosition = 1.0;
 
   MatrixFile? matrixFile;
   File? audioFile;
@@ -113,9 +113,7 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
       setState(() {
         statusText =
             '${state.inMinutes.toString().padLeft(2, '0')}:${(state.inSeconds % 60).toString().padLeft(2, '0')}';
-        currentPosition = ((state.inMilliseconds.toDouble() / maxPosition) *
-                AudioPlayerWidget.wavesCount)
-            .round();
+        currentPosition = state.inMilliseconds.toDouble();
       });
       if (state.inMilliseconds.toDouble() == maxPosition) {
         audioPlayer.stop();
@@ -151,12 +149,14 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
     return '${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
   }
 
-  List<int> _getWaveform() {
+  List<int>? _getWaveform() {
     final eventWaveForm = widget.event.content
         .tryGetMap<String, dynamic>('org.matrix.msc1767.audio')
         ?.tryGetList<int>('waveform');
-    if (eventWaveForm == null || eventWaveForm.isEmpty) {
-      return List<int>.filled(AudioPlayerWidget.wavesCount, 500);
+    if (eventWaveForm == null ||
+        eventWaveForm.isEmpty ||
+        eventWaveForm.length > 100) {
+      return null;
     }
     while (eventWaveForm.length < AudioPlayerWidget.wavesCount) {
       for (var i = 0; i < eventWaveForm.length; i = i + 2) {
@@ -172,13 +172,16 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
     return eventWaveForm.map((i) => i > 1024 ? 1024 : i).toList();
   }
 
-  late final List<int> waveform;
+  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:
@@ -205,6 +208,7 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
   Widget build(BuildContext context) {
     final statusText = this.statusText ??= _durationString ?? '00:00';
     final audioPlayer = this.audioPlayer;
+    final waveform = this.waveform;
     return Padding(
       padding: const EdgeInsets.all(16),
       child: Row(
@@ -237,42 +241,47 @@ class AudioPlayerState extends State<AudioPlayerWidget> {
                     },
                   ),
           ),
-          const SizedBox(width: 8),
           Expanded(
-            child: Row(
+            child: Stack(
               children: [
-                for (var i = 0; i < AudioPlayerWidget.wavesCount; i++)
-                  Expanded(
-                    child: GestureDetector(
-                      onTapDown: (_) => audioPlayer?.seek(
-                        Duration(
-                          milliseconds:
-                              (maxPosition / AudioPlayerWidget.wavesCount)
-                                      .round() *
-                                  i,
-                        ),
-                      ),
-                      child: Container(
-                        height: 32,
-                        alignment: Alignment.center,
-                        child: Opacity(
-                          opacity: currentPosition > i ? 1 : 0.5,
-                          child: Container(
-                            margin: const EdgeInsets.symmetric(horizontal: 1),
-                            decoration: BoxDecoration(
-                              color: widget.color,
-                              borderRadius: BorderRadius.circular(64),
+                if (waveform != null)
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                    child: Row(
+                      children: [
+                        for (var i = 0; i < waveform.length; i++)
+                          Expanded(
+                            child: Center(
+                              child: Container(
+                                decoration: BoxDecoration(
+                                  color: widget.color.withAlpha(64),
+                                  borderRadius: BorderRadius.circular(2),
+                                ),
+                                height: 32 * (waveform[i] / 1024),
+                              ),
                             ),
-                            height: 32 * (waveform[i] / 1024),
                           ),
-                        ),
+                      ],
+                    ),
+                  ),
+                SizedBox(
+                  height: 28,
+                  child: Slider.adaptive(
+                    value: currentPosition,
+                    min: 0,
+                    max: maxPosition,
+                    onChangeStart: (_) => audioPlayer?.pause(),
+                    onChangeEnd: (_) => audioPlayer?.play(),
+                    onChanged: (pos) => audioPlayer?.seek(
+                      Duration(
+                        milliseconds: pos.round(),
                       ),
                     ),
                   ),
+                ),
               ],
             ),
           ),
-          const SizedBox(width: 8),
           Container(
             alignment: Alignment.centerRight,
             width: 42,