content: Handle html parsing of EmbedVideoNode

Author: rajveermalviya

lib/model/content.dart

@@ -374,6 +374,50 @@ class ImageNode extends BlockContentNode {
   }
 }
 
+class EmbedVideoNode extends BlockContentNode {
+  const EmbedVideoNode({
+    super.debugHtmlNode,
+    required this.hrefUrl,
+    required this.previewImageSrcUrl,
+  });
+
+  /// A URL string for the video, typically on an external service.
+  ///
+  /// For example, this URL may be on youtube.com or vimeo.com.
+  ///
+  /// Unlike with [previewImageSrcUrl] or [InlineVideoNode.srcUrl],
+  /// no requests should be made to this URL unless the user explicitly chooses
+  /// to interact with the video, in order to protect the user's privacy.
+  final String hrefUrl;
+
+  /// A URL string for a thumbnail image for the video, on the Zulip server.
+  ///
+  /// This may be a relative URL string.  It also may not work without adding
+  /// authentication credentials to the request.
+  ///
+  /// Like [InlineVideoNode.srcUrl] and unlike [hrefUrl], this is suitable
+  /// from a privacy perspective for eagerly fetching data when the user
+  /// passively scrolls the video into view.
+  final String previewImageSrcUrl;
+
+  @override
+  bool operator ==(Object other) {
+    return other is EmbedVideoNode
+      && other.hrefUrl == hrefUrl
+      && other.previewImageSrcUrl == previewImageSrcUrl;
+  }
+
+  @override
+  int get hashCode => Object.hash('EmbedVideoNode', hrefUrl, previewImageSrcUrl);
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(StringProperty('hrefUrl', hrefUrl));
+    properties.add(StringProperty('previewImageSrcUrl', previewImageSrcUrl));
+  }
+}
+
 /// A content node that expects an inline layout context from its parent.
 ///
 /// When rendered into a Flutter widget tree, an inline content node
@@ -968,6 +1012,50 @@ class _ZulipContentParser {
     return ImageNode(srcUrl: src, debugHtmlNode: debugHtmlNode);
   }
 
+  static final _videoClassNameRegexp = () {
+    const sourceType = r"(youtube-video|embed-video)";
+    return RegExp("^message_inline_image $sourceType|$sourceType message_inline_image\$");
+  }();
+
+  BlockContentNode parseEmbedVideoNode(dom.Element divElement) {
+    assert(_debugParserContext == _ParserContext.block);
+    assert(divElement.localName == 'div'
+      && _videoClassNameRegexp.hasMatch(divElement.className));
+
+    final pair = () {
+      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 != 'img') return null;
+      if (grandchild.className.isNotEmpty) return null;
+      return (child, grandchild);
+    }();
+
+    final debugHtmlNode = kDebugMode ? divElement : null;
+    if (pair == null) {
+      return UnimplementedBlockContentNode(htmlNode: divElement);
+    }
+    final (anchorElement, imgElement) = pair;
+
+    final imgSrc = imgElement.attributes['src'];
+    if (imgSrc == null) {
+      return UnimplementedBlockContentNode(htmlNode: divElement);
+    }
+
+    final href = anchorElement.attributes['href'];
+    if (href == null) {
+      return UnimplementedBlockContentNode(htmlNode: divElement);
+    }
+
+    return EmbedVideoNode(hrefUrl: href, previewImageSrcUrl: imgSrc, debugHtmlNode: debugHtmlNode);
+  }
+
   BlockContentNode parseBlockContent(dom.Node node) {
     assert(_debugParserContext == _ParserContext.block);
     final debugHtmlNode = kDebugMode ? node : null;
@@ -1048,6 +1136,16 @@ class _ZulipContentParser {
       return parseImageNode(element);
     }
 
+    if (localName == 'div') {
+      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);
+        }
+      }
+    }
+
     // TODO more types of node
     return UnimplementedBlockContentNode(htmlNode: node);
   }

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 EmbedVideoNode) {
+          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 UnimplementedBlockContentNode) {
           return Text.rich(_errorUnimplemented(node));
         } else {

test/model/content_test.dart

@@ -613,6 +613,93 @@ class ContentExample {
       ThematicBreakNode(),
       ParagraphNode(links: null, nodes: [TextNode('b')]),
     ]);
+
+  static const videoEmbedYoutube = ContentExample(
+    'video preview for youtube embed with thumbnail',
+    'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
+    '<p>'
+      '<a href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">https://www.youtube.com/watch?v=aqz-KE-bpKQ</a>'
+    '</p>\n'
+    '<div class="youtube-video message_inline_image">'
+      '<a data-id="aqz-KE-bpKQ" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">'
+        '<img src="/external_content/ecb96e8f884f481c4bc0179287a44ab9014aa78f/68747470733a2f2f692e7974696d672e636f6d2f76692f61717a2d4b452d62704b512f64656661756c742e6a7067"></a></div>', [
+    ParagraphNode(links: null, nodes: [
+      LinkNode(url: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ', nodes: [TextNode('https://www.youtube.com/watch?v=aqz-KE-bpKQ')]),
+    ]),
+    EmbedVideoNode(
+      hrefUrl: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
+      previewImageSrcUrl: '/external_content/ecb96e8f884f481c4bc0179287a44ab9014aa78f/68747470733a2f2f692e7974696d672e636f6d2f76692f61717a2d4b452d62704b512f64656661756c742e6a7067'
+    ),
+  ]);
+
+  static const videoEmbedYoutubeClassesFlipped = ContentExample(
+    'video preview for youtube embed with thumbnail, (hypothetical) class name reorder',
+    null, // "https://www.youtube.com/watch?v=aqz-KE-bpKQ" (hypothetical server variation)
+    '<p>'
+      '<a href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">https://www.youtube.com/watch?v=aqz-KE-bpKQ</a>'
+    '</p>\n'
+    '<div class="message_inline_image youtube-video">'
+      '<a data-id="aqz-KE-bpKQ" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ">'
+        '<img src="/external_content/ecb96e8f884f481c4bc0179287a44ab9014aa78f/68747470733a2f2f692e7974696d672e636f6d2f76692f61717a2d4b452d62704b512f64656661756c742e6a7067"></a></div>', [
+    ParagraphNode(links: null, nodes: [
+      LinkNode(url: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ', nodes: [TextNode('https://www.youtube.com/watch?v=aqz-KE-bpKQ')]),
+    ]),
+    EmbedVideoNode(
+      hrefUrl: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
+      previewImageSrcUrl: '/external_content/ecb96e8f884f481c4bc0179287a44ab9014aa78f/68747470733a2f2f692e7974696d672e636f6d2f76692f61717a2d4b452d62704b512f64656661756c742e6a7067'
+    ),
+  ]);
+
+  static const videoEmbedVimeoPreviewDisabled = ContentExample(
+    'video non-preview for attempted vimeo embed with realm link previews disabled',
+    'https://vimeo.com/1084537',
+    '<p>'
+      '<a href="https://vimeo.com/1084537">https://vimeo.com/1084537</a></p>', [
+    ParagraphNode(links: null, nodes: [
+      LinkNode(url: 'https://vimeo.com/1084537', nodes: [TextNode('https://vimeo.com/1084537')]),
+    ]),
+  ]);
+
+  static const videoEmbedVimeo = ContentExample(
+    'video preview for vimeo embed with realm link previews enabled',
+    'https://vimeo.com/1084537',
+    // The server really does generate an attribute called "data-id" whose value
+    // is a blob of HTML.  The web client uses this to show Vimeo's video player
+    // inside a sandbox iframe.  The HTML comes from Vimeo and may change form;
+    // that's OK the way web uses it, but we shouldn't try to parse it.  See:
+    //   https://chat.zulip.org/#narrow/stream/9-issues/topic/Vimeo.20link.20previews.20HTML.20.22data-id.22.20isn't.20a.20.20Vimeo.20video.20ID/near/1767563
+    '<p>'
+      '<a href="https://vimeo.com/1084537">Vimeo - Big Buck Bunny</a>'
+    '</p>\n'
+    '<div class="embed-video message_inline_image">'
+      '<a data-id="&lt;iframe src=&quot;https://player.vimeo.com/video/1084537?app_id=122963&quot; width=&quot;640&quot; height=&quot;360&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture; clipboard-write&quot; title=&quot;Big Buck Bunny&quot;&gt;&lt;/iframe&gt;" href="https://vimeo.com/1084537" title="Big Buck Bunny">'
+        '<img src="https://uploads.zulipusercontent.net/75aed2df4a1e8657176fcd6159fc40876ace4070/68747470733a2f2f692e76696d656f63646e2e636f6d2f766964656f2f32303936333634392d663032383137343536666334386537633331376566346330376261323539636434623430613336343962643865623530613434313862353965633366356166352d645f363430"></a></div>', [
+    ParagraphNode(links: null, nodes: [
+      LinkNode(url: 'https://vimeo.com/1084537', nodes: [TextNode('Vimeo - Big Buck Bunny')]),
+    ]),
+    EmbedVideoNode(
+      hrefUrl: 'https://vimeo.com/1084537',
+      previewImageSrcUrl: 'https://uploads.zulipusercontent.net/75aed2df4a1e8657176fcd6159fc40876ace4070/68747470733a2f2f692e76696d656f63646e2e636f6d2f766964656f2f32303936333634392d663032383137343536666334386537633331376566346330376261323539636434623430613336343962643865623530613434313862353965633366356166352d645f363430'
+    ),
+  ]);
+
+  static const videoEmbedVimeoClassesFlipped = ContentExample(
+    'video preview for vimeo embed with realm link previews enabled, (hypothetical) class name reorder',
+    'https://vimeo.com/1084537',
+    '<p>'
+      '<a href="https://vimeo.com/1084537">Vimeo - Big Buck Bunny</a>'
+    '</p>\n'
+    '<div class="message_inline_image embed-video">'
+      '<a data-id="&lt;iframe src=&quot;https://player.vimeo.com/video/1084537?app_id=122963&quot; width=&quot;640&quot; height=&quot;360&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture; clipboard-write&quot; title=&quot;Big Buck Bunny&quot;&gt;&lt;/iframe&gt;" href="https://vimeo.com/1084537" title="Big Buck Bunny">'
+        '<img src="https://uploads.zulipusercontent.net/75aed2df4a1e8657176fcd6159fc40876ace4070/68747470733a2f2f692e76696d656f63646e2e636f6d2f766964656f2f32303936333634392d663032383137343536666334386537633331376566346330376261323539636434623430613336343962643865623530613434313862353965633366356166352d645f363430"></a></div>', [
+    ParagraphNode(links: null, nodes: [
+      LinkNode(url: 'https://vimeo.com/1084537', nodes: [TextNode('Vimeo - Big Buck Bunny')]),
+    ]),
+    EmbedVideoNode(
+      hrefUrl: 'https://vimeo.com/1084537',
+      previewImageSrcUrl: 'https://uploads.zulipusercontent.net/75aed2df4a1e8657176fcd6159fc40876ace4070/68747470733a2f2f692e76696d656f63646e2e636f6d2f766964656f2f32303936333634392d663032383137343536666334386537633331376566346330376261323539636434623430613336343962643865623530613434313862353965633366356166352d645f363430'
+    ),
+  ]);
 }
 
 UnimplementedBlockContentNode blockUnimplemented(String html) {
@@ -925,6 +1012,12 @@ void main() {
   testParseExample(ContentExample.imageClusterInImplicitParagraph);
   testParseExample(ContentExample.imageClusterInImplicitParagraphThenContent);
 
+  testParseExample(ContentExample.videoEmbedYoutube);
+  testParseExample(ContentExample.videoEmbedYoutubeClassesFlipped);
+  testParseExample(ContentExample.videoEmbedVimeoPreviewDisabled);
+  testParseExample(ContentExample.videoEmbedVimeo);
+  testParseExample(ContentExample.videoEmbedVimeoClassesFlipped);
+
   testParse('parse nested lists, quotes, headings, code blocks',
     // "1. > ###### two\n   > * three\n\n      four"
     '<ol>\n<li>\n<blockquote>\n<h6>two</h6>\n<ul>\n<li>three</li>\n'