From 8b1e6309512c764e473535e07b1cf52e36ee5dfe Mon Sep 17 00:00:00 2001 From: Arya Kesarwani Date: Fri, 30 Oct 2026 02:22:47 +0530 Subject: [PATCH] fix(web): show 1 min instead of 60 secs on video thumbnails --- .../unit/video-thumbnail-duration.test.ts | 30 +++++++++++++++++++ apps/web/components/VideoThumbnail.tsx | 6 ++-- 2 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 apps/web/__tests__/unit/video-thumbnail-duration.test.ts diff --git a/apps/web/__tests__/unit/video-thumbnail-duration.test.ts b/apps/web/__tests__/unit/video-thumbnail-duration.test.ts new file mode 100644 index 0000000000..af8549c9e0 --- /dev/null +++ b/apps/web/__tests__/unit/video-thumbnail-duration.test.ts @@ -0,0 +1,30 @@ +import { describe, expect, it } from "vitest"; +import { formatDuration } from "@/components/VideoThumbnail"; + +describe("VideoThumbnail formatDuration", () => { + it("rolls fractional seconds just under a minute over to 1 min", () => { + expect(formatDuration(59)).toBe("59 secs"); + expect(formatDuration(59.2)).toBe("1 min"); + expect(formatDuration(59.5)).toBe("1 min"); + expect(formatDuration(59.99)).toBe("1 min"); + expect(formatDuration(60)).toBe("1 min"); + }); + + it("rolls fractional seconds just under an hour over to 1 hr", () => { + expect(formatDuration(3599)).toBe("59 mins"); + expect(formatDuration(3599.5)).toBe("1 hr"); + }); + + it("keeps short durations readable", () => { + expect(formatDuration(0)).toBe("< 1 sec"); + expect(formatDuration(0.2)).toBe("1 sec"); + expect(formatDuration(1)).toBe("1 sec"); + expect(formatDuration(30.4)).toBe("31 secs"); + }); + + it("keeps whole minutes and hours unchanged", () => { + expect(formatDuration(90)).toBe("1 min"); + expect(formatDuration(150)).toBe("2 mins"); + expect(formatDuration(7200)).toBe("2 hrs"); + }); +}); diff --git a/apps/web/components/VideoThumbnail.tsx b/apps/web/components/VideoThumbnail.tsx index 88b96d0c01..396caf10d0 100644 --- a/apps/web/components/VideoThumbnail.tsx +++ b/apps/web/components/VideoThumbnail.tsx @@ -61,12 +61,12 @@ interface VideoThumbnailProps { showPreview?: boolean; } -const formatDuration = (durationSecs: number) => { - const duration = durationParts(durationSecs); +export const formatDuration = (durationSecs: number) => { + const duration = durationParts(Math.ceil(durationSecs)); const totalHours = Math.floor(duration.asHours); const totalMinutes = Math.floor(duration.asMinutes); - const remainingSeconds = Math.ceil(duration.asSeconds % 60); // Use ceil to avoid 0 secs + const remainingSeconds = duration.asSeconds % 60; if (totalHours > 0) { return `${totalHours} hr${totalHours > 1 ? "s" : ""}`;