Add audio playback to message view

lib/apis/message_api.dart

@@ -6,6 +6,7 @@ import 'package:contacts_plus_plus/models/message.dart';
 class MessageApi {
   static Future<Iterable<Message>> getUserMessages(ApiClient client, {String userId = "", DateTime? fromTime,
     int maxItems = 50, bool unreadOnly = false}) async {
+
     final response = await client.get("/users/${client.userId}/messages"
         "?maxItems=$maxItems"
         "${fromTime == null ? "" : "&fromTime${fromTime.toLocal().toIso8601String()}"}"

lib/auxiliary.dart

@@ -71,3 +71,16 @@ extension StripHTLM on String {
     return htmlparser.parse(document.body?.text).documentElement?.text ?? "";
   }
 }
+
+extension Format on Duration {
+  String format() {
+    final hh = (inHours).toString().padLeft(2, '0');
+    final mm = (inMinutes % 60).toString().padLeft(2, '0');
+    final ss = (inSeconds % 60).toString().padLeft(2, '0');
+    if (inHours == 0) {
+      return "$mm:$ss";
+    } else {
+      return "$hh:$mm:$ss";
+    }
+  }
+}

lib/models/message.dart

@@ -152,3 +152,17 @@ class MessageCache {
     _messages.unique((element) => element.id);
   }
 }
+
+class AudioClipContent {
+  final String id;
+  final String assetUri;
+
+  AudioClipContent({required this.id, required this.assetUri});
+
+  factory AudioClipContent.fromMap(Map map) {
+    return AudioClipContent(
+      id: map["id"],
+      assetUri: map["assetUri"],
+    );
+  }
+}

lib/widgets/audio_clip_player.dart

@@ -0,0 +1,132 @@
+import 'dart:convert';
+
+import 'package:contacts_plus_plus/api_client.dart';
+import 'package:contacts_plus_plus/auxiliary.dart';
+import 'package:contacts_plus_plus/models/message.dart';
+import 'package:contacts_plus_plus/widgets/messages.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:just_audio/just_audio.dart';
+
+class MessageAudioPlayer extends StatefulWidget {
+  const MessageAudioPlayer({required this.message, super.key});
+
+  final Message message;
+
+  @override
+  State<MessageAudioPlayer> createState() => _MessageAudioPlayerState();
+}
+
+class _MessageAudioPlayerState extends State<MessageAudioPlayer> {
+  final AudioPlayer _audioPlayer = AudioPlayer();
+  final DateFormat _dateFormat = DateFormat.Hm();
+  double _sliderValue = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    _audioPlayer.setAudioSource(AudioSource.uri(Uri.parse(
+        Aux.neosDbToHttp(AudioClipContent.fromMap(jsonDecode(widget.message.content)).assetUri)
+    ))).whenComplete(() => _audioPlayer.setLoopMode(LoopMode.off));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return IntrinsicWidth(
+      child: StreamBuilder<PlayerState>(
+        stream: _audioPlayer.playerStateStream,
+        builder: (context, snapshot) {
+          if (snapshot.hasData) {
+            final playerState = snapshot.data as PlayerState;
+            return Column(
+              children: [
+                Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    IconButton(
+                      onPressed: () {
+                        switch (playerState.processingState) {
+                          case ProcessingState.idle:
+                          case ProcessingState.loading:
+                          case ProcessingState.buffering:
+                            break;
+                          case ProcessingState.ready:
+                            _audioPlayer.play();
+                            break;
+                          case ProcessingState.completed:
+                            _audioPlayer.seek(Duration.zero);
+                            _audioPlayer.play();
+                            break;
+                        }},
+                      icon: playerState.processingState == ProcessingState.loading
+                          ? const Center(child: CircularProgressIndicator(),)
+                          : Icon((_audioPlayer.duration! - _audioPlayer.position).inMilliseconds < 10 ? Icons.replay
+                          : (playerState.playing ? Icons.pause : Icons.play_arrow)),
+                    ),
+                    StreamBuilder(
+                      stream: _audioPlayer.positionStream,
+                      builder: (context, snapshot) {
+                        _sliderValue = (_audioPlayer.position.inMilliseconds /
+                            (_audioPlayer.duration?.inMilliseconds ?? 0)).clamp(0, 1);
+                        return StatefulBuilder(
+                          builder: (context, setState) {
+                            return Slider(
+                              value: _sliderValue,
+                              min: 0.0,
+                              max: 1.0,
+                              onChanged: (value) async {
+                                _audioPlayer.pause();
+                                setState(() {
+                                  _sliderValue = value;
+                                });
+                                _audioPlayer.seek(Duration(
+                                  milliseconds: (value * (_audioPlayer.duration?.inMilliseconds ?? 0)).round(),
+                                ));
+                              },
+                            );
+                          }
+                        );
+                      }
+                    )
+                  ],
+                ),
+                Row(
+                  mainAxisSize: MainAxisSize.max,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    const SizedBox(width: 12),
+                    StreamBuilder(
+                        stream: _audioPlayer.positionStream,
+                        builder: (context, snapshot) {
+                          return Text("${snapshot.data?.format() ?? "??"}/${_audioPlayer.duration?.format() ?? "??"}");
+                        }
+                    ),
+                    const Spacer(),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 4.0),
+                      child: Text(
+                        _dateFormat.format(widget.message.sendTime),
+                        style: Theme
+                            .of(context)
+                            .textTheme
+                            .labelMedium
+                            ?.copyWith(color: Colors.white54),
+                      ),
+                    ),
+                    const SizedBox(width: 4,),
+                    if (widget.message.senderId == ClientHolder.of(context).client.userId) Padding(
+                      padding: const EdgeInsets.only(right: 12.0),
+                      child: MessageStateIndicator(messageState: widget.message.state),
+                    ),
+                  ],
+                )
+              ],
+            );
+          } else {
+            return const Center(child: CircularProgressIndicator(),);
+          }
+        },
+      ),
+    );
+  }
+}

lib/widgets/messages.dart

@@ -1,3 +1,4 @@
+import 'dart:convert';
 import 'dart:developer';
 
 import 'package:cached_network_image/cached_network_image.dart';
@@ -6,6 +7,7 @@ import 'package:contacts_plus_plus/auxiliary.dart';
 import 'package:contacts_plus_plus/models/friend.dart';
 import 'package:contacts_plus_plus/models/message.dart';
 import 'package:contacts_plus_plus/models/session.dart';
+import 'package:contacts_plus_plus/widgets/audio_clip_player.dart';
 import 'package:contacts_plus_plus/widgets/generic_avatar.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
@@ -334,55 +336,92 @@ class MyMessageBubble extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var content = message.content;
-    if (message.type == MessageType.sessionInvite) {
+    switch (message.type) {
-      content = "<Session Invite>";
+      case MessageType.sessionInvite:
-    } else if (message.type == MessageType.sound) {
+        content = "[Session Invite]";
-      content = "<Voice Message>";
+        continue rawText;
-    } else if (message.type == MessageType.object) {
+      case MessageType.object:
-      content = "<Asset>";
+        content = "[Asset]";
-    }
+        continue rawText;
-    return Row(
+      case MessageType.unknown:
-      mainAxisAlignment: MainAxisAlignment.end,
+      rawText:
-      mainAxisSize: MainAxisSize.min,
+      case MessageType.text:
-      children: [
+        return Row(
-        Flexible(
+          mainAxisAlignment: MainAxisAlignment.end,
-          child: Card(
+          mainAxisSize: MainAxisSize.min,
-            shape: RoundedRectangleBorder(
+          children: [
-              borderRadius: BorderRadius.circular(16),
+            Flexible(
-            ),
+              child: Card(
-            color: Theme.of(context).colorScheme.primaryContainer,
+                shape: RoundedRectangleBorder(
-            margin: const EdgeInsets.only(left: 32, bottom: 16, right: 12),
+                  borderRadius: BorderRadius.circular(16),
-            child: Padding(
+                ),
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                color: Theme
-              child: Column(
+                    .of(context)
-                crossAxisAlignment: CrossAxisAlignment.end,
+                    .colorScheme
-                children: [
+                    .primaryContainer,
-                  Text(
+                margin: const EdgeInsets.only(left: 32, bottom: 16, right: 12),
-                    content,
+                child: Padding(
-                    softWrap: true,
+                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-                    maxLines: null,
+                  child: Column(
-                    style: Theme.of(context).textTheme.bodyLarge,
+                    crossAxisAlignment: CrossAxisAlignment.end,
-                  ),
-                  const SizedBox(height: 6,),
-                  Row(
-                    mainAxisSize: MainAxisSize.min,
-                    mainAxisAlignment: MainAxisAlignment.end,
                     children: [
                       Text(
-                        _dateFormat.format(message.sendTime),
+                        content,
-                        style: Theme.of(context).textTheme.labelMedium?.copyWith(color: Colors.white54),
+                        softWrap: true,
+                        maxLines: null,
+                        style: Theme
+                            .of(context)
+                            .textTheme
+                            .bodyLarge,
+                      ),
+                      const SizedBox(height: 6,),
+                      Row(
+                        mainAxisSize: MainAxisSize.min,
+                        mainAxisAlignment: MainAxisAlignment.end,
+                        children: [
+                          Padding(
+                            padding: const EdgeInsets.symmetric(horizontal: 4.0),
+                            child: Text(
+                              _dateFormat.format(message.sendTime),
+                              style: Theme
+                                  .of(context)
+                                  .textTheme
+                                  .labelMedium
+                                  ?.copyWith(color: Colors.white54),
+                            ),
+                          ),
+                          MessageStateIndicator(messageState: message.state),
+                        ],
                       ),
-                      const SizedBox(width: 4,),
-                      MessageStateIndicator(messageState: message.state),
                     ],
                   ),
-                ],
+                ),
               ),
             ),
-          ),
+          ],
-        ),
+        );
-      ],
+      case MessageType.sound:
-    );
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Card(
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(16),
+              ),
+              color: Theme
+                  .of(context)
+                  .colorScheme
+                  .primaryContainer,
+              margin: const EdgeInsets.only(left: 32, bottom: 16, right: 12),
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
+                child: MessageAudioPlayer(message: message,),
+              ),
+            ),
+          ],
+        );
+    }
   }
 }
 
@@ -403,12 +442,65 @@ class OtherMessageBubble extends StatelessWidget {
     } else if (message.type == MessageType.object) {
       content = "[Asset]";
     }
-    return Row(
+    switch (message.type) {
-      mainAxisSize: MainAxisSize.min,
+      case MessageType.sessionInvite:
-      mainAxisAlignment: MainAxisAlignment.start,
+        content = "[Session Invite]";
-      children: [
+        continue rawText;
-        Flexible(
+      case MessageType.object:
-          child: Card(
+        content = "[Asset]";
+        continue rawText;
+      case MessageType.unknown:
+      rawText:
+      case MessageType.text:
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Flexible(
+              child: Card(
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(16),
+                ),
+                color: Theme
+                    .of(context)
+                    .colorScheme
+                    .secondaryContainer,
+                margin: const EdgeInsets.only(right: 32, bottom: 16, left: 12),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        content,
+                        softWrap: true,
+                        maxLines: null,
+                        style: Theme
+                            .of(context)
+                            .textTheme
+                            .bodyLarge,
+                      ),
+                      const SizedBox(height: 6,),
+                      Text(
+                        _dateFormat.format(message.sendTime),
+                        style: Theme
+                            .of(context)
+                            .textTheme
+                            .labelMedium
+                            ?.copyWith(color: Colors.white54),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      case MessageType.sound:
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [Card(
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(16),
             ),
@@ -419,27 +511,12 @@ class OtherMessageBubble extends StatelessWidget {
             margin: const EdgeInsets.only(right: 32, bottom: 16, left: 12),
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-              child: Column(
+              child: MessageAudioPlayer(message: message,),
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    content,
-                    softWrap: true,
-                    maxLines: null,
-                    style: Theme.of(context).textTheme.bodyLarge,
-                  ),
-                  const SizedBox(height: 6,),
-                  Text(
-                    _dateFormat.format(message.sendTime),
-                    style: Theme.of(context).textTheme.labelMedium?.copyWith(color: Colors.white54),
-                  ),
-                ],
-              ),
             ),
           ),
-        ),
+          ],
-      ],
+        );
-    );
+    }
   }
 }
 

pubspec.lock

@@ -9,6 +9,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.10.0"
+  audio_session:
+    dependency: transitive
+    description:
+      name: audio_session
+      sha256: e4acc4e9eaa32436dfc5d7aed7f0a370f2d7bb27ee27de30d6c4f220c2a05c73
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.13"
   boolean_selector:
     dependency: transitive
     description:
@@ -240,6 +248,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.6.5"
+  just_audio:
+    dependency: "direct main"
+    description:
+      name: just_audio
+      sha256: "7e6d31508dacd01a066e3889caf6282e5f1eb60707c230203b21a83af5c55586"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.32"
+  just_audio_platform_interface:
+    dependency: transitive
+    description:
+      name: just_audio_platform_interface
+      sha256: eff112d5138bea3ba544b6338b1e0537a32b5e1425e4d0dc38f732771cda7c84
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.2.0"
+  just_audio_web:
+    dependency: transitive
+    description:
+      name: just_audio_web
+      sha256: "89d8db6f19f3821bb6bf908c4bfb846079afb2ab575b783d781a6bf119e3abaf"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.4.7"
   lints:
     dependency: transitive
     description:

pubspec.yaml

@@ -45,6 +45,7 @@ dependencies:
   cached_network_image: ^3.2.3
   web_socket_channel: ^2.4.0
   html: ^0.15.2
+  just_audio: ^0.9.32
 
 dev_dependencies:
   flutter_test: