wip: add freeze counter

Author: olzzon

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

@@ -200,7 +200,7 @@ $hold-status-color: $liveline-timecode-color;
 				.director-screen__body__part__piece-countdown {
 					grid-row: inherit;
 					text-align: left;
-					font-size: 13em; // Allow a fallback for CasparCG
+					font-size: 13em;
 					font-size: #{'min(13em, 8vw)'};
 					padding: 0 0.2em;
 					line-height: 1em;
@@ -209,11 +209,16 @@ $hold-status-color: $liveline-timecode-color;
 						color: $general-late-color;
 					}
 
-					> img.freeze-icon {
-						width: 0.9em;
-						height: 0.9em;
-						margin-left: -0.05em;
-						margin-top: -0.05em;
+					.freeze-counter {
+						font-size: 3.3rem;
+						color: #00bfff;
+						margin-left: 4vw;
+					}
+					img.freeze-counter-icon {
+						width: 1.4em;
+						height: 1.4em;
+						vertical-align: middle;
+						display: inline-block;
 					}
 				}
 			}

…ewPieceIcons/ClockViewPieceCountdown.tsx …kViewPieceIcons/ClockViewFreezeCount.tsxpackages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewPieceCountdown.tsx renamed to packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewFreezeCount.tsx packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewPieceCountdown.tsx renamed to packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewFreezeCount.tsx

@@ -2,7 +2,7 @@ import { useSubscription, useTracker } from '../../../lib/ReactMeteorData/ReactM
 import { SourceLayerType, VTContent } from '@sofie-automation/blueprints-integration'
 import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
 import { findPieceInstanceToShow } from './utils'
-import { Timediff } from '../../ClockView/Timediff'
+import { Timediff } from '../Timediff'
 import { getCurrentTime } from '../../../lib/systemTime'
 import {
 	PartInstanceId,
@@ -33,7 +33,7 @@ const supportedLayers = new Set([
 	SourceLayerType.CAMERA,
 ])
 
-export function PieceCountdownContainer(props: Readonly<IPropsHeader>): JSX.Element | null {
+export function PieceFreezeContainer(props: Readonly<IPropsHeader>): JSX.Element | null {
 	const { pieceInstance, sourceLayer } = useTracker(
 		() => findPieceInstanceToShow(props, supportedLayers),
 		[props.partInstanceId, props.showStyleBaseId],
@@ -69,7 +69,7 @@ export function PieceCountdownContainer(props: Readonly<IPropsHeader>): JSX.Elem
 			return (
 				<>
 					<Timediff time={freezeCountdown} />
-					<img className="freeze-icon" src="/icons/freeze-presenter-screen.svg" />
+					<img className="freeze-counter-icon" src="/icons/freeze-presenter-screen.svg" />
 				</>
 			)
 		}

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

@@ -12,9 +12,9 @@ import { PieceIconContainer } from './ClockViewPieceIcons/ClockViewPieceIcon'
 import { PieceNameContainer } from './ClockViewPieceIcons/ClockViewPieceName'
 import { Timediff } from './Timediff'
 import { RundownUtils } from '../../lib/rundown'
-import { CountdownType, PieceLifespan } from '@sofie-automation/blueprints-integration'
+import { PieceLifespan } from '@sofie-automation/blueprints-integration'
 import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
-import { PieceCountdownContainer } from '../PieceIcons/PieceCountdown'
+import { PieceFreezeContainer } from './ClockViewPieceIcons/ClockViewFreezeCount'
 import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
 import {
 	RundownId,
@@ -348,8 +348,8 @@ function DirectorScreenRender({
 	useSetDocumentClass('dark', 'xdark')
 
 	if (playlist && playlistId && segments) {
-		// const currentPartOrSegmentCountdown =
-		// 	timingDurations.remainingBudgetOnCurrentSegment ?? timingDurations.remainingTimeOnCurrentPart ?? 0
+		const currentPartOrSegmentCountdown =
+			timingDurations.remainingBudgetOnCurrentSegment ?? timingDurations.remainingTimeOnCurrentPart ?? 0
 
 		const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing) || 0
 		const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing)
@@ -451,13 +451,9 @@ function DirectorScreenRender({
 										/>
 									</div>
 									<div className="director-screen__body__part__piece-countdown">
-										{currentSegment?.segmentTiming?.countdownType === CountdownType.SEGMENT_BUDGET_DURATION ? (
-											<CurrentPartOrSegmentRemaining
-												currentPartInstanceId={currentPartInstance.instance._id}
-												heavyClassName="overtime"
-											/>
-										) : (
-											<PieceCountdownContainer
+										<Timediff time={currentPartOrSegmentCountdown} />
+										<span className="freeze-counter">
+											<PieceFreezeContainer
 												partInstanceId={currentPartInstance.instance._id}
 												showStyleBaseId={currentShowStyleBaseId}
 												rundownIds={rundownIds}
@@ -468,7 +464,7 @@ function DirectorScreenRender({
 												partStartedPlayback={currentPartInstance.instance.timings?.plannedStartedPlayback}
 												playlistActivationId={playlist?.activationId}
 											/>
-										)}
+										</span>
 									</div>
 								</div>
 							</>