chore: Follow up image rendering

lib/pages/chat/chat.dart

@@ -152,7 +152,8 @@ class ChatController extends State<ChatPageWithRoom>
               return MatrixFile(
                 bytes: await xfile.readAsBytes(),
                 name: xfile.name,
-              );
+                mimeType: xfile.mimeType,
+              ).detectFileType;
             },
           ),
         );

lib/pages/chat/events/message_content.dart

@@ -112,13 +112,15 @@ class MessageContent extends StatelessWidget {
             const maxSize = 256.0;
             final w = event.content
                 .tryGetMap<String, Object?>('info')
-                    ?.tryGet<int>('w') ??
+                ?.tryGet<int>('w');
-                maxSize;
             final h = event.content
                 .tryGetMap<String, Object?>('info')
-                    ?.tryGet<int>('h') ??
+                ?.tryGet<int>('h');
-                maxSize;
+            var width = maxSize;
-            double width, height;
+            var height = maxSize;
+            var fit = BoxFit.cover;
+            if (w != null && h != null) {
+              fit = BoxFit.contain;
               if (w > h) {
                 width = maxSize;
                 height = max(32, maxSize * (h / w));
@@ -126,11 +128,12 @@ class MessageContent extends StatelessWidget {
                 height = maxSize;
                 width = max(32, maxSize * (w / h));
               }
+            }
             return ImageBubble(
               event,
               width: width,
               height: height,
-              fit: BoxFit.contain,
+              fit: fit,
               borderRadius: borderRadius,
             );
           case CuteEventContent.eventType:

lib/pages/chat/input_bar.dart

@@ -9,6 +9,7 @@ import 'package:pasteboard/pasteboard.dart';
 import 'package:slugify/slugify.dart';
 
 import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_file_extension.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/mxc_image.dart';
 import '../../widgets/avatar.dart';
@@ -464,7 +465,7 @@ class InputBar extends StatelessWidget {
                   mimeType: content.mimeType,
                   bytes: data,
                   name: content.uri.split('/').last,
-                );
+                ).detectFileType;
                 room.sendFileEvent(file, shrinkImageMaxDimension: 1600);
               },
             ),

lib/widgets/blur_hash.dart

@@ -34,6 +34,7 @@ class _BlurHashState extends State<BlurHash> {
   }
 
   Future<Uint8List?> _computeBlurhashData() async {
+    if (_data != null) return _data!;
     final ratio = widget.width / widget.height;
     var width = 32;
     var height = 32;
@@ -57,13 +58,14 @@ class _BlurHashState extends State<BlurHash> {
   Widget build(BuildContext context) {
     return FutureBuilder<Uint8List?>(
       future: _computeBlurhashData(),
+      initialData: _data,
       builder: (context, snapshot) {
         final data = snapshot.data;
         if (data == null) {
           return Container(
             width: widget.width,
             height: widget.height,
-            color: Theme.of(context).colorScheme.surface,
+            color: Theme.of(context).colorScheme.onInverseSurface,
           );
         }
         return Image.memory(

lib/widgets/mxc_image.dart

@@ -130,11 +130,8 @@ class _MxcImageState extends State<MxcImage> {
     }
   }
 
-  bool _hasDataFromBeginning = false;
-
   void _tryLoad(_) async {
     if (_imageData != null) {
-      _hasDataFromBeginning = true;
       return;
     }
     try {
@@ -163,22 +160,19 @@ class _MxcImageState extends State<MxcImage> {
     final data = _imageData;
     final hasData = data != null && data.isNotEmpty;
 
-    return Stack(
+    return AnimatedCrossFade(
-      children: [
+      crossFadeState:
-        if (!_hasDataFromBeginning) placeholder(context),
+          hasData ? CrossFadeState.showSecond : CrossFadeState.showFirst,
-        AnimatedOpacity(
-          opacity: hasData ? 1 : 0,
       duration: FluffyThemes.animationDuration,
-          curve: FluffyThemes.animationCurve,
+      firstChild: placeholder(context),
-          child: hasData
+      secondChild: hasData
           ? Image.memory(
               data,
               width: widget.width,
               height: widget.height,
               fit: widget.fit,
-                  filterQuality: widget.isThumbnail
+              filterQuality:
-                      ? FilterQuality.low
+                  widget.isThumbnail ? FilterQuality.low : FilterQuality.medium,
-                      : FilterQuality.medium,
               errorBuilder: (context, __, ___) {
                 _isCached = false;
                 _imageData = null;
@@ -190,8 +184,6 @@ class _MxcImageState extends State<MxcImage> {
               width: widget.width,
               height: widget.height,
             ),
-        ),
-      ],
     );
   }
 }