Feat/video message

examples/flyer_chat/ios/Podfile.lock

@@ -43,9 +43,9 @@ PODS:
   - path_provider_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
-  - SDWebImage (5.21.0):
-    - SDWebImage/Core (= 5.21.0)
-  - SDWebImage/Core (5.21.0)
+  - SDWebImage (5.21.1):
+    - SDWebImage/Core (= 5.21.1)
+  - SDWebImage/Core (5.21.1)
   - SwiftyGif (5.4.5)
   - url_launcher_ios (0.0.1):
     - Flutter
@@ -91,7 +91,7 @@ SPEC CHECKSUMS:
   integration_test: 4a889634ef21a45d28d50d622cf412dc6d9f586e
   isar_flutter_libs: 9fc2cfb928c539e1b76c481ba5d143d556d94920
   path_provider_foundation: 080d55be775b7414fd5a5ef3ac137b97b097e564
-  SDWebImage: f84b0feeb08d2d11e6a9b843cb06d75ebf5b8868
+  SDWebImage: f29024626962457f3470184232766516dee8dfea
   SwiftyGif: 706c60cf65fa2bc5ee0313beece843c8eb8194d4
   url_launcher_ios: 694010445543906933d732453a59da0a173ae33d
 

examples/flyer_chat/lib/local.dart

@@ -1,3 +1,4 @@
+import 'dart:convert';
 import 'dart:math';
 
 import 'package:dio/dio.dart';
@@ -12,9 +13,13 @@ import 'package:flyer_chat_file_message/flyer_chat_file_message.dart';
 import 'package:flyer_chat_image_message/flyer_chat_image_message.dart';
 import 'package:flyer_chat_system_message/flyer_chat_system_message.dart';
 import 'package:flyer_chat_text_message/flyer_chat_text_message.dart';
+import 'package:flyer_chat_video_message/flyer_chat_video_message.dart';
+import 'package:image/image.dart' as img;
 import 'package:image_picker/image_picker.dart';
 import 'package:pull_down_button/pull_down_button.dart';
+import 'package:thumbhash/thumbhash.dart' show rgbaToThumbHash;
 import 'package:uuid/uuid.dart';
+import 'package:video_thumbnail/video_thumbnail.dart';
 
 import 'create_message.dart';
 import 'widgets/composer_action_bar.dart';
@@ -98,6 +103,15 @@ class LocalState extends State<Local> {
                 required bool isSentByMe,
                 MessageGroupStatus? groupStatus,
               }) => FlyerChatImageMessage(message: message, index: index),
+
+          videoMessageBuilder:
+              (
+                context,
+                message,
+                index, {
+                required bool isSentByMe,
+                MessageGroupStatus? groupStatus,
+              }) => FlyerChatVideoMessage(message: message),
           systemMessageBuilder:
               (
                 context,
@@ -449,6 +463,139 @@ class LocalState extends State<Local> {
                   }
                 },
               ),
+              ListTile(
+                leading: const Icon(Icons.video_camera_front),
+                title: const Text('Video'),
+                onTap: () async {
+                  Navigator.pop(context);
+                  // Uncomment to use picker instead of hardcoding the video url
+
+                  // final picker = ImagePicker();
+                  // final result = await picker.pickVideo(
+                  //   source: ImageSource.gallery,
+                  // );
+
+                  // if (result != null) {
+                  //   String? thumbHash;
+                  //   int? width;
+                  //   int? height;
+                  //   int? fileSizeInBytes;
+                  //   try {
+                  //     // Optionally get the file size
+                  //     fileSizeInBytes = await result.length();
+
+                  //     // Get the video width and height
+                  //     final fullSizeimageBytes =
+                  //         await VideoThumbnail.thumbnailData(
+                  //           video: result.path,
+                  //           imageFormat: ImageFormat.WEBP,
+                  //           quality: 1,
+                  //         );
+
+                  //     final fullSizedecoded = img.decodeImage(
+                  //       fullSizeimageBytes!,
+                  //     );
+                  //     if (fullSizedecoded != null) {
+                  //       width = fullSizedecoded.width;
+                  //       height = fullSizedecoded.height;
+                  //     }
+
+                  //     // Generate the thumbhash
+                  //     final thumbSizeImageBytes =
+                  //         await VideoThumbnail.thumbnailData(
+                  //           video: result.path,
+                  //           imageFormat: ImageFormat.WEBP,
+                  //           maxWidth: 100,
+                  //           maxHeight: 100,
+                  //           quality: 25,
+                  //         );
+                  //     final decoded = img.decodeImage(thumbSizeImageBytes!);
+                  //     if (decoded != null) {
+                  //       final thumbHashBytes = rgbaToThumbHash(
+                  //         decoded.width,
+                  //         decoded.height,
+                  //         decoded.getBytes(),
+                  //       );
+
+                  //       thumbHash = base64.encode(thumbHashBytes);
+                  //     }
+                  //   } catch (e) {
+                  //     debugPrint(e.toString());
+                  //   }
+
+                  //   // Create a proper file message
+                  //   final videoMessage = VideoMessage(
+                  //     id: _uuid.v4(),
+                  //     authorId: _currentUser.id,
+                  //     createdAt: DateTime.now().toUtc(),
+                  //     sentAt: DateTime.now().toUtc(),
+                  //     source: result.path,
+                  //     thumbhash: thumbHash,
+                  //     width: width?.toDouble(),
+                  //     height: height?.toDouble(),
+                  //     size: fileSizeInBytes,
+                  //   );
+                  //   await _chatController.insertMessage(videoMessage);
+                  // }
+
+                  const videoUrl =
+                      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
+                  String? thumbHash;
+                  int? width;
+                  int? height;
+                  try {
+                    // Get the video width and height
+                    // iOS/ Android ONLY
+                    final fullSizeimageBytes =
+                        await VideoThumbnail.thumbnailData(
+                          video: videoUrl,
+                          imageFormat: ImageFormat.WEBP,
+                          quality: 1,
+                        );
+
+                    final fullSizedecoded = img.decodeImage(
+                      fullSizeimageBytes!,
+                    );
+                    if (fullSizedecoded != null) {
+                      width = fullSizedecoded.width;
+                      height = fullSizedecoded.height;
+                    }
+
+                    // Generate the thumbhash
+                    final thumbSizeImageBytes =
+                        await VideoThumbnail.thumbnailData(
+                          video: videoUrl,
+                          imageFormat: ImageFormat.WEBP,
+                          maxWidth: 100,
+                          maxHeight: 100,
+                          quality: 25,
+                        );
+                    final decoded = img.decodeImage(thumbSizeImageBytes!);
+                    if (decoded != null) {
+                      final thumbHashBytes = rgbaToThumbHash(
+                        decoded.width,
+                        decoded.height,
+                        decoded.getBytes(),
+                      );
+
+                      thumbHash = base64.encode(thumbHashBytes);
+                    }
+                  } catch (e) {
+                    debugPrint(e.toString());
+                  }
+
+                  final videoMessage = VideoMessage(
+                    id: _uuid.v4(),
+                    authorId: _currentUser.id,
+                    createdAt: DateTime.now().toUtc(),
+                    source: videoUrl,
+                    thumbhash: thumbHash,
+                    width: width?.toDouble(),
+                    height: height?.toDouble(),
+                  );
+                  await _chatController.insertMessage(videoMessage);
+                },
+              ),
             ],
           ),
         );

examples/flyer_chat/pubspec.yaml

@@ -46,18 +46,22 @@ dependencies:
   flyer_chat_system_message: ^2.1.13
   flyer_chat_text_message: ^2.5.1
   flyer_chat_text_stream_message: ^2.2.6
+  flyer_chat_video_message: ^0.0.15
   google_generative_ai: ^0.4.6
   hive_ce: ^2.11.3
   hive_ce_flutter: ^2.3.1
   http: ^1.4.0
+  image: ^4.5.4
   image_picker: ^1.1.2
   intl: ^0.20.2
   isar_flutter_libs: ^4.0.0-dev.14
   path: ^1.9.1
   path_provider: ^2.1.5
   provider: ^6.1.5
   pull_down_button: ^0.10.2
+  thumbhash: ^0.1.0+1
   uuid: ^4.5.1
+  video_thumbnail: ^0.5.6
   web_socket_channel: ^3.0.3
 
 dev_dependencies:

packages/flutter_chat_core/lib/src/models/message.dart

@@ -309,6 +309,9 @@ sealed class Message with _$Message {
 
     /// Height of the video in pixels.
     double? height,
+
+    /// ThumbHash string for a low-resolution placeholder.
+    String? thumbhash,
   }) = VideoMessage;
 
   /// Creates an audio message.