Enable skia in web

.gitlab-ci.yml

@@ -32,7 +32,7 @@ build_web:
     - cd assets/js/ && tar xaf olm.tar.gz && cd ../../
     - flutter pub get
     - flutter clean
-    - flutter build web --release --verbose
+    - flutter build web --release --verbose --dart-define=FLUTTER_WEB_USE_SKIA=true
   artifacts:
     paths:
       - build/web/

lib/components/avatar.dart

@@ -1,8 +1,8 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:famedlysdk/famedlysdk.dart';
 import 'package:fluffychat/utils/string_color.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_advanced_networkimage/provider.dart';
 
 import 'matrix.dart';
 
@@ -40,13 +40,7 @@ class Avatar extends StatelessWidget {
       child: CircleAvatar(
         radius: size / 2,
         backgroundImage: mxContent.mxc?.isNotEmpty ?? false
-            ? kIsWeb
-                ? NetworkImage(
-                    src,
-                  )
-                : CachedNetworkImageProvider(
-                    src,
-                  )
+            ? AdvancedNetworkImage(src)
             : null,
         backgroundColor: mxContent.mxc.isEmpty
             ? name?.color ?? Theme.of(context).secondaryHeaderColor

lib/components/content_banner.dart

@@ -1,8 +1,7 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:famedlysdk/famedlysdk.dart';
-import 'package:fluffychat/views/image_viewer.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_advanced_networkimage/provider.dart';
 
 import 'matrix.dart';
 
@@ -32,55 +31,44 @@ class ContentBanner extends StatelessWidget {
       height: bannerSize,
       method: ThumbnailMethod.scale,
     );
-    return InkWell(
-      onTap: () => mxContent.mxc?.isNotEmpty ?? false
-          ? ImageViewer.show(context, mxContent)
-          : null,
-      child: Container(
-        height: 300,
-        alignment: Alignment.center,
-        decoration: BoxDecoration(
-          color: Theme.of(context).secondaryHeaderColor,
-        ),
-        child: Stack(
-          children: <Widget>[
-            Positioned(
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-              child: Opacity(
-                opacity: 0.75,
-                child: !loading
-                    ? mxContent.mxc?.isNotEmpty ?? false
-                        ? kIsWeb
-                            ? Image.network(
-                                src,
-                                height: 300,
-                                fit: BoxFit.cover,
-                              )
-                            : CachedNetworkImage(
-                                imageUrl: src,
-                                height: 300,
-                                fit: BoxFit.cover,
-                              )
-                        : Icon(defaultIcon, size: 300)
-                    : Icon(defaultIcon, size: 300),
-              ),
+    return Container(
+      height: 300,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        color: Theme.of(context).secondaryHeaderColor,
+      ),
+      child: Stack(
+        children: <Widget>[
+          Positioned(
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            child: Opacity(
+              opacity: 0.75,
+              child: !loading
+                  ? mxContent.mxc?.isNotEmpty ?? false
+                      ? Image(
+                          height: 300,
+                          fit: BoxFit.cover,
+                          image: AdvancedNetworkImage(src),
+                        )
+                      : Icon(defaultIcon, size: 300)
+                  : Icon(defaultIcon, size: 300),
             ),
-            if (this.onEdit != null)
-              Container(
-                margin: EdgeInsets.all(8),
-                alignment: Alignment.bottomRight,
-                child: FloatingActionButton(
-                  mini: true,
-                  backgroundColor: Theme.of(context).primaryColor,
-                  child: Icon(Icons.camera_alt),
-                  onPressed: onEdit,
-                ),
+          ),
+          if (this.onEdit != null)
+            Container(
+              margin: EdgeInsets.all(8),
+              alignment: Alignment.bottomRight,
+              child: FloatingActionButton(
+                mini: true,
+                backgroundColor: Theme.of(context).primaryColor,
+                child: Icon(Icons.camera_alt),
+                onPressed: onEdit,
               ),
-          ],
-        ),
+            ),
+        ],
       ),
     );
   }

lib/components/list_items/message.dart

@@ -6,7 +6,6 @@ import 'package:fluffychat/i18n/i18n.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/utils/event_extension.dart';
 import 'package:fluffychat/utils/string_color.dart';
-import 'package:fluffychat/views/image_viewer.dart';
 import 'package:flutter/material.dart';
 
 import '../avatar.dart';
@@ -17,6 +16,7 @@ class Message extends StatelessWidget {
   final Event event;
   final Event nextEvent;
   final Function(Event) onSelect;
+  final Function(Event) onAvatarTab;
   final bool longPressSelect;
   final bool selected;
   final Timeline timeline;
@@ -25,6 +25,7 @@ class Message extends StatelessWidget {
       {this.nextEvent,
       this.longPressSelect,
       this.onSelect,
+      this.onAvatarTab,
       this.selected,
       this.timeline});
 
@@ -119,11 +120,13 @@ class Message extends StatelessWidget {
                           .tryRequestWithLoadingDialog(event.requestKey()),
                     ),
                   SizedBox(height: 4),
-                  _MetaRow(
-                    event,
-                    ownMessage,
-                    textColor,
-                    invisible: true,
+                  Opacity(
+                    opacity: 0,
+                    child: _MetaRow(
+                      event,
+                      ownMessage,
+                      textColor,
+                    ),
                   ),
                 ],
               ),
@@ -147,7 +150,7 @@ class Message extends StatelessWidget {
         : Avatar(
             event.sender.avatarUrl,
             event.sender.calcDisplayname(),
-            onTap: () => ImageViewer.show(context, event.sender.avatarUrl),
+            onTap: () => onAvatarTab(event),
           );
     if (ownMessage) {
       rowChildren.add(avatarOrSizedBox);
@@ -181,12 +184,10 @@ class Message extends StatelessWidget {
 
 class _MetaRow extends StatelessWidget {
   final Event event;
-  final bool invisible;
   final bool ownMessage;
   final Color color;
 
-  const _MetaRow(this.event, this.ownMessage, this.color,
-      {this.invisible = false, Key key})
+  const _MetaRow(this.event, this.ownMessage, this.color, {Key key})
       : super(key: key);
 
   @override
@@ -203,14 +204,14 @@ class _MetaRow extends StatelessWidget {
             style: TextStyle(
               fontSize: 11,
               fontWeight: FontWeight.bold,
-              color: invisible ? Colors.transparent : displayname.color,
+              color: displayname.color,
             ),
           ),
         if (showDisplayname) SizedBox(width: 4),
         Text(
           event.time.localizedTime(context),
           style: TextStyle(
-            color: invisible ? Colors.transparent : color,
+            color: color,
             fontSize: 11,
           ),
         ),

lib/views/chat.dart

@@ -496,7 +496,9 @@ class _ChatState extends State<_Chat> {
                                     ),
                                   )
                                 : Message(timeline.events[i - 1],
-                                    onSelect: (Event event) {
+                                    onAvatarTab: (Event event) {
+                                    sendController.text += ' ${event.senderId}';
+                                  }, onSelect: (Event event) {
                                     if (!event.redacted) {
                                       if (selectedEvents.contains(event)) {
                                         setState(

lib/views/image_viewer.dart

@@ -1,45 +0,0 @@
-import 'package:famedlysdk/famedlysdk.dart';
-import 'package:fluffychat/components/matrix.dart';
-import 'package:fluffychat/utils/app_route.dart';
-import 'package:flutter/material.dart';
-import 'package:photo_view/photo_view.dart';
-import 'package:url_launcher/url_launcher.dart';
-
-class ImageViewer extends StatelessWidget {
-  final MxContent mxContent;
-
-  const ImageViewer(this.mxContent);
-
-  static show(BuildContext context, MxContent content) {
-    Navigator.of(context).push(
-      AppRoute(
-        ImageViewer(content),
-      ),
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final String url = mxContent.getDownloadLink(Matrix.of(context).client);
-    return Scaffold(
-      backgroundColor: Colors.black,
-      appBar: AppBar(
-        brightness: Brightness.dark,
-        backgroundColor: Colors.black,
-        iconTheme: IconThemeData(color: Colors.white),
-        actions: <Widget>[
-          IconButton(
-            icon: Icon(Icons.file_download),
-            onPressed: () => launch(url),
-          ),
-        ],
-      ),
-      body: PhotoView(
-        loadingBuilder: (c, i) => Center(child: CircularProgressIndicator()),
-        imageProvider: NetworkImage(
-          url,
-        ),
-      ),
-    );
-  }
-}

pubspec.lock

@@ -21,28 +21,28 @@ packages:
       name: archive
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.11"
+    version: "2.0.13"
   args:
     dependency: transitive
     description:
       name: args
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.2"
+    version: "1.6.0"
   async:
     dependency: transitive
     description:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.0"
+    version: "2.4.1"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.5"
+    version: "2.0.0"
   bubble:
     dependency: "direct main"
     description:
@@ -50,13 +50,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.9+1"
-  cached_network_image:
-    dependency: "direct main"
-    description:
-      name: cached_network_image
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.0.0"
   canonical_json:
     dependency: transitive
     description:
@@ -70,14 +63,14 @@ packages:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "1.1.3"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.11"
+    version: "1.14.12"
   convert:
     dependency: transitive
     description:
@@ -98,7 +91,7 @@ packages:
       name: crypto
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.4"
   csslib:
     dependency: transitive
     description:
@@ -155,13 +148,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
-  flutter_cache_manager:
-    dependency: transitive
+  flutter_advanced_networkimage:
+    dependency: "direct main"
     description:
-      name: flutter_cache_manager
+      name: flutter_advanced_networkimage
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.3"
+    version: "0.6.4"
   flutter_launcher_icons:
     dependency: "direct dev"
     description:
@@ -209,6 +202,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.2.5"
+  flutter_svg:
+    dependency: transitive
+    description:
+      name: flutter_svg
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.17.4"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -260,7 +260,7 @@ packages:
       name: image
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.4"
+    version: "2.1.12"
   image_picker:
     dependency: "direct main"
     description:
@@ -274,7 +274,7 @@ packages:
       name: intl
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.16.0"
+    version: "0.16.1"
   intl_translation:
     dependency: "direct main"
     description:
@@ -419,6 +419,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.6.4"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.4"
   path_provider:
     dependency: "direct main"
     description:
@@ -488,7 +502,7 @@ packages:
       name: quiver
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.5"
+    version: "2.1.3"
   receive_sharing_intent:
     dependency: "direct main"
     description:
@@ -556,7 +570,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.5"
+    version: "1.7.0"
   sqflite:
     dependency: "direct main"
     description:
@@ -605,21 +619,21 @@ packages:
       name: test
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.4"
+    version: "1.13.0"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.11"
+    version: "0.2.15"
   test_core:
     dependency: transitive
     description:
       name: test_core
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.15"
+    version: "0.3.1"
   typed_data:
     dependency: transitive
     description:
@@ -676,13 +690,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.1.0+2"
-  uuid:
-    dependency: transitive
-    description:
-      name: uuid
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.0.4"
   vector_math:
     dependency: transitive
     description:
@@ -711,6 +718,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.0"
+  webkit_inspection_protocol:
+    dependency: transitive
+    description:
+      name: webkit_inspection_protocol
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.5.0+1"
   webview_flutter:
     dependency: "direct main"
     description:
@@ -724,7 +738,7 @@ packages:
       name: xml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.5.0"
+    version: "3.6.1"
   yaml:
     dependency: transitive
     description:

pubspec.yaml

@@ -37,7 +37,7 @@ dependencies:
   url_launcher: ^5.4.1
   url_launcher_web: ^0.1.0
   sqflite: ^1.2.0
-  cached_network_image: ^2.0.0
+  flutter_advanced_networkimage: any
   firebase_messaging: ^6.0.9
   flutter_local_notifications: ^0.9.1+2
   link_text: ^0.1.1