content: Handle html parsing of InlineVideoNode

Author: rajveermalviya

lib/model/content.dart

@@ -374,6 +374,39 @@ class ImageNode extends BlockContentNode {
   }
 }
 
+class InlineVideoNode extends BlockContentNode {
+  const InlineVideoNode({
+    super.debugHtmlNode,
+    required this.srcUrl,
+  });
+
+  /// A URL string for the video resource, on the Zulip server.
+  ///
+  /// This may be a relative URL string.  It also may not work without adding
+  /// authentication credentials to the request.
+  ///
+  /// Unlike [EmbedVideoNode.hrefUrl], this should always be a URL served by
+  /// either the Zulip server itself or a service it trusts.  It's therefore
+  /// fine from a privacy perspective to eagerly request data from this resource
+  /// when the user passively scrolls the video into view.
+  final String srcUrl;
+
+  @override
+  bool operator ==(Object other) {
+    return other is InlineVideoNode
+      && other.srcUrl == srcUrl;
+  }
+
+  @override
+  int get hashCode => Object.hash('InlineVideoNode', srcUrl);
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(StringProperty('srcUrl', srcUrl));
+  }
+}
+
 class EmbedVideoNode extends BlockContentNode {
   const EmbedVideoNode({
     super.debugHtmlNode,
@@ -1013,10 +1046,43 @@ class _ZulipContentParser {
   }
 
   static final _videoClassNameRegexp = () {
-    const sourceType = r"(youtube-video|embed-video)";
+    const sourceType = r"(message_inline_video|youtube-video|embed-video)";
     return RegExp("^message_inline_image $sourceType|$sourceType message_inline_image\$");
   }();
 
+  BlockContentNode parseInlineVideoNode(dom.Element divElement) {
+    assert(_debugParserContext == _ParserContext.block);
+    assert(divElement.localName == 'div'
+      && _videoClassNameRegexp.hasMatch(divElement.className));
+
+    final videoElement = () {
+      if (divElement.nodes.length != 1) return null;
+      final child = divElement.nodes[0];
+      if (child is! dom.Element) return null;
+      if (child.localName != 'a') return null;
+      if (child.className.isNotEmpty) return null;
+
+      if (child.nodes.length != 1) return null;
+      final grandchild = child.nodes[0];
+      if (grandchild is! dom.Element) return null;
+      if (grandchild.localName != 'video') return null;
+      if (grandchild.className.isNotEmpty) return null;
+      return grandchild;
+    }();
+
+    final debugHtmlNode = kDebugMode ? divElement : null;
+    if (videoElement == null) {
+      return UnimplementedBlockContentNode(htmlNode: divElement);
+    }
+
+    final src = videoElement.attributes['src'];
+    if (src == null) {
+      return UnimplementedBlockContentNode(htmlNode: divElement);
+    }
+
+    return InlineVideoNode(srcUrl: src, debugHtmlNode: debugHtmlNode);
+  }
+
   BlockContentNode parseEmbedVideoNode(dom.Element divElement) {
     assert(_debugParserContext == _ParserContext.block);
     assert(divElement.localName == 'div'
@@ -1140,8 +1206,11 @@ class _ZulipContentParser {
       final match = _videoClassNameRegexp.firstMatch(className);
       if (match != null) {
         final videoClass = match.group(1) ?? match.group(2)!;
-        if (videoClass case 'youtube-video' || 'embed-video') {
-          return parseEmbedVideoNode(element);
+        switch (videoClass) {
+          case 'message_inline_video':
+            return parseInlineVideoNode(element);
+          case 'youtube-video' || 'embed-video':
+            return parseEmbedVideoNode(element);
         }
       }
     }

lib/widgets/content.dart

@@ -98,6 +98,14 @@ class BlockContentList extends StatelessWidget {
             "It should be wrapped in [ImageNodeList]."
           );
           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);
         } else if (node is EmbedVideoNode) {
           return Text.rich(
             TextSpan(children: [

test/model/content_test.dart

@@ -700,6 +700,36 @@ class ContentExample {
       previewImageSrcUrl: 'https://uploads.zulipusercontent.net/75aed2df4a1e8657176fcd6159fc40876ace4070/68747470733a2f2f692e76696d656f63646e2e636f6d2f766964656f2f32303936333634392d663032383137343536666334386537633331376566346330376261323539636434623430613336343962643865623530613434313862353965633366356166352d645f363430'
     ),
   ]);
+
+  static const videoInline = ContentExample(
+    'video preview for user uploaded video',
+    '[Big-Buck-Bunny.webm](/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm)',
+    '<p>'
+      '<a href="/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm">Big-Buck-Bunny.webm</a>'
+    '</p>\n'
+    '<div class="message_inline_image message_inline_video">'
+      '<a href="/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm" title="Big-Buck-Bunny.webm">'
+        '<video preload="metadata" src="/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm"></video></a></div>', [
+    ParagraphNode(links: null, nodes: [
+      LinkNode(url: '/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm', nodes: [TextNode('Big-Buck-Bunny.webm')]),
+    ]),
+    InlineVideoNode(srcUrl: '/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm'),
+  ]);
+
+  static const videoInlineClassesFlipped = ContentExample(
+    'video preview for user uploaded video, (hypothetical) class name reorder',
+    '[Big-Buck-Bunny.webm](/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm)',
+    '<p>'
+      '<a href="/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm">Big-Buck-Bunny.webm</a>'
+    '</p>\n'
+    '<div class="message_inline_video message_inline_image">'
+      '<a href="/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm" title="Big-Buck-Bunny.webm">'
+        '<video preload="metadata" src="/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm"></video></a></div>', [
+    ParagraphNode(links: null, nodes: [
+      LinkNode(url: '/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm', nodes: [TextNode('Big-Buck-Bunny.webm')]),
+    ]),
+    InlineVideoNode(srcUrl: '/user_uploads/2/78/_KoRecCHZTFrVtyTKCkIh5Hq/Big-Buck-Bunny.webm'),
+  ]);
 }
 
 UnimplementedBlockContentNode blockUnimplemented(String html) {
@@ -1017,6 +1047,8 @@ void main() {
   testParseExample(ContentExample.videoEmbedVimeoPreviewDisabled);
   testParseExample(ContentExample.videoEmbedVimeo);
   testParseExample(ContentExample.videoEmbedVimeoClassesFlipped);
+  testParseExample(ContentExample.videoInline);
+  testParseExample(ContentExample.videoInlineClassesFlipped);
 
   testParse('parse nested lists, quotes, headings, code blocks',
     // "1. > ###### two\n   > * three\n\n      four"