Merge branch 'pr/imaretic/1475' into release53

Author: jstarpl

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`._                                                                                                                                                                                |

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}

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

@@ -5,6 +5,7 @@ import { Settings } from '../lib/Settings.js'
 import { PartId, PartInstanceId, SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { UIPartInstances, UIParts } from '../ui/Collections.js'
 import { logger } from './logging.js'
+import { parse as queryStringParse } from 'query-string'
 
 const HEADER_MARGIN = 24 // TODOSYNC: TV2 uses 15. If it's needed to be different, it needs to be made generic somehow..
 const FALLBACK_HEADER_HEIGHT = 65
@@ -102,6 +103,10 @@ export async function scrollToPart(
 let HEADER_HEIGHT: number | undefined = undefined
 
 export function getHeaderHeight(): number {
+	if (queryStringParse(location.search)['hideRundownHeader'] === '1') {
+		return 0
+	}
+
 	if (HEADER_HEIGHT === undefined) {
 		const root = document.querySelector(
 			'#render-target > .container-fluid-custom > .rundown-view > .rundown-header'

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 {

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;
 

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;
 

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

@@ -4,7 +4,7 @@ import { ParsedQuery, parse as queryStringParse } from 'query-string'
 import { Translated, translateWithTracker, useTracker } from '../lib/ReactMeteorData/react-meteor-data.js'
 import { VTContent, NoteSeverity, ISourceLayer } from '@sofie-automation/blueprints-integration'
 import { Spinner } from '../lib/Spinner.js'
-import ClassNames from 'classnames'
+import classNames from 'classnames'
 import * as _ from 'underscore'
 import { Prompt } from 'react-router-dom'
 import { DBRundownPlaylist, QuickLoopMarker } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
@@ -285,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}
@@ -305,6 +311,7 @@ export function RundownView(props: Readonly<IProps>): JSX.Element {
 				{...selectedRundownLayouts}
 				uiSegmentMap={miniShelfData.uiSegmentMap}
 				miniShelfFilter={miniShelfData.miniShelfFilter}
+				hideRundownHeader={hideRundownHeader}
 			/>
 		</div>
 	)
@@ -313,6 +320,7 @@ export function RundownView(props: Readonly<IProps>): JSX.Element {
 interface IPropsWithReady extends IProps {
 	subsReady: boolean
 	userPermissions: Readonly<UserPermissions>
+	hideRundownHeader?: boolean
 }
 
 interface IRundownViewContentSnapshot {
@@ -979,7 +987,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 								return (
 									<ErrorBoundary key={unprotectString(segment._id)}>
 										<VirtualElement
-											className={ClassNames({
+											className={classNames({
 												'segment-timeline-wrapper--hidden': segment.isHidden,
 												'segment-timeline-wrapper--shelf': segment.showShelf,
 											})}
@@ -1083,7 +1091,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 				case SegmentViewMode.Storyboard:
 					return <SegmentStoryboardContainer {...resolvedSegmentProps} />
 				case SegmentViewMode.List:
-					return <SegmentListContainer {...resolvedSegmentProps} />
+					return <SegmentListContainer {...resolvedSegmentProps} hideRundownHeader={this.props.hideRundownHeader} />
 				case SegmentViewMode.Timeline:
 				default:
 					return <SegmentTimelineContainer {...resolvedSegmentProps} />
@@ -1320,7 +1328,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 						{(selectionContext) => {
 							return (
 								<div
-									className={ClassNames('rundown-view', {
+									className={classNames('rundown-view', {
 										'notification-center-open': this.state.isNotificationsCenterOpen !== undefined,
 										'rundown-view--studio-mode': this.props.userPermissions.studio,
 										'properties-panel-open': selectionContext.listSelectedElements().length > 0,
@@ -1336,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={
@@ -1369,7 +1379,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 										{this.props.userPermissions.studio && !Settings.disableBlurBorder && (
 											<KeyboardFocusIndicator userPermissions={this.props.userPermissions}>
 												<div
-													className={ClassNames('rundown-view__focus-lost-frame', {
+													className={classNames('rundown-view__focus-lost-frame', {
 														'rundown-view__focus-lost-frame--reduce-animation': import.meta.env.DEV,
 													})}
 												></div>
@@ -1393,6 +1403,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 											studioRouteSetExclusivityGroups={studio.routeSetExclusivityGroups}
 											onStudioRouteSetSwitch={this.onStudioRouteSetSwitch}
 											onSegmentViewMode={this.onSegmentViewModeChange}
+											hideRundownHeader={this.props.hideRundownHeader}
 										/>
 									</ErrorBoundary>
 									<ErrorBoundary>
@@ -1408,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>

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

packages/webui/src/client/ui/SegmentList/SegmentList.scss

@@ -701,6 +701,10 @@ $identifier-area-width: 3em;
 	padding: $segment-margin-y $segment-margin-x 0;
 	overflow: hidden;
 
+	&.no-rundown-header {
+		margin-top: 0;
+	}
+
 	.segment-opl__title {
 		background: $segment-background-color;
 		border-top-left-radius: $segment-border-radius;

packages/webui/src/client/ui/SegmentList/SegmentList.tsx

@@ -39,6 +39,8 @@ interface IProps {
 	onContextMenu?: (contextMenuContext: IContextMenuContext) => void
 	onSwitchViewMode?: (newViewMode: SegmentViewMode) => void
 	onPieceDoubleClick?: (item: PieceUi, e: React.MouseEvent<HTMLDivElement>) => void
+
+	hideRundownHeader?: boolean
 }
 
 const SegmentListInner = React.forwardRef<HTMLDivElement, IProps>(function SegmentList(props, ref) {
@@ -238,6 +240,7 @@ const SegmentListInner = React.forwardRef<HTMLDivElement, IProps>(function Segme
 				onTimeUntilClick={onTimeUntilClick}
 				onSwitchViewMode={props.onSwitchViewMode}
 				onHeaderNoteClick={props.onHeaderNoteClick}
+				hideRundownHeader={props.hideRundownHeader}
 			/>
 			<div className="segment-opl__part-list">{parts}</div>
 		</div>