content [nfc]: Pull out MessageMediaPreview widget

Author: rajveermalviya

lib/widgets/content.dart

@@ -380,30 +380,17 @@ class MessageImage extends StatelessWidget {
     final resolvedSrc = store.tryResolveUrl(src);
     // TODO if src fails to parse, show an explicit "broken image"
 
-    return GestureDetector(
+    return MessageMediaPreview(
       onTap: resolvedSrc == null ? null : () { // TODO(log)
         Navigator.of(context).push(getLightboxRoute(
           context: context, message: message, src: resolvedSrc));
       },
-      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: ColoredBox(
-            color: const Color.fromRGBO(0, 0, 0, 0.03),
-            child: Padding(
-              padding: const EdgeInsets.all(1),
-              child: SizedBox(
-                height: 100,
-                width: 150,
-                child: resolvedSrc == null ? null : LightboxHero(
-                  message: message,
-                  src: resolvedSrc,
-                  child: RealmContentNetworkImage(
-                    resolvedSrc,
-                    filterQuality: FilterQuality.medium))))))));
+      child: resolvedSrc == null ? null : LightboxHero(
+        message: message,
+        src: resolvedSrc,
+        child: RealmContentNetworkImage(
+          resolvedSrc,
+          filterQuality: FilterQuality.medium)));
   }
 }
 
@@ -435,7 +422,7 @@ class _MessageInlineVideoState extends State<MessageInlineVideo> {
   Future<void> _initialize() async {
     try {
       final store = PerAccountStoreWidget.of(context);
-      // _resolvedSrcUrl = store.tryResolveUrl(widget.node.srcUrl);
+      _resolvedSrcUrl = store.tryResolveUrl(widget.node.srcUrl);
       if (_resolvedSrcUrl == null) {
         return; // TODO(log)
       }
@@ -480,7 +467,7 @@ class _MessageInlineVideoState extends State<MessageInlineVideo> {
   Widget build(BuildContext context) {
     final message = InheritedMessage.of(context);
 
-    return GestureDetector(
+    return MessageMediaPreview(
       onTap: !_didAttemptInitialization
         ? null
         : () { // TODO(log)
@@ -503,43 +490,33 @@ class _MessageInlineVideoState extends State<MessageInlineVideo> {
               ));
             }
           },
-      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)
-                    ])))));
+      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)
+            ]));
   }
 }
 
@@ -555,30 +532,51 @@ class MessageEmbedVideo extends StatelessWidget {
     final store = PerAccountStoreWidget.of(context);
     final previewImageSrcUrl = store.tryResolveUrl(node.previewImageSrcUrl);
 
-    return GestureDetector(
+    return MessageMediaPreview(
       onTap: () => _launchUrl(context, node.hrefUrl),
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          if (previewImageSrcUrl != null)
+            RealmContentNetworkImage(
+              previewImageSrcUrl,
+              filterQuality: FilterQuality.medium),
+          const Icon(
+            Icons.play_arrow_rounded,
+            color: Colors.white,
+            size: 32),
+        ]));
+  }
+}
+
+class MessageMediaPreview extends StatelessWidget {
+  const MessageMediaPreview({
+    super.key,
+    required this.onTap,
+    required this.child,
+  });
+
+  final void Function()? onTap;
+  final Widget? child;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
       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: Stack(
-              alignment: Alignment.center,
-              children: [
-                if (previewImageSrcUrl != null)
-                  RealmContentNetworkImage(
-                    previewImageSrcUrl,
-                    filterQuality: FilterQuality.medium),
-                const Icon(
-                  Icons.play_arrow_rounded,
-                  color: Colors.white,
-                  size: 32),
-              ])))));
+          child: ColoredBox(
+            color: const Color.fromRGBO(0, 0, 0, 0.03),
+            child: Padding(
+              padding: const EdgeInsets.all(1),
+              child: SizedBox(
+                height: 100,
+                width: 150,
+                child: child))))));
   }
 }