Add thumbHash support

Author: nicolasbraun

examples/flyer_chat/ios/Podfile.lock

@@ -40,6 +40,18 @@ PODS:
     - Flutter
   - isar_flutter_libs (1.0.0):
     - Flutter
+  - libwebp (1.5.0):
+    - libwebp/demux (= 1.5.0)
+    - libwebp/mux (= 1.5.0)
+    - libwebp/sharpyuv (= 1.5.0)
+    - libwebp/webp (= 1.5.0)
+  - libwebp/demux (1.5.0):
+    - libwebp/webp
+  - libwebp/mux (1.5.0):
+    - libwebp/demux
+  - libwebp/sharpyuv (1.5.0)
+  - libwebp/webp (1.5.0):
+    - libwebp/sharpyuv
   - package_info_plus (0.4.5):
     - Flutter
   - path_provider_foundation (0.0.1):
@@ -52,6 +64,9 @@ PODS:
   - video_player_avfoundation (0.0.1):
     - Flutter
     - FlutterMacOS
+  - video_thumbnail (0.0.1):
+    - Flutter
+    - libwebp
   - wakelock_plus (0.0.1):
     - Flutter
 
@@ -64,12 +79,14 @@ DEPENDENCIES:
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
   - video_player_avfoundation (from `.symlinks/plugins/video_player_avfoundation/darwin`)
+  - video_thumbnail (from `.symlinks/plugins/video_thumbnail/ios`)
   - wakelock_plus (from `.symlinks/plugins/wakelock_plus/ios`)
 
 SPEC REPOS:
   trunk:
     - DKImagePickerController
     - DKPhotoGallery
+    - libwebp
     - SDWebImage
     - SwiftyGif
 
@@ -90,6 +107,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/path_provider_foundation/darwin"
   video_player_avfoundation:
     :path: ".symlinks/plugins/video_player_avfoundation/darwin"
+  video_thumbnail:
+    :path: ".symlinks/plugins/video_thumbnail/ios"
   wakelock_plus:
     :path: ".symlinks/plugins/wakelock_plus/ios"
 
@@ -101,11 +120,13 @@ SPEC CHECKSUMS:
   image_picker_ios: 7fe1ff8e34c1790d6fff70a32484959f563a928a
   integration_test: 4a889634ef21a45d28d50d622cf412dc6d9f586e
   isar_flutter_libs: 9fc2cfb928c539e1b76c481ba5d143d556d94920
+  libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
   package_info_plus: af8e2ca6888548050f16fa2f1938db7b5a5df499
   path_provider_foundation: 080d55be775b7414fd5a5ef3ac137b97b097e564
   SDWebImage: f84b0feeb08d2d11e6a9b843cb06d75ebf5b8868
   SwiftyGif: 706c60cf65fa2bc5ee0313beece843c8eb8194d4
   video_player_avfoundation: 2cef49524dd1f16c5300b9cd6efd9611ce03639b
+  video_thumbnail: b637e0ad5f588ca9945f6e2c927f73a69a661140
   wakelock_plus: e29112ab3ef0b318e58cfa5c32326458be66b556
 
 PODFILE CHECKSUM: 4305caec6b40dde0ae97be1573c53de1882a07e5

examples/flyer_chat/lib/local.dart

@@ -1,3 +1,4 @@
+import 'dart:convert';
 import 'dart:math';
 
 import 'package:dio/dio.dart';
@@ -12,9 +13,12 @@ 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';
@@ -417,44 +421,129 @@ class LocalState extends State<Local> {
                 title: const Text('Video'),
                 onTap: () async {
                   Navigator.pop(context);
-                  // Uncomment to use proper path
-                  // Hardcoding for testing since the simulator library doesn't expose video files
+                  // Uncomment to use picker instead of hardcoding the video url
 
                   final picker = ImagePicker();
                   final result = await picker.pickVideo(
                     source: ImageSource.gallery,
                   );
 
                   if (result != null) {
-                    // Optionally get the file size
-                    // final fileSizeInBytes = await result.length();
-                    // Note to get the height/width of the video, you can use the following:
-                    // final controller = VideoPlayerController.file(file);
-                    // await controller.initialize();
-                    // final width = controller.value.size.width;
-                    // final height = controller.value.size.height;
+                    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(),
-                      // Uncomment to use proper path
-                      // Hardcoding for testing since the simulator library doesn't expose video files
                       source: result.path,
-
-                      // size: fileSizeInBytes,
+                      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
+                  //   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:
-                  //       'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
+                  //   source: videoUrl,
+                  //   thumbhash: thumbHash,
+                  //   width: width?.toDouble(),
+                  //   height: height?.toDouble(),
                   // );
                   // await _chatController.insertMessage(videoMessage);
                 },

examples/flyer_chat/pubspec.yaml

@@ -50,14 +50,17 @@ dependencies:
   hive_ce: ^2.11.2
   hive_ce_flutter: ^2.3.1
   http: ^1.3.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.4
   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.2
 
 dev_dependencies:

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

@@ -268,6 +268,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.