Merge branch 'release51'

Author: nytamin

meteor/client/styles/shelf/shelf.scss

@@ -128,33 +128,61 @@
 		}
 
 		.rundown-view__shelf__tabs__tab {
+			position: relative;
 			display: block;
 			background: none;
 			border: none;
-			position: relative;
 			flex: 1 1;
 			max-width: 7em;
-			min-width: 13em;
+			min-width: min-content;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			text-align: center;
-			color: #8f8f8f;
 			line-height: $inspector-shelf-tabs-height;
 			cursor: pointer;
 			user-select: none;
+			padding-inline: 1.5em;
 
 			outline-offset: -5px;
 
+			// this is a setup that ensures that the min-content is calculated with this font-weight,
+			// while we display the button with differing font-weights depending on state
+			font-weight: 500;
+			color: transparent;
+
 			&:hover {
-				color: #fff;
-				transition: 0.3s;
+				// color: #fff;
+				// transition: 0.3s;
+
+				> .rundown-view__shelf__tabs__tab-label {
+					color: #fff;
+					transition: 0.3s;
+				}
+			}
+
+			> .rundown-view__shelf__tabs__tab-label {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				line-height: inherit;
+				font-weight: 300;
+				color: #b0b0b0;
 			}
 
 			&.selected {
-				color: #fff;
-				font-weight: 500;
-				text-shadow: 0 0 5px #000;
+				// color: #fff;
+				// font-weight: 500;
+				// text-shadow: 0 0 5px #000;
+				// transition: 0s;
+
+				> .rundown-view__shelf__tabs__tab-label {
+					color: #fff;
+					font-weight: 500;
+					text-shadow: 0 0 5px #000;
+					transition: 0s;
+				}
 
 				&::after {
 					content: ' ';

meteor/client/ui/Shelf/ShelfRundownLayout.tsx

@@ -52,6 +52,7 @@ export function ShelfRundownLayout(props: Readonly<IShelfRundownLayoutProps>): J
 								tabIndex={0}
 								role="tab"
 							>
+								<div className="rundown-view__shelf__tabs__tab-label">{t('AdLib')}</div>
 								{t('AdLib')}
 							</button>
 							<button
@@ -62,6 +63,7 @@ export function ShelfRundownLayout(props: Readonly<IShelfRundownLayoutProps>): J
 								tabIndex={0}
 								role="tab"
 							>
+								<div className="rundown-view__shelf__tabs__tab-label">{t('Global AdLib')}</div>
 								{t('Global AdLib')}
 							</button>
 						</>
@@ -79,21 +81,23 @@ export function ShelfRundownLayout(props: Readonly<IShelfRundownLayoutProps>): J
 									tabIndex={0}
 									role="tab"
 								>
+									<div className="rundown-view__shelf__tabs__tab-label">{panel.name}</div>
 									{panel.name}
 								</button>
 							))
 					)}
+					<button
+						className={ClassNames('rundown-view__shelf__tabs__tab', {
+							selected: (props.selectedTab || SHELF_DEFAULT_TAB) === ShelfTabs.SYSTEM_HOTKEYS,
+						})}
+						onClick={() => onSwitchTab(ShelfTabs.SYSTEM_HOTKEYS)}
+						tabIndex={0}
+						role="tab"
+					>
+						<div className="rundown-view__shelf__tabs__tab-label">{t('Shortcuts')}</div>
+						{t('Shortcuts')}
+					</button>
 				</OverflowingContainer>
-				<button
-					className={ClassNames('rundown-view__shelf__tabs__tab', {
-						selected: (props.selectedTab || SHELF_DEFAULT_TAB) === ShelfTabs.SYSTEM_HOTKEYS,
-					})}
-					onClick={() => onSwitchTab(ShelfTabs.SYSTEM_HOTKEYS)}
-					tabIndex={0}
-					role="tab"
-				>
-					{t('Shortcuts')}
-				</button>
 			</div>
 			<div className="rundown-view__shelf__panel super-dark" role="tabpanel">
 				{!rundownLayout ? (

packages/job-worker/src/playout/timeline/multi-gateway.ts

@@ -5,6 +5,7 @@ import { TimelineObjRundown } from '@sofie-automation/corelib/dist/dataModel/Tim
 import { normalizeArray } from '@sofie-automation/corelib/dist/lib'
 import { PieceTimelineMetadata } from './pieceGroup'
 import { StudioPlayoutModelBase } from '../../studio/model/StudioPlayoutModel'
+import { logger } from '../../logging'
 import { JobContext } from '../../jobs'
 import { getCurrentTime } from '../../lib'
 import { PlayoutModel } from '../model/PlayoutModel'
@@ -46,7 +47,7 @@ export function deNowifyMultiGatewayTimeline(
 		playoutModel.nextPartInstance
 	)
 
-	deNowifyCurrentPieces(
+	const { objectsNotDeNowified } = deNowifyCurrentPieces(
 		targetNowTime,
 		timingContext,
 		currentPartInstance,
@@ -55,6 +56,9 @@ export function deNowifyMultiGatewayTimeline(
 	)
 
 	updatePlannedTimingsForPieceInstances(playoutModel, currentPartInstance, partGroupTimings, timelineObjsMap)
+
+	// Because updatePlannedTimingsForPieceInstances changes start times of infinites, we can now run deNowifyInfinites()
+	deNowifyInfinites(targetNowTime, objectsNotDeNowified, timelineObjsMap)
 }
 
 /**
@@ -142,16 +146,83 @@ function updatePartInstancePlannedTimes(
 	}
 }
 
+/**
+ * Replace the `now` time in any timeline objects in freshly-placed infinites.
+ *
+ * This is effectively only needed when a new item has been placed on the timeline just now and changes made by
+ * `updatePlannedTimingsForPieceInstances` haven't been taken into account when generating the timeline. On the next
+ * regeneration, items will already use the timestamps persited by `updatePlannedTimingsForPieceInstances` and will not
+ * be included in `infiniteObjs`.
+ */
+function deNowifyInfinites(
+	targetNowTime: number,
+	/** A list of objects that need to be updated */
+	infiniteObjs: TimelineObjRundown[],
+	timelineObjsMap: Record<string, TimelineObjRundown>
+) {
+	/**
+	 * Recursively look up the absolute starttime of a timeline object
+	 * taking into account its parent's times.
+	 * Note: This only supports timeline objects that have absolute enable.start times.
+	 */
+	const getStartTime = (obj: TimelineObjRundown): number | undefined => {
+		if (Array.isArray(obj.enable)) return undefined
+
+		const myStartTime = typeof obj.enable.start === 'number' ? obj.enable.start : undefined
+
+		if (!obj.inGroup) return myStartTime
+
+		if (myStartTime === undefined) return undefined
+
+		const parentObject = timelineObjsMap[obj.inGroup]
+		if (!parentObject) return undefined
+
+		const parentStartTime = getStartTime(parentObject)
+		if (parentStartTime === undefined) return undefined
+
+		return parentStartTime + myStartTime
+	}
+
+	for (const obj of infiniteObjs) {
+		if (Array.isArray(obj.enable) || obj.enable.start !== 'now') continue
+
+		if (!obj.inGroup) {
+			obj.enable = { start: targetNowTime }
+			continue
+		}
+
+		const parentObject = timelineObjsMap[obj.inGroup]
+		if (!parentObject) {
+			logger.error(`deNowifyInfinites: Parent obj "${obj.inGroup}" not found of object "${obj.id}"`)
+			continue
+		}
+
+		const parentStartTime = getStartTime(parentObject)
+		if (parentStartTime === undefined) {
+			logger.error(
+				`deNowifyInfinites: Unable to derive an absolute start time of parent "${obj.inGroup}" for object "${obj.id}"`
+			)
+			continue
+		}
+
+		obj.enable = { start: targetNowTime - parentStartTime }
+		logger.silly(
+			`deNowifyInfinites: Setting "${obj.id}" enable.start = ${obj.enable.start}, ${targetNowTime} ${parentStartTime} parentObject: "${parentObject.id}"`
+		)
+	}
+}
 /**
  * Replace the `now` time in any Pieces on the timeline from the current Part with concrete start times
+ * @returns a list of object that couldn't be updated at this time.
  */
 function deNowifyCurrentPieces(
 	targetNowTime: number,
 	timingContext: RundownTimelineTimingContext,
 	currentPartInstance: PlayoutPartInstanceModel,
 	currentPartGroupStartTime: number,
 	timelineObjsMap: Record<string, TimelineObjRundown>
-) {
+): { objectsNotDeNowified: TimelineObjRundown[] } {
+	const objectsNotDeNowified: TimelineObjRundown[] = []
 	// The relative time for 'now' to be resolved to, inside of the part group
 	const nowInPart = targetNowTime - currentPartGroupStartTime
 
@@ -176,6 +247,8 @@ function deNowifyCurrentPieces(
 				obj.enable = { start: nowInPart }
 			} else if (!obj.inGroup) {
 				obj.enable = { start: targetNowTime }
+			} else {
+				objectsNotDeNowified.push(obj)
 			}
 		}
 	}
@@ -203,6 +276,7 @@ function deNowifyCurrentPieces(
 			}
 		}
 	}
+	return { objectsNotDeNowified }
 }
 
 function updatePlannedTimingsForPieceInstances(