feat: add flag to hide rundown header

Simon Rogers · Ivan Maretić · commit 43c1aaa0c039 · 2025-06-18T17:13:24.000+02:00
diff --git a/packages/documentation/docs/for-developers/url-query-parameters.md b/packages/documentation/docs/for-developers/url-query-parameters.md
@@ -22,3 +22,4 @@ Appending query parameter(s) to the URL will allow you to modify the behaviour o
 | `speak=1`                          | Experimental feature that starts playing an audible countdown 10 seconds before each planned _Take_. _Default value is `0`._                                                                                                                                                                                                                                                                          |
 | `vibrate=1`                        | Experimental feature that triggers the vibration API in the web browser 3 seconds before each planned _Take_. _Default value is `0`._                                                                                                                                                                                                                                                                 |
 | `zoom=1,...`                       | Sets the scaling of the entire GUI. _The unit is a percentage where `100` is the default scaling._                                                                                                                                                                                                                                                                                                    |
+| `hideRundownHeader=1`              | Hides header on [Rundown view](../user-guide/features/sofie-views-and-screens#rundown-view) and [Active Rundown screen](../user-guide/features/sofie-views-and-screens#active-rundown-screen). _Default value is `0`._                                                                                                                                                                                |
diff --git a/packages/webui/src/client/lib/notifications/NotificationCenterPanel.tsx b/packages/webui/src/client/lib/notifications/NotificationCenterPanel.tsx
@@ -12,6 +12,7 @@ import { i18nTranslator } from '../../ui/i18n.js'
 import { RundownId, SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { useTranslation } from 'react-i18next'
 import { PopUpPanel } from '../../ui/RundownView/PopUpPanel.js'
+import classNames from 'classnames'
 
 interface IPopUpProps {
 	id?: string
@@ -469,8 +470,16 @@ function NotificationCenterElement(props: HTMLMotionProps<'div'>) {
  * Presentational component that displays a panel containing the NotificationCenterPopUps list containing
  * the snoozed items and an 'Empty' label if no notifications are present.
  */
-export const NotificationCenterPanel = (props: { limitCount?: number; filter?: NoticeLevel }): JSX.Element => (
-	<PopUpPanel className="notification-center-panel">
+export const NotificationCenterPanel = (props: {
+	limitCount?: number
+	filter?: NoticeLevel
+	hideRundownHeader?: boolean
+}): JSX.Element => (
+	<PopUpPanel
+		className={classNames('notification-center-panel', {
+			'notification-center-panel--no-rundown-header': props.hideRundownHeader,
+		})}
+	>
 		<NotificationCenterPopUps
 			initialAnimation={false}
 			showEmptyListLabel={true}
diff --git a/packages/webui/src/client/styles/fromOrigo.scss b/packages/webui/src/client/styles/fromOrigo.scss
@@ -2,6 +2,10 @@
 	padding-top: 4rem;
 	padding-right: $statusbar-width;
 	padding-left: 0;
+
+	&.header-clear--no-rundown-header {
+		padding-top: 0;
+	}
 }
 
 ul {
diff --git a/packages/webui/src/client/styles/notifications.scss b/packages/webui/src/client/styles/notifications.scss
@@ -415,6 +415,10 @@
 		background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
 	}
 
+	&.notification-center-panel--no-rundown-header {
+		top: 0;
+	}
+
 	.notification-pop-ups {
 		top: 0;
 
diff --git a/packages/webui/src/client/styles/statusbar.scss b/packages/webui/src/client/styles/statusbar.scss
@@ -177,6 +177,10 @@
 	background: $ui-dark-color;
 	border-left: none;
 
+	&.status-bar--no-rundown-header {
+		top: 0;
+	}
+
 	.status-bar__controls__button {
 		border: none;
 
diff --git a/packages/webui/src/client/ui/RundownView.tsx b/packages/webui/src/client/ui/RundownView.tsx
@@ -110,6 +110,7 @@ import { useRundownViewSubscriptions } from './RundownView/RundownViewSubscripti
 import { useMiniShelfAdlibsData } from './RundownView/useQueueMiniShelfAdlib.js'
 import { RundownViewContextProviders } from './RundownView/RundownViewContextProviders.js'
 import { AnimatePresence } from 'motion/react'
+import classNames from 'classnames'
 
 const HIDE_NOTIFICATIONS_AFTER_MOUNT: number | undefined = 5000
 
@@ -284,8 +285,14 @@ export function RundownView(props: Readonly<IProps>): JSX.Element {
 		partInstances?.currentPartInstance
 	)
 
+	const hideRundownHeader = params['hideRundownHeader'] === '1'
+
 	return (
-		<div className="container-fluid header-clear">
+		<div
+			className={classNames('container-fluid', 'header-clear', {
+				'header-clear--no-rundown-header': hideRundownHeader,
+			})}
+		>
 			<RundownViewContent
 				{...props}
 				subsReady={subsReady}
@@ -304,6 +311,7 @@ export function RundownView(props: Readonly<IProps>): JSX.Element {
 				{...selectedRundownLayouts}
 				uiSegmentMap={miniShelfData.uiSegmentMap}
 				miniShelfFilter={miniShelfData.miniShelfFilter}
+				hideRundownHeader={hideRundownHeader}
 			/>
 		</div>
 	)
@@ -312,6 +320,7 @@ export function RundownView(props: Readonly<IProps>): JSX.Element {
 interface IPropsWithReady extends IProps {
 	subsReady: boolean
 	userPermissions: Readonly<UserPermissions>
+	hideRundownHeader?: boolean
 }
 
 interface IRundownViewContentSnapshot {
@@ -1335,20 +1344,22 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 											this.props.userPermissions.studio &&
 											studio.settings.enableEvaluationForm && <AfterBroadcastForm playlist={playlist} />}
 									</ErrorBoundary>
-									<ErrorBoundary>
-										<RundownHeader
-											playlist={playlist}
-											studio={studio}
-											rundownIds={this.props.rundowns.map((r) => r._id)}
-											firstRundown={this.props.rundowns[0]}
-											onActivate={this.onActivate}
-											inActiveRundownView={this.props.inActiveRundownView}
-											currentRundown={currentRundown}
-											layout={this.props.selectedHeaderLayout}
-											showStyleBase={showStyleBase}
-											showStyleVariant={showStyleVariant}
-										/>
-									</ErrorBoundary>
+									{!this.props.hideRundownHeader && (
+										<ErrorBoundary>
+											<RundownHeader
+												playlist={playlist}
+												studio={studio}
+												rundownIds={this.props.rundowns.map((r) => r._id)}
+												firstRundown={this.props.rundowns[0]}
+												onActivate={this.onActivate}
+												inActiveRundownView={this.props.inActiveRundownView}
+												currentRundown={currentRundown}
+												layout={this.props.selectedHeaderLayout}
+												showStyleBase={showStyleBase}
+												showStyleVariant={showStyleVariant}
+											/>
+										</ErrorBoundary>
+									)}
 									<ErrorBoundary>
 										<Shelf
 											isExpanded={
@@ -1392,6 +1403,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 											studioRouteSetExclusivityGroups={studio.routeSetExclusivityGroups}
 											onStudioRouteSetSwitch={this.onStudioRouteSetSwitch}
 											onSegmentViewMode={this.onSegmentViewModeChange}
+											hideRundownHeader={this.props.hideRundownHeader}
 										/>
 									</ErrorBoundary>
 									<ErrorBoundary>
@@ -1407,7 +1419,10 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 									<ErrorBoundary>
 										<AnimatePresence>
 											{this.state.isNotificationsCenterOpen && (
-												<NotificationCenterPanel filter={this.state.isNotificationsCenterOpen} />
+												<NotificationCenterPanel
+													filter={this.state.isNotificationsCenterOpen}
+													hideRundownHeader={this.props.hideRundownHeader}
+												/>
 											)}
 											{!this.state.isNotificationsCenterOpen && selectionContext.listSelectedElements().length > 0 && (
 												<div>
diff --git a/packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx b/packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx
@@ -51,6 +51,7 @@ interface IProps {
 		state: boolean
 	) => void
 	onSegmentViewMode?: (e: React.MouseEvent<HTMLButtonElement>) => void
+	hideRundownHeader?: boolean
 }
 
 const ANIMATION_TEMPLATE = {
@@ -138,7 +139,11 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 					onStudioRouteSetSwitch={props.onStudioRouteSetSwitch}
 				/>
 			)}
-			<div className="status-bar">
+			<div
+				className={classNames('status-bar', {
+					'status-bar--no-rundown-header': props.hideRundownHeader,
+				})}
+			>
 				<div className="status-bar__cell status-bar__cell--align-start">
 					<AnimatePresence initial={false}>
 						<NotificationCenterPanelToggle

Original file line number	Diff line number	Diff line change
`@@ -415,6 +415,10 @@`
`415`	`415`	`background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.7) 100%);`
`416`	`416`	`}`
`417`	`417`
	`418`	`+ &.notification-center-panel--no-rundown-header {`
	`419`	`+ top: 0;`
	`420`	`+ }`
	`421`	`+`
`418`	`422`	`.notification-pop-ups {`
`419`	`423`	`top: 0;`
`420`	`424`