notes: support "gifs"

src/parser.nim

@@ -468,6 +468,15 @@ proc parseGraphArticle*(js: JsonNode): Article =
 
     result.entities.add entity
 
-  for media in article{"media"}:
-    result.media[media{"media_id"}.getStr] =
-      media{"media_info", "original_img_url"}.getStr
+  for m in article{"media"}:
+    let mediaInfo = m{"media_info"}
+    var media = ArticleMedia(
+      mediaType: parseEnum[ArticleMediaType](mediaInfo{"__typename"}.getStr)
+    )
+    case media.mediaType
+    of ArticleMediaType.image:
+      media.url = mediaInfo{"original_img_url"}.getStr
+    of ArticleMediaType.gif:
+      media.url = mediaInfo{"variants"}[0]{"url"}.getStr
+    else: discard
+    result.media[m{"media_id"}.getStr] = media

src/sass/note.scss

@@ -14,7 +14,7 @@
     }
 
     h1 {
-        display:inherit;
+        display: inherit;
         font-size: 2.5rem;
         margin: 30px 0;
     }
@@ -33,7 +33,9 @@
         .image {
             text-align: center;
             width: 100%;
-            img {
+
+            img,
+            video {
                 max-width: 100%;
                 border-radius: 20px;
                 margin: 0 auto;

src/types.nim

@@ -122,7 +122,7 @@ type
     time*: DateTime
     paragraphs*: seq[ArticleParagraph]
     entities*: seq[ArticleEntity]
-    media*: Table[string, string]
+    media*: Table[string, ArticleMedia]
 
   ArticleParagraph* = object
     text*: string
@@ -170,6 +170,15 @@ type
     twemoji = "TWEMOJI"
     unknown
 
+  ArticleMedia* = object
+    mediaType*: ArticleMediaType
+    url*: string
+
+  ArticleMediaType* {.pure.} = enum
+    image = "ApiImage"
+    gif = "ApiGif"
+    unknown
+
   Poll* = object
     options*: seq[string]
     values*: seq[int]

src/views/notes.nim

@@ -64,12 +64,19 @@ proc renderNoteParagraph(articleParagraph: ArticleParagraph; article: Article; t
       result.add link
     of ArticleEntityType.media:
       for id in entity.mediaIds:
-        let url = article.media.getOrDefault(id)
-        if url == "":
+        let media = article.media.getOrDefault(id)
+        if media.url == "":
           discard
-        let image = buildHtml(span(class="image")):
-          img(src=url.getSmallPic, alt="")
-        result.add image
+        case media.mediaType:
+        of ArticleMediaType.image:
+          let image = buildHtml(span(class="image")):
+            img(src=media.url.getSmallPic, alt="")
+          result.add image
+        of ArticleMediaType.gif:
+          let video = buildHtml(span(class="image")):
+            video(src=media.url.getVidUrl, controls="", autoplay="")
+          result.add video
+        else: discard
     of ArticleEntityType.twemoji:
       let url = entity.twemoji.getSmallPic
       let emoji = buildHtml(img(class="twemoji", src=url, alt=""))