Add video duration to overlay

Fixes #498

src/formatters.nim

@@ -154,6 +154,19 @@ proc getShortTime*(tweet: Tweet): string =
   else:
     result = "now"
 
+proc getDuration*(video: Video): string =
+  let 
+    ms = video.durationMs
+    sec = int(ms / 1000)
+    min = int(sec / 60)
+    hour = int(min / 60)
+  if hour > 1:
+    return &"{hour}:{min mod 60}:{sec mod 60:02}"
+  elif min > 1:
+    return &"{min mod 60}:{sec mod 60:02}"
+  else:
+    return &"0:{sec mod 60:02}"
+
 proc getLink*(tweet: Tweet; focus=true): string =
   if tweet.id == 0: return
   var username = tweet.user.username

src/sass/tweet/video.scss

@@ -53,6 +53,16 @@ video {
     height: 40px;
   }
 
+  .overlay-duration {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    background-color: #0000007a;
+    line-height: 1em;
+    padding: 4px 6px 4px 6px;
+    border-radius: 5px;
+    font-weight: bold;
+  }
 
   form {
     width: 100%;

src/views/tweet.nim

@@ -109,6 +109,7 @@ proc renderVideo*(video: Video; prefs: Prefs; path: string): VNode =
             video(poster=thumb, data-url=source, data-autoload="false", muted=prefs.muteVideos)
             verbatim "<div class=\"video-overlay\" onclick=\"playVideo(this)\">"
             tdiv(class="overlay-circle"): span(class="overlay-triangle")
+            tdiv(class="overlay-duration"): text getDuration(video)
             verbatim "</div>"
       if container.len > 0:
         tdiv(class="card-content"):