lightbox: Prototype lightbox

chrisbobbe · chrisbobbe · commit 99719510b280 · 2023-03-28T15:39:22.000-07:00
diff --git a/lib/widgets/clipboard.dart b/lib/widgets/clipboard.dart
@@ -0,0 +1,39 @@
+import 'package:device_info_plus/device_info_plus.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// Copies [data] to the clipboard and shows a popup on success.
+///
+/// Must have a [Scaffold] ancestor.
+///
+/// On newer Android the popup is defined and shown by the platform. On older
+/// Android and on iOS, shows a [Snackbar] with [successText].
+///
+/// In English, the [successText] should be short, should start with a capital
+/// letter, and should have no ending punctuation: "{noun} copied".
+void copyWithPopup({
+  required BuildContext context,
+  required ClipboardData data,
+  required Text successText // TODO(i18n)
+}) async {
+  await Clipboard.setData(data);
+  final deviceInfo = await DeviceInfoPlugin().deviceInfo;
+
+  // Early return on !mounted would be better, but:
+  //   https://github.com/dart-lang/linter/issues/4007
+  if (context.mounted) {
+    final shouldShowSnackbar =
+      (deviceInfo is IosDeviceInfo)
+
+        // Android 13+ shows its own popup on copying to the clipboard,
+        // so we suppress ours, following the advice at:
+        //   https://developer.android.com/develop/ui/views/touch-and-input/copy-paste#duplicate-notifications
+        // TODO(android-sdk-32) Remove and simplify dartdoc
+        || (deviceInfo is AndroidDeviceInfo && deviceInfo.version.sdkInt <= 32);
+
+    if (shouldShowSnackbar) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(behavior: SnackBarBehavior.floating, content: successText));
+    }
+  }
+}
diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart
@@ -6,6 +6,7 @@ import '../api/model/model.dart';
 import '../model/content.dart';
 import '../model/store.dart';
 import 'store.dart';
+import 'lightbox.dart';
 
 /// The font size for message content in a plain unstyled paragraph.
 const double kBaseFontSize = 14;
@@ -180,30 +181,40 @@ class MessageImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final messageContentWidget = context.findAncestorWidgetOfExactType<MessageContent>();
+    assert(messageContentWidget != null, 'No MessageContent ancestor');
+    final message = messageContentWidget!.message;
+
     // TODO multiple images in a row
     // TODO image hover animation
     final src = node.srcUrl;
 
     final store = PerAccountStoreWidget.of(context);
     final resolvedSrc = resolveUrl(src, store.account);
 
-    return Align(
-        alignment: Alignment.centerLeft,
-        child: Padding(
-            // TODO clean up this padding by imitating web less precisely;
-            //   in particular, avoid adding loose whitespace at end of message.
-            // The corresponding element on web has a 5px two-sided margin…
-            // and then a 1px transparent border all around.
-            padding: const EdgeInsets.fromLTRB(1, 1, 6, 6),
-            child: Container(
-                height: 100,
-                width: 150,
-                alignment: Alignment.center,
-                color: const Color.fromRGBO(0, 0, 0, 0.03),
-                child: RealmContentNetworkImage(
-                  resolvedSrc,
-                  filterQuality: FilterQuality.medium,
-                ))));
+    return GestureDetector(
+      onTap: () {
+        Navigator.of(context).push(getLightboxRoute(
+            context: context, message: message, src: resolvedSrc));
+      },
+      child: Align(
+          alignment: Alignment.centerLeft,
+          child: Padding(
+              // TODO clean up this padding by imitating web less precisely;
+              //   in particular, avoid adding loose whitespace at end of message.
+              // The corresponding element on web has a 5px two-sided margin…
+              // and then a 1px transparent border all around.
+              padding: const EdgeInsets.fromLTRB(1, 1, 6, 6),
+              child: Container(
+                  height: 100,
+                  width: 150,
+                  alignment: Alignment.center,
+                  color: const Color.fromRGBO(0, 0, 0, 0.03),
+                  child: LightboxHero(
+                    accountId: PerAccountStoreWidget.accountIdOf(context),
+                    message: message,
+                    src: resolvedSrc)))),
+    );
   }
 }
 
diff --git a/lib/widgets/lightbox.dart b/lib/widgets/lightbox.dart
@@ -0,0 +1,243 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:intl/intl.dart';
+
+import '../api/model/model.dart';
+import 'content.dart';
+import 'page.dart';
+import 'clipboard.dart';
+import 'store.dart';
+
+// TODO: Add index of the image preview in the message, to not break if
+//   there are multiple image previews with the same URL in the same
+//   message. Maybe keep `src`, so that on exit the lightbox image doesn't
+//   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});
+
+  final int messageId;
+  final String src;
+
+  @override
+  bool operator ==(Object other) {
+    return other is _LightboxHeroTag &&
+      other.messageId == messageId &&
+      other.src == other.src;
+  }
+
+  @override
+  int get hashCode => Object.hash('_LightboxHeroTag', messageId, src);
+}
+
+/// Builds a [Hero] from an image in the message list to the lightbox page.
+class LightboxHero extends StatelessWidget {
+  const LightboxHero({
+    super.key,
+    required this.accountId,
+    required this.message,
+    required this.src,
+  });
+
+  /// The account the message list belongs to.
+  final int accountId;
+
+  final Message message;
+  final String src;
+
+  @override
+  Widget build(BuildContext context) {
+    return Hero(
+      tag: _LightboxHeroTag(messageId: message.id, src: src),
+
+      // RealmContentNetworkImage needs an ancestor PerAccountStoreWidget, and
+      // during the hero's "flight", we wouldn't otherwise get one.
+      child: PerAccountStoreWidget(accountId: accountId,
+        child: RealmContentNetworkImage(src, filterQuality: FilterQuality.medium)),
+    );
+  }
+}
+
+class _CopyLinkButton extends StatelessWidget {
+  const _CopyLinkButton({required this.url});
+
+  final String url;
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      tooltip: 'Copy link',
+      icon: const Icon(Icons.copy),
+      onPressed: () async {
+        copyWithPopup(context: context, successText: const Text('Link copied'),
+          data: ClipboardData(text: url));
+      });
+  }
+}
+
+class _LightboxPage extends StatefulWidget {
+  const _LightboxPage({
+    required this.routeEntranceAnimation,
+    required this.message,
+    required this.src,
+  });
+
+  final Animation routeEntranceAnimation;
+  final Message message;
+  final String src;
+
+  @override
+  State<_LightboxPage> createState() => _LightboxPageState();
+}
+
+class _LightboxPageState extends State<_LightboxPage> {
+  // TODO: Animate entrance/exit of header and footer
+  bool _headerFooterVisible = false;
+
+  void _handleRouteEntranceAnimationStatusChange(AnimationStatus status) {
+    switch (status) {
+      case AnimationStatus.completed:
+        // Route entrance transition complete
+        setState(() {
+          _headerFooterVisible = true;
+        });
+        break;
+      default:
+        setState(() {
+          _headerFooterVisible = false;
+        });
+        break;
+    }
+  }
+
+  void _handleTap() {
+    setState(() {
+      _headerFooterVisible = !_headerFooterVisible;
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    widget.routeEntranceAnimation.addStatusListener(_handleRouteEntranceAnimationStatusChange);
+  }
+
+  @override
+  void dispose() {
+    widget.routeEntranceAnimation.removeStatusListener(_handleRouteEntranceAnimationStatusChange);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final themeData = Theme.of(context);
+
+    final appBarBackgroundColor = Colors.grey.shade900.withOpacity(0.87);
+    const appBarForegroundColor = Colors.white;
+
+    PreferredSizeWidget? appBar;
+    if (_headerFooterVisible) {
+      // TODO: Format with e.g. "Yesterday at 4:47 PM"
+      final timestampText = DateFormat
+          .yMMMd(/* TODO(i18n): Pass selected language here, I think? */)
+          .add_Hms()
+          .format(DateTime.fromMillisecondsSinceEpoch(widget.message.timestamp * 1000));
+
+      appBar = AppBar(
+        // TODO: Show message author's avatar
+        title: RichText(
+          text: TextSpan(
+            children: [
+              TextSpan(
+                text: '${widget.message.sender_full_name}\n',
+
+                // Restate default
+                style: themeData.textTheme.titleLarge!.copyWith(color: appBarForegroundColor),
+              ),
+              TextSpan(
+                text: timestampText,
+
+                // Make smaller, like a subtitle
+                style: themeData.textTheme.titleSmall!.copyWith(color: appBarForegroundColor)),
+            ]
+          )),
+
+        centerTitle: false,
+        foregroundColor: appBarForegroundColor,
+        backgroundColor: appBarBackgroundColor,
+      );
+    }
+
+    Widget? bottomAppBar;
+    if (_headerFooterVisible) {
+      bottomAppBar = BottomAppBar(
+        color: appBarBackgroundColor,
+        child: Row(
+          children: [
+            _CopyLinkButton(url: widget.src),
+            // TODO: Share image
+            // TODO: Download image
+          ],
+        ));
+    }
+
+    return Theme(
+      data: themeData.copyWith(
+        iconTheme: themeData.iconTheme.copyWith(color: appBarForegroundColor),
+      ),
+      child: Scaffold(
+        backgroundColor: Colors.black,
+        extendBody: true, // For the BottomAppBar
+        extendBodyBehindAppBar: true, // For the AppBar
+        appBar: appBar,
+        body: MediaQuery(
+          // Clobber the MediaQueryData prepared by Scaffold with one that's not
+          // affected by the app bars. On this screen, the app bars are
+          // translucent, dismissible overlays above the pan-zoom layer in the
+          // Z direction, so the pan-zoom layer doesn't need avoid them in the Y
+          // direction.
+          data: MediaQuery.of(context),
+
+          child: GestureDetector(
+            behavior: HitTestBehavior.translucent,
+            onTap: _handleTap,
+            child: SizedBox.expand(
+              child: InteractiveViewer(
+                child: SafeArea(
+                  child: LightboxHero(
+                    accountId: PerAccountStoreWidget.accountIdOf(context),
+                    message: widget.message,
+                    src: widget.src)))))),
+        bottomNavigationBar: bottomAppBar));
+  }
+}
+
+Route getLightboxRoute({
+  required BuildContext context,
+  required Message message,
+  required String src
+}) {
+  return AccountPageRouteBuilder(
+    context: context,
+    fullscreenDialog: true,
+    pageBuilder: (
+      BuildContext context,
+      Animation<double> animation,
+      Animation<double> secondaryAnimation,
+    ) {
+      // TODO: Drag down to close?
+      return _LightboxPage(routeEntranceAnimation: animation, message: message, src: src);
+    },
+    transitionsBuilder: (
+      BuildContext context,
+      Animation<double> animation,
+      Animation<double> secondaryAnimation,
+      Widget child,
+    ) {
+      return FadeTransition(
+        opacity: animation.drive(CurveTween(curve: Curves.easeIn)),
+        child: child,
+      );
+    },
+  );
+}
