Preliminary video support

public/style.css

@@ -559,3 +559,22 @@ nav {
     font-size: 21px;
     font-weight: bold;
 }
+
+.video-overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: #000000bd;
+}
+
+.video-overlay p {
+    position: relative;
+    z-index: 0;
+    color: #dcdcdc;
+    text-align: center;
+    top: calc(50% - 20px);
+    font-size: 20px;
+}

src/parser.nim

@@ -9,7 +9,7 @@ proc getAttr(node: XmlNode; attr: string; default=""): string =
 
 proc selectAttr(node: XmlNode; selector: string; attr: string; default=""): string =
   let res = node.querySelector(selector)
-  return res.getAttr(attr, default)
+  if res == nil: "" else: res.getAttr(attr, default)
 
 proc selectText(node: XmlNode; selector: string): string =
   let res = node.querySelector(selector)
@@ -63,9 +63,8 @@ proc parseTweet*(tweet: XmlNode): Tweet =
     let
       text = action.innerText.split()
       num = text[0]
-      act = text[1]
 
-    case act
+    case text[1]
     of "replies": result.replies = num
     of "likes": result.likes = num
     of "retweets": result.retweets = num
@@ -74,9 +73,13 @@ proc parseTweet*(tweet: XmlNode): Tweet =
   for photo in tweet.querySelectorAll(".AdaptiveMedia-photoContainer"):
     result.photos.add photo.attrs["data-image-url"]
 
-  let gif = tweet.selectAttr(".PlayableMedia-player", "style")
+  let player = tweet.selectAttr(".PlayableMedia-player", "style")
-  if gif != "":
+  if player.len > 0:
-    result.gif = gif.replace(re".+thumb/([^\.']+)\.jpg.+", "$1")
+    let thumb = player.replace(re".+:url\('([^']+)'\)", "$1")
+    if "tweet_video" in thumb:
+      result.gif = thumb.replace(re".+thumb/([^\.']+)\.jpg.+", "$1")
+    else:
+      result.videoThumb = thumb
 
 proc parseTweets*(node: XmlNode): Tweets =
   if node.isNil: return

src/types.nim

@@ -27,6 +27,8 @@ type
     pinned*: bool
     photos*: seq[string]
     gif*: string
+    video*: string
+    videoThumb*: string
 
   Tweets* = seq[Tweet]
 

src/views/tweet.nim

@@ -55,6 +55,19 @@
 </div>
 #end proc
 #
+#proc renderVideo(tweet: Tweet): string =
+<div class="attachments media-body">
+  <div class="gallery-row" style="max-height: unset;">
+    <div class="attachment image">
+    <video poster=${tweet.videoThumb} style="width: 100%; height: 100%;" autoplay muted loop></video>
+    <div class="video-overlay">
+      <p>Video playback not supported</p>
+    </div>
+    </div>
+  </div>
+</div>
+#end proc
+#
 #proc renderGif(tweet: Tweet): string =
 #let thumbUrl = getGifThumb(tweet).getSigUrl("pic")
 #let videoUrl = getGifSrc(tweet).getSigUrl("video")
@@ -89,6 +102,8 @@
       </div>
       #if tweet.photos.len > 0:
         ${renderMediaGroup(tweet)}
+      #elif tweet.videoThumb.len > 0:
+        ${renderVideo(tweet)}
       #elif tweet.gif.len > 0:
         ${renderGif(tweet)}
       #end if