Merge branch 'release51'

meteor/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.51.2](https://github.com/nrkno/tv-automation-server-core/compare/v1.51.1...v1.51.2) (2024-11-21)
+
+
+### Bug Fixes
+
+* Include previousPartInstance in check to orphan segments rather than remove them. ([2c113b5](https://github.com/nrkno/tv-automation-server-core/commit/2c113b58b205198d13f0fc7e2114704311eb915b))
+* updatePartInstancesSegmentIds: take into account when multiple segments have been merged into one. ([bdab8c4](https://github.com/nrkno/tv-automation-server-core/commit/bdab8c4e4ee1e67a3568cccc98106bb7f1258673))
+
 ## [1.51.0-in-testing.3](https://github.com/nrkno/sofie-core/compare/v1.51.0-in-testing.2...v1.51.0-in-testing.3) (2024-09-25)
 
 ## [1.51.0-in-testing.2](https://github.com/nrkno/sofie-core/compare/v1.51.0-in-testing.1...v1.51.0-in-testing.2) (2024-09-24)

meteor/client/lib/notifications/NotificationCenterPanel.tsx

@@ -110,7 +110,8 @@ class NotificationPopUp extends React.Component<IPopUpProps> {
 												key={i}
 												className={ClassNames(
 													'btn',
-													['default', 'primary'].indexOf(action.type) ? 'btn-primary' : 'btn-default'
+													['default', 'primary'].indexOf(action.type) ? 'btn-primary' : 'btn-default',
+													'mls'
 												)}
 												onClick={(e) => this.triggerEvent(action, e)}
 											>

meteor/client/styles/_itemTypeColors.scss

@@ -35,6 +35,8 @@ $segment-layer-background-local: #9a2bd8;
 $segment-layer-background-local--second: darken($segment-layer-background-local, 10%);
 $segment-layer-background-studio-screen: #641fb3;
 
+$step-counter-background-studio-screen: #2a005b;
+
 $segment-item-disabled-background: #898989;
 $segment-item-disabled-color: #c9c9c9;
 
@@ -78,6 +80,10 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
 			}
 		}
 	}
+
+	&.studio-screen {
+		--segment-piece-step-counter-background: #{$step-counter-background-studio-screen};
+	}
 }
 
 @mixin piece-colors {
@@ -251,6 +257,10 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
 			}
 		}
 	}
+
+	&.studio-screen {
+		--segment-piece-step-counter-background: #{$step-counter-background-studio-screen};
+	}
 }
 
 @mixin item-type-borders {

meteor/client/styles/rundownView.scss

@@ -2149,7 +2149,7 @@ svg.icon {
 					vertical-align: top;
 					margin-right: 0.2em;
 					margin-top: 0.1em;
-					background: $segment-piece-step-counter-background;
+					background: var(--segment-piece-step-counter-background, #{$segment-piece-step-counter-background});
 					display: inline-block;
 					padding: 0 0.3em;
 					color: $segment-piece-step-counter;
@@ -2907,7 +2907,7 @@ svg.icon {
 			position: absolute;
 			top: 0;
 			left: 0;
-			background: $segment-piece-step-counter-background;
+			background: var(--segment-piece-step-counter-background, #{$segment-piece-step-counter-background});
 			padding: 0 0.2em;
 			font-weight: 400;
 			text-shadow: 0 0 1px #000, 0.5px 0.5px 8px rgba(0, 0, 0, 0.8);
@@ -3282,7 +3282,7 @@ svg.icon {
 .segment-storyboard__piece__step-chevron,
 .segment-opl__main-piece__label__step-chevron {
 	margin-right: 0.2em;
-	background: $segment-piece-step-counter-background;
+	background: var(--segment-piece-step-counter-background, #{$segment-piece-step-counter-background});
 	display: inline-block;
 	padding: 0 0.2em;
 	color: $segment-piece-step-counter;

meteor/client/ui/ActiveRundownView.tsx

@@ -31,8 +31,6 @@ export function ActiveRundownView({ studioId }: Readonly<{ studioId: StudioId }>
 		[studioId]
 	)
 
-	useSetDocumentClass('dark', 'vertical-overflow-only')
-
 	if (!subsReady) {
 		return (
 			<div className="rundown-view rundown-view--loading">
@@ -62,6 +60,8 @@ export function ActiveRundownView({ studioId }: Readonly<{ studioId: StudioId }>
 function NotFoundMessage({ message }: Readonly<{ message: string }>) {
 	const { t } = useTranslation()
 
+	useSetDocumentClass('dark', 'vertical-overflow-only')
+
 	return (
 		<div className="rundown-view rundown-view--unpublished">
 			<div className="rundown-view__label">

meteor/client/ui/Prompter/prompter.ts

@@ -250,11 +250,11 @@ export namespace PrompterAPI {
 						const piece = pieceInstance.piece
 						const sourceLayer = sourceLayers[piece.sourceLayerId]
 
-						if (!piece.content || !sourceLayer || sourceLayer.type !== SourceLayerType.SCRIPT) break
+						if (!piece.content || !sourceLayer || sourceLayer.type !== SourceLayerType.SCRIPT) continue
 
 						const content = piece.content as ScriptContent
-						if (!content.fullScript) break
-						if (piecesIncluded.indexOf(piece._id) >= 0) break // piece already included in prompter script
+						if (!content.fullScript) continue
+						if (piecesIncluded.indexOf(piece._id) >= 0) continue // piece already included in prompter script
 
 						piecesIncluded.push(piece._id)
 						partData.pieces.push({

meteor/client/ui/SegmentStoryboard/SegmentStoryboard.tsx

@@ -676,7 +676,7 @@ export const SegmentStoryboard = React.memo(
 					>
 						<div
 							className={classNames('segment-storyboard__part-list', {
-								loading: !props.subscriptionsReady /*  */,
+								loading: !props.subscriptionsReady,
 							})}
 							style={!animateScrollLeft ? { transform: `translateX(-${scrollLeft}px)` } : undefined}
 						>

meteor/client/ui/SegmentStoryboard/StoryboardPartThumbnail/Renderers/ThumbnailRendererFactory.ts → meteor/client/ui/SegmentStoryboard/StoryboardPartThumbnail/Renderers/ThumbnailRendererFactory.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { ISourceLayer, SourceLayerType } from '@sofie-automation/blueprints-integration'
 import { PartId, PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { UIStudio } from '../../../../../lib/api/studios'
@@ -27,31 +28,32 @@ export interface IProps {
 	isNext: boolean
 }
 
-export default function renderThumbnail(props: Readonly<IProps>): JSX.Element {
+export const ThumbnailRenderer = React.memo(function ThumbnailRenderer(props: Readonly<IProps>): JSX.Element {
 	const type = props.layer?.type
+
 	switch (type) {
 		case SourceLayerType.VT:
 		case SourceLayerType.LIVE_SPEAK:
-			return VTThumbnailRenderer(props)
+			return <VTThumbnailRenderer {...props} />
 		case SourceLayerType.CAMERA:
 		case SourceLayerType.REMOTE:
-			return CameraThumbnailRenderer(props)
+			return <CameraThumbnailRenderer {...props} />
 		case SourceLayerType.SPLITS:
-			return SplitsThumbnailRenderer(props)
+			return <SplitsThumbnailRenderer {...props} />
 		case SourceLayerType.GRAPHICS:
 		case SourceLayerType.LOWER_THIRD:
 		case SourceLayerType.STUDIO_SCREEN:
-			return GraphicsThumbnailRenderer(props)
+			return <GraphicsThumbnailRenderer {...props} />
 		case SourceLayerType.LOCAL:
-			return LocalThumbnailRenderer(props)
+			return <LocalThumbnailRenderer {...props} />
 		case SourceLayerType.AUDIO:
 		case SourceLayerType.SCRIPT:
 		case SourceLayerType.TRANSITION:
 		case SourceLayerType.UNKNOWN:
 		case undefined:
-			return DefaultThumbnailRenderer(props)
+			return <DefaultThumbnailRenderer {...props} />
 		default:
 			assertNever(type)
-			return DefaultThumbnailRenderer(props)
+			return <DefaultThumbnailRenderer {...props} />
 	}
-}
+})

meteor/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnail.tsx

@@ -1,6 +1,6 @@
 import { SourceLayerType } from '@sofie-automation/blueprints-integration'
 import classNames from 'classnames'
-import React, { useEffect, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { PartExtended, PieceExtended } from '../../../lib/RundownResolver'
 import { findPieceExtendedToShowFromOrderedResolvedInstances } from '../../PieceIcons/utils'
 import StudioContext from '../../RundownView/StudioContext'
@@ -31,30 +31,27 @@ export const StoryboardPartThumbnail = React.memo(function StoryboardPartThumbna
 	isLive,
 	isNext,
 }: Readonly<IProps>) {
-	const [mainPiece, setMainPiece] = useState<PieceExtended | undefined>(findMainPiece(part.pieces))
+	const mainPiece = useMemo<PieceExtended | undefined>(() => findMainPiece(part.pieces), [part.pieces])
 	const [highlight] = useState(false)
 
-	useEffect(() => {
-		const newMainPiece = findMainPiece(part.pieces)
-		setMainPiece(newMainPiece)
-	}, [part.pieces])
-
 	return mainPiece ? (
 		<StudioContext.Consumer>
-			{(studio) => (
-				<StoryboardPartThumbnailInner
-					piece={mainPiece}
-					isLive={isLive}
-					isNext={isNext}
-					layer={mainPiece?.sourceLayer}
-					studio={studio}
-					partId={part.partId}
-					partInstanceId={part.instance._id}
-					highlight={highlight}
-					partAutoNext={part.instance.part.autoNext ?? false}
-					partPlannedStoppedPlayback={part.instance.timings?.plannedStoppedPlayback}
-				/>
-			)}
+			{(studio) =>
+				studio ? (
+					<StoryboardPartThumbnailInner
+						piece={mainPiece}
+						isLive={isLive}
+						isNext={isNext}
+						layer={mainPiece?.sourceLayer}
+						studio={studio}
+						partId={part.partId}
+						partInstanceId={part.instance._id}
+						highlight={highlight}
+						partAutoNext={part.instance.part.autoNext ?? false}
+						partPlannedStoppedPlayback={part.instance.timings?.plannedStoppedPlayback}
+					/>
+				) : null
+			}
 		</StudioContext.Consumer>
 	) : (
 		<div

meteor/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnailInner.tsx

@@ -3,7 +3,7 @@ import { ISourceLayer } from '@sofie-automation/blueprints-integration'
 import { PieceExtended } from '../../../lib/RundownResolver'
 import { getElementDocumentOffset, OffsetPosition } from '../../../utils/positions'
 import { getElementHeight, getElementWidth } from '../../../utils/dimensions'
-import renderThumbnail from './Renderers/ThumbnailRendererFactory'
+import { ThumbnailRenderer } from './Renderers/ThumbnailRendererFactory'
 import { PieceElement } from '../../SegmentContainer/PieceElement'
 import { UIStudio } from '../../../../lib/api/studios'
 import { PartId, PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
@@ -15,7 +15,7 @@ interface IProps {
 	partPlannedStoppedPlayback: number | undefined
 	layer: ISourceLayer | undefined
 	piece: PieceExtended
-	studio: UIStudio | undefined
+	studio: UIStudio
 	isLive: boolean
 	isNext: boolean
 	highlight?: boolean
@@ -87,22 +87,21 @@ export function StoryboardPartThumbnailInner({
 			onPointerMove={onPointerMove}
 			ref={thumbnailEl}
 		>
-			{studio &&
-				renderThumbnail({
-					partId,
-					partInstanceId,
-					partAutoNext,
-					partPlannedStoppedPlayback,
-					hoverScrubTimePosition: mousePosition * (piece.instance.piece.content.sourceDuration || 0),
-					hovering: hover,
-					layer: layer,
-					height,
-					originPosition: origin,
-					pieceInstance: piece,
-					studio,
-					isLive,
-					isNext,
-				})}
+			<ThumbnailRenderer
+				partId={partId}
+				partInstanceId={partInstanceId}
+				partAutoNext={partAutoNext}
+				partPlannedStoppedPlayback={partPlannedStoppedPlayback}
+				hoverScrubTimePosition={mousePosition * (piece.instance.piece.content.sourceDuration || 0)}
+				hovering={hover}
+				layer={layer}
+				height={height}
+				originPosition={origin}
+				pieceInstance={piece}
+				studio={studio}
+				isLive={isLive}
+				isNext={isNext}
+			/>
 		</PieceElement>
 	)
 }

meteor/client/ui/Settings/components/triggeredActions/triggerEditors/DeviceEditor.tsx

@@ -6,7 +6,7 @@ import { MeteorPubSub } from '../../../../../../lib/api/pubsub'
 import { Studios } from '../../../../../collections'
 import { getCurrentTime } from '../../../../../../lib/lib'
 import { UIDeviceTriggerPreview } from '../../../../../../lib/api/triggers/MountedTriggers'
-import { useSubscription, useTracker } from '../../../../../lib/ReactMeteorData/ReactMeteorData'
+import { useSubscriptionIfEnabled, useTracker } from '../../../../../lib/ReactMeteorData/ReactMeteorData'
 import { DeviceTriggersPreviews } from '../../../../Collections'
 import { DeviceTrigger } from './DeviceTrigger'
 
@@ -33,7 +33,7 @@ export const DeviceEditor = function DeviceEditor({ trigger, modified, readonly,
 	)
 	const studio = useTracker(() => Studios.findOne(), [], undefined)
 
-	useSubscription(MeteorPubSub.deviceTriggersPreview, studio?._id ?? protectString(''))
+	useSubscriptionIfEnabled(MeteorPubSub.deviceTriggersPreview, studio !== undefined, studio?._id ?? protectString(''))
 
 	return (
 		<>

meteor/client/ui/Status/ExternalMessages.tsx

@@ -96,7 +96,7 @@ function ExternalMessagesQueuedMessages({ studioId }: Readonly<ExternalMessagesQ
 			ExternalMessageQueue.find(
 				{
 					studioId: studioId,
-					sent: { $gt: 0 },
+					sent: { $not: { $gt: 0 } },
 				},
 				{
 					sort: {
@@ -234,13 +234,13 @@ function ExternalMessagesRow({ msg }: Readonly<ExternalMessagesRowProps>) {
 			<td className="c2">
 				{getAllowConfigure() ? (
 					<React.Fragment>
-						<button className="action-btn" onClick={removeMessage}>
+						<button className="action-btn mod mls" onClick={removeMessage}>
 							<FontAwesomeIcon icon={faTrash} />
 						</button>
-						<button className="action-btn" onClick={toggleHoldMessage}>
+						<button className="action-btn mod" onClick={toggleHoldMessage}>
 							{msg.hold ? <FontAwesomeIcon icon={faPlay} /> : <FontAwesomeIcon icon={faPause} />}
 						</button>
-						<button className="action-btn" onClick={retryMessage}>
+						<button className="action-btn mod" onClick={retryMessage}>
 							<FontAwesomeIcon icon={faRedo} />
 						</button>
 						<br />

meteor/client/ui/util/useSetDocumentClass.ts

@@ -1,11 +1,11 @@
-import { useEffect } from 'react'
+import { useLayoutEffect } from 'react'
 
 /**
  * Adds the provided classes to `document.body` upon mount, and removes them when unmounted
  * @param classNames Classnames to add
  */
 export function useSetDocumentClass(...classNames: string[]): void {
-	useEffect(() => {
+	useLayoutEffect(() => {
 		document.body.classList.add(...classNames)
 
 		return () => {

meteor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "automation-core",
-	"version": "1.51.0",
+	"version": "1.51.3",
 	"private": true,
 	"engines": {
 		"node": ">=14.19.1"
@@ -100,7 +100,7 @@
 		"react-router-dom": "^5.3.4",
 		"react-timer-hoc": "^2.3.0",
 		"semver": "^7.5.4",
-		"superfly-timeline": "9.0.1",
+		"superfly-timeline": "9.0.2",
 		"threadedclass": "^1.2.2",
 		"timecode": "0.0.4",
 		"type-fest": "^3.13.1",