feat: Blurhashes and better thumbnails

lib/components/image_bubble.dart

@@ -3,6 +3,10 @@ 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:flutter/foundation.dart';
+import 'package:flutter_blurhash/flutter_blurhash.dart';
+import 'package:flutter_advanced_networkimage/provider.dart';
+import 'package:flutter_advanced_networkimage/transition.dart';
 
 class ImageBubble extends StatefulWidget {
   final Event event;
@@ -11,6 +15,7 @@ class ImageBubble extends StatefulWidget {
   final bool maxSize;
   final Color backgroundColor;
   final double radius;
+  final bool thumbnailOnly;
 
   const ImageBubble(
     this.event, {
@@ -19,6 +24,7 @@ class ImageBubble extends StatefulWidget {
     this.backgroundColor,
     this.fit = BoxFit.cover,
     this.radius = 10.0,
+    this.thumbnailOnly = true,
     Key key,
   }) : super(key: key);
 
@@ -27,16 +33,39 @@ class ImageBubble extends StatefulWidget {
 }
 
 class _ImageBubbleState extends State<ImageBubble> {
+  bool get isUnencrypted => widget.event.content['url'] is String;
+
   static final Map<String, MatrixFile> _matrixFileMap = {};
   MatrixFile get _file => _matrixFileMap[widget.event.eventId];
   set _file(MatrixFile file) {
-    _matrixFileMap[widget.event.eventId] = file;
+    if (file != null) {
+      _matrixFileMap[widget.event.eventId] = file;
+    }
+  }
+
+  static final Map<String, MatrixFile> _matrixThumbnailMap = {};
+  MatrixFile get _thumbnail => _matrixThumbnailMap[widget.event.eventId];
+  set _thumbnail(MatrixFile thumbnail) {
+    if (thumbnail != null) {
+      _matrixThumbnailMap[widget.event.eventId] = thumbnail;
+    }
   }
 
   dynamic _error;
 
+  bool _requestedFile = false;
   Future<MatrixFile> _getFile() async {
+    _requestedFile = true;
+    if (widget.thumbnailOnly) return null;
     if (_file != null) return _file;
+    return widget.event.downloadAndDecryptAttachment();
+  }
+
+  bool _requestedThumbnail = false;
+  Future<MatrixFile> _getThumbnail() async {
+    _requestedThumbnail = true;
+    if (isUnencrypted) return null;
+    if (_thumbnail != null) return _thumbnail;
     return widget.event
         .downloadAndDecryptAttachment(getThumbnail: widget.event.hasThumbnail);
   }
@@ -60,32 +89,71 @@ class _ImageBubbleState extends State<ImageBubble> {
                 ),
               );
             }
-            if (_file != null) {
-              return InkWell(
-                onTap: () {
-                  if (!widget.tapToView) return;
-                  Navigator.of(context).push(
-                    AppRoute(
-                      ImageView(widget.event),
-                    ),
-                  );
-                },
-                child: Hero(
-                  tag: widget.event.eventId,
-                  child: Image.memory(
-                    _file.bytes,
-                    fit: widget.fit,
-                  ),
-                ),
-              );
+            if (_thumbnail == null && !_requestedThumbnail && !isUnencrypted) {
+              _getThumbnail().then((MatrixFile thumbnail) {
+                setState(() => _thumbnail = thumbnail);
+              }, onError: (error, stacktrace) {
+                setState(() => _error = error);
+              });
             }
-            _getFile().then((MatrixFile file) {
-              setState(() => _file = file);
-            }, onError: (error, stacktrace) {
-              setState(() => _error = error);
-            });
-            return Center(
-              child: CircularProgressIndicator(),
+            if (_file == null && !widget.thumbnailOnly && !_requestedFile) {
+              _getFile().then((MatrixFile file) {
+                setState(() => _file = file);
+              }, onError: (error, stacktrace) {
+                setState(() => _error = error);
+              });
+            }
+            final display = _file ?? _thumbnail;
+
+            final generatePlaceholderWidget = () => Stack(
+                  children: <Widget>[
+                    if (widget.event.content['info'] is Map &&
+                        widget.event.content['info']['xyz.amorgan.blurhash']
+                            is String)
+                      BlurHash(
+                          hash: widget.event.content['info']
+                              ['xyz.amorgan.blurhash']),
+                    Center(
+                      child: CircularProgressIndicator(),
+                    ),
+                  ],
+                );
+
+            Widget renderWidget;
+            if (display != null) {
+              renderWidget = Image.memory(
+                display.bytes,
+                fit: widget.fit,
+              );
+            } else if (isUnencrypted) {
+              renderWidget = TransitionToImage(
+                image: AdvancedNetworkImage(
+                  Uri.parse(widget.event.content['url']).getThumbnail(
+                      widget.event.room.client,
+                      width: 800,
+                      height: 800,
+                      method: ThumbnailMethod.scale),
+                  useDiskCache: !kIsWeb,
+                ),
+                loadingWidget: generatePlaceholderWidget(),
+                fit: widget.fit,
+              );
+            } else {
+              renderWidget = generatePlaceholderWidget();
+            }
+            return InkWell(
+              onTap: () {
+                if (!widget.tapToView) return;
+                Navigator.of(context).push(
+                  AppRoute(
+                    ImageView(widget.event),
+                  ),
+                );
+              },
+              child: Hero(
+                tag: widget.event.eventId,
+                child: renderWidget,
+              ),
             );
           },
         ),