fix: Fix image and add photo viewer #2771

lib/chat_room/chat_room.dart

@@ -1,4 +1,4 @@
 export 'cubit/chat_room_cubit.dart';
 export 'matrix_chat/matrix_chat.dart';
 export 'view/chat_room_view.dart';
-export 'widget/mxc_image.dart';
+export 'view/photo_viewer.dart';

lib/chat_room/cubit/chat_room_cubit.dart

@@ -192,7 +192,7 @@ abstract class ChatRoomCubit extends Cubit<ChatRoomState> {
     await _onEventSubscription?.cancel();
 
     _onEventSubscription =
-        matrixChat.client!.onRoomState.stream.listen((Event event) {
+        matrixChat.client!.onRoomState.stream.listen((Event event) async {
       if (event.roomId == _roomId && event.type == 'm.room.message') {
         final txId = event.unsigned?['transaction_id'] as String?;
         if (state.messages.any(
@@ -208,7 +208,7 @@ abstract class ChatRoomCubit extends Cubit<ChatRoomState> {
           newMessages[index] = updatedMessage;
           emit(state.copyWith(messages: newMessages));
         } else {
-          final Message message = matrixChat.mapEventToMessage(event);
+          final Message message = await matrixChat.mapEventToMessage(event);
           emit(
             state.copyWith(
               messages: [message, ...state.messages],
@@ -218,7 +218,7 @@ abstract class ChatRoomCubit extends Cubit<ChatRoomState> {
 
         setMessagesAsRead();
 
-        Future<void>.delayed(const Duration(seconds: 1))
+        await Future<void>.delayed(const Duration(seconds: 1))
             .then((val) => _getUnreadMessageCount());
       }
     });

lib/chat_room/matrix_chat/matrix_chat_impl.dart

@@ -172,11 +172,18 @@ class MatrixChatImpl extends MatrixChatInterface {
           ..sort(
             (e1, e2) => e2.originServerTs.compareTo(e1.originServerTs),
           );
-    return messageEvents.map(mapEventToMessage).toList();
+
+    final List<Message> messages = [];
+
+    for (final event in messageEvents) {
+      final a = await mapEventToMessage(event);
+      messages.add(a);
+    }
+    return messages;
   }
 
   @override
-  Message mapEventToMessage(Event event) {
+  Future<Message> mapEventToMessage(Event event) async {
     late final Message message;
     num size = 0;
     if (event.content['info'] != null) {
@@ -205,12 +212,15 @@ class MatrixChatImpl extends MatrixChatInterface {
       final url =
           (file != null && file is Map<String, dynamic>) ? file['url'] : '';
 
+      final data = await event.downloadAndDecryptAttachment();
+
       message = ImageMessage(
         id: const Uuid().v4(),
         remoteId: event.eventId,
         name: event.plaintextBody,
         size: size,
         uri: url.toString(),
+        metadata: {'bytes': data.bytes},
         status: mapEventStatusToMessageStatus(event.status),
         createdAt: event.originServerTs.millisecondsSinceEpoch,
         author: User(id: event.senderId),

lib/chat_room/matrix_chat/matrix_chat_interface.dart

@@ -26,7 +26,7 @@ abstract class MatrixChatInterface {
   Future<void> handleFileSelection({
     required OnMessageCreated onMessageCreated,
   });
-  Message mapEventToMessage(Event event);
+  Future<Message> mapEventToMessage(Event event);
   Status mapEventStatusToMessageStatus(EventStatus status);
   String getThumbnail({
     required String url,

lib/chat_room/view/chat_room_view.dart

@@ -1,14 +1,17 @@
 import 'dart:io';
+import 'dart:typed_data';
 
 import 'package:altme/app/app.dart';
 import 'package:altme/chat_room/chat_room.dart';
 import 'package:altme/dashboard/dashboard.dart';
 import 'package:altme/l10n/l10n.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_chat_types/flutter_chat_types.dart';
-import 'package:flutter_chat_ui/flutter_chat_ui.dart' hide Message;
+import 'package:flutter_chat_ui/flutter_chat_ui.dart'
+    hide ImageMessage, Message;
 import 'package:visibility_detector/visibility_detector.dart';
 
 class ChatRoomView<B extends ChatRoomCubit> extends StatefulWidget {
@@ -179,6 +182,7 @@ class _ChatRoomViewState<B extends ChatRoomCubit> extends State<ChatRoomView> {
                       ),
                     ),
                     messages: state.messages,
+                    disableImageGallery: true,
                     imageMessageBuilder: (p0, {required messageWidth}) {
                       final link = p0.uri;
 
@@ -188,21 +192,12 @@ class _ChatRoomViewState<B extends ChatRoomCubit> extends State<ChatRoomView> {
                         return CachedImageFromNetwork(
                           link,
                           fit: BoxFit.contain,
-                          width: 500,
-                          height: 500,
                         );
-                      }
-                      if (link.startsWith('mxc')) {
-                        return MxcImage(
-                          client: context
-                              .read<AltmeChatSupportCubit>()
-                              .matrixChat
-                              .client!,
+                      } else if (link.startsWith('mxc')) {
+                        final data = p0.metadata!['bytes'] as Uint8List;
+                        return Image.memory(
+                          data,
                           fit: BoxFit.contain,
-                          width: 500,
-                          height: 500,
-                          uri: Uri.parse(link),
-                          isThumbnail: false,
                         );
                       } else {
                         return Image.file(
@@ -322,6 +317,26 @@ class _ChatRoomViewState<B extends ChatRoomCubit> extends State<ChatRoomView> {
   }
 
   Future<void> _handleMessageTap(BuildContext _, Message message) async {
-    await liveChatCubit!.handleMessageTap(message);
+    if (message is ImageMessage) {
+      final link = message.uri;
+
+      late ImageProvider imageProvider;
+      if (link.startsWith('http')) {
+        imageProvider = CachedNetworkImageProvider(link);
+      } else if (link.startsWith('mxc')) {
+        final data = message.metadata!['bytes'] as Uint8List;
+        imageProvider = MemoryImage(data);
+      } else {
+        imageProvider = AssetImage(link);
+      }
+
+      await Navigator.of(context).push<void>(
+        PhotoViewer.route(
+          imageProvider: imageProvider,
+        ),
+      );
+    } else {
+      await liveChatCubit!.handleMessageTap(message);
+    }
   }
 }

lib/chat_room/view/photo_viewer.dart

@@ -0,0 +1,61 @@
+import 'package:altme/app/app.dart';
+import 'package:flutter/material.dart';
+import 'package:photo_view/photo_view.dart';
+
+class PhotoViewer extends StatelessWidget {
+  const PhotoViewer({
+    super.key,
+    required this.imageProvider,
+  });
+
+  final ImageProvider imageProvider;
+
+  static Route<dynamic> route({required ImageProvider imageProvider}) {
+    return MaterialPageRoute<void>(
+      settings: const RouteSettings(name: '/PhotoViewer'),
+      builder: (_) => PhotoViewer(imageProvider: imageProvider),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BasePage(
+      useSafeArea: false,
+      scrollView: false,
+      body: Dismissible(
+        key: const Key('photo_view_gallery'),
+        direction: DismissDirection.down,
+        onDismissed: (direction) {
+          Navigator.of(context).pop();
+        },
+        child: Stack(
+          children: [
+            Center(
+              child: PhotoView(
+                imageProvider: imageProvider,
+                loadingBuilder: (context, event) => const Center(
+                  child: SizedBox(
+                    width: 20,
+                    height: 20,
+                    child: CircularProgressIndicator(),
+                  ),
+                ),
+              ),
+            ),
+            Positioned.directional(
+              end: 16,
+              textDirection: Directionality.of(context),
+              top: 56,
+              child: CloseButton(
+                color: Theme.of(context).colorScheme.onPrimary,
+                onPressed: () {
+                  Navigator.of(context).pop();
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}