feat: t-timers prompter view

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

@@ -10,7 +10,7 @@ import {
 	PeripheralDevicePubSubCollections,
 	PeripheralDevicePubSubCollectionsNames,
 } from '@sofie-automation/shared-lib/dist/pubsub/peripheralDevice'
-import {
+import type {
 	MongoCollection,
 	MongoReadOnlyCollection,
 	MongoCursor,
@@ -22,7 +22,20 @@ import {
 import { CustomCollectionName as CustomCorelibCollectionName } from '@sofie-automation/corelib/dist/dataModel/Collections'
 import { CorelibPubSubCustomCollections } from '@sofie-automation/corelib/dist/pubsub'
 
-export * from '@sofie-automation/meteor-lib/dist/collections/lib'
+export type {
+	FieldNames,
+	FindOneOptions,
+	FindOptions,
+	IndexSpecifier,
+	MongoCollection,
+	MongoCursor,
+	MongoLiveQueryHandle,
+	MongoReadOnlyCollection,
+	ObserveCallbacks,
+	ObserveChangesCallbacks,
+	UpdateOptions,
+	UpsertOptions,
+} from '@sofie-automation/meteor-lib/dist/collections/lib'
 
 export const ClientCollections = new Map<CollectionName, MongoCollection<any> | WrappedMongoReadOnlyCollection<any>>()
 function registerClientCollection(

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

@@ -0,0 +1,49 @@
+@import '../../styles/colorScheme';
+
+.over-under-chip {
+	font-family: Roboto Flex;
+	display: inline-block;
+	border-radius: 999px;
+	white-space: nowrap;
+	letter-spacing: -0.02em;
+	font-variant-numeric: tabular-nums;
+	color: #000;
+
+	padding: var(--overUnderChipPaddingY, 0.05em) var(--overUnderChipPaddingX, 0.25em);
+	margin-left: var(--overUnderChipMarginLeft, 0em);
+	margin-top: var(--overUnderChipMarginTop, 0em);
+	line-height: var(--overUnderChipLineHeight, 1);
+
+	font-variation-settings:
+		'wdth' var(--overUnderChipWdth, 25),
+		'wght' var(--overUnderChipWght, 600),
+		'slnt' var(--overUnderChipSlnt, 0),
+		'GRAD' var(--overUnderChipGrad, 0),
+		'opsz' var(--overUnderChipOpsz, 14),
+		'XOPQ' var(--overUnderChipXopq, 96),
+		'XTRA' var(--overUnderChipXtra, 468),
+		'YOPQ' var(--overUnderChipYopq, 79),
+		'YTAS' var(--overUnderChipYtas, 750),
+		'YTFI' var(--overUnderChipYtfi, 738),
+		'YTLC' var(--overUnderChipYtlc, 548),
+		'YTDE' var(--overUnderChipYtde, -203),
+		'YTUC' var(--overUnderChipYtuc, 712);
+
+	&.over-under-chip--over {
+		--overUnderChipWght: 700;
+		background-color: $general-late-color;
+	}
+
+	&.over-under-chip--under {
+		--overUnderChipWght: 500;
+		background-color: #ff0; // Should probably be changed to $general-fast-color;
+	}
+}
+
+// Optional preset for when the chip is used as a large screen overlay.
+.over-under-chip--overlay {
+	--overUnderChipWght: 700;
+	--overUnderChipOpsz: 20;
+	--overUnderChipYopq: 92;
+	--overUnderChipYtlc: 514;
+}

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

@@ -0,0 +1,72 @@
+import { 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'
+
+type OverUnderChipBaseProps = {
+	className?: string
+	style?: CSSProperties
+	format?: OverUnderChipFormat
+}
+
+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 = (() => {
+		switch (format) {
+			case 'timerPostfix':
+				return RundownUtils.formatDiffToTimecode(Math.abs(valueMs), false, false, true, false, true)
+			case 'playlistDiff':
+			default:
+				return RundownUtils.formatDiffToTimecode(Math.abs(valueMs), false, false, true, true, true)
+		}
+	})()
+
+	return (
+		<span
+			className={classNames('over-under-chip', isUnder ? 'over-under-chip--under' : 'over-under-chip--over', className)}
+			style={style}
+		>
+			{isUnder ? '−' : '+'}
+			{timeStr}
+		</span>
+	)
+}

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

@@ -19,6 +19,7 @@ $general-live-remote-color: var(--general-live-remote-color);
 $general-live-guest-color: var(--general-live-guest-color);
 
 $general-late-color: var(--general-late-color);
+$over-under-over-color: var(--over-under-over-color);
 $general-fast-color: var(--general-fast-color);
 $general-fast-color--shadow: var(--general-fast-color--shadow);
 $general-countdown-to-next-color: var(--general-countdown-to-next-color);

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

@@ -17,6 +17,13 @@ $hold-status-color: $liveline-timecode-color;
 	font-family: Roboto Flex;
 	font-style: normal;
 
+	// Over/under timer overlay (reuses `screen-timing-clock` from prompter view)
+	// Ensure it layers above the fixed top bar.
+	.screen-timing-clock {
+		z-index: 2000;
+		font-size: 9vmin;
+	}
+
 	.director-screen__top {
 		position: fixed;
 		top: 0;
@@ -35,24 +42,19 @@ $hold-status-color: $liveline-timecode-color;
 		padding: 0 0.2em;
 		text-transform: uppercase;
 
-		.director-screen__top__planned-end {
-			text-align: left;
+		.director-screen__top__spacer {
+			flex-grow: 4;
 		}
 
-		.director-screen__top__time-to {
-			text-align: center;
+		.director-screen__top__planned-end {
+			flex-grow: 2;
+			text-align: left;
 		}
 
+		.director-screen__top__center,
 		.director-screen__top__planned-to {
 			text-align: center;
 		}
-		.director-screen__top__planned-since {
-			margin-left: -50px;
-		}
-
-		.director-screen__top__over-under {
-			margin-left: 5vw;
-		}
 	}
 
 	.director-screen__body {
@@ -208,14 +210,14 @@ $hold-status-color: $liveline-timecode-color;
 				text-align: center;
 				width: 100vw;
 				margin-left: -13vw;
-				
+
 				.director-screen__body__part__timeto-name {
 					color: #888;
 					font-size: 9.63em;
 					text-transform: uppercase;
 					margin-top: -2vh;
 				}
-				
+
 				.director-screen__body__part__timeto-countdown {
 					margin-top: 4vh;
 					grid-row: inherit;
@@ -480,75 +482,13 @@ $hold-status-color: $liveline-timecode-color;
 		.clocks-counter-heavy {
 			font-weight: 600;
 		}
-
-		.director-screen__body__t-timer {
-			position: absolute;
-			bottom: 0;
-			right: 0;
-			text-align: right;
-			font-size: 5vh;
-			z-index: 10;
-			line-height: 1;
-
-			.t-timer-display {
-				display: flex;
-				align-items: stretch;
-				justify-content: flex-end;
-				font-weight: 500;
-				background: #333;
-				border-radius: 0;
-				overflow: hidden;
-
-				&__label {
-					display: flex;
-					align-items: center;
-					color: #fff;
-					padding-left: 0.4em;
-					padding-right: 0.2em;
-					font-size: 1em;
-					text-transform: uppercase;
-					letter-spacing: 0.05em;
-					font-stretch: condensed;
-				}
-
-				&__value {
-					display: flex;
-					align-items: center;
-					color: #fff;
-					font-variant-numeric: tabular-nums;
-					padding: 0 0.2em;
-					font-size: 1em;
-
-					.t-timer-display__part {
-						&--dimmed {
-							color: #aaa;
-						}
-					}
-				}
-
-				&__over-under {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					margin: 0 0 0 0.2em;
-					font-size: 1em;
-					font-variant-numeric: tabular-nums;
-					padding: 0 0.4em;
-					line-height: 1.1;
-					min-width: 3.5em;
-					border-radius: 1em;
-
-					&--over {
-						background-color: $general-late-color;
-						color: #fff;
-					}
-
-					&--under {
-						background-color: #ffe900;
-						color: #000;
-					}
-				}
-			}
-		}
+	}
+	.director-screen__bottom-bar {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 20;
+		font-size: 4.58vh;
 	}
 }