content: Implement inline video preview

Author: rajveermalviya

lib/widgets/content.dart

@@ -1,13 +1,16 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:html/dom.dart' as dom;
 import 'package:intl/intl.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
+import 'package:video_player/video_player.dart';
 
 import '../api/core.dart';
 import '../api/model/model.dart';
+import '../log.dart';
 import '../model/avatar_url.dart';
 import '../model/binding.dart';
 import '../model/content.dart';
@@ -99,13 +102,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) {
@@ -410,6 +407,142 @@ class MessageImage extends StatelessWidget {
   }
 }
 
+class MessageInlineVideo extends StatefulWidget {
+  const MessageInlineVideo({super.key, required this.node});
+
+  final InlineVideoNode node;
+
+  @override
+  State<MessageInlineVideo> createState() => _MessageInlineVideoState();
+}
+
+class _MessageInlineVideoState extends State<MessageInlineVideo> {
+  Uri? _resolvedSrcUrl;
+
+  VideoPlayerController? _controller;
+  bool _didAttemptInitialization = false;
+  bool _hasNonPlatformError = false;
+
+  @override
+  void initState() {
+    // We delay initialization by a single frame to make sure the
+    // BuildContext is a valid context as its needed to retrieve
+    // the PerAccountStore during initialization.
+    SchedulerBinding.instance.addPostFrameCallback((_) => _initialize());
+    super.initState();
+  }
+
+  Future<void> _initialize() async {
+    try {
+      final store = PerAccountStoreWidget.of(context);
+      // _resolvedSrcUrl = store.tryResolveUrl(widget.node.srcUrl);
+      if (_resolvedSrcUrl == null) {
+        return; // TODO(log)
+      }
+
+      assert(debugLog('VideoPlayerController.networkUrl($_resolvedSrcUrl)'));
+      _controller = VideoPlayerController.networkUrl(_resolvedSrcUrl!, httpHeaders: {
+        if (_resolvedSrcUrl!.origin == store.account.realmUrl.origin) ...authHeader(
+          email: store.account.email,
+          apiKey: store.account.apiKey,
+        ),
+        ...userAgentHeader()
+      });
+
+      await _controller!.initialize();
+      _controller!.addListener(_handleVideoControllerUpdates);
+    } on PlatformException catch (error) {
+      // This can occur when the video url
+      // We silently fail here, because we handle this initialization error
+      // by opening the video 'srcUrl' externally.
+      assert(debugLog("VideoPlayerController.initialize failed: $error"));
+    } catch (error) {
+      _hasNonPlatformError = true;
+      assert(debugLog("VideoPlayerController.initialize failed: $error"));
+    } finally {
+      if (mounted) setState(() { _didAttemptInitialization = true; });
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller?.removeListener(_handleVideoControllerUpdates);
+    _controller?.dispose();
+    super.dispose();
+  }
+
+  void _handleVideoControllerUpdates() {
+    assert(debugLog("Video buffered: ${_controller?.value.buffered}"));
+    assert(debugLog("Video max duration: ${_controller?.value.duration}"));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final message = InheritedMessage.of(context);
+
+    return GestureDetector(
+      onTap: !_didAttemptInitialization
+        ? null
+        : () { // TODO(log)
+            if (_resolvedSrcUrl == null || _hasNonPlatformError) {
+              showErrorDialog(context: context,
+                title: 'Unable to open video',
+                message: 'Video could not be opened: $_resolvedSrcUrl');
+              return;
+            }
+
+            if (_controller!.value.hasError) {
+              // TODO use webview instead, to support auth headers
+              _launchUrl(context, widget.node.srcUrl);
+            } else {
+              Navigator.of(context).push(getLightboxRoute(
+                context: context,
+                message: message,
+                src: _resolvedSrcUrl!,
+                videoController: _controller,
+              ));
+            }
+          },
+      child: UnconstrainedBox(
+        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.
+          padding: const EdgeInsets.only(right: 5, bottom: 5),
+          child: Container(
+              height: 100,
+              width: 150,
+              color: Colors.black,
+              child: !_didAttemptInitialization
+                ? Container(
+                    color: Colors.black,
+                    child: const Center(
+                      child: SizedBox(
+                        height: 16,
+                        width: 16,
+                        child: CircularProgressIndicator(
+                          color: Colors.white,
+                          strokeWidth: 2))))
+                : Stack(
+                    alignment: Alignment.center,
+                    children: [
+                      if (_resolvedSrcUrl == null || _controller!.value.hasError)
+                        Container(color: Colors.black)
+                      else
+                        LightboxHero(
+                          message: message,
+                          src: _resolvedSrcUrl!,
+                          child: AspectRatio(
+                            aspectRatio: _controller!.value.aspectRatio,
+                            child: VideoPlayer(_controller!))),
+                      const Icon(
+                        Icons.play_arrow_rounded,
+                        color: Colors.white,
+                        size: 32)
+                    ])))));
+  }
+}
+
 /// MessageEmbedVideo opens the video href externally, and
 /// a preview image is visible in the content message UI.
 class MessageEmbedVideo extends StatelessWidget {