TW-1650: part II: memory footprint in web: remove unnecessary animation and Image.memory in web

lib/pages/chat/chat.dart

@@ -16,6 +16,7 @@ import 'package:fluffychat/widgets/mixins/popup_menu_widget_style.dart';
 import 'package:fluffychat/widgets/mixins/twake_context_menu_mixin.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
 import 'package:fluffychat/utils/extension/global_key_extension.dart';
+import 'package:inview_notifier_list/inview_notifier_list.dart';
 import 'package:universal_html/html.dart' as html;
 
 import 'package:adaptive_dialog/adaptive_dialog.dart';
@@ -1930,7 +1931,7 @@ class ChatController extends State<Chat>
     pinnedMessageScrollController.dispose();
     onUpdateEventStreamSubcription?.cancel();
     keyboardVisibilitySubscription?.cancel();
-
+    InViewNotifierListCustom.of(context)?.dispose();
     replyEventNotifier.dispose();
     super.dispose();
   }

lib/pages/chat/events/event_video_player.dart

@@ -9,7 +9,7 @@ import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:linagora_design_flutter/linagora_design_flutter.dart';
 import 'package:matrix/matrix.dart';
 
-import 'package:fluffychat/pages/chat/events/image_bubble.dart';
+import 'package:fluffychat/pages/chat/events/images_builder/image_bubble.dart';
 import 'package:linagora_design_flutter/extensions/duration_extension.dart';
 
 typedef DownloadVideoEventCallback = Future<String> Function(Event event);

lib/pages/chat/events/html_message.dart

@@ -84,7 +84,7 @@ class HtmlMessage extends StatelessWidget {
         double? height, {
         bool? animated = false,
       }) {
-        final ratio = MediaQuery.of(context).devicePixelRatio;
+        final ratio = MediaQuery.devicePixelRatioOf(context);
         return Uri.parse(mxc)
             .getThumbnail(
               matrix.client,

lib/pages/chat/events/images_builder/image_bubble.dart

@@ -0,0 +1,122 @@
+import 'dart:typed_data';
+
+import 'package:fluffychat/pages/chat/events/images_builder/image_builder_web.dart';
+import 'package:fluffychat/pages/chat/events/images_builder/image_placeholder.dart';
+import 'package:fluffychat/pages/chat/events/message_content_style.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
+import 'package:fluffychat/utils/platform_infos.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
+import 'package:matrix/matrix.dart';
+import 'package:fluffychat/widgets/mxc_image.dart';
+
+class ImageBubble extends StatelessWidget {
+  final Event event;
+  final BoxFit fit;
+  final bool maxSize;
+  final bool thumbnailOnly;
+  final bool animated;
+  final double width;
+  final double height;
+  final bool rounded;
+  final void Function()? onTapPreview;
+  final void Function()? onTapSelectMode;
+  final bool isPreview;
+  final Duration animationDuration;
+  final Uint8List? imageData;
+
+  final String? thumbnailCacheKey;
+  final Map<EventId, ImageData>? thumbnailCacheMap;
+  final bool noResizeThumbnail;
+
+  const ImageBubble(
+    this.event, {
+    this.maxSize = true,
+    this.fit = BoxFit.cover,
+    this.thumbnailOnly = true,
+    this.width = 256,
+    this.height = 300,
+    this.animated = false,
+    this.rounded = true,
+    this.onTapSelectMode,
+    this.onTapPreview,
+    this.animationDuration = const Duration(milliseconds: 500),
+    this.thumbnailCacheKey,
+    this.thumbnailCacheMap,
+    this.noResizeThumbnail = false,
+    this.isPreview = true,
+    this.imageData,
+    Key? key,
+  }) : super(key: key);
+
+  static const animationSwitcherDuration = Duration(seconds: 1);
+
+  @override
+  Widget build(BuildContext context) {
+    final bubbleWidth = MessageContentStyle.imageBubbleWidth(width);
+    final bubbleHeight = MessageContentStyle.imageBubbleWidth(height);
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: rounded
+            ? MessageContentStyle.borderRadiusBubble
+            : BorderRadius.zero,
+      ),
+      constraints: maxSize
+          ? BoxConstraints(
+              maxWidth: bubbleWidth,
+              maxHeight: bubbleHeight,
+            )
+          : null,
+      child: ClipRRect(
+        borderRadius: rounded
+            ? MessageContentStyle.borderRadiusBubble
+            : BorderRadius.zero,
+        child: (PlatformInfos.isWeb &&
+                !event.isEventEncrypted(isThumbnail: thumbnailOnly))
+            ? UnencryptedImageBuilderWeb(
+                event: event,
+                isThumbnail: thumbnailOnly,
+                width: width,
+                height: height,
+                onTapPreview: onTapPreview,
+                onTapSelectMode: onTapSelectMode,
+                fit: fit,
+              )
+            : Stack(
+                alignment: Alignment.center,
+                children: [
+                  SizedBox(
+                    width: bubbleWidth,
+                    height: bubbleHeight,
+                    child: const BlurHash(
+                      hash: MessageContentStyle.defaultBlurHash,
+                    ),
+                  ),
+                  MxcImage(
+                    event: event,
+                    width: width,
+                    height: height,
+                    fit: fit,
+                    animated: animated,
+                    isThumbnail: thumbnailOnly,
+                    placeholder: (context) => ImagePlaceholder(
+                      event: event,
+                      width: width,
+                      height: height,
+                      fit: fit,
+                    ),
+                    onTapPreview: onTapPreview,
+                    onTapSelectMode: onTapSelectMode,
+                    isPreview: isPreview,
+                    animationDuration: animationDuration,
+                    cacheKey: thumbnailCacheKey,
+                    cacheMap: thumbnailCacheMap,
+                    noResize: noResizeThumbnail,
+                    imageData: imageData,
+                  ),
+                ],
+              ),
+      ),
+    );
+  }
+}

lib/pages/chat/events/images_builder/image_builder_web.dart

@@ -0,0 +1,85 @@
+import 'package:fluffychat/pages/chat/events/images_builder/unencrypted_image_builder_web.dart';
+import 'package:fluffychat/pages/chat/events/message_content_style.dart';
+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/interactive_viewer_gallery.dart';
+import 'package:fluffychat/utils/platform_infos.dart';
+import 'package:fluffychat/widgets/hero_page_route.dart';
+import 'package:flutter/material.dart';
+import 'package:matrix/matrix.dart';
+
+class UnencryptedImageBuilderWeb extends StatelessWidget {
+  final Event event;
+
+  final bool isThumbnail;
+
+  final double width;
+
+  final double height;
+
+  final BoxFit fit;
+
+  final VoidCallback? closeRightColumn;
+
+  final void Function()? onTapPreview;
+
+  final void Function()? onTapSelectMode;
+
+  const UnencryptedImageBuilderWeb({
+    super.key,
+    required this.event,
+    this.isThumbnail = true,
+    this.width = MessageContentStyle.imageBubbleWidthForMobileAndTablet,
+    this.height = MessageContentStyle.imageBubbleHeightForMobileAndTable,
+    this.fit = BoxFit.cover,
+    this.onTapSelectMode,
+    this.onTapPreview,
+    this.closeRightColumn,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Hero(
+      tag: event.eventId,
+      child: Material(
+        child: InkWell(
+          mouseCursor: SystemMouseCursors.click,
+          borderRadius: MessageContentStyle.borderRadiusBubble,
+          onTap: onTapPreview != null || onTapSelectMode != null
+              ? () => _onTap(context)
+              : null,
+          child: UnencryptedImageWidget(
+            event: event,
+            isThumbnail: isThumbnail,
+            width: width,
+            height: height,
+            fit: fit,
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _onTap(BuildContext context) async {
+    if (onTapPreview != null) {
+      onTapPreview!();
+      final result =
+          await Navigator.of(context, rootNavigator: PlatformInfos.isWeb).push(
+        HeroPageRoute(
+          builder: (context) {
+            return InteractiveViewerGallery(
+              itemBuilder: ImageViewer(
+                event: event,
+              ),
+            );
+          },
+        ),
+      );
+      if (result == MediaViewerPopupResultEnum.closeRightColumnFlag) {
+        closeRightColumn?.call();
+      }
+    } else if (onTapSelectMode != null) {
+      onTapSelectMode!();
+    }
+  }
+}