hide seconds toggle in cuesheet (#1272)

apps/client/src/features/cuesheet/cuesheetCols.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { CustomFields, isOntimeEvent, OntimeEvent, OntimeRundownEntry } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
 
 import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';
 import RunningTime from '../viewers/common/running-time/RunningTime';
@@ -19,20 +18,28 @@ function makePublic(row: CellContext<OntimeRundownEntry, unknown>) {
 
 function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEntry, unknown>) {
   const showDelayedTimes = useCuesheetSettings((state) => state.showDelayedTimes);
+  const hideSeconds = useCuesheetSettings((state) => state.hideSeconds);
   const cellValue = (getValue() as number | null) ?? 0;
   const delayValue = (original as OntimeEvent)?.delay ?? 0;
 
   return (
     <span className={style.time}>
       <DelayIndicator delayValue={delayValue} />
-      <RunningTime value={cellValue} />
+      <RunningTime value={cellValue} hideSeconds={hideSeconds} />
       {delayValue !== 0 && showDelayedTimes && (
-        <RunningTime className={style.delayedTime} value={cellValue + delayValue} />
+        <RunningTime className={style.delayedTime} value={cellValue + delayValue} hideSeconds={hideSeconds} />
       )}
     </span>
   );
 }
 
+function MakeDuration({ getValue }: CellContext<OntimeRundownEntry, unknown>) {
+  const hideSeconds = useCuesheetSettings((state) => state.hideSeconds);
+  const cellValue = (getValue() as number | null) ?? 0;
+
+  return <RunningTime value={cellValue} hideSeconds={hideSeconds} />;
+}
+
 function MakeCustomField({ row, column, table }: CellContext<OntimeRundownEntry, unknown>) {
   const update = useCallback(
     (newValue: string) => {
@@ -97,7 +104,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
       accessorKey: 'duration',
       id: 'duration',
       header: 'Duration',
-      cell: (row) => millisToString(row.getValue() as number | null),
+      cell: MakeDuration,
       size: 75,
     },
     {