content: Implement inline video preview

Fixes: zulip#356

Author: rajveermalviya

lib/widgets/content.dart

@@ -99,13 +99,7 @@ class BlockContentList extends StatelessWidget {
           );
           return MessageImage(node: node);
         } else if (node is InlineVideoNode) {
-          return Text.rich(
-            TextSpan(children: [
-              const TextSpan(text: "(unimplemented:", style: errorStyle),
-              TextSpan(text: node.debugHtmlText, style: errorCodeStyle),
-              const TextSpan(text: ")", style: errorStyle),
-            ]),
-            style: errorStyle);
+          return MessageInlineVideo(node: node);
         } else if (node is EmbedVideoNode) {
           return MessageEmbedVideo(node: node);
         } else if (node is UnimplementedBlockContentNode) {
@@ -386,7 +380,10 @@ class MessageImage extends StatelessWidget {
     return MessageMediaContainer(
       onTap: resolvedSrc == null ? null : () { // TODO(log)
         Navigator.of(context).push(getLightboxRoute(
-          context: context, message: message, src: resolvedSrc));
+          context: context,
+          message: message,
+          src: resolvedSrc,
+          mediaType: MediaType.image));
       },
       child: resolvedSrc == null ? null : LightboxHero(
         message: message,
@@ -397,6 +394,35 @@ class MessageImage extends StatelessWidget {
   }
 }
 
+class MessageInlineVideo extends StatelessWidget {
+  const MessageInlineVideo({super.key, required this.node});
+
+  final InlineVideoNode node;
+
+  @override
+  Widget build(BuildContext context) {
+    final message = InheritedMessage.of(context);
+    final store = PerAccountStoreWidget.of(context);
+    final resolvedSrc = store.tryResolveUrl(node.srcUrl);
+
+    return MessageMediaContainer(
+      onTap: resolvedSrc == null ? null : () { // TODO(log)
+        Navigator.of(context).push(getLightboxRoute(
+          context: context,
+          message: message,
+          src: resolvedSrc,
+          mediaType: MediaType.video));
+      },
+      child: Container(
+        color: Colors.black,
+        alignment: Alignment.center,
+        child: resolvedSrc == null ? null : const Icon(
+          Icons.play_arrow_rounded,
+          color: Colors.white,
+          size: 32)));
+  }
+}
+
 class MessageEmbedVideo extends StatelessWidget {
   const MessageEmbedVideo({super.key, required this.node});
 

lib/widgets/dialog.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 
-Widget _dialogActionText(String text) {
+Widget dialogActionText(String text) {
   return Text(
     text,
 
@@ -29,7 +29,7 @@ Future<void> showErrorDialog({
       actions: [
         TextButton(
           onPressed: () => Navigator.pop(context),
-          child: _dialogActionText(zulipLocalizations.errorDialogContinue)),
+          child: dialogActionText(zulipLocalizations.errorDialogContinue)),
       ]));
 }
 
@@ -49,9 +49,9 @@ void showSuggestedActionDialog({
       actions: [
         TextButton(
           onPressed: () => Navigator.pop(context),
-          child: _dialogActionText(zulipLocalizations.dialogCancel)),
+          child: dialogActionText(zulipLocalizations.dialogCancel)),
         TextButton(
           onPressed: onActionButtonPress,
-          child: _dialogActionText(actionButtonText ?? zulipLocalizations.dialogContinue)),
+          child: dialogActionText(actionButtonText ?? zulipLocalizations.dialogContinue)),
       ]));
 }

lib/widgets/lightbox.dart

@@ -1,10 +1,15 @@
 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';
+import 'package:video_player/video_player.dart';
 
+import '../api/core.dart';
 import '../api/model/model.dart';
+import '../log.dart';
 import 'content.dart';
+import 'dialog.dart';
 import 'page.dart';
 import 'clipboard.dart';
 import 'store.dart';
@@ -83,8 +88,8 @@ class _CopyLinkButton extends StatelessWidget {
   }
 }
 
-class _LightboxPage extends StatefulWidget {
-  const _LightboxPage({
+class _ImageLightboxPage extends StatefulWidget {
+  const _ImageLightboxPage({
     required this.routeEntranceAnimation,
     required this.message,
     required this.src,
@@ -95,10 +100,10 @@ class _LightboxPage extends StatefulWidget {
   final Uri src;
 
   @override
-  State<_LightboxPage> createState() => _LightboxPageState();
+  State<_ImageLightboxPage> createState() => _ImageLightboxPageState();
 }
 
-class _LightboxPageState extends State<_LightboxPage> {
+class _ImageLightboxPageState extends State<_ImageLightboxPage> {
   // TODO(#38): Animate entrance/exit of header and footer
   bool _headerFooterVisible = false;
 
@@ -208,11 +213,244 @@ class _LightboxPageState extends State<_LightboxPage> {
   }
 }
 
+class VideoLightboxPage extends StatefulWidget {
+  const VideoLightboxPage({
+    super.key,
+    required this.routeEntranceAnimation,
+    required this.message,
+    required this.src,
+  });
+
+  final Animation routeEntranceAnimation;
+  final Message message;
+  final Uri src;
+
+  @override
+  State<VideoLightboxPage> createState() => _VideoLightboxPageState();
+}
+
+class _VideoLightboxPageState extends State<VideoLightboxPage> {
+  // TODO(#38): Animate entrance/exit of header and footer
+  bool _headerFooterVisible = false;
+
+  VideoPlayerController? _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.routeEntranceAnimation.addStatusListener(_handleRouteEntranceAnimationStatusChange);
+    // We delay initialization by a single frame to make sure the
+    // BuildContext is a valid context, as its needed to retrieve
+    // the PerAccountStore & ZulipLocalizations during initialization.
+    SchedulerBinding.instance.addPostFrameCallback((_) => _initialize());
+  }
+
+  Future<void> _initialize() async {
+    final store = PerAccountStoreWidget.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
+
+    assert(debugLog('VideoPlayerController.networkUrl(${widget.src})'));
+    _controller = VideoPlayerController.networkUrl(widget.src, httpHeaders: {
+      if (widget.src.origin == store.account.realmUrl.origin) ...authHeader(
+        email: store.account.email,
+        apiKey: store.account.apiKey,
+      ),
+      ...userAgentHeader()
+    });
+    _controller!.addListener(_handleVideoControllerUpdates);
+
+    try {
+      await _controller!.initialize();
+      await _controller!.play();
+    } catch (error) { // TODO(log)
+      assert(debugLog("VideoPlayerController.initialize failed: $error"));
+      if (mounted) {
+        await showDialog(
+          context: context,
+          barrierDismissible: false,
+          builder: (BuildContext context) => AlertDialog(
+            title: const Text('Unable to play video'), // TODO(i18n)
+            actions: [
+              TextButton(
+                onPressed: () => Navigator.popUntil(context, (route) => route is MaterialAccountPageRoute),
+                child: dialogActionText(zulipLocalizations.errorDialogContinue)),
+            ]));
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller?.removeListener(_handleVideoControllerUpdates);
+    _controller?.dispose();
+    widget.routeEntranceAnimation.removeStatusListener(_handleRouteEntranceAnimationStatusChange);
+    super.dispose();
+  }
+
+  void _handleRouteEntranceAnimationStatusChange(AnimationStatus status) {
+    final entranceAnimationComplete = status == AnimationStatus.completed;
+    setState(() {
+      _headerFooterVisible = entranceAnimationComplete;
+    });
+  }
+
+  void _handleTap() {
+    setState(() {
+      _headerFooterVisible = !_headerFooterVisible;
+    });
+  }
+
+  void _handleVideoControllerUpdates() {
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final themeData = Theme.of(context);
+
+    final appBarBackgroundColor = Colors.grey.shade900.withOpacity(0.87);
+    const appBarForegroundColor = Colors.white;
+    const appBarElevation = 0.0;
+
+    PreferredSizeWidget? appBar;
+    if (_headerFooterVisible) {
+      // TODO(#45): Format with e.g. "Yesterday at 4:47 PM"
+      final timestampText = DateFormat
+        .yMMMd(/* TODO(#278): Pass selected language here, I think? */)
+        .add_Hms()
+        .format(DateTime.fromMillisecondsSinceEpoch(widget.message.timestamp * 1000));
+
+      appBar = AppBar(
+        centerTitle: false,
+        foregroundColor: appBarForegroundColor,
+        backgroundColor: appBarBackgroundColor,
+        shape: const Border(), // Remove bottom border from [AppBarTheme]
+        elevation: appBarElevation,
+
+        // TODO(#41): Show message author's avatar
+        title: RichText(
+          text: TextSpan(children: [
+            TextSpan(
+              text: '${widget.message.senderFullName}\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)),
+          ])));
+    }
+
+    Widget? bottomAppBar;
+    if (_controller != null && _headerFooterVisible) {
+      bottomAppBar = BottomAppBar(
+        height: 150,
+        color: appBarBackgroundColor,
+        elevation: appBarElevation,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+          Row(
+            children: [
+              Text(
+                _controller!.value.position.formatHHMMSS(),
+                style: const TextStyle(color: Colors.white),
+              ),
+              Expanded(
+                child: Slider(
+                  value: _controller!.value.position.inSeconds.toDouble(),
+                  max: _controller!.value.duration.inSeconds.toDouble(),
+                  activeColor: Colors.white,
+                  onChanged: (value) {
+                    _controller!.seekTo(Duration(seconds: value.toInt()));
+                  },
+                ),
+              ),
+              Text(
+                 _controller!.value.duration.formatHHMMSS(),
+                style: const TextStyle(color: Colors.white),
+              ),
+            ],
+          ),
+          IconButton(
+            onPressed: () {
+              if (_controller!.value.isPlaying) {
+                _controller!.pause();
+              } else {
+                _controller!.play();
+              }
+            },
+            icon: Icon(
+              _controller!.value.isPlaying
+                ? Icons.pause_circle_rounded
+                : Icons.play_circle_rounded,
+              size: 50,
+            )),
+        ]));
+    }
+
+    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,
+        bottomNavigationBar: bottomAppBar,
+        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: SafeArea(
+              child: Center(
+                child: Stack(
+                  alignment: Alignment.center,
+                  children: [
+                    if (_controller != null && _controller!.value.isInitialized)
+                      AspectRatio(
+                        aspectRatio: _controller!.value.aspectRatio,
+                        child: VideoPlayer(_controller!)),
+                    if (_controller == null || !_controller!.value.isInitialized || _controller!.value.isBuffering)
+                      const SizedBox(
+                        width: 32,
+                        height: 32,
+                        child: CircularProgressIndicator(color: Colors.white))
+                  ]),
+              ))))));
+  }
+}
+
+extension DurationFormatting on Duration {
+  String formatHHMMSS() {
+    final hoursString = inHours.toString().padLeft(2, '0');
+    final minutesString = inMinutes.remainder(60).toString().padLeft(2, '0');
+    final secondsString = inSeconds.remainder(60).toString().padLeft(2, '0');
+
+    return '${hoursString == '00' ? '' : '$hoursString:'}$minutesString:$secondsString';
+  }
+}
+
+enum MediaType {
+  video,
+  image
+}
+
 Route getLightboxRoute({
   int? accountId,
   BuildContext? context,
   required Message message,
   required Uri src,
+  required MediaType mediaType,
 }) {
   return AccountPageRouteBuilder(
     accountId: accountId,
@@ -224,7 +462,16 @@ Route getLightboxRoute({
       Animation<double> secondaryAnimation,
     ) {
       // TODO(#40): Drag down to close?
-      return _LightboxPage(routeEntranceAnimation: animation, message: message, src: src);
+      return switch (mediaType) {
+        MediaType.image => _ImageLightboxPage(
+          routeEntranceAnimation: animation,
+          message: message,
+          src: src),
+        MediaType.video => VideoLightboxPage(
+          routeEntranceAnimation: animation,
+          message: message,
+          src: src),
+      };
     },
     transitionsBuilder: (
       BuildContext context,