fix: added hours to playing time in seekbar

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)}`;
 }

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>