content: Implement embed video preview

Partially implements #356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).

Author: rajveermalviya

lib/widgets/content.dart

@@ -107,13 +107,7 @@ class BlockContentList extends StatelessWidget {
             ]),
             style: errorStyle);
         } 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);
+          return MessageEmbedVideo(node: node);
         } else if (node is UnimplementedBlockContentNode) {
           return Text.rich(_errorUnimplemented(node));
         } else {
@@ -404,6 +398,35 @@ class MessageImage extends StatelessWidget {
   }
 }
 
+class MessageEmbedVideo extends StatelessWidget {
+  const MessageEmbedVideo({super.key, required this.node});
+
+  final EmbedVideoNode node;
+
+  @override
+  Widget build(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
+    final previewImageSrcUrl = store.tryResolveUrl(node.previewImageSrcUrl);
+
+    return MessageMediaContainer(
+      onTap: () => _launchUrl(context, node.hrefUrl),
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          if (previewImageSrcUrl != null) // TODO(log)
+            RealmContentNetworkImage(
+              previewImageSrcUrl,
+              filterQuality: FilterQuality.medium),
+          // Show the "play" icon even when previewImageSrcUrl didn't resolve;
+          // the action uses hrefUrl, which might still work.
+          const Icon(
+            Icons.play_arrow_rounded,
+            color: Colors.white,
+            size: 32),
+        ]));
+  }
+}
+
 class MessageMediaContainer extends StatelessWidget {
   const MessageMediaContainer({
     super.key,

test/widgets/content_test.dart

@@ -328,6 +328,54 @@ void main() {
     });
   });
 
+  group("MessageEmbedVideo", () {
+    Future<void> prepareContent(WidgetTester tester, String html) async {
+      addTearDown(testBinding.reset);
+      await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());
+      prepareBoringImageHttpClient();
+
+      await tester.pumpWidget(GlobalStoreWidget(child: MaterialApp(
+        home: PerAccountStoreWidget(accountId: eg.selfAccount.id,
+          child: MessageContent(
+            message: eg.streamMessage(content: html),
+            content: parseContent(html))))));
+      await tester.pump(); // global store
+      await tester.pump(); // per-account store
+      debugNetworkImageHttpClientProvider = null;
+    }
+
+    Future<void> checkEmbedVideo(WidgetTester tester, ContentExample example) async {
+      await prepareContent(tester, example.html);
+
+      final expectedTitle = (((example.expectedNodes[0] as ParagraphNode)
+        .nodes.single as LinkNode).nodes.single as TextNode).text;
+      await tester.ensureVisible(find.text(expectedTitle));
+
+      final expectedVideo = example.expectedNodes[1] as EmbedVideoNode;
+      final expectedResolvedUrl = eg.store()
+        .tryResolveUrl(expectedVideo.previewImageSrcUrl)!;
+      final image = tester.widget<RealmContentNetworkImage>(
+        find.byType(RealmContentNetworkImage));
+      check(image.src).equals(expectedResolvedUrl);
+
+      final expectedLaunchUrl = expectedVideo.hrefUrl;
+      await tester.tap(find.byIcon(Icons.play_arrow_rounded));
+      check(testBinding.takeLaunchUrlCalls())
+        .single.equals((url: Uri.parse(expectedLaunchUrl), mode: LaunchMode.platformDefault));
+    }
+
+    testWidgets('video preview for youtube embed', (tester) async {
+      const example = ContentExample.videoEmbedYoutube;
+      await checkEmbedVideo(tester, example);
+    });
+
+    testWidgets('video preview for vimeo embed', (tester) async {
+      const example = ContentExample.videoEmbedVimeo;
+      await checkEmbedVideo(tester, example);
+    });
+  });
+
+
   group("CodeBlock", () {
     testContentSmoke(ContentExample.codeBlockPlain);
     testContentSmoke(ContentExample.codeBlockHighlightedShort);