From 7e4cf6ffced37f2ddb2eadd2dfbf1dff2eada845 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 19 Dec 2024 00:06:55 +0100
Subject: [PATCH] refactor: improve time added display

---
 .../playback/playback-timer/PlaybackTimer.tsx   | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx
index e58a3db0f..e168fd588 100644
--- a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx
+++ b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx
@@ -1,9 +1,10 @@
 import { PropsWithChildren } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import { Playback, TimerPhase } from 'ontime-types';
-import { dayInMs, millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';
+import { dayInMs, millisToString } from 'ontime-utils';
 
 import { useTimer } from '../../../../common/hooks/useSocket';
+import { formatDuration } from '../../../../common/utils/time';
 import TimerDisplay from '../timer-display/TimerDisplay';
 
 import style from './PlaybackTimer.module.scss';
@@ -13,22 +14,12 @@ interface PlaybackTimerProps {
 }
 
 function resolveAddedTimeLabel(addedTime: number) {
-  function resolveClosestUnit(ms: number) {
-    if (ms < 6000) {
-      return `${millisToSeconds(ms)} seconds`;
-    } else if (ms < 12000) {
-      return '1 minute';
-    } else {
-      return `${millisToMinutes(ms)} minutes`;
-    }
-  }
-
   if (addedTime > 0) {
-    return `Added ${resolveClosestUnit(addedTime)}`;
+    return `Added ${formatDuration(addedTime, false)}`;
   }
 
   if (addedTime < 0) {
-    return `Removed ${resolveClosestUnit(addedTime)}`;
+    return `Removed ${formatDuration(Math.abs(addedTime), false)}`;
   }
 
   return '';