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

@@ -111,26 +111,29 @@ class MessageContent extends StatelessWidget {
             if (event.redacted) continue textmessage;
             const maxSize = 256.0;
             final w = event.content
-                    .tryGetMap<String, Object?>('info')
-                    ?.tryGet<int>('w') ??
-                maxSize;
+                .tryGetMap<String, Object?>('info')
+                ?.tryGet<int>('w');
             final h = event.content
-                    .tryGetMap<String, Object?>('info')
-                    ?.tryGet<int>('h') ??
-                maxSize;
-            double width, height;
-            if (w > h) {
-              width = maxSize;
-              height = max(32, maxSize * (h / w));
-            } else {
-              height = maxSize;
-              width = max(32, maxSize * (w / h));
+                .tryGetMap<String, Object?>('info')
+                ?.tryGet<int>('h');
+            var width = maxSize;
+            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));
+              } else {
+                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,35 +160,30 @@ class _MxcImageState extends State<MxcImage> {
     final data = _imageData;
     final hasData = data != null && data.isNotEmpty;
 
-    return Stack(
-      children: [
-        if (!_hasDataFromBeginning) placeholder(context),
-        AnimatedOpacity(
-          opacity: hasData ? 1 : 0,
-          duration: FluffyThemes.animationDuration,
-          curve: FluffyThemes.animationCurve,
-          child: hasData
-              ? Image.memory(
-                  data,
-                  width: widget.width,
-                  height: widget.height,
-                  fit: widget.fit,
-                  filterQuality: widget.isThumbnail
-                      ? FilterQuality.low
-                      : FilterQuality.medium,
-                  errorBuilder: (context, __, ___) {
-                    _isCached = false;
-                    _imageData = null;
-                    WidgetsBinding.instance.addPostFrameCallback(_tryLoad);
-                    return placeholder(context);
-                  },
-                )
-              : SizedBox(
-                  width: widget.width,
-                  height: widget.height,
-                ),
-        ),
-      ],
+    return AnimatedCrossFade(
+      crossFadeState:
+          hasData ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+      duration: FluffyThemes.animationDuration,
+      firstChild: placeholder(context),
+      secondChild: hasData
+          ? Image.memory(
+              data,
+              width: widget.width,
+              height: widget.height,
+              fit: widget.fit,
+              filterQuality:
+                  widget.isThumbnail ? FilterQuality.low : FilterQuality.medium,
+              errorBuilder: (context, __, ___) {
+                _isCached = false;
+                _imageData = null;
+                WidgetsBinding.instance.addPostFrameCallback(_tryLoad);
+                return placeholder(context);
+              },
+            )
+          : SizedBox(
+              width: widget.width,
+              height: widget.height,
+            ),
     );
   }
 }