fix: Image viewer

lib/config/routes.dart

@@ -1,5 +1,6 @@
 import 'package:fluffychat/pages/archive.dart';
 import 'package:fluffychat/pages/homeserver_picker.dart';
+import 'package:fluffychat/pages/image_viewer.dart';
 import 'package:fluffychat/pages/invitation_selection.dart';
 import 'package:fluffychat/pages/settings_emotes.dart';
 import 'package:fluffychat/pages/settings_multiple_emotes.dart';
@@ -51,6 +52,11 @@ class AppRoutes {
           widget: ChatList(),
           stackedRoutes: [
             VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [
+              VWidget(
+                path: 'image/:eventid',
+                widget: ImageViewer(),
+                buildTransition: _fadeTransition,
+              ),
               VWidget(
                 path: 'encryption',
                 widget: ChatEncryptionSettings(),
@@ -126,6 +132,11 @@ class AppRoutes {
                       widget: EmptyPage(),
                       buildTransition: _fadeTransition,
                     ),
+                    VWidget(
+                      path: 'image/:eventid',
+                      widget: ImageViewer(),
+                      buildTransition: _fadeTransition,
+                    ),
                     VWidget(
                       path: 'encryption',
                       widget: ChatEncryptionSettings(),

lib/pages/image_viewer.dart

@@ -8,10 +8,9 @@ import 'package:vrouter/vrouter.dart';
 import '../utils/matrix_sdk_extensions.dart/event_extension.dart';
 
 class ImageViewer extends StatefulWidget {
-  final Event event;
   final void Function() onLoaded;
 
-  const ImageViewer(this.event, {Key key, this.onLoaded}) : super(key: key);
+  const ImageViewer({Key key, this.onLoaded}) : super(key: key);
 
   @override
   ImageViewerController createState() => ImageViewerController();
@@ -19,13 +18,14 @@ class ImageViewer extends StatefulWidget {
 
 class ImageViewerController extends State<ImageViewer> {
   /// Forward this image to another room.
-  void forwardAction() {
+  void forwardAction(Event event) {
-    Matrix.of(context).shareContent = widget.event.content;
+    Matrix.of(context).shareContent = event.content;
     VRouter.of(context).push('/rooms');
   }
 
   /// Open this file with a system call.
-  void openFileAction() => widget.event.openFile(context, downloadOnly: true);
+  void openFileAction(Event event) =>
+      event.openFile(context, downloadOnly: true);
 
   /// Go back if user swiped it away
   void onInteractionEnds(ScaleEndDetails endDetails) {
@@ -37,6 +37,16 @@ class ImageViewerController extends State<ImageViewer> {
     }
   }
 
+  Future<Event> getEvent() {
+    final roomId = VRouter.of(context).pathParameters['roomid'];
+    final eventId = VRouter.of(context).pathParameters['eventid'];
+    return Matrix.of(context).client.database.getEventById(
+          Matrix.of(context).client.id,
+          eventId,
+          Matrix.of(context).client.getRoomById(roomId),
+        );
+  }
+
   @override
   Widget build(BuildContext context) => ImageViewerView(this);
 }

lib/pages/views/image_viewer_view.dart

@@ -1,3 +1,5 @@
+import 'package:famedlysdk/famedlysdk.dart';
+
 import '../image_viewer.dart';
 import 'package:fluffychat/widgets/event_content/image_bubble.dart';
 import 'package:flutter/material.dart';
@@ -10,50 +12,72 @@ class ImageViewerView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return FutureBuilder<Event>(
-      backgroundColor: Colors.black,
+        future: controller.getEvent(),
-      extendBodyBehindAppBar: true,
+        builder: (context, snapshot) {
-      appBar: AppBar(
+          if (!snapshot.hasData) {
-        elevation: 0,
+            return Scaffold(
-        leading: IconButton(
+              backgroundColor: Colors.black,
-          icon: Icon(Icons.close),
+              appBar: AppBar(
-          onPressed: Navigator.of(context, rootNavigator: false).pop,
+                elevation: 0,
-          color: Colors.white,
+                backgroundColor: Color(0x44000000),
-          tooltip: L10n.of(context).close,
+              ),
-        ),
+              body: Center(
-        backgroundColor: Color(0x44000000),
+                  child: snapshot.hasError
-        actions: [
+                      ? Text(
-          IconButton(
+                          L10n.of(context).oopsSomethingWentWrong,
-            icon: Icon(Icons.reply_outlined),
+                          style: TextStyle(color: Colors.white),
-            onPressed: controller.forwardAction,
+                          textAlign: TextAlign.center,
-            color: Colors.white,
+                        )
-            tooltip: L10n.of(context).share,
+                      : CircularProgressIndicator()),
-          ),
+            );
-          IconButton(
+          }
-            icon: Icon(Icons.download_outlined),
+          final event = snapshot.data;
-            onPressed: controller.openFileAction,
+          return Scaffold(
-            color: Colors.white,
-            tooltip: L10n.of(context).downloadFile,
-          ),
-        ],
-      ),
-      body: InteractiveViewer(
-        minScale: 1.0,
-        maxScale: 10.0,
-        onInteractionEnd: controller.onInteractionEnds,
-        child: Center(
-          child: ImageBubble(
-            controller.widget.event,
-            tapToView: false,
-            onLoaded: controller.widget.onLoaded,
-            fit: BoxFit.contain,
             backgroundColor: Colors.black,
-            maxSize: false,
+            extendBodyBehindAppBar: true,
-            radius: 0.0,
+            appBar: AppBar(
-            thumbnailOnly: false,
+              elevation: 0,
-          ),
+              backgroundColor: Color(0x44000000),
-        ),
+              leading: IconButton(
-      ),
+                icon: Icon(Icons.close),
-    );
+                onPressed: Navigator.of(context, rootNavigator: false).pop,
+                color: Colors.white,
+                tooltip: L10n.of(context).close,
+              ),
+              actions: [
+                IconButton(
+                  icon: Icon(Icons.reply_outlined),
+                  onPressed: () => controller.forwardAction(event),
+                  color: Colors.white,
+                  tooltip: L10n.of(context).share,
+                ),
+                IconButton(
+                  icon: Icon(Icons.download_outlined),
+                  onPressed: () => controller.openFileAction(event),
+                  color: Colors.white,
+                  tooltip: L10n.of(context).downloadFile,
+                ),
+              ],
+            ),
+            body: InteractiveViewer(
+              minScale: 1.0,
+              maxScale: 10.0,
+              onInteractionEnd: controller.onInteractionEnds,
+              child: Center(
+                child: ImageBubble(
+                  event,
+                  tapToView: false,
+                  onLoaded: controller.widget.onLoaded,
+                  fit: BoxFit.contain,
+                  backgroundColor: Colors.black,
+                  maxSize: false,
+                  radius: 0.0,
+                  thumbnailOnly: false,
+                ),
+              ),
+            ),
+          );
+        });
   }
 }

lib/utils/matrix_sdk_extensions.dart/event_extension.dart

@@ -3,16 +3,14 @@ import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:vrouter/vrouter.dart';
 import 'matrix_file_extension.dart';
-import '../../pages/image_viewer.dart';
 
 extension LocalizedBody on Event {
   void openFile(BuildContext context, {bool downloadOnly = false}) async {
     if (!downloadOnly &&
         [MessageTypes.Image, MessageTypes.Sticker].contains(messageType)) {
-      await Navigator.of(context, rootNavigator: false).push(
+      VRouter.of(context).push('/rooms/${room.id}/image/$eventId');
-        MaterialPageRoute(builder: (_) => ImageViewer(this)),
-      );
       return;
     }
     final matrixFile = await showFutureLoadingDialog(

lib/widgets/event_content/image_bubble.dart

@@ -1,10 +1,10 @@
 import 'package:famedlysdk/famedlysdk.dart';
-import 'package:fluffychat/pages/image_viewer.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:vrouter/vrouter.dart';
 
 import '../../utils/matrix_sdk_extensions.dart/event_extension.dart';
 
@@ -237,23 +237,8 @@ class _ImageBubbleState extends State<ImageBubble> {
       child: InkWell(
         onTap: () {
           if (!widget.tapToView) return;
-          Navigator.of(context, rootNavigator: false).push(
+          VRouter.of(context).push(
-            MaterialPageRoute(
+              '/rooms/${widget.event.room.id}/image/${widget.event.eventId}');
-              builder: (_) => ImageViewer(widget.event, onLoaded: () {
-                // If the original file didn't load yet, we want to do that now.
-                // This is so that the original file displays after going on the image viewer,
-                // waiting for it to load, and then hitting back. This ensures that we always
-                // display the best image available, with requiring as little network as possible
-                if (_file == null) {
-                  widget.event.isAttachmentCached().then((cached) {
-                    if (cached) {
-                      _requestFile();
-                    }
-                  });
-                }
-              }),
-            ),
-          );
         },
         child: Hero(
           tag: widget.event.eventId,