lightbox: Support thumbnail to original image hero transition

Fixes: #799

Author: rajveermalviya

lib/widgets/content.dart

@@ -602,11 +602,13 @@ class MessageImage extends StatelessWidget {
           context: context,
           message: message,
           src: resolvedSrcUrl!,
+          thumbnailUrl: thumbnailUrl == null ? null : resolvedThumbnailUrl,
           mediaType: MediaType.image));
       },
       child: LightboxHero(
         message: message,
         src: resolvedSrcUrl,
+        thumbnailUrl: thumbnailUrl == null ? null : resolvedThumbnailUrl,
         child: RealmContentNetworkImage(
           resolvedThumbnailUrl,
           filterQuality: FilterQuality.medium)));
@@ -630,7 +632,8 @@ class MessageInlineVideo extends StatelessWidget {
           context: context,
           message: message,
           src: resolvedSrc,
-          mediaType: MediaType.video));
+          mediaType: MediaType.video,
+          thumbnailUrl: null));
       },
       child: Container(
         color: Colors.black, // Web has the same color in light and dark mode.

lib/widgets/lightbox.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 import 'package:intl/intl.dart';
@@ -19,20 +20,22 @@ import 'store.dart';
 //   fly to an image preview with a different URL, following a message edit
 //   while the lightbox was open.
 class _LightboxHeroTag {
-  _LightboxHeroTag({required this.messageId, required this.src});
+  _LightboxHeroTag({required this.messageId, required this.src, required this.thumbnailUrl});
 
   final int messageId;
   final Uri src;
+  final Uri? thumbnailUrl;
 
   @override
   bool operator ==(Object other) {
     return other is _LightboxHeroTag &&
       other.messageId == messageId &&
-      other.src == src;
+      other.src == src &&
+      other.thumbnailUrl == thumbnailUrl;
   }
 
   @override
-  int get hashCode => Object.hash('_LightboxHeroTag', messageId, src);
+  int get hashCode => Object.hash('_LightboxHeroTag', messageId, src, thumbnailUrl);
 }
 
 /// Builds a [Hero] from an image in the message list to the lightbox page.
@@ -41,17 +44,19 @@ class LightboxHero extends StatelessWidget {
     super.key,
     required this.message,
     required this.src,
+    required this.thumbnailUrl,
     required this.child,
   });
 
   final Message message;
   final Uri src;
+  final Uri? thumbnailUrl;
   final Widget child;
 
   @override
   Widget build(BuildContext context) {
     return Hero(
-      tag: _LightboxHeroTag(messageId: message.id, src: src),
+      tag: _LightboxHeroTag(messageId: message.id, src: src, thumbnailUrl: thumbnailUrl),
       flightShuttleBuilder: (
         BuildContext flightContext,
         Animation<double> animation,
@@ -91,12 +96,14 @@ class _LightboxPageLayout extends StatefulWidget {
   const _LightboxPageLayout({
     required this.routeEntranceAnimation,
     required this.message,
+    required this.buildAppBarFooter,
     required this.buildBottomAppBar,
     required this.child,
   });
 
   final Animation<double> routeEntranceAnimation;
   final Message message;
+  final PreferredSizeWidget Function(BuildContext context)? buildAppBarFooter;
   final Widget? Function(
     BuildContext context, Color color, double elevation) buildBottomAppBar;
   final Widget child;
@@ -171,7 +178,8 @@ class _LightboxPageLayoutState extends State<_LightboxPageLayout> {
 
               // Make smaller, like a subtitle
               style: themeData.textTheme.titleSmall!.copyWith(color: appBarForegroundColor)),
-          ])));
+          ])),
+        bottom: widget.buildAppBarFooter == null ? null : widget.buildAppBarFooter!(context));
     }
 
     Widget? bottomAppBar;
@@ -209,17 +217,27 @@ class _ImageLightboxPage extends StatefulWidget {
     required this.routeEntranceAnimation,
     required this.message,
     required this.src,
+    required this.thumbnailUrl,
   });
 
   final Animation<double> routeEntranceAnimation;
   final Message message;
   final Uri src;
+  final Uri? thumbnailUrl;
 
   @override
   State<_ImageLightboxPage> createState() => _ImageLightboxPageState();
 }
 
 class _ImageLightboxPageState extends State<_ImageLightboxPage> {
+  double? _loadingProgress;
+
+  PreferredSizeWidget _buildAppBarFooter(BuildContext context) {
+    return PreferredSize(
+      preferredSize: const Size.fromHeight(4.0),
+      child: LinearProgressIndicator(minHeight: 4.0, value: _loadingProgress!));
+  }
+
   Widget _buildBottomAppBar(BuildContext context, Color color, double elevation) {
     return BottomAppBar(
       color: color,
@@ -234,17 +252,53 @@ class _ImageLightboxPageState extends State<_ImageLightboxPage> {
 
   @override
   Widget build(BuildContext context) {
+    final thumbnailUrl = widget.thumbnailUrl;
     return _LightboxPageLayout(
       routeEntranceAnimation: widget.routeEntranceAnimation,
       message: widget.message,
+      buildAppBarFooter: _loadingProgress == null ? null : _buildAppBarFooter,
       buildBottomAppBar: _buildBottomAppBar,
       child: SizedBox.expand(
         child: InteractiveViewer(
           child: SafeArea(
             child: LightboxHero(
               message: widget.message,
               src: widget.src,
-              child: RealmContentNetworkImage(widget.src, filterQuality: FilterQuality.medium))))));
+              thumbnailUrl: thumbnailUrl,
+              child: RealmContentNetworkImage(widget.src,
+                filterQuality: FilterQuality.medium,
+                frameBuilder: thumbnailUrl == null ? null
+                  : (context, child, frame, wasSynchronouslyLoaded) {
+                    if (wasSynchronouslyLoaded || frame != null) {
+                      // Image was already available or has finished downloading and
+                      // so it is now available.
+                      return child;
+                    }
+                    return RealmContentNetworkImage(thumbnailUrl,
+                      filterQuality: FilterQuality.medium);
+                  },
+                loadingBuilder: thumbnailUrl == null ? null
+                  : (context, child, loadingProgress) {
+                    // `loadingProgress` is null when Image has finished downloading.
+                    double? progress = _loadingProgress;
+                    if (loadingProgress?.expectedTotalBytes == null) {
+                      progress = null;
+                    } else {
+                      progress = loadingProgress!.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!;
+                    }
+                    if (progress != _loadingProgress) {
+                      _loadingProgress = progress;
+                      // This function is called in a build method and setState
+                      // can't be called in a build method, so delay it.
+                      SchedulerBinding.instance.addPostFrameCallback((_) { if (mounted) setState(() {}); });
+                    }
+                    return child;
+                  },
+                ),
+            ),
+          ),
+        ),
+      ));
   }
 }
 
@@ -457,6 +511,7 @@ class _VideoLightboxPageState extends State<VideoLightboxPage> with PerAccountSt
     return _LightboxPageLayout(
       routeEntranceAnimation: widget.routeEntranceAnimation,
       message: widget.message,
+      buildAppBarFooter: null,
       buildBottomAppBar: _buildBottomAppBar,
       child: SafeArea(
         child: Center(
@@ -484,6 +539,7 @@ Route<void> getLightboxRoute({
   BuildContext? context,
   required Message message,
   required Uri src,
+  required Uri? thumbnailUrl,
   required MediaType mediaType,
 }) {
   return AccountPageRouteBuilder(
@@ -500,7 +556,8 @@ Route<void> getLightboxRoute({
         MediaType.image => _ImageLightboxPage(
           routeEntranceAnimation: animation,
           message: message,
-          src: src),
+          src: src,
+          thumbnailUrl: thumbnailUrl),
         MediaType.video => VideoLightboxPage(
           routeEntranceAnimation: animation,
           message: message,