diff --git a/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx b/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx index 605c2464c..a5990accb 100644 --- a/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx +++ b/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx @@ -29,10 +29,12 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) { showPrevious, togglePreviousVisibility, showDelayBlock, + hideSeconds, showDelayedTimes, toggleIndexColumn, toggleDelayedTimes, toggleDelayVisibility, + toggleSecondsVisibility, } = useCuesheetSettings(); return ( @@ -80,6 +82,10 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) { toggleDelayVisibility()} /> Show delay blocks +
diff --git a/apps/client/src/features/cuesheet/cuesheetCols.tsx b/apps/client/src/features/cuesheet/cuesheetCols.tsx index 54f426095..29d8a3c06 100644 --- a/apps/client/src/features/cuesheet/cuesheetCols.tsx +++ b/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) { function MakeTimer({ getValue, row: { original } }: CellContext) { 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 ( - + {delayValue !== 0 && showDelayedTimes && ( - + )} ); } +function MakeDuration({ getValue }: CellContext) { + const hideSeconds = useCuesheetSettings((state) => state.hideSeconds); + const cellValue = (getValue() as number | null) ?? 0; + + return ; +} + function MakeCustomField({ row, column, table }: CellContext) { const update = useCallback( (newValue: string) => { @@ -97,7 +104,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef millisToString(row.getValue() as number | null), + cell: MakeDuration, size: 75, }, { diff --git a/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx b/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx index cf08701d1..aacf0e256 100644 --- a/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx +++ b/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx @@ -9,6 +9,7 @@ interface CuesheetSettings { showPrevious: boolean; showDelayBlock: boolean; showDelayedTimes: boolean; + hideSeconds: boolean; toggleSettings: (newValue?: boolean) => void; toggleFollow: (newValue?: boolean) => void; @@ -16,6 +17,7 @@ interface CuesheetSettings { toggleIndexColumn: (newValue?: boolean) => void; toggleDelayVisibility: (newValue?: boolean) => void; toggleDelayedTimes: (newValue?: boolean) => void; + toggleSecondsVisibility: (newValue?: boolean) => void; } function toggle(oldValue: boolean, value?: boolean) { @@ -31,6 +33,7 @@ enum CuesheetKeys { PreviousVisibility = 'ontime-cuesheet-show-previous', ColumnIndex = 'ontime-cuesheet-show-index-column', DelayedTimes = 'ontime-cuesheet-show-delayed', + Seconds = 'ontime-cuesheet-hide-sceconds', } export const useCuesheetSettings = create()((set) => ({ @@ -40,6 +43,7 @@ export const useCuesheetSettings = create()((set) => ({ showPrevious: booleanFromLocalStorage(CuesheetKeys.PreviousVisibility, true), showDelayBlock: booleanFromLocalStorage(CuesheetKeys.DelayVisibility, true), showDelayedTimes: booleanFromLocalStorage(CuesheetKeys.DelayedTimes, false), + hideSeconds: booleanFromLocalStorage(CuesheetKeys.Seconds, false), toggleSettings: (newValue?: boolean) => set((state) => ({ showSettings: toggle(state.showSettings, newValue) })), toggleFollow: (newValue?: boolean) => @@ -72,4 +76,10 @@ export const useCuesheetSettings = create()((set) => ({ localStorage.setItem(CuesheetKeys.DelayedTimes, String(showDelayedTimes)); return { showDelayedTimes }; }), + toggleSecondsVisibility: (newValue?: boolean) => + set((state) => { + const hideSeconds = toggle(state.hideSeconds, newValue); + localStorage.setItem(CuesheetKeys.Seconds, String(hideSeconds)); + return { hideSeconds }; + }), }));