content: Parse data-animated on image-preview HTML

Author: chrisbobbe

lib/model/content.dart

@@ -551,7 +551,7 @@ class ImagePreviewNode extends BlockContentNode {
   /// authentication credentials to the request.
   final String srcUrl;
 
-  /// The thumbnail URL of the image.
+  /// The thumbnail URL of the image and whether it has an animated version.
   ///
   /// [ImageThumbnailLocator.urlPath] is a relative URL string.
   ///
@@ -596,11 +596,13 @@ class ImagePreviewNode extends BlockContentNode {
   }
 }
 
-/// Data to locate an image thumbnail.
+/// Data to locate an image thumbnail,
+/// and whether the image has an animated version.
 @immutable
 class ImageThumbnailLocator extends DiagnosticableTree {
   ImageThumbnailLocator({
     required this.urlPath,
+    required this.animated,
   }) : assert(urlPath.startsWith(urlPathPrefix));
 
   /// The relative URL string for the default format,
@@ -609,21 +611,27 @@ class ImageThumbnailLocator extends DiagnosticableTree {
   /// It may not work without adding authentication credentials to the request.
   final String urlPath;
 
+  final bool animated;
+
   static const urlPathPrefix = '/user_uploads/thumbnail/';
 
   @override
   bool operator ==(Object other) {
     if (other is! ImageThumbnailLocator) return false;
-    return urlPath == other.urlPath;
+    return urlPath == other.urlPath
+      && animated == other.animated;
   }
 
   @override
-  int get hashCode => Object.hash('ImageThumbnailLocator', urlPath);
+  int get hashCode => Object.hash('ImageThumbnailLocator', urlPath, animated);
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties.add(StringProperty('urlPath', urlPath));
+    properties.add(FlagProperty('animated', value: animated,
+      ifTrue: 'animated',
+      ifFalse: 'not animated'));
   }
 }
 
@@ -1446,7 +1454,9 @@ class _ZulipContentParser {
       // For why we recognize this as the thumbnail form, see discussion:
       //   https://chat.zulip.org/#narrow/channel/412-api-documentation/topic/documenting.20inline.20images/near/2279872
       srcUrl = href;
-      thumbnail = ImageThumbnailLocator(urlPath: src);
+      thumbnail = ImageThumbnailLocator(
+        urlPath: src,
+        animated: imgElement.attributes['data-animated'] == 'true');
     } else {
       // Known cases this handles:
       // - `src` starts with CAMO_URI, a server variable (e.g. on Zulip Cloud

test/model/content_test.dart

@@ -735,14 +735,31 @@ class ContentExample {
         '<img data-original-dimensions="6000x4000" src="/user_uploads/thumbnail/2/ce/nvoNL2LaZOciwGZ-FYagddtK/image.jpg/840x560.webp"></a></div>', [
     ImagePreviewNodeList([
       ImagePreviewNode(srcUrl: '/user_uploads/2/ce/nvoNL2LaZOciwGZ-FYagddtK/image.jpg',
-        thumbnail: ImageThumbnailLocator(
+        thumbnail: ImageThumbnailLocator(animated: false,
           urlPath: '/user_uploads/thumbnail/2/ce/nvoNL2LaZOciwGZ-FYagddtK/image.jpg/840x560.webp'),
         loading: false,
         originalWidth: 6000,
         originalHeight: 4000),
     ]),
   ]);
 
+  static final imagePreviewSingleAnimated = ContentExample(
+    'single image preview, with animated version',
+    // https://chat.zulip.org/#narrow/channel/7-test-here/topic/Thumbnails/near/2298790
+    "[2c8d985d.gif](/user_uploads/2/9f/tZ9c5ZmsI_cSDZ6ZdJmW8pt4/2c8d985d.gif)",
+    '<div class="message_inline_image">'
+      '<a href="/user_uploads/2/9f/tZ9c5ZmsI_cSDZ6ZdJmW8pt4/2c8d985d.gif" title="2c8d985d.gif">'
+        '<img data-animated="true" data-original-content-type="image/gif" data-original-dimensions="64x64" src="/user_uploads/thumbnail/2/9f/tZ9c5ZmsI_cSDZ6ZdJmW8pt4/2c8d985d.gif/840x560-anim.webp"></a></div>', [
+    ImagePreviewNodeList([
+      ImagePreviewNode(srcUrl: '/user_uploads/2/9f/tZ9c5ZmsI_cSDZ6ZdJmW8pt4/2c8d985d.gif',
+        thumbnail: ImageThumbnailLocator(animated: true,
+          urlPath: '/user_uploads/thumbnail/2/9f/tZ9c5ZmsI_cSDZ6ZdJmW8pt4/2c8d985d.gif/840x560-anim.webp'),
+        loading: false,
+        originalWidth: 64,
+        originalHeight: 64),
+    ]),
+  ]);
+
   static final imagePreviewSingleNoDimensions = ContentExample(
     'single image preview no dimensions',
     // https://chat.zulip.org/#narrow/stream/7-test-here/topic/Thumbnails/near/1893590
@@ -752,7 +769,7 @@ class ContentExample {
         '<img src="/user_uploads/thumbnail/2/c3/wb9FXk8Ej6qIc28aWKcqUogD/image.jpg/840x560.webp"/></a></div>', [
     ImagePreviewNodeList([
       ImagePreviewNode(srcUrl: '/user_uploads/2/c3/wb9FXk8Ej6qIc28aWKcqUogD/image.jpg',
-        thumbnail: ImageThumbnailLocator(
+        thumbnail: ImageThumbnailLocator(animated: false,
           urlPath: '/user_uploads/thumbnail/2/c3/wb9FXk8Ej6qIc28aWKcqUogD/image.jpg/840x560.webp'),
         loading: false,
         originalWidth: null,
@@ -865,13 +882,13 @@ class ContentExample {
     ]),
     ImagePreviewNodeList([
       ImagePreviewNode(srcUrl: '/user_uploads/2/9b/WkDt2Qsy79iwf3sM9EMp9fYL/image.jpg',
-        thumbnail: ImageThumbnailLocator(
+        thumbnail: ImageThumbnailLocator(animated: false,
           urlPath: '/user_uploads/thumbnail/2/9b/WkDt2Qsy79iwf3sM9EMp9fYL/image.jpg/840x560.webp'),
         loading: false,
         originalWidth: null,
         originalHeight: null),
       ImagePreviewNode(srcUrl: '/user_uploads/2/70/pVeI52TwFUEoFE2qT_u9AMCO/image2.jpg',
-        thumbnail: ImageThumbnailLocator(
+        thumbnail: ImageThumbnailLocator(animated: false,
           urlPath: '/user_uploads/thumbnail/2/70/pVeI52TwFUEoFE2qT_u9AMCO/image2.jpg/840x560.webp'),
         loading: false,
         originalWidth: null,
@@ -1425,7 +1442,7 @@ class ContentExample {
     ]),
     ImagePreviewNodeList([
       ImagePreviewNode(srcUrl: '/user_uploads/2/6f/KS3vNT9c2tbMfMBkSbQF_Jlj/image2.jpg',
-        thumbnail: ImageThumbnailLocator(
+        thumbnail: ImageThumbnailLocator(animated: false,
           urlPath: '/user_uploads/thumbnail/2/6f/KS3vNT9c2tbMfMBkSbQF_Jlj/image2.jpg/840x560.webp'),
         loading: false,
         originalWidth: 2760,
@@ -1848,6 +1865,7 @@ void main() async {
   testParseExample(ContentExample.mathBlockBetweenImagePreviews);
 
   testParseExample(ContentExample.imagePreviewSingle);
+  testParseExample(ContentExample.imagePreviewSingleAnimated);
   testParseExample(ContentExample.imagePreviewSingleNoDimensions);
   testParseExample(ContentExample.imagePreviewSingleNoThumbnail);
   testParseExample(ContentExample.imagePreviewSingleLoadingPlaceholder);