add simplified mode to top bar

Author: anteeek

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

@@ -15,6 +15,7 @@
 	}
 
 	&__value {
+		margin-left: auto;
 		font-size: 1.4em;
 		font-variant-numeric: tabular-nums;
 		letter-spacing: 0.05em;

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

@@ -8,7 +8,9 @@
 	border-bottom: 1px solid #333;
 	transition: background-color 0.5s;
 	font-family: 'Roboto Flex', 'Roboto', sans-serif;
-	font-feature-settings: 'liga' 0, 'tnum';
+	font-feature-settings:
+		'liga' 0,
+		'tnum';
 	font-variant-numeric: tabular-nums;
 
 	.rundown-header__trigger {
@@ -73,12 +75,25 @@
 			color: #40b8fa;
 			font-size: 1.4em;
 
-			letter-spacing: 0.0 em;
+			letter-spacing: 0 em;
 			transition: color 0.2s;
 
 			&.time-now {
 				font-size: 1.8em;
-				font-variation-settings: 'wdth' 70, 'wght' 400, 'slnt' -5, 'GRAD' 0, 'opsz' 44, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTFI' 738, 'YTLC' 548, 'YTDE' -203, 'YTUC' 712;
+				font-variation-settings:
+					'wdth' 70,
+					'wght' 400,
+					'slnt' -5,
+					'GRAD' 0,
+					'opsz' 44,
+					'XOPQ' 96,
+					'XTRA' 468,
+					'YOPQ' 79,
+					'YTAS' 750,
+					'YTFI' 738,
+					'YTLC' 548,
+					'YTDE' -203,
+					'YTUC' 712;
 			}
 		}
 
@@ -98,21 +113,47 @@
 				.rundown-header__diff__label {
 					@extend .rundown-header__hoverable-label;
 					font-size: 0.7em;
-					font-variation-settings: 'wdth' 25, 'wght' 500, 'slnt' 0, 'GRAD' 0, 'opsz' 14, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTFI' 738, 'YTLC' 548, 'YTDE' -203, 'YTUC' 712;
+					font-variation-settings:
+						'wdth' 25,
+						'wght' 500,
+						'slnt' 0,
+						'GRAD' 0,
+						'opsz' 14,
+						'XOPQ' 96,
+						'XTRA' 468,
+						'YOPQ' 79,
+						'YTAS' 750,
+						'YTFI' 738,
+						'YTLC' 548,
+						'YTDE' -203,
+						'YTUC' 712;
 					opacity: 0.6;
 				}
 
 				.rundown-header__diff__chip {
 					font-size: 1.2em;
-					padding: 0.0em 0.3em;
+					padding: 0em 0.3em;
 					border-radius: 999px;
-					font-variation-settings: 'wdth' 25, 'wght' 600, 'slnt' 0, 'GRAD' 0, 'opsz' 20, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTFI' 738, 'YTLC' 548, 'YTDE' -203, 'YTUC' 712;
+					font-variation-settings:
+						'wdth' 25,
+						'wght' 600,
+						'slnt' 0,
+						'GRAD' 0,
+						'opsz' 20,
+						'XOPQ' 96,
+						'XTRA' 468,
+						'YOPQ' 79,
+						'YTAS' 750,
+						'YTFI' 738,
+						'YTLC' 548,
+						'YTDE' -203,
+						'YTUC' 712;
 					letter-spacing: -0.02em;
 				}
 
 				&.rundown-header__diff--under {
 					.rundown-header__diff__chip {
-						background-color: #ff0;//$general-fast-color;
+						background-color: #ff0; //$general-fast-color;
 						color: #000;
 					}
 				}
@@ -200,7 +241,20 @@
 	// Common label style for header labels that react to hover
 	.rundown-header__hoverable-label {
 		font-size: 0.75em;
-		font-variation-settings: 'wdth' 25, 'wght' 500, 'slnt' 0, 'GRAD' 0, 'opsz' 14, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTFI' 738, 'YTLC' 548, 'YTDE' -203, 'YTUC' 712;
+		font-variation-settings:
+			'wdth' 25,
+			'wght' 500,
+			'slnt' 0,
+			'GRAD' 0,
+			'opsz' 14,
+			'XOPQ' 96,
+			'XTRA' 468,
+			'YOPQ' 79,
+			'YTAS' 750,
+			'YTFI' 738,
+			'YTLC' 548,
+			'YTDE' -203,
+			'YTUC' 712;
 		letter-spacing: 0.01em;
 		text-transform: uppercase;
 		opacity: 0.6;
@@ -234,6 +288,13 @@
 		min-width: 7em;
 	}
 
+	.rundown-header__timing-group {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+		cursor: pointer;
+	}
+
 	.rundown-header__onair-remaining__label {
 		background-color: $general-live-color;
 		color: #ffffff;
@@ -242,7 +303,20 @@
 		// Label font styling override meant to match the ON AIR label on the On Air line
 		font-size: 0.8em;
 		letter-spacing: 0.05em;
-		font-variation-settings: 'wdth' 80, 'wght' 700, 'slnt' 0, 'GRAD' 0, 'opsz' 14, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTFI' 738, 'YTLC' 548, 'YTDE' -203, 'YTUC' 712;
+		font-variation-settings:
+			'wdth' 80,
+			'wght' 700,
+			'slnt' 0,
+			'GRAD' 0,
+			'opsz' 14,
+			'XOPQ' 96,
+			'XTRA' 468,
+			'YOPQ' 79,
+			'YTAS' 750,
+			'YTFI' 738,
+			'YTLC' 548,
+			'YTDE' -203,
+			'YTUC' 712;
 
 		opacity: 1 !important;
 

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

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import ClassNames from 'classnames'
 import { NavLink } from 'react-router-dom'
 import * as CoreIcon from '@nrk/core-icons/jsx'
@@ -38,6 +39,7 @@ interface IRundownHeaderProps {
 
 export function RundownHeader({ playlist, studio, firstRundown }: IRundownHeaderProps): JSX.Element {
 	const { t } = useTranslation()
+	const [simplified, setSimplified] = useState(false)
 
 	return (
 		<>
@@ -85,9 +87,11 @@ export function RundownHeader({ playlist, studio, firstRundown }: IRundownHeader
 						</div>
 
 						<div className="rundown-header__right">
-							<RundownHeaderPlannedStart playlist={playlist} />
-							<RundownHeaderDurations playlist={playlist} />
-							<RundownHeaderExpectedEnd playlist={playlist} />
+							<div className="rundown-header__timing-group" onClick={() => setSimplified((s) => !s)}>
+								<RundownHeaderPlannedStart playlist={playlist} simplified={simplified} />
+								<RundownHeaderDurations playlist={playlist} simplified={simplified} />
+								<RundownHeaderExpectedEnd playlist={playlist} simplified={simplified} />
+							</div>
 							<NavLink to="/" title={t('Exit')} className="rundown-header__close-btn">
 								<CoreIcon.NrkClose />
 							</NavLink>

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

@@ -4,21 +4,41 @@ import { useTranslation } from 'react-i18next'
 import { Countdown } from './Countdown'
 import { useTiming } from '../RundownTiming/withTiming'
 import { RundownUtils } from '../../../lib/rundown'
+import { getRemainingDurationFromCurrentPart } from './remainingDuration'
 
-export function RundownHeaderDurations({ playlist }: { playlist: DBRundownPlaylist }): JSX.Element | null {
+export function RundownHeaderDurations({
+	playlist,
+	simplified,
+}: {
+	playlist: DBRundownPlaylist
+	simplified?: boolean
+}): JSX.Element | null {
 	const { t } = useTranslation()
 	const timingDurations = useTiming()
 
 	const expectedDuration = PlaylistTiming.getExpectedDuration(playlist.timing)
 	const planned =
 		expectedDuration != null ? RundownUtils.formatDiffToTimecode(expectedDuration, false, true, true, true, true) : null
 
-	const remainingMs = timingDurations.remainingPlaylistDuration
-	const startedMs = playlist.startedPlayback
-	const estDuration =
-		remainingMs != null && startedMs != null
-			? (timingDurations.currentTime ?? Date.now()) - startedMs + remainingMs
-			: null
+	const now = timingDurations.currentTime ?? Date.now()
+	const currentPartInstanceId = playlist.currentPartInfo?.partInstanceId
+
+	let estDuration: number | null = null
+	if (currentPartInstanceId && timingDurations.partStartsAt && timingDurations.partExpectedDurations) {
+		const remaining = getRemainingDurationFromCurrentPart(
+			currentPartInstanceId,
+			timingDurations.partStartsAt,
+			timingDurations.partExpectedDurations
+		)
+		if (remaining != null) {
+			const elapsed =
+				playlist.startedPlayback != null
+					? now - playlist.startedPlayback
+					: (timingDurations.asDisplayedPlaylistDuration ?? 0)
+			estDuration = elapsed + remaining
+		}
+	}
+
 	const estimated =
 		estDuration != null ? RundownUtils.formatDiffToTimecode(estDuration, false, true, true, true, true) : null
 
@@ -27,7 +47,7 @@ export function RundownHeaderDurations({ playlist }: { playlist: DBRundownPlayli
 	return (
 		<div className="rundown-header__endtimes">
 			{planned ? <Countdown label={t('Plan. Dur')}>{planned}</Countdown> : null}
-			{estimated ? <Countdown label={t('Est. Dur')}>{estimated}</Countdown> : null}
+			{!simplified && estimated ? <Countdown label={t('Est. Dur')}>{estimated}</Countdown> : null}
 		</div>
 	)
 }

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

@@ -1,39 +1,33 @@
 import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
 import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
-import { unprotectString } from '@sofie-automation/corelib/dist/protectedString'
 import { useTranslation } from 'react-i18next'
 import { Countdown } from './Countdown'
 import { useTiming } from '../RundownTiming/withTiming'
-
-export function RundownHeaderExpectedEnd({ playlist }: { playlist: DBRundownPlaylist }): JSX.Element | null {
+import { getRemainingDurationFromCurrentPart } from './remainingDuration'
+
+export function RundownHeaderExpectedEnd({
+	playlist,
+	simplified,
+}: {
+	playlist: DBRundownPlaylist
+	simplified?: boolean
+}): JSX.Element | null {
 	const { t } = useTranslation()
 	const timingDurations = useTiming()
 
 	const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing)
-
 	const now = timingDurations.currentTime ?? Date.now()
 
-	// Calculate Est. End by summing partExpectedDurations for all parts after the current one.
-	// Both partStartsAt and partExpectedDurations use PartInstanceId keys, so they match.
 	let estEnd: number | null = null
 	const currentPartInstanceId = playlist.currentPartInfo?.partInstanceId
-	const partStartsAt = timingDurations.partStartsAt
-	const partExpectedDurations = timingDurations.partExpectedDurations
-
-	if (currentPartInstanceId && partStartsAt && partExpectedDurations) {
-		const currentKey = unprotectString(currentPartInstanceId)
-		const currentStartsAt = partStartsAt[currentKey]
-
-		if (currentStartsAt != null) {
-			let remainingDuration = 0
-			for (const [partId, startsAt] of Object.entries<number>(partStartsAt)) {
-				if (startsAt > currentStartsAt) {
-					remainingDuration += partExpectedDurations[partId] ?? 0
-				}
-			}
-			if (remainingDuration > 0) {
-				estEnd = now + remainingDuration
-			}
+	if (currentPartInstanceId && timingDurations.partStartsAt && timingDurations.partExpectedDurations) {
+		const remaining = getRemainingDurationFromCurrentPart(
+			currentPartInstanceId,
+			timingDurations.partStartsAt,
+			timingDurations.partExpectedDurations
+		)
+		if (remaining != null && remaining > 0) {
+			estEnd = now + remaining
 		}
 	}
 
@@ -42,7 +36,7 @@ export function RundownHeaderExpectedEnd({ playlist }: { playlist: DBRundownPlay
 	return (
 		<div className="rundown-header__endtimes">
 			{expectedEnd ? <Countdown label={t('Plan. End')} time={expectedEnd} /> : null}
-			{estEnd ? <Countdown label={t('Est. End')} time={estEnd} /> : null}
+			{!simplified && estEnd ? <Countdown label={t('Est. End')} time={estEnd} /> : null}
 		</div>
 	)
 }

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

@@ -2,16 +2,37 @@ import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/Rund
 import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
 import { useTranslation } from 'react-i18next'
 import { Countdown } from './Countdown'
+import { useTiming } from '../RundownTiming/withTiming'
+import { RundownUtils } from '../../../lib/rundown'
 
-export function RundownHeaderPlannedStart({ playlist }: { playlist: DBRundownPlaylist }): JSX.Element | null {
+export function RundownHeaderPlannedStart({
+	playlist,
+	simplified,
+}: {
+	playlist: DBRundownPlaylist
+	simplified?: boolean
+}): JSX.Element | null {
 	const { t } = useTranslation()
+	const timingDurations = useTiming()
 	const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing)
 
 	if (expectedStart == null) return null
 
+	const now = timingDurations.currentTime ?? Date.now()
+	const diff = now - expectedStart
+
 	return (
 		<div className="rundown-header__endtimes">
 			<Countdown label={t('Plan. Start')} time={expectedStart} />
+			{!simplified &&
+				(playlist.startedPlayback ? (
+					<Countdown label={t('Started')} time={playlist.startedPlayback} />
+				) : (
+					<Countdown>
+						{diff >= 0 && '-'}
+						{RundownUtils.formatDiffToTimecode(Math.abs(diff), false, false, true, true, true)}
+					</Countdown>
+				))}
 		</div>
 	)
 }

packages/webui/src/client/ui/RundownView/RundownHeader/remainingDuration.ts

@@ -0,0 +1,26 @@
+import { PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { unprotectString } from '@sofie-automation/corelib/dist/protectedString'
+
+/**
+ * Compute the sum of expected durations of all parts after the current part.
+ * Uses partStartsAt to determine ordering and partExpectedDurations for the values.
+ * Returns 0 if the current part can't be found or there are no future parts.
+ */
+export function getRemainingDurationFromCurrentPart(
+	currentPartInstanceId: PartInstanceId,
+	partStartsAt: Record<string, number>,
+	partExpectedDurations: Record<string, number>
+): number | null {
+	const currentKey = unprotectString(currentPartInstanceId)
+	const currentStartsAt = partStartsAt[currentKey]
+
+	if (currentStartsAt == null) return null
+
+	let remaining = 0
+	for (const [partId, startsAt] of Object.entries<number>(partStartsAt)) {
+		if (startsAt > currentStartsAt) {
+			remaining += partExpectedDurations[partId] ?? 0
+		}
+	}
+	return remaining
+}