refactor: add named RundownUtils timecode-diff helpers, replace 22 call sites

packages/webui/src/client/lib/Components/CounterComponents.tsx

@@ -9,7 +9,7 @@ export const OverUnderClockComponent = (props: OverUnderProps): JSX.Element => {
 	return (
 		<div className="counter-component__over-under">
 			<span className={props.value < 0 ? 'under' : 'over'}>
-				{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
+				{RundownUtils.formatDiffToTimecodeOverUnder(props.value, true)}
 			</span>
 		</div>
 	)
@@ -26,15 +26,15 @@ export const PlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 export const TimeToPlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 	return (
 		<span className="counter-component__time-to-planned-end">
-			{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
+			{RundownUtils.formatDiffToTimecodeOverUnder(props.value, true)}
 		</span>
 	)
 }
 
 export const TimeSincePlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 	return (
 		<span className="counter-component__time-since-planned-end">
-			{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
+			{RundownUtils.formatDiffToTimecodeOverUnder(props.value, true)}
 		</span>
 	)
 }

packages/webui/src/client/lib/rundown.ts

@@ -265,6 +265,36 @@ export namespace RundownUtils {
 		)
 	}
 
+	/** Format a duration (ms) to a timecode string, showing hours only when needed. e.g. "23:45" or "1:23:45" */
+	export function formatDiffToTimecodeHours(milliseconds: number): string {
+		return formatDiffToTimecode(milliseconds, false, true, true, false, true)
+	}
+
+	/**
+	 * Format a live countdown timer (ms). Shows "+" for positive, blank prefix when negative (rounds toward zero),
+	 * using hard-floor rounding so the display doesn't jump ahead of the actual value.
+	 */
+	export function formatDiffToTimecodeCountdown(milliseconds: number): string {
+		return formatDiffToTimecode(milliseconds, true, false, true, false, true, '', false, true)
+	}
+
+	/**
+	 * Format a budget/remaining duration (ms) with a "+" prefix for positive values (time remaining)
+	 * and an en-dash for negative values (over budget).
+	 */
+	export function formatDiffToTimecodeWithSign(milliseconds: number): string {
+		return formatDiffToTimecode(milliseconds, false, false, true, false, true, '+')
+	}
+
+	/**
+	 * Format an over/under diff (ms) with "+" for positive, en-dash for negative, smart-floor rounding,
+	 * and smart-hours. Used for start-time diffs and over/under clocks.
+	 * Pass `floorTime: true` to use hard-floor rounding (display won't jump ahead of the actual value).
+	 */
+	export function formatDiffToTimecodeOverUnder(milliseconds: number, floorTime?: boolean): string {
+		return formatDiffToTimecode(milliseconds, true, false, true, true, true, undefined, floorTime, floorTime)
+	}
+
 	export function isInsideViewport(
 		scrollLeft: number,
 		scrollWidth: number,

packages/webui/src/client/ui/ClockView/TTimerDisplay.tsx

@@ -18,7 +18,7 @@ export function TTimerDisplay({ timer }: Readonly<TTimerDisplayProps>): JSX.Elem
 
 	const diff = calculateTTimerDiff(timer, now)
 	const overUnder = calculateTTimerOverUnder(timer, now)
-	const timeStr = RundownUtils.formatDiffToTimecode(Math.abs(diff), false, true, true, false, true)
+	const timeStr = RundownUtils.formatDiffToTimecodeHours(Math.abs(diff))
 	const timerSign = diff >= 0 ? '' : '-'
 
 	return (

packages/webui/src/client/ui/ClockView/Timediff.tsx

@@ -4,7 +4,7 @@ import { RundownUtils } from '../../lib/rundown.js'
 export function Timediff({ time: rawTime }: { time: number }): JSX.Element {
 	const time = -rawTime
 	const isNegative = Math.floor(time / 1000) > 0
-	const timeString = RundownUtils.formatDiffToTimecode(time, true, false, true, false, true, '', false, true)
+	const timeString = RundownUtils.formatDiffToTimecodeCountdown(time)
 
 	return (
 		<span

packages/webui/src/client/ui/RundownList/RundownListItemView.tsx

@@ -147,14 +147,14 @@ export default React.memo(function RundownListItemView({
 						>
 							<span>
 								{t('({{timecode}})', {
-									timecode: RundownUtils.formatDiffToTimecode(expectedDuration, false, true, true, false, true),
+									timecode: RundownUtils.formatDiffToTimecodeHours(expectedDuration),
 								})}
 								&nbsp;
 								<LoopingIcon />
 							</span>
 						</Tooltip>
 					) : (
-						RundownUtils.formatDiffToTimecode(expectedDuration, false, true, true, false, true)
+						RundownUtils.formatDiffToTimecodeHours(expectedDuration)
 					)
 				) : isOnlyRundownInPlaylist && isLoopDefined(playlist) ? (
 					<Tooltip

packages/webui/src/client/ui/RundownList/RundownPlaylistUi.tsx

@@ -181,14 +181,14 @@ export function RundownPlaylistUi({
 			>
 				<span>
 					{t('({{timecode}})', {
-						timecode: RundownUtils.formatDiffToTimecode(playlistExpectedDuration, false, true, true, false, true),
+						timecode: RundownUtils.formatDiffToTimecodeHours(playlistExpectedDuration),
 					})}
 					&nbsp;
 					<LoopingIcon />
 				</span>
 			</Tooltip>
 		) : (
-			RundownUtils.formatDiffToTimecode(playlistExpectedDuration, false, true, true, false, true)
+			RundownUtils.formatDiffToTimecodeHours(playlistExpectedDuration)
 		))
 
 	return (

packages/webui/src/client/ui/RundownView/RundownDividerHeader.tsx

@@ -86,7 +86,7 @@ export function RundownDividerHeader({ rundown, playlist }: IProps): JSX.Element
 			{expectedDuration ? (
 				<div className="rundown-divider-timeline__expected-duration">
 					<span>{t('Planned Duration')}</span>&nbsp;
-					{RundownUtils.formatDiffToTimecode(expectedDuration, false, true, true, false, true)}
+					{RundownUtils.formatDiffToTimecodeHours(expectedDuration)}
 				</div>
 			) : null}
 			{expectedEnd ? (

packages/webui/src/client/ui/RundownView/RundownHeader/CurrentPartOrSegmentRemaining.tsx

@@ -147,7 +147,7 @@ export const CurrentPartOrSegmentRemaining: React.FC<IPartRemainingProps> = (pro
 			className={ClassNames(props.className, Math.floor(displayTimecode / 1000) > 0 ? props.heavyClassName : undefined)}
 			role="timer"
 		>
-			{RundownUtils.formatDiffToTimecode(displayTimecode || 0, true, false, true, false, true, '', false, true)}
+			{RundownUtils.formatDiffToTimecodeCountdown(displayTimecode || 0)}
 		</span>
 	)
 }
@@ -166,7 +166,7 @@ export const RundownHeaderPartRemaining: React.FC<IPartRemainingProps> = (props)
 			label={props.label}
 			className={ClassNames(props.className, Math.floor(displayTimecode / 1000) > 0 ? props.heavyClassName : undefined)}
 		>
-			{RundownUtils.formatDiffToTimecode(displayTimecode || 0, true, false, true, false, true, '', false, true)}
+			{RundownUtils.formatDiffToTimecodeCountdown(displayTimecode || 0)}
 		</Countdown>
 	)
 }
@@ -187,7 +187,7 @@ export const RundownHeaderSegmentBudget: React.FC<{
 		<span className="rundown-header__timers-segment-remaining">
 			<span className="rundown-header__timers-segment-remaining__label">{label}</span>
 			<Countdown className={ClassNames(Math.floor(displayTimecode / 1000) > 0 ? 'overtime' : undefined)}>
-				{RundownUtils.formatDiffToTimecode(displayTimecode || 0, true, false, true, false, true, '', false, true)}
+				{RundownUtils.formatDiffToTimecodeCountdown(displayTimecode || 0)}
 			</Countdown>
 		</span>
 	)

packages/webui/src/client/ui/RundownView/RundownHeader/RundownHeaderTimers.tsx

@@ -40,7 +40,7 @@ function SingleTimer({ timer }: Readonly<ISingleTimerProps>) {
 
 	const diff = calculateTTimerDiff(timer, now)
 	const overUnder = calculateTTimerOverUnder(timer, now)
-	const timeStr = RundownUtils.formatDiffToTimecode(Math.abs(diff), false, true, true, false, true)
+	const timeStr = RundownUtils.formatDiffToTimecodeHours(Math.abs(diff))
 	const isCountingDown = mode.type === 'countdown' && diff < 0 && isRunning
 
 	return (

packages/webui/src/client/ui/RundownView/RundownTiming/CurrentPartElapsed.tsx

@@ -19,7 +19,7 @@ export function CurrentPartElapsed({ currentPartId, className }: IPartElapsedPro
 
 	return (
 		<span className={className} role="timer">
-			{RundownUtils.formatDiffToTimecode(displayTimecode || 0, true, false, true, false, true, '', false, true)}
+			{RundownUtils.formatDiffToTimecodeCountdown(displayTimecode || 0)}
 		</span>
 	)
 }

packages/webui/src/client/ui/RundownView/RundownTiming/PartDuration.tsx

@@ -48,15 +48,15 @@ export function PartDisplayDuration(props: IPartDurationProps): JSX.Element | nu
 				{props.label}
 				{props.fixed ? (
 					<span className={ClassNames(props.className)} role="timer">
-						{RundownUtils.formatDiffToTimecode(budget, false, false, true, false, true, '+')}
+						{RundownUtils.formatDiffToTimecodeWithSign(budget)}
 					</span>
 				) : props.countUp ? (
 					<span className={ClassNames(props.className)} role="timer">
-						{RundownUtils.formatDiffToTimecode(playedOut, false, false, true, false, true, '+')}
+						{RundownUtils.formatDiffToTimecodeWithSign(playedOut)}
 					</span>
 				) : (
 					<span className={ClassNames(props.className, duration < 0 ? 'negative' : undefined)} role="timer">
-						{RundownUtils.formatDiffToTimecode(duration, false, false, true, false, true, '+')}
+						{RundownUtils.formatDiffToTimecodeWithSign(duration)}
 					</span>
 				)}
 			</>

packages/webui/src/client/ui/RundownView/RundownTiming/PlaylistEndTiming.tsx

@@ -55,7 +55,7 @@ export function PlaylistEndTiming({
 						role="timer"
 					>
 						{!hideDiffLabel && <span className="timing-clock-label right">{t('Diff')}</span>}
-						{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
+						{RundownUtils.formatDiffToTimecodeOverUnder(overUnderClock, true)}
 					</span>
 				) : null
 			) : null}

packages/webui/src/client/ui/RundownView/RundownTiming/RundownName.tsx

@@ -76,17 +76,8 @@ export function RundownName({
 				</h1>
 			)}
 			{!hideDiff && rundownPlaylist.startedPlayback && rundownPlaylist.activationId && !rundownPlaylist.rehearsal
-				? expectedStart &&
-					RundownUtils.formatDiffToTimecode(
-						rundownPlaylist.startedPlayback - expectedStart,
-						true,
-						false,
-						true,
-						true,
-						true
-					)
-				: expectedStart &&
-					RundownUtils.formatDiffToTimecode(getCurrentTime() - expectedStart, true, false, true, true, true)}
+				? expectedStart && RundownUtils.formatDiffToTimecodeOverUnder(rundownPlaylist.startedPlayback - expectedStart)
+				: expectedStart && RundownUtils.formatDiffToTimecodeOverUnder(getCurrentTime() - expectedStart)}
 		</div>
 	)
 }

packages/webui/src/client/ui/SegmentList/LinePart.tsx

@@ -112,17 +112,7 @@ export function LinePart({
 		return (
 			<>
 				{part.instance.part.expectedDuration !== undefined && part.instance.part.expectedDuration > 0 && (
-					<span role="timer">
-						{RundownUtils.formatDiffToTimecode(
-							part.instance.part.expectedDuration,
-							false,
-							false,
-							true,
-							false,
-							true,
-							'+'
-						)}
-					</span>
+					<span role="timer">{RundownUtils.formatDiffToTimecodeWithSign(part.instance.part.expectedDuration)}</span>
 				)}
 				{(part.instance.part.expectedDuration === 0 || part.instance.part.expectedDuration === undefined) && (
 					<span>––:––</span>

packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/Renderers/VTThumbnailRenderer.tsx

@@ -97,9 +97,7 @@ function VTThumbnailRendererWithTiming({
 			>
 				<FreezeFrameIcon />
 			</span>
-			{contentLeft > 0 ? (
-				<span>{RundownUtils.formatDiffToTimecode(contentLeft, false, false, true, false, true, '+')}</span>
-			) : null}
+			{contentLeft > 0 ? <span>{RundownUtils.formatDiffToTimecodeWithSign(contentLeft)}</span> : null}
 		</div>
 	) : null
 }

packages/webui/src/client/ui/Shelf/PieceCountdownPanel.tsx

@@ -83,7 +83,7 @@ export function PieceCountdownPanel({
 					overtime: Math.floor(displayTimecode / 1000) > 0,
 				})}
 			>
-				{RundownUtils.formatDiffToTimecode(displayTimecode || 0, true, false, true, false, true, '', false, true)}
+				{RundownUtils.formatDiffToTimecodeCountdown(displayTimecode || 0)}
 			</span>
 		</div>
 	)