From 96ec75fc7f358471dd0390b4f9a0d9f547e3dacd Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Sat, 29 Nov 2025 03:38:40 +0100
Subject: [PATCH] Add video duration to overlay

Fixes #498
---
 src/formatters.nim        | 13 +++++++++++++
 src/sass/tweet/video.scss | 10 ++++++++++
 src/views/tweet.nim       |  1 +
 3 files changed, 24 insertions(+)

diff --git a/src/formatters.nim b/src/formatters.nim
index e491928..3ad1da6 100644
--- a/src/formatters.nim
+++ b/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
diff --git a/src/sass/tweet/video.scss b/src/sass/tweet/video.scss
index 1e00d39..790b3da 100644
--- a/src/sass/tweet/video.scss
+++ b/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%;
diff --git a/src/views/tweet.nim b/src/views/tweet.nim
index 552ab89..58d03a9 100644
--- a/src/views/tweet.nim
+++ b/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"):