Implement image viewer

CHANGELOG.md

@@ -1,3 +1,9 @@
+# Version 0.14.0 - 2020-??-??
+### Features:
+- Implement image viewer
+- Implement room pills
+- New chat appBar showing presences and room avatars
+
 # Version 0.13.2 - 2020-05-13
 ### Fixes:
 - Fix textfields copy&paste

lib/components/image_bubble.dart

@@ -1,14 +1,15 @@
 import 'package:bubble/bubble.dart';
 import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/app_route.dart';
+import 'package:fluffychat/views/image_view.dart';
 import 'package:flutter/material.dart';
-import 'package:fluffychat/utils/matrix_file_extension.dart';
-
-import 'dialogs/simple_dialogs.dart';
 
 class ImageBubble extends StatefulWidget {
   final Event event;
+  final bool tapToView;
 
-  const ImageBubble(this.event, {Key key}) : super(key: key);
+  const ImageBubble(this.event, {this.tapToView = true, Key key})
+      : super(key: key);
 
   @override
   _ImageBubbleState createState() => _ImageBubbleState();
@@ -50,16 +51,20 @@ class _ImageBubbleState extends State<ImageBubble> {
             }
             if (_file != null) {
               return InkWell(
-                onTap: () async {
+                onTap: () {
-                  final MatrixFile matrixFile =
+                  if (!widget.tapToView) return;
-                      await SimpleDialogs(context).tryRequestWithLoadingDialog(
+                  Navigator.of(context).push(
-                    widget.event.downloadAndDecryptAttachment(),
+                    AppRoute(
+                      ImageView(widget.event),
+                    ),
                   );
-                  matrixFile.open();
                 },
-                child: Image.memory(
+                child: Hero(
-                  _file.bytes,
+                  tag: widget.event.eventId,
-                  fit: BoxFit.cover,
+                  child: Image.memory(
+                    _file.bytes,
+                    fit: BoxFit.cover,
+                  ),
                 ),
               );
             }

lib/components/message_download_content.dart

@@ -1,9 +1,7 @@
 import 'package:famedlysdk/famedlysdk.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:flutter/material.dart';
-import 'package:fluffychat/utils/matrix_file_extension.dart';
 import 'package:fluffychat/utils/event_extension.dart';
-import 'dialogs/simple_dialogs.dart';
 
 class MessageDownloadContent extends StatelessWidget {
   final Event event;
@@ -20,21 +18,16 @@ class MessageDownloadContent extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           RaisedButton(
-              color: Colors.blueGrey,
+            color: Colors.blueGrey,
-              child: Text(
+            child: Text(
-                L10n.of(context).downloadFile,
+              L10n.of(context).downloadFile,
-                overflow: TextOverflow.fade,
+              overflow: TextOverflow.fade,
-                softWrap: false,
+              softWrap: false,
-                maxLines: 1,
+              maxLines: 1,
-                style: TextStyle(color: Colors.white),
+              style: TextStyle(color: Colors.white),
-              ),
+            ),
-              onPressed: () async {
+            onPressed: () => event.openFile(context),
-                final MatrixFile matrixFile =
+          ),
-                    await SimpleDialogs(context).tryRequestWithLoadingDialog(
-                  event.downloadAndDecryptAttachment(),
-                );
-                matrixFile.open();
-              }),
           Text(
             '- ' +
                 (event.content.containsKey('filename')

lib/utils/event_extension.dart

@@ -1,8 +1,18 @@
 import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/components/dialogs/simple_dialogs.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'matrix_file_extension.dart';
 
 extension LocalizedBody on Event {
+  void openFile(BuildContext context) async {
+    final MatrixFile matrixFile =
+        await SimpleDialogs(context).tryRequestWithLoadingDialog(
+      downloadAndDecryptAttachment(),
+    );
+    matrixFile.open();
+  }
+
   IconData get statusIcon {
     switch (status) {
       case -1:

lib/views/image_view.dart

@@ -0,0 +1,51 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/components/image_bubble.dart';
+import 'package:fluffychat/components/matrix.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_advanced_networkimage/zoomable.dart';
+import '../utils/event_extension.dart';
+
+class ImageView extends StatelessWidget {
+  final Event event;
+
+  const ImageView(this.event, {Key key}) : super(key: key);
+
+  void _forwardAction(BuildContext context) async {
+    Matrix.of(context).shareContent = event.content;
+    Navigator.of(context).popUntil((r) => r.isFirst);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      appBar: AppBar(
+        leading: IconButton(
+          icon: Icon(Icons.close),
+          onPressed: () => Navigator.of(context).pop(),
+          color: Colors.white,
+        ),
+        backgroundColor: Colors.black,
+        actions: [
+          IconButton(
+            icon: Icon(Icons.reply),
+            onPressed: () => _forwardAction(context),
+            color: Colors.white,
+          ),
+          IconButton(
+            icon: Icon(Icons.file_download),
+            onPressed: () => event.openFile(context),
+            color: Colors.white,
+          ),
+        ],
+      ),
+      body: ZoomableWidget(
+        minScale: 0.3,
+        maxScale: 2.0,
+        // default factor is 1.0, use 0.0 to disable boundary
+        panLimit: 0.8,
+        child: ImageBubble(event, tapToView: false),
+      ),
+    );
+  }
+}

pubspec.lock

@@ -71,6 +71,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.3"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
   collection:
     dependency: transitive
     description:
@@ -129,12 +136,19 @@ packages:
       url: "https://github.com/simolus3/moor.git"
     source: git
     version: "1.0.0"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   famedlysdk:
     dependency: "direct main"
     description:
       path: "."
-      ref: "1860e579475af7dd0c936a6c5bc22bb5e2d9bc76"
+      ref: e8436198bbf77ad6d13d852d13e73e745a5df0cf
-      resolved-ref: "1860e579475af7dd0c936a6c5bc22bb5e2d9bc76"
+      resolved-ref: e8436198bbf77ad6d13d852d13e73e745a5df0cf
       url: "https://gitlab.com/famedly/famedlysdk.git"
     source: git
     version: "0.0.1"
@@ -210,7 +224,7 @@ packages:
       name: flutter_matrix_html
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.7"
+    version: "0.0.8"
   flutter_secure_storage:
     dependency: "direct main"
     description:
@@ -483,7 +497,7 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.4"
+    version: "1.7.0"
   path_drawing:
     dependency: transitive
     description:
@@ -561,13 +575,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.4.2"
-  quiver:
-    dependency: transitive
-    description:
-      name: quiver
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.3"
   random_string:
     dependency: "direct main"
     description: