New top bar UI - WIP

Author: anteeek

packages/webui/src/client/ui/ClockView/CameraScreen/Part.tsx

@@ -7,7 +7,7 @@ import { PieceExtended } from '../../../lib/RundownResolver.js'
 import { getAllowSpeaking, getAllowVibrating } from '../../../lib/localStorage.js'
 import { getPartInstanceTimingValue } from '../../../lib/rundownTiming.js'
 import { AutoNextStatus } from '../../RundownView/RundownTiming/AutoNextStatus.js'
-import { CurrentPartOrSegmentRemaining } from '../../RundownView/RundownTiming/CurrentPartOrSegmentRemaining.js'
+import { CurrentPartOrSegmentRemaining } from '../../RundownView/RundownHeader/CurrentPartOrSegmentRemaining.js'
 import { PartCountdown } from '../../RundownView/RundownTiming/PartCountdown.js'
 import { PartDisplayDuration } from '../../RundownView/RundownTiming/PartDuration.js'
 import { TimingDataResolution, TimingTickResolution, useTiming } from '../../RundownView/RundownTiming/withTiming.js'

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

@@ -40,7 +40,7 @@ import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
 import { useSetDocumentClass } from '../util/useSetDocumentClass.js'
 import { useRundownAndShowStyleIdsForPlaylist } from '../util/useRundownAndShowStyleIdsForPlaylist.js'
 import { RundownPlaylistClientUtil } from '../../lib/rundownPlaylistUtil.js'
-import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownTiming/CurrentPartOrSegmentRemaining.js'
+import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownHeader/CurrentPartOrSegmentRemaining.js'
 import {
 	OverUnderClockComponent,
 	PlannedEndComponent,

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

@@ -47,7 +47,7 @@ import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
 import { useSetDocumentClass, useSetDocumentDarkTheme } from '../util/useSetDocumentClass.js'
 import { useRundownAndShowStyleIdsForPlaylist } from '../util/useRundownAndShowStyleIdsForPlaylist.js'
 import { RundownPlaylistClientUtil } from '../../lib/rundownPlaylistUtil.js'
-import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownTiming/CurrentPartOrSegmentRemaining.js'
+import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownHeader/CurrentPartOrSegmentRemaining.js'
 
 interface SegmentUi extends DBSegment {
 	items: Array<PartUi>

packages/webui/src/client/ui/RundownView/RundownHeader/Countdown.scss

@@ -0,0 +1,24 @@
+@import '../../../styles/colorScheme';
+
+.countdown {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 0.6em;
+	color: rgba(255, 255, 255, 0.6);
+	transition: color 0.2s;
+
+	&__label {
+		font-size: 0.7em;
+		font-weight: 600;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		white-space: nowrap;
+	}
+
+	&__value {
+		font-size: 1.4em;
+		font-variant-numeric: tabular-nums;
+		letter-spacing: 0.05em;
+	}
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import Moment from 'react-moment'
+import classNames from 'classnames'
+import './Countdown.scss'
+
+interface IProps {
+	label: string
+	time?: number
+	className?: string
+	children?: React.ReactNode
+}
+
+export function Countdown({ label, time, className, children }: IProps): JSX.Element {
+	return (
+		<span className={classNames('countdown', className)}>
+			<span className="countdown__label">{label}</span>
+			<span className="countdown__value">
+				{time !== undefined ? <Moment interval={0} format="HH:mm:ss" date={time} /> : children}
+			</span>
+		</span>
+	)
+}

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

@@ -0,0 +1,139 @@
+import React, { useEffect, useRef } from 'react'
+import ClassNames from 'classnames'
+import { TimingDataResolution, TimingTickResolution, useTiming } from '../RundownTiming/withTiming.js'
+import { RundownUtils } from '../../../lib/rundown.js'
+import { SpeechSynthesiser } from '../../../lib/speechSynthesis.js'
+import { PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+
+const SPEAK_ADVANCE = 500
+
+interface IPartRemainingProps {
+	currentPartInstanceId: PartInstanceId | null
+	hideOnZero?: boolean
+	className?: string
+	heavyClassName?: string
+	speaking?: boolean
+	vibrating?: boolean
+	/** Use the segment budget instead of the part duration if available */
+	preferSegmentTime?: boolean
+}
+
+// global variable for remembering last uttered displayTime
+let prevDisplayTime: number | undefined = undefined
+
+function speak(displayTime: number) {
+	let text = '' // Say nothing
+
+	switch (displayTime) {
+		case -1:
+			text = 'One'
+			break
+		case -2:
+			text = 'Two'
+			break
+		case -3:
+			text = 'Three'
+			break
+		case -4:
+			text = 'Four'
+			break
+		case -5:
+			text = 'Five'
+			break
+		case -6:
+			text = 'Six'
+			break
+		case -7:
+			text = 'Seven'
+			break
+		case -8:
+			text = 'Eight'
+			break
+		case -9:
+			text = 'Nine'
+			break
+		case -10:
+			text = 'Ten'
+			break
+	}
+
+	if (text) {
+		SpeechSynthesiser.speak(text, 'countdown')
+	}
+}
+
+function vibrate(displayTime: number) {
+	if ('vibrate' in navigator) {
+		switch (displayTime) {
+			case 0:
+				navigator.vibrate([500])
+				break
+			case -1:
+			case -2:
+			case -3:
+				navigator.vibrate([250])
+				break
+		}
+	}
+}
+
+export const CurrentPartOrSegmentRemaining: React.FC<IPartRemainingProps> = (props) => {
+	const timingDurations = useTiming(TimingTickResolution.Synced, TimingDataResolution.Synced)
+	const prevPartInstanceId = useRef<PartInstanceId | null>(null)
+
+	useEffect(() => {
+		if (props.currentPartInstanceId !== prevPartInstanceId.current) {
+			prevDisplayTime = undefined
+			prevPartInstanceId.current = props.currentPartInstanceId
+		}
+
+		if (!timingDurations?.currentTime) return
+		if (timingDurations.currentPartInstanceId !== props.currentPartInstanceId) return
+
+		let displayTime = (timingDurations.remainingTimeOnCurrentPart || 0) * -1
+
+		if (displayTime !== 0) {
+			displayTime += SPEAK_ADVANCE
+			displayTime = Math.floor(displayTime / 1000)
+		}
+
+		if (prevDisplayTime !== displayTime) {
+			if (props.speaking) {
+				speak(displayTime)
+			}
+
+			if (props.vibrating) {
+				vibrate(displayTime)
+			}
+
+			prevDisplayTime = displayTime
+		}
+	}, [
+		props.currentPartInstanceId,
+		timingDurations?.currentTime,
+		timingDurations?.currentPartInstanceId,
+		timingDurations?.remainingTimeOnCurrentPart,
+		props.speaking,
+		props.vibrating,
+	])
+
+	if (!timingDurations?.currentTime) return null
+	if (timingDurations.currentPartInstanceId !== props.currentPartInstanceId) return null
+
+	let displayTimecode = timingDurations.remainingTimeOnCurrentPart
+	if (props.preferSegmentTime) {
+		displayTimecode = timingDurations.remainingBudgetOnCurrentSegment ?? displayTimecode
+	}
+
+	if (displayTimecode === undefined) return null
+	displayTimecode *= -1
+
+	return (
+		<span
+			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)}
+		</span>
+	)
+}

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

@@ -0,0 +1,59 @@
+import { PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { FreezeFrameIcon } from '../../../lib/ui/icons/freezeFrame'
+import { useTiming, TimingTickResolution, TimingDataResolution } from '../RundownTiming/withTiming'
+import { useTracker } from '../../../lib/ReactMeteorData/ReactMeteorData'
+import { PartInstances, PieceInstances } from '../../../collections'
+import { VTContent } from '@sofie-automation/blueprints-integration'
+
+export function HeaderFreezeFrameIcon({ partInstanceId }: { partInstanceId: PartInstanceId }) {
+	const timingDurations = useTiming(TimingTickResolution.Synced, TimingDataResolution.Synced)
+
+	const freezeFrameIcon = useTracker(
+		() => {
+			const partInstance = PartInstances.findOne(partInstanceId)
+			if (!partInstance) return null
+
+			// We use the exact display duration from the timing context just like VTSourceRenderer does.
+			// Fallback to static displayDuration or expectedDuration if timing context is unavailable.
+			const partDisplayDuration =
+				(timingDurations.partDisplayDurations && timingDurations.partDisplayDurations[partInstanceId as any]) ??
+				partInstance.part.displayDuration ??
+				partInstance.part.expectedDuration ??
+				0
+
+			const partDuration = timingDurations.partDurations
+				? timingDurations.partDurations[partInstanceId as any]
+				: partDisplayDuration
+
+			const pieceInstances = PieceInstances.find({ partInstanceId }).fetch()
+
+			for (const pieceInstance of pieceInstances) {
+				const piece = pieceInstance.piece
+				if (piece.virtual) continue
+
+				const content = piece.content as VTContent | undefined
+				if (!content || content.loop || content.sourceDuration === undefined) {
+					continue
+				}
+
+				const seek = content.seek || 0
+				const renderedInPoint = typeof piece.enable.start === 'number' ? piece.enable.start : 0
+				const pieceDuration = content.sourceDuration - seek
+
+				const isAutoNext = partInstance.part.autoNext
+
+				if (
+					(isAutoNext && renderedInPoint + pieceDuration < partDuration) ||
+					(!isAutoNext && Math.abs(renderedInPoint + pieceDuration - partDisplayDuration) > 500)
+				) {
+					return <FreezeFrameIcon className="freeze-frame-icon" />
+				}
+			}
+			return null
+		},
+		[partInstanceId, timingDurations.partDisplayDurations, timingDurations.partDurations],
+		null
+	)
+
+	return freezeFrameIcon
+}