feat: add video player support and improve message attachment handling

Author: trongtindev

lib/imports.dart

@@ -101,6 +101,7 @@ export 'widgets/bottom_sheet.dart';
 export 'widgets/button.dart';
 export 'widgets/common.dart';
 export 'widgets/image.dart';
+export 'widgets/video.dart';
 
 export 'screens/custom_attributes/controllers/index.dart';
 export 'screens/labels/controllers/index.dart';

lib/models/message.dart

@@ -6,10 +6,10 @@ class MessageAttachmentInfo {
   final AttachmentType file_type;
   final int account_id;
   final dynamic extension; // TODO: unk type
-  final String? data_url;
+  final String data_url;
   final String? thumbnail;
   final String? thumb_url;
-  final int? file_size;
+  final int file_size;
   final int? width;
   final int? height;
 
@@ -37,7 +37,7 @@ class MessageAttachmentInfo {
       data_url: json['data_url'],
       thumbnail: json['thumbnail'],
       thumb_url: json['thumb_url'],
-      file_size: json['file_size'],
+      file_size: json['file_size'] ?? 0,
       width: json['width'],
       height: json['height'],
     );

lib/screens/conversations/widgets/message.dart

@@ -225,24 +225,58 @@ class Message extends StatelessWidget {
     final length = info.attachments.length;
 
     final first = info.attachments.first;
-    if (length == 1 && first.data_url != null) {
+    if (length == 1) {
       switch (first.file_type) {
+        case AttachmentType.video:
+          return buildAttachmentVideo(context, info: info.attachments.first);
         case AttachmentType.audio:
-          return AudioPlayer(
-            id: first.id,
-            url: first.data_url!,
-          );
+          return buildAttachmentAudio(context, info: info.attachments.first);
         case AttachmentType.image:
-          return buildImageAttachment(context, info: info.attachments.first);
+          return buildAttachmentImage(context, info: info.attachments.first);
         default:
-          return Text('failed to parse attachment type: ${first.file_type}');
+          return buildAttachmentFile(context, info: info.attachments.first);
       }
     }
 
-    return Text('failed to parse $length attachments');
+    return ListView.builder(
+      shrinkWrap: true,
+      physics: NeverScrollableScrollPhysics(),
+      itemCount: info.attachments.length,
+      itemBuilder: (_, i) {
+        final item = info.attachments[i];
+        return buildAttachmentFile(context, info: item);
+      },
+    );
   }
 
-  Widget buildImageAttachment(
+  Widget buildAttachmentVideo(
+    BuildContext context, {
+    required MessageAttachmentInfo info,
+  }) {
+    return Card(
+      child: VideoPlayer(
+        id: info.id,
+        url: info.data_url,
+        aspectRatio: info.width != null && info.height != null
+            ? info.width! / info.height!
+            : null,
+      ),
+    );
+  }
+
+  Widget buildAttachmentAudio(
+    BuildContext context, {
+    required MessageAttachmentInfo info,
+  }) {
+    return Card(
+      child: AudioPlayer(
+        id: info.id,
+        url: info.data_url,
+      ),
+    );
+  }
+
+  Widget buildAttachmentImage(
     BuildContext context, {
     required MessageAttachmentInfo info,
   }) {
@@ -252,7 +286,7 @@ class Message extends StatelessWidget {
     return InkWell(
       onTap: () => Get.to(
         () => imageViewer(
-          url: info.data_url!,
+          url: info.data_url,
           title: '#${info.id} (${formatBytes(info.file_size!)})',
         ),
       ),
@@ -273,7 +307,7 @@ class Message extends StatelessWidget {
               bottomRight: Radius.circular(0),
             ),
             child: ExtendedImage.network(
-              info.data_url!,
+              info.data_url,
               loadStateChanged: (state) {
                 switch (state.extendedImageLoadState) {
                   case LoadState.failed:
@@ -292,4 +326,25 @@ class Message extends StatelessWidget {
       ),
     );
   }
+
+  Widget buildAttachmentFile(
+    BuildContext context, {
+    required MessageAttachmentInfo info,
+  }) {
+    final name = info.data_url.split('/').last;
+    return Card(
+      child: CustomListTile(
+        leading: CircleAvatar(
+          child: Icon(Icons.download_outlined),
+        ),
+        title: Text(
+          name,
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+        ),
+        subtitle: Text(formatBytes(info.file_size)),
+        onTap: () => openInExternalBrowser(info.data_url),
+      ),
+    );
+  }
 }

lib/widgets/audio.dart

@@ -103,50 +103,42 @@ class AudioPlayer extends StatelessWidget {
           final positionInMilliseconds =
               min(durationInMilliseconds, position.inMilliseconds.toDouble());
 
-          return Container(
-            decoration: BoxDecoration(
-              color: context.theme.colorScheme.tertiaryContainer,
+          Widget icon;
+          if (isEnded) {
+            icon = IconButton(
+              onPressed: controller.restart,
+              icon: Icon(Icons.restart_alt_outlined),
+            );
+          } else if (isPlaying) {
+            icon = IconButton(
+              onPressed: controller.pause,
+              icon: Icon(Icons.pause_circle_filled_outlined),
+            );
+          } else {
+            icon = IconButton(
+              onPressed: controller.play,
+              icon: Icon(Icons.play_circle_fill_outlined),
+            );
+          }
+
+          return CustomListTile(
+            leading: CircleAvatar(child: icon),
+            title: Slider(
+              value: positionInMilliseconds,
+              max: durationInMilliseconds,
+              onChanged: (next) {},
             ),
-            child: Row(
+            subtitle: Row(
               children: [
-                if (isEnded)
-                  IconButton(
-                    onPressed: controller.restart,
-                    icon: Icon(Icons.restart_alt_outlined),
-                  )
-                else if (isPlaying)
-                  IconButton(
-                    onPressed: controller.pause,
-                    icon: Icon(Icons.pause_circle_filled_outlined),
-                  )
-                else
-                  IconButton(
-                    onPressed: controller.play,
-                    icon: Icon(Icons.play_circle_fill_outlined),
-                  ),
-                Expanded(
-                  child: Column(
-                    children: [
-                      Slider(
-                        value: positionInMilliseconds,
-                        max: durationInMilliseconds,
-                        onChanged: (next) {},
-                      ),
-                      Padding(
-                        padding: const EdgeInsets.only(left: 16, right: 16),
-                        child: Row(
-                          children: [
-                            Text(formatDuration(position)),
-                            Spacer(),
-                            Text(formatDuration(duration)),
-                          ],
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
+                Text(formatDuration(position)),
+                Spacer(),
+                Text(formatDuration(duration)),
               ],
             ),
+            // trailing: IconButton(
+            //   icon: Icon(Icons.transcribe),
+            //   onPressed: () {},
+            // ),
           );
         });
       },

lib/widgets/video.dart

@@ -0,0 +1,69 @@
+import '/imports.dart';
+import 'package:chewie/chewie.dart';
+import 'package:video_player/video_player.dart' as video_player;
+
+class VideoPlayerController extends GetxController {
+  final String url;
+  VideoPlayerController({
+    required this.url,
+  });
+
+  final duration = Duration.zero.obs;
+  final position = Duration.zero.obs;
+  final isPlaying = false.obs;
+  final isLoaded = false.obs;
+  final isEnded = false.obs;
+
+  late video_player.VideoPlayerController _videoPlayerController;
+  late ChewieController chewieController;
+
+  @override
+  void onInit() {
+    super.onInit();
+
+    _videoPlayerController =
+        video_player.VideoPlayerController.networkUrl(Uri.parse(url));
+    chewieController = ChewieController(
+      videoPlayerController: _videoPlayerController,
+      autoPlay: false,
+      looping: false,
+    );
+  }
+
+  @override
+  void onClose() {
+    chewieController.dispose();
+    _videoPlayerController.dispose();
+
+    super.onClose();
+  }
+}
+
+class VideoPlayer extends StatelessWidget {
+  final int id;
+  final String url;
+  final double aspectRatio;
+
+  const VideoPlayer({
+    super.key,
+    required this.id,
+    required this.url,
+    double? aspectRatio,
+  }) : aspectRatio = aspectRatio ?? 16 / 9;
+
+  @override
+  Widget build(BuildContext context) {
+    return GetBuilder<VideoPlayerController>(
+      init: VideoPlayerController(url: url),
+      tag: id.toString(),
+      builder: (controller) {
+        return AspectRatio(
+          aspectRatio: aspectRatio,
+          child: Chewie(
+            controller: controller.chewieController,
+          ),
+        );
+      },
+    );
+  }
+}