chore: use global component on the presenter and prompter screens

Author: justandras

packages/webui/src/client/lib/Components/OverUnderChip.scss

@@ -1,6 +1,7 @@
 @import '../../styles/colorScheme';
 
 .over-under-chip {
+	font-family: Roboto Flex;
 	display: inline-block;
 	border-radius: 999px;
 	white-space: nowrap;
@@ -12,7 +13,6 @@
 	margin-left: var(--overUnderChipMarginLeft, 0em);
 	margin-top: var(--overUnderChipMarginTop, 0em);
 	line-height: var(--overUnderChipLineHeight, 1);
-	font-size: 1em;
 
 	font-variation-settings:
 		'wdth' var(--overUnderChipWdth, 25),
@@ -39,4 +39,3 @@
 		background-color: #ff0; // Should probably be changed to $general-fast-color;
 	}
 }
-

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

@@ -2,27 +2,66 @@ import React, { type CSSProperties } from 'react'
 import classNames from 'classnames'
 import { RundownUtils } from '../rundown.js'
 import './OverUnderChip.scss'
+import { useTiming } from '../../ui/RundownView/RundownTiming/withTiming.js'
+import { getPlaylistTimingDiff } from '../rundownTiming.js'
+import { DBRundownPlaylist } from '@sofie-automation/corelib/src/dataModel/RundownPlaylist/RundownPlaylist.js'
 
-export type OverUnderChipFormat = 'playlistDiff' | 'timerPostfix'
+export type OverUnderChipFormat = 'playlistDiff' | 'timerPostfix' | 'screenOverlay'
 
-export interface IOverUnderChipProps {
-	valueMs: number
-	format?: OverUnderChipFormat
+type OverUnderChipBaseProps = {
 	className?: string
 	style?: CSSProperties
+	format?: OverUnderChipFormat
 }
 
-export function OverUnderChip({
-	valueMs,
-	format = 'playlistDiff',
-	className,
-	style,
-}: Readonly<IOverUnderChipProps>): JSX.Element {
+type OverUnderChipValueProps =
+	| {
+			valueMs: number | undefined
+			rundownPlaylist?: never
+	  }
+	| {
+			valueMs?: never
+			rundownPlaylist: DBRundownPlaylist
+	  }
+
+type OverUnderChipInnerProps = OverUnderChipBaseProps & { valueMs: number | undefined }
+
+/**
+ * Over/under "chip" display.
+ * Can either take a direct `valueMs` or a `rundownPlaylist` (requires RundownTiming context).
+ */
+export function OverUnderChip(props: Readonly<OverUnderChipBaseProps & OverUnderChipValueProps>): JSX.Element | null {
+	if ('valueMs' in props) {
+		return <OverUnderChipInner {...props} valueMs={props.valueMs} />
+	} else {
+		return <OverUnderChipFromPlaylist {...props} rundownPlaylist={props.rundownPlaylist} />
+	}
+}
+
+function OverUnderChipFromPlaylist(
+	props: Readonly<OverUnderChipBaseProps & { rundownPlaylist: DBRundownPlaylist }>
+): JSX.Element | null {
+	const timingDurations = useTiming()
+	const valueMs = getPlaylistTimingDiff(props.rundownPlaylist, timingDurations) ?? 0
+	return <OverUnderChipInner {...props} valueMs={valueMs} />
+}
+
+function OverUnderChipInner({ valueMs, format = 'playlistDiff', className, style }: Readonly<OverUnderChipInnerProps>) {
+	if (valueMs === undefined) return null
+
 	const isUnder = valueMs <= 0
-	const timeStr =
-		format === 'timerPostfix'
-			? RundownUtils.formatDiffToTimecode(Math.abs(valueMs), false, false, true, false, true)
-			: RundownUtils.formatDiffToTimecode(Math.abs(valueMs), false, false, true, true, true)
+	const timeStr = (() => {
+		switch (format) {
+			case 'timerPostfix':
+				return RundownUtils.formatDiffToTimecode(Math.abs(valueMs), false, false, true, false, true)
+			case 'screenOverlay':
+				// Match legacy `OverUnderTimer` formatting used by prompter/presenter/director overlays
+				return RundownUtils.formatDiffToTimecode(Math.abs(valueMs), false, true, true, false, true)
+			case 'playlistDiff':
+			default:
+				return RundownUtils.formatDiffToTimecode(Math.abs(valueMs), false, false, true, true, true)
+		}
+	})()
 
 	return (
 		<span

packages/webui/src/client/styles/countdown/director.scss

@@ -21,7 +21,7 @@ $hold-status-color: $liveline-timecode-color;
 	// Ensure it layers above the fixed top bar.
 	.screen-timing-clock {
 		z-index: 2000;
-		font-size: 9.8vmin;
+		font-size: 9vmin;
 		--overUnderChipPaddingY: 0em;
 		--overUnderChipPaddingX: 0.2em;
 	}

packages/webui/src/client/styles/countdown/presenter.scss

@@ -30,15 +30,11 @@ $hold-status-color: $liveline-timecode-color;
 	.screen-timing-clock {
 		position: fixed;
 		left: auto;
-		font-size: 9.8vmin;
+		font-size: 9vmin;
 
 		z-index: 2000;
 
-		padding: 0 0.3em;
-		border-radius: 1em;
 		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-
-		margin: 0;
 	}
 
 	.presenter-screen__part {

packages/webui/src/client/styles/prompter.scss

@@ -288,37 +288,11 @@ body.prompter-scrollbar {
 }
 
 .screen-timing-clock {
-	font-family: Roboto Flex;
 	position: fixed;
 	display: block;
 	top: 0;
 	right: 0;
-	left: auto;
-	font-size: 9.8vmin;
-	padding: 0.05em 0.3em;
-	border-radius: 1em;
-	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-	line-height: 1;
-	margin: 0;
-
-	&.heavy-light {
-		font-weight: 600;
-
-		&.light {
-			// color: $general-late-color;
-			background-color: #ffe900;
-			color: #000;
-		}
-
-		&.heavy {
-			color: black;
-			text-shadow:
-				0.02em 1px 0px #000,
-				0.02em -1px 0px #000,
-				-0.02em -1px 0px #000,
-				-0.02em 1px 0px #000;
-		}
-	}
+	font-size: 9vmin;
 }
 
 .prompter-rundown-status-bar {

packages/webui/src/client/ui/ClockView/DirectorScreen/DirectorScreenTop.tsx

@@ -10,7 +10,6 @@ import { getCurrentTime } from '../../../lib/systemTime.js'
 import { useTranslation } from 'react-i18next'
 import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
 import { PartInstance } from '@sofie-automation/corelib/src/dataModel/PartInstance'
-import { OverUnderTimer } from '../../Prompter/OverUnderTimer.js'
 import { OverUnderChip } from '../../../lib/Components/OverUnderChip.js'
 
 export interface DirectorScreenTopProps {

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

@@ -55,7 +55,7 @@ import { RundownStatusBar } from './RundownStatusBar.js'
 import { UIShowStyleBase } from '@sofie-automation/corelib/src/dataModel/ShowStyleBase.js'
 import { UIStudio } from '@sofie-automation/corelib/src/dataModel/Studio.js'
 import { PartInstance } from '@sofie-automation/corelib/src/dataModel/PartInstance.js'
-import { OverUnderTimer } from '../Prompter/OverUnderTimer.js'
+import { OverUnderChip } from '../../lib/Components/OverUnderChip.js'
 
 // TODO: We have another definition of this in the Director screen, and there is also another SegmentUI type. We should look into clearing this up.
 interface SegmentUi extends DBSegment {
@@ -509,18 +509,8 @@ function PresenterScreenContentDefaultLayout({
 	nextPartInstance,
 	nextSegment,
 	rundownIds,
-	margin,
-	fontSize,
 }: Readonly<PresenterScreenProps & PresenterScreenTrackedProps & { timingDurations: RundownTimingContext }>) {
 	if (playlist && playlistId && segments) {
-		const overUnderStyle: CSSProperties = {
-			marginTop: margin ? `${margin}vh` : undefined,
-			marginBottom: margin ? `${margin}vh` : undefined,
-			marginRight: margin ? `${margin}vw` : undefined,
-			marginLeft: margin ? `${margin}vw` : undefined,
-			fontSize: (fontSize ?? 0) > 12 ? `12vmin` : undefined,
-		}
-
 		const currentPartOrSegmentCountdown =
 			timingDurations.remainingBudgetOnCurrentSegment ?? timingDurations.remainingTimeOnCurrentPart ?? 0
 
@@ -529,11 +519,7 @@ function PresenterScreenContentDefaultLayout({
 		return (
 			<div className="presenter-screen">
 				<div className="presenter-screen__part presenter-screen__part--current-part">
-					<OverUnderTimer
-						rundownPlaylist={playlist}
-						className="screen-timing-clock heavy-light heavy"
-						style={overUnderStyle}
-					/>
+					<OverUnderChip className="screen-timing-clock" rundownPlaylist={playlist} />
 					<div
 						className={ClassNames('presenter-screen__segment-name', {
 							live: currentSegment !== undefined,

packages/webui/src/client/ui/Prompter/PrompterView.tsx

@@ -38,6 +38,7 @@ import { MeteorCall } from '../../lib/meteorApi.js'
 import { MdDisplay } from './Formatted/MdDisplay.js'
 import { UIStudio } from '@sofie-automation/corelib/src/dataModel/Studio.js'
 import { OverUnderTimer } from './OverUnderTimer.js'
+import { OverUnderChip } from '../../lib/Components/OverUnderChip.js'
 
 const DEFAULT_UPDATE_THROTTLE = 250 //ms
 const PIECE_MISSING_UPDATE_THROTTLE = 2000 //ms
@@ -613,11 +614,7 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 								allowTestingAdlibsToPersist={this.props.studio?.settings.allowTestingAdlibsToPersist ?? false}
 							>
 								{this.configOptions.showOverUnder && (
-									<OverUnderTimer
-										rundownPlaylist={this.props.rundownPlaylist}
-										className="screen-timing-clock heavy-light heavy"
-										style={overUnderStyle}
-									/>
+									<OverUnderChip className="screen-timing-clock" rundownPlaylist={this.props.rundownPlaylist} />
 								)}
 							</Prompter>
 							<RundownStatusBar