TW-540: update display image size in web

linagora · Sep 18, 2023 · f6b3e0f · f6b3e0f
1 parent f17fea8
commit f6b3e0f
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 55 deletions.
diff --git a/lib/data/network/upload_file/file_info_extension.dart b/lib/data/network/upload_file/file_info_extension.dart
@@ -36,7 +36,7 @@ extension ImageFileInfoExtension on ImageFileInfo {
   Map<String, dynamic> get metadata => ({
         'mimetype': mimeType,
         'size': fileSize,
-        'width': width?.toDouble(),
-        'height': height?.toDouble(),
+        'w': width?.toDouble(),
+        'h': height?.toDouble(),
       });
 }
diff --git a/lib/domain/usecase/send_file_on_web_interactor.dart b/lib/domain/usecase/send_file_on_web_interactor.dart
@@ -15,7 +15,7 @@ class SendFileOnWebInteractor {
     try {
       final matrixFiles = filePickerResult.files
           .map(
-            (xFile) => MatrixFile(
+            (xFile) => MatrixFile.fromMimeType(
               bytes: xFile.bytes,
               name: xFile.name,
               filePath: '',

diff --git a/lib/pages/chat/events/image_bubble.dart b/lib/pages/chat/events/image_bubble.dart
@@ -1,4 +1,3 @@
-import 'dart:math';
 import 'dart:typed_data';
 
 import 'package:fluffychat/pages/chat/events/message_content_style.dart';
@@ -76,8 +75,8 @@ class ImageBubble extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final bubbleWidth = max(MessageContentStyle.imageBubbleMinWidth, width);
-    final bubbleHeight = max(MessageContentStyle.imageBubbleMinHeight, height);
+    final bubbleWidth = MessageContentStyle.imageBubbleWidth(width);
+    final bubbleHeight = MessageContentStyle.imageBubbleWidth(height);
     return Hero(
       tag: event.eventId,
       child: AnimatedSwitcher(

diff --git a/lib/pages/chat/events/message_content.dart b/lib/pages/chat/events/message_content.dart
@@ -444,27 +444,33 @@ class _MessageImageBuilder extends StatelessWidget {
     DisplayImageInfo? displayImageInfo =
         event.getThumbnailSize()?.getDisplayImageInfo(context);
 
-    if (matrixFile != null &&
-        matrixFile.filePath != null &&
-        matrixFile is MatrixImageFile) {
+    if (isSendingImageInMobile(matrixFile)) {
+      final file = matrixFile as MatrixImageFile;
       displayImageInfo = Size(
-        matrixFile.width!.toDouble(),
-        matrixFile.height!.toDouble(),
+        file.width?.toDouble() ?? MessageContentStyle.imageWidth(context),
+        file.height?.toDouble() ?? MessageContentStyle.imageHeight(context),
       ).getDisplayImageInfo(context);
       return SendingImageInfoWidget(
-        matrixFile: matrixFile,
+        matrixFile: file,
         event: event,
         onTapPreview: onTapPreview,
         displayImageInfo: displayImageInfo,
       );
     }
     displayImageInfo ??= DisplayImageInfo(
       size: Size(
-        MessageContentStyle.imageBubbleWidth(context),
-        MessageContentStyle.imageBubbleHeight(context),
+        MessageContentStyle.imageWidth(context),
+        MessageContentStyle.imageHeight(context),
       ),
       hasBlur: true,
     );
+    if (isSendingImageInWeb(matrixFile)) {
+      final file = matrixFile as MatrixImageFile;
+      displayImageInfo = Size(
+        file.width?.toDouble() ?? MessageContentStyle.imageWidth(context),
+        file.height?.toDouble() ?? MessageContentStyle.imageHeight(context),
+      ).getDisplayImageInfo(context);
+    }
     return ImageBubble(
       event,
       width: displayImageInfo.size.width,
@@ -475,4 +481,16 @@ class _MessageImageBuilder extends StatelessWidget {
       animated: true,
     );
   }
+
+  bool isSendingImageInWeb(MatrixFile? matrixFile) {
+    return matrixFile != null &&
+        matrixFile.bytes != null &&
+        matrixFile is MatrixImageFile;
+  }
+
+  bool isSendingImageInMobile(MatrixFile? matrixFile) {
+    return matrixFile != null &&
+        matrixFile.filePath != null &&
+        matrixFile is MatrixImageFile;
+  }
 }
diff --git a/lib/pages/chat/events/message_content_style.dart b/lib/pages/chat/events/message_content_style.dart
@@ -1,4 +1,7 @@
+import 'dart:math';
+
 import 'package:fluffychat/di/global/get_it_initializer.dart';
+import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:flutter/material.dart';
 
@@ -8,14 +11,14 @@ class MessageContentStyle {
   static const int maxLengthTextInline = 180;
   static const double appBarFontSize = 16.0;
 
-  static double imageBubbleWidth(BuildContext context) {
+  static double imageWidth(BuildContext context) {
     if (responsiveUtils.isDesktop(context)) {
       return imageBubbleWidthForWeb;
     }
     return imageBubbleWidthForMobileAndTablet;
   }
 
-  static double imageBubbleHeight(BuildContext context) {
+  static double imageHeight(BuildContext context) {
     if (responsiveUtils.isDesktop(context)) {
       return imageBubbleHeightForWeb;
     }
@@ -33,5 +36,17 @@ class MessageContentStyle {
   static Color backgroundColorButton = Colors.white.withAlpha(64);
   static const String defaultBlurHash = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj';
 
+  static double imageBubbleWidth(double displayWidth) => max(
+        MessageContentStyle.imageBubbleMinWidth,
+        displayWidth,
+      );
+
+  static double imageBubbleHeight(double displayHeight) => PlatformInfos.isWeb
+      ? displayHeight
+      : max(
+          MessageContentStyle.imageBubbleMinHeight,
+          displayHeight,
+        );
+
   static const double letterSpacingMessageContent = -0.15;
 }
diff --git a/lib/pages/chat/events/sending_image_info_widget.dart b/lib/pages/chat/events/sending_image_info_widget.dart
@@ -1,5 +1,4 @@
 import 'dart:io';
-import 'dart:math';
 import 'package:fluffychat/pages/chat/events/message_content_style.dart';
 import 'package:fluffychat/pages/image_viewer/image_viewer.dart';
 import 'package:fluffychat/presentation/model/file/display_image_info.dart';
@@ -79,12 +78,10 @@ class SendingImageInfoWidget extends StatelessWidget {
             children: [
               if (displayImageInfo.hasBlur)
                 SizedBox(
-                  width: max(
-                    MessageContentStyle.imageBubbleMinWidth,
+                  width: MessageContentStyle.imageBubbleWidth(
                     displayImageInfo.size.width,
                   ),
-                  height: max(
-                    MessageContentStyle.imageBubbleMinHeight,
+                  height: MessageContentStyle.imageBubbleHeight(
                     displayImageInfo.size.height,
                   ),
                   child:

diff --git a/lib/pages/chat/events/sending_video_widget.dart b/lib/pages/chat/events/sending_video_widget.dart
@@ -130,23 +130,20 @@ class _SendingVideoWidgetState extends State<SendingVideoWidget>
   (double, double) _getImageSize(int? imageWidth, int? imageHeight) {
     if (imageWidth == null || imageHeight == null) {
       return (
-        MessageContentStyle.imageBubbleWidth(context),
-        MessageContentStyle.imageBubbleHeight(context)
+        MessageContentStyle.imageWidth(context),
+        MessageContentStyle.imageHeight(context)
       );
     }
 
-    final ratio = MessageContentStyle.imageBubbleWidth(context) / imageWidth;
+    final ratio = MessageContentStyle.imageWidth(context) / imageWidth;
 
     if (imageWidth <= imageHeight) {
       return (
-        MessageContentStyle.imageBubbleWidth(context),
-        MessageContentStyle.imageBubbleHeight(context)
+        MessageContentStyle.imageWidth(context),
+        MessageContentStyle.imageHeight(context)
       );
     } else {
-      return (
-        MessageContentStyle.imageBubbleWidth(context),
-        imageHeight * ratio
-      );
+      return (MessageContentStyle.imageWidth(context), imageHeight * ratio);
     }
   }
 

diff --git a/lib/pages/chat/events/video_player.dart b/lib/pages/chat/events/video_player.dart
@@ -110,8 +110,8 @@ class EventVideoPlayerState extends State<EventVideoPlayer> {
       child: Material(
         color: Colors.black,
         child: SizedBox(
-          width: MessageContentStyle.imageBubbleWidth(context),
-          height: MessageContentStyle.imageBubbleHeight(context),
+          width: MessageContentStyle.imageWidth(context),
+          height: MessageContentStyle.imageHeight(context),
           child: chewieManager != null
               ? FittedBox(
                   fit: BoxFit.contain,

diff --git a/lib/presentation/extensions/send_file_extension.dart b/lib/presentation/extensions/send_file_extension.dart
@@ -18,8 +18,6 @@ typedef MessageType = String;
 typedef FakeImageEvent = SyncUpdate;
 
 extension SendFileExtension on Room {
-  static const maxImagesCacheInRoom = 10;
-
   Future<String?> sendFileEvent(
     FileInfo fileInfo, {
     String msgType = MessageTypes.Image,
@@ -190,8 +188,7 @@ extension SendFileExtension on Room {
           'thumbnail_url': thumbnailUploadResp.toString(),
         if (thumbnail != null && encryptedThumbnail != null)
           'thumbnail_file': encryptedThumbnail.toJson(),
-        if (thumbnail != null) 'thumbnail_info': thumbnail.metadata,
-      },
+      }..addAll(thumbnail?.metadata ?? {}),
       if (extraContent != null) ...extraContent,
     };
     final eventId = await sendEvent(

diff --git a/lib/presentation/extensions/send_file_web_extension.dart b/lib/presentation/extensions/send_file_web_extension.dart
@@ -1,20 +1,35 @@
 import 'package:flutter_image_compress/flutter_image_compress.dart';
 import 'package:matrix/matrix.dart';
+import 'package:image/image.dart';
 
 extension SendFileWebExtension on Room {
-  static const maxImagesCacheInRoom = 10;
-
   Future<String?> sendFileOnWebEvent(
     MatrixFile file, {
     SyncUpdate? fakeImageEvent,
     String? txid,
     Event? inReplyTo,
     String? editEventId,
     int? shrinkImageMaxDimension,
-    MatrixFile? thumbnail,
+    MatrixImageFile? thumbnail,
     Map<String, dynamic>? extraContent,
   }) async {
     txid ??= client.generateUniqueTransactionId();
+    Image? img;
+    if (file.bytes != null && file is MatrixImageFile) {
+      img = decodeImage(file.bytes!);
+      file = MatrixImageFile(
+        name: file.name,
+        width: img?.width,
+        height: img?.height,
+        bytes: file.bytes,
+      );
+    }
+    sendingFilePlaceholders[txid] = MatrixImageFile(
+      name: file.name,
+      width: img?.width,
+      height: img?.height,
+      bytes: file.bytes,
+    );
     fakeImageEvent ??= await sendFakeImageEvent(
       file,
       txid: txid,
@@ -43,7 +58,8 @@ extension SendFileWebExtension on Room {
     }
     // computing the thumbnail in case we can
     if (file.msgType == MessageTypes.Image &&
-        (thumbnail == null || shrinkImageMaxDimension != null)) {
+        (thumbnail == null || shrinkImageMaxDimension != null) &&
+        file is MatrixImageFile) {
       fakeImageEvent.rooms!.join!.values.first.timeline!.events!.first
               .unsigned![fileSendingStatusKey] =
           FileSendingStatus.generatingThumbnail.name;
@@ -149,8 +165,7 @@ extension SendFileWebExtension on Room {
             'iv': encryptedThumbnail.iv,
             'hashes': {'sha256': encryptedThumbnail.sha256}
           },
-        if (thumbnail != null) 'thumbnail_info': thumbnail.info,
-      },
+      }..addAll(thumbnail?.info ?? {}),
       if (extraContent != null) ...extraContent,
     };
     final eventId = await sendEvent(
@@ -170,7 +185,6 @@ extension SendFileWebExtension on Room {
     int? shrinkImageMaxDimension,
     Map<String, dynamic>? extraContent,
   }) async {
-    sendingFilePlaceholders[txid] = file;
     // sendingFileThumbnails[txid] =  MatrixImageFile(bytes: file.bytes, name: file.name);
 
     // Create a fake Event object as a placeholder for the uploading file:
@@ -225,17 +239,22 @@ extension SendFileWebExtension on Room {
     }
   }
 
-  Future<MatrixFile?> _generateThumbnail(MatrixFile originalFile) async {
+  Future<MatrixImageFile?> _generateThumbnail(
+    MatrixImageFile originalFile,
+  ) async {
     if (originalFile.bytes == null) return null;
     try {
       final result = await FlutterImageCompress.compressWithList(
         originalFile.bytes!,
         quality: 70,
       );
-      return MatrixFile(
+
+      return MatrixImageFile(
         bytes: result,
         name: originalFile.name,
         mimeType: originalFile.mimeType,
+        width: originalFile.width,
+        height: originalFile.height,
       );
     } catch (e) {
       Logs().e('Error while generating thumbnail', e);

diff --git a/lib/utils/extension/image_size_extension.dart b/lib/utils/extension/image_size_extension.dart
@@ -7,8 +7,8 @@ typedef ImageSize = Size;
 extension DisplayImageInfoExtension on ImageSize {
   DisplayImageInfo getDisplayImageInfo(BuildContext context) {
     Size displayImageSize = Size(
-      MessageContentStyle.imageBubbleWidth(context),
-      MessageContentStyle.imageBubbleHeight(context),
+      MessageContentStyle.imageWidth(context),
+      MessageContentStyle.imageHeight(context),
     );
     displayImageSize = _getDisplaySizeForImage(
       width.toDouble(),
@@ -28,8 +28,8 @@ extension DisplayImageInfoExtension on ImageSize {
     double height, {
     required BuildContext context,
   }) {
-    double displayHeight = MessageContentStyle.imageBubbleHeight(context);
-    double displayWidth = MessageContentStyle.imageBubbleWidth(context);
+    double displayHeight = MessageContentStyle.imageHeight(context);
+    double displayWidth = MessageContentStyle.imageWidth(context);
     if (height == 0 || width == 0) {
       return Size(displayWidth, displayHeight);
     }

diff --git a/lib/utils/matrix_sdk_extensions/event_extension.dart b/lib/utils/matrix_sdk_extensions/event_extension.dart
@@ -74,13 +74,10 @@ extension LocalizedBody on Event {
   }
 
   Size? getThumbnailSize() {
-    final thumbnailInfo = infoMap['thumbnail_info'];
-    if (thumbnailInfo is Map &&
-        thumbnailInfo['width'] != null &&
-        thumbnailInfo['height'] != null) {
+    if (infoMap['w'] != null && infoMap['h'] != null) {
       return Size(
-        thumbnailInfo['width'],
-        thumbnailInfo['height'],
+        double.tryParse(infoMap['w'].toString()) ?? 0,
+        double.tryParse(infoMap['h'].toString()) ?? 0,
       );
     }
     return null;