fixup! TW-1806: display avif file in web

linagora · Jun 13, 2024 · c5d8532 · c5d8532
1 parent a308f10
commit c5d8532
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 34 deletions.
diff --git a/lib/pages/chat/events/images_builder/unencrypted_image_builder_web.dart b/lib/pages/chat/events/images_builder/unencrypted_image_builder_web.dart
@@ -75,7 +75,7 @@ class UnencryptedImageWidget extends StatelessWidget {
               ),
             ),
             Icon(
-              Icons.arrow_downward,
+              Icons.error,
               size: MessageContentStyle.iconErrorSize,
               color: Theme.of(context).colorScheme.onError,
             ),

diff --git a/lib/pages/image_viewer/image_viewer_view.dart b/lib/pages/image_viewer/image_viewer_view.dart
@@ -149,6 +149,14 @@ class _ImageWidget extends StatelessWidget {
       );
     } else {
       if (controller.filePath != null) {
+        if (event.mimeType == TwakeMimeTypeExtension.avifMimeType) {
+          return AvifImage.file(
+            File(controller.filePath!),
+            height: height,
+            width: width,
+            fit: BoxFit.cover,
+          );
+        }
         return Image.file(
           File(controller.filePath!),
           fit: BoxFit.contain,

diff --git a/lib/presentation/extensions/send_file_extension.dart b/lib/presentation/extensions/send_file_extension.dart
@@ -10,6 +10,7 @@ import 'package:fluffychat/presentation/extensions/image_extension.dart';
 import 'package:fluffychat/presentation/fake_sending_file_info.dart';
 import 'package:fluffychat/presentation/model/file/file_asset_entity.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
+import 'package:fluffychat/utils/extension/mime_type_extension.dart';
 import 'package:fluffychat/utils/manager/storage_directory_manager.dart';
 import 'package:flutter/widgets.dart';
 import 'package:image/image.dart' as img;
@@ -70,8 +71,25 @@ extension SendFileExtension on Room {
       rethrow;
     }
 
-    final encryptedService = EncryptedService();
     final tempDir = await getTemporaryDirectory();
+
+    if (TwakeMimeTypeExtension.heicMimeTypes.contains(fileInfo.mimeType) &&
+        fileInfo is ImageFileInfo) {
+      final formattedDateTime = DateTime.now().getFormattedCurrentDateTime();
+      final targetPath =
+          await File('${tempDir.path}/$formattedDateTime${fileInfo.fileName}')
+              .create();
+      await _generateThumbnail(fileInfo, targetPath: targetPath.path);
+      fileInfo = ImageFileInfo(
+        fileInfo.fileName,
+        targetPath.path,
+        await targetPath.length(),
+        width: fileInfo.width,
+        height: fileInfo.height,
+      );
+    }
+
+    final encryptedService = EncryptedService();
     final formattedDateTime = DateTime.now().getFormattedCurrentDateTime();
     final tempEncryptedFile =
         await File('${tempDir.path}/$formattedDateTime${fileInfo.fileName}')

diff --git a/lib/utils/extension/mime_type_extension.dart b/lib/utils/extension/mime_type_extension.dart
@@ -107,4 +107,9 @@ extension TwakeMimeTypeExtension on TwakeMimeType {
   }
 
   static const String avifMimeType = 'image/avif';
+
+  static const List<String> heicMimeTypes = [
+    'image/heic',
+    'image/heif',
+  ];
 }
diff --git a/lib/widgets/mxc_image.dart b/lib/widgets/mxc_image.dart
@@ -3,11 +3,14 @@ import 'dart:typed_data';
 import 'package:fluffychat/pages/image_viewer/image_viewer.dart';
 import 'package:fluffychat/presentation/enum/chat/media_viewer_popup_result_enum.dart';
 import 'package:fluffychat/utils/extension/build_context_extension.dart';
+import 'package:fluffychat/utils/extension/mime_type_extension.dart';
 import 'package:fluffychat/utils/interactive_viewer_gallery.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/download_file_extension.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/hero_page_route.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_avif/flutter_avif.dart';
 import 'package:http/http.dart' as http;
 import 'package:matrix/matrix.dart';
 import 'package:fluffychat/config/themes.dart';
@@ -304,6 +307,7 @@ class _MxcImageState extends State<MxcImage> {
                 : BorderRadius.zero,
             child: _ImageWidget(
               filePath: filePath,
+              event: widget.event,
               data: data,
               width: widget.width,
               height: widget.height,
@@ -326,6 +330,7 @@ class _ImageWidget extends StatelessWidget {
   final String? filePath;
   final Uint8List? data;
   final double? width;
+  final Event? event;
   final double? height;
   final bool needResize;
   final BoxFit? fit;
@@ -337,6 +342,7 @@ class _ImageWidget extends StatelessWidget {
     this.filePath,
     this.data,
     this.width,
+    this.event,
     this.height,
     required this.needResize,
     this.fit,
@@ -348,43 +354,97 @@ class _ImageWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return filePath != null && filePath!.isNotEmpty
-        ? Image.file(
-            File(filePath!),
+        ? _ImageNativeBuilder(
+            filePath: filePath,
             width: width,
             height: height,
-            cacheWidth: cacheWidth != null
-                ? cacheWidth!
-                : (width != null && needResize)
-                    ? context.getCacheSize(width!)
-                    : null,
-            cacheHeight: cacheHeight != null
-                ? cacheHeight!
-                : (height != null && needResize)
-                    ? context.getCacheSize(height!)
-                    : null,
+            cacheWidth: cacheWidth,
+            needResize: needResize,
+            cacheHeight: cacheHeight,
             fit: fit,
-            filterQuality: FilterQuality.medium,
-            errorBuilder: imageErrorWidgetBuilder,
+            event: event,
+            imageErrorWidgetBuilder: imageErrorWidgetBuilder,
           )
         : data != null
-            ? Image.memory(
-                data!,
-                width: width,
-                height: height,
-                cacheWidth: cacheWidth != null
-                    ? cacheWidth!
-                    : (width != null && needResize)
-                        ? context.getCacheSize(width!)
-                        : null,
-                cacheHeight: cacheHeight != null
-                    ? cacheHeight!
-                    : (height != null && needResize)
-                        ? context.getCacheSize(height!)
-                        : null,
-                fit: fit,
-                filterQuality: FilterQuality.medium,
-                errorBuilder: imageErrorWidgetBuilder,
-              )
+            ? event?.mimeType == TwakeMimeTypeExtension.avifMimeType
+                ? AvifImage.memory(
+                    data!,
+                    height: height,
+                    width: width,
+                    fit: BoxFit.cover,
+                  )
+                : Image.memory(
+                    data!,
+                    width: width,
+                    height: height,
+                    cacheWidth: cacheWidth != null
+                        ? cacheWidth!
+                        : (width != null && needResize)
+                            ? context.getCacheSize(width!)
+                            : null,
+                    cacheHeight: cacheHeight != null
+                        ? cacheHeight!
+                        : (height != null && needResize)
+                            ? context.getCacheSize(height!)
+                            : null,
+                    fit: fit,
+                    filterQuality: FilterQuality.medium,
+                    errorBuilder: imageErrorWidgetBuilder,
+                  )
             : const SizedBox.shrink();
   }
 }
+
+class _ImageNativeBuilder extends StatelessWidget {
+  const _ImageNativeBuilder({
+    this.filePath,
+    this.width,
+    this.height,
+    this.cacheWidth,
+    required this.needResize,
+    this.cacheHeight,
+    this.fit,
+    required this.imageErrorWidgetBuilder,
+    this.event,
+  });
+
+  final String? filePath;
+  final Event? event;
+  final double? width;
+  final double? height;
+  final int? cacheWidth;
+  final bool needResize;
+  final int? cacheHeight;
+  final BoxFit? fit;
+  final ImageErrorWidgetBuilder imageErrorWidgetBuilder;
+
+  @override
+  Widget build(BuildContext context) {
+    if (event?.mimeType == TwakeMimeTypeExtension.avifMimeType) {
+      return AvifImage.file(
+        File(filePath!),
+        height: height,
+        width: width,
+        fit: BoxFit.cover,
+      );
+    }
+    return Image.file(
+      File(filePath!),
+      width: width,
+      height: height,
+      cacheWidth: cacheWidth != null
+          ? cacheWidth!
+          : (width != null && needResize)
+              ? context.getCacheSize(width!)
+              : null,
+      cacheHeight: cacheHeight != null
+          ? cacheHeight!
+          : (height != null && needResize)
+              ? context.getCacheSize(height!)
+              : null,
+      fit: fit,
+      filterQuality: FilterQuality.medium,
+      errorBuilder: imageErrorWidgetBuilder,
+    );
+  }
+}