Add support for mp4 videos

public/style.css

@@ -230,8 +230,9 @@ nav {
     min-width: 2em;
 }
 
-.gallery-row .attachment:last-child, .gallery-row .attachments:last-child {
+.gallery-row .attachment:last-child, .gallery-row .attachments:last-child, .video-container {
     margin: 0;
+    max-height: 500px;
 }
 
 .attachments .attachment {
@@ -241,12 +242,43 @@ nav {
     overflow: hidden;
 }
 
-.gallery-row .image-attachment {
+.gallery-row .image-attachment, .attachments .image-attachment {
     width: 100%;
 }
 
-.attachments .image-attachment {
+.gallery-video {
+    display: flex;
+    overflow: hidden;
+}
+
+video {
+    height: 100%;
+    width: 100%;
+}
+
+.media-gif {
+    display: table-cell;
+    padding-top: 5px !important;
+    background-color: unset;
+}
+
+.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;
 }
 
 .still-image {
@@ -611,36 +643,6 @@ nav {
     font-weight: 600;
 }
 
-.media-gif {
-    display: table-cell;
-    padding-top: 5px !important;
-    background-color: unset;
-}
-
-video {
-    height: 100%;
-    width: 100%;
-}
-
-.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;
-}
-
 .unavailable-box {
     width: 100%;
     height: 100%;

src/parser.nim

@@ -111,26 +111,28 @@ proc parseConversation*(node: XmlNode): Conversation =
       result.replies.add parseTweets(thread)
 
 proc parseVideo*(node: JsonNode): Video =
-  let track = node{"track"}
-  let contentType = track["contentType"].to(string)
+  let
+    track = node{"track"}
+    cType = track["contentType"].to(string)
+    pType = track["playbackType"].to(string)
 
-  case contentType
+  case cType
   of "media_entity":
     result = Video(
-      contentType: m3u8,
-      thumb: node["posterImage"].to(string),
-      id: track["contentId"].to(string),
-      length: track["durationMs"].to(int),
+      playbackType: if "mp4" in pType: mp4 else: m3u8,
+      contentId: track["contentId"].to(string),
+      durationMs: track["durationMs"].to(int),
       views: track["viewCount"].to(string),
       url: track["playbackUrl"].to(string),
       available: track{"mediaAvailability"}["status"].to(string) == "available"
     )
   of "vmap":
     result = Video(
-      contentType: vmap,
-      thumb: node["posterImage"].to(string),
-      url: track["vmapUrl"].to(string),
-      length: track["durationMs"].to(int),
+      playbackType: vmap,
+      durationMs: track["durationMs"].to(int),
+      url: track["vmapUrl"].to(string)
     )
   else:
-    echo "Can't parse video of type ", contentType
+    echo "Can't parse video of type ", cType
+
+  result.thumb = node["posterImage"].to(string)

src/types.nim

@@ -32,15 +32,15 @@ db("cache.db", "", "", ""):
 
 type
   VideoType* = enum
-    vmap, m3u8
+    vmap, m3u8, mp4
 
   Video* = object
-    contentType*: VideoType
+    contentId*: string
+    playbackType*: VideoType
+    durationMs*: int
     url*: string
     thumb*: string
-    id*: string
     views*: string
-    length*: int
     available*: bool
 
   Gif* = object

src/views/tweet.nimf

@@ -88,12 +88,19 @@
 #
 #proc renderVideo(video: Video): string =
 <div class="attachments">
-  <div class="gallery-row" style="max-height: unset;">
-    <div class="attachment image">
+  <div class="gallery-video">
+    <div class="attachment video-container">
+    #case video.playbackType
+    #of mp4:
+    <video poster=${video.thumb.getSigUrl("pic")} controls>
+      <source src=${video.url.getSigUrl("video")} type="video/mp4">
+    </video>
+    #of m3u8, vmap:
     <video poster=${video.thumb.getSigUrl("pic")} autoplay muted loop></video>
     <div class="video-overlay">
       <p>Video playback not supported</p>
     </div>
+    #end case
     </div>
   </div>
 </div>