From be0560865b1a0482c9877a33789d486cf51167f0 Mon Sep 17 00:00:00 2001
From: Christian Sarnataro <c.sarnataro@gmail.com>
Date: Thu, 3 Sep 2026 16:09:56 +0200
Subject: [PATCH] fix: added hours to playing time in seekbar

At the moment if a song lasts more than 1 hour, the format of the playing time is 'mm:ss', e.g. '160:00'.
Instead it should be 'hh:mm:ss', e.g. '02:40:00'
---
 src/lib/utils.ts                     | 25 ++++++++++++++++++-------
 src/ui/components/player/SeekBar.tsx |  2 +-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6e76d76..e2bf261 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -5,14 +5,25 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
+function pad(num: number) {
+  return String(num).padStart(2, "0");
+} 
+
 /**
- * `m:ss` for a whole-second duration. Callers round `seconds` themselves (floor for elapsed
+ * Formats a whole-second duration as `hh:mm:ss` or just `mm:ss`,
+ * depending on the real duration (if greater or less than 1 hour).
+ * Callers round `seconds` themselves (floor for elapsed
  * position, ceil for a countdown) — this only formats what it's given.
  */
-export function formatMinutesSeconds(seconds: number): string {
-  if (!Number.isFinite(seconds)) return "0:00";
-  const whole = Math.max(0, Math.floor(seconds));
-  const mins = Math.floor(whole / 60);
-  const secs = whole % 60;
-  return `${mins}:${secs.toString().padStart(2, "0")}`;
+export function formatMinutesSeconds(totalSeconds: number): string {
+  if (!Number.isFinite(totalSeconds)) return "0:00";
+
+  const hours = Math.floor(totalSeconds / 3600);
+  const mins = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = Math.floor(totalSeconds % 60);
+
+  if (hours > 0) {
+    return `${pad(hours)}:${pad(mins)}:${pad(seconds)}`;
+  }
+  return `${pad(mins)}:${pad(seconds)}`;
 }
diff --git a/src/ui/components/player/SeekBar.tsx b/src/ui/components/player/SeekBar.tsx
index eadaf6a..b76464d 100644
--- a/src/ui/components/player/SeekBar.tsx
+++ b/src/ui/components/player/SeekBar.tsx
@@ -266,7 +266,7 @@ export function SeekBar() {
         } as React.CSSProperties}
         aria-label="Seek"
       />
-      <span className="w-10 shrink-0 text-xs tabular-nums text-muted-foreground">
+      <span className="w-10 shrink-0 text-xs tabular-nums text-muted-foreground mr-4">
         {formatTime(duration)}
       </span>
     </div>