feat: Add formatDuration dayjs plugin

frontend/src/dayjs.spec.ts

@@ -0,0 +1,12 @@
+import { faker } from "@faker-js/faker";
+import dayjs from "@/dayjs";
+
+describe("dayjs formatDuration plugin", () => {
+	test("value < 1 hour displays minutes and seconds", () => {
+		dayjs.duration(faker.number.int({ max: 359 }), "s");
+	});
+
+	test("value >= 1 hour displays hours, minutes and seconds", () => {
+		dayjs.duration(faker.number.int({ min: 360 }), "s");
+	});
+});

frontend/src/dayjs.ts

@@ -1,9 +1,28 @@
-import dayjs, { Dayjs } from "dayjs";
+import dayjs, { Dayjs, PluginFunc } from "dayjs";
 import duration, { Duration } from "dayjs/plugin/duration";
 import relativeTime from "dayjs/plugin/relativeTime";
 import utc from "dayjs/plugin/utc";
 
+declare module "dayjs/plugin/duration" {
+	interface Duration {
+		formatDuration(): string;
+	}
+}
+
+const formatDuration: PluginFunc = (option, dayjsClass, dayjsFactory) => {
+	const durationPrototype = Object.getPrototypeOf(dayjsFactory.duration(0));
+
+	durationPrototype.formatDuration = function formatDuration() {
+		if (this.hours() === 0) {
+			return this.format("mm:ss");
+		}
+
+		return this.format("HH:mm:ss");
+	};
+};
+
 dayjs.extend(duration);
+dayjs.extend(formatDuration);
 dayjs.extend(relativeTime);
 dayjs.extend(utc);