Can't use pretty-ms so use humanizeDuration instead

package.json

@@ -49,16 +49,17 @@
  "@tanstack/react-query": "^5.14.0",
  "@tanstack/react-query-persist-client": "^5.14.0",
  "@tauri-apps/api": "^1.5.2",
+ "@types/humanize-duration": "^3.27.4",
  "@types/lodash": "^4.14.202",
  "async-wait-until": "^2.0.12",
  "date-fns": "^2.30.0",
  "dompurify": "^3.0.6",
  "gray-matter": "^4.0.3",
+ "humanize-duration": "^3.32.1",
  "is-online": "^11.0.0",
  "js-video-url-parser": "^0.5.1",
  "lodash": "^4.17.21",
  "marked": "^11.1.0",
- "pretty-ms": "^9.1.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-error-boundary": "^4.0.12",

src/utils/timeFormat.ts

@@ -1,11 +1,27 @@
 import { intlFormatDistance } from "date-fns";
-import prettyMilliseconds from "pretty-ms";
+import humanizeDuration from "humanize-duration";
 
 export const millisToDisplayLength = (length: number, long = false) => {
- return prettyMilliseconds(length, {
- colonNotation: !long,
- secondsDecimalDigits: 0,
- });
+ if (long) {
+ return humanizeDuration(length, {
+ round: true
+ });
+ } else {
+ const totalSeconds = Math.round(length / 1000);
+ const totalMinutes = Math.floor(totalSeconds / 60);
+
+ const seconds = totalSeconds % 60;
+ const minutes = totalMinutes % 60;
+ const hours = Math.floor(totalMinutes / 60);
+
+ const secondsStr = seconds.toString().padStart(2, "0");
+
+ if (hours === 0) {
+ return `${minutes}:${secondsStr}`;
+ } else {
+ return `${hours}:${minutes}:${secondsStr}`;
+ }
+ }
 };
 
 export const isConsideredNewRelease = (releaseDate: string, newestInSetlist: string) => {