feat: move contentStatus to separate property

Author: Julusian

meteor/client/lib/RundownResolver.ts

@@ -24,8 +24,6 @@ import {
 } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { PieceInstances, Pieces } from '../../lib/collections/libCollections'
 import { RundownPlaylistCollectionUtil } from '../../lib/collections/rundownPlaylistUtil'
-import { PieceContentStatusObj } from '../../lib/api/pieceContentStatus'
-import { ReadonlyDeep } from 'type-fest'
 import { PieceInstanceWithTimings } from '@sofie-automation/corelib/dist/playout/processAndPrune'
 
 export interface SegmentExtended extends DBSegment {
@@ -79,8 +77,6 @@ export interface PieceExtended {
 	maxLabelWidth?: number
 	/** If this piece has a "buddy" piece in the preceeding part, then it's not neccessary to display it's left label */
 	hasOriginInPreceedingPart?: boolean
-
-	contentStatus?: ReadonlyDeep<PieceContentStatusObj>
 }
 
 function fetchPiecesThatMayBeActiveForPart(

meteor/client/lib/shelf.ts

@@ -13,7 +13,6 @@ import { UIShowStyleBase } from '../../lib/api/showStyles'
 import { PieceId, SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { PieceInstances } from '../collections'
 import { ReadonlyDeep } from 'type-fest'
-import { PieceContentStatusObj } from '../../lib/api/pieceContentStatus'
 
 export interface ShelfDisplayOptions {
 	enableBuckets: boolean
@@ -33,8 +32,6 @@ export interface AdLibPieceUi extends Omit<AdLibPiece, 'timelineObjectsString'>
 	disabled?: boolean
 	adlibAction?: AdLibAction | RundownBaselineAdLibAction
 	segmentId?: SegmentId
-
-	contentStatus?: ReadonlyDeep<PieceContentStatusObj>
 }
 
 export interface AdlibSegmentUi extends DBSegment {

meteor/client/lib/ui/pieceUiClassNames.ts

@@ -4,9 +4,12 @@ import { PieceStatusCode } from '@sofie-automation/corelib/dist/dataModel/Piece'
 import classNames from 'classnames'
 import { PieceUi } from '../../ui/SegmentContainer/withResolvedSegment'
 import { RundownUtils } from '../rundown'
+import { ReadonlyDeep } from 'type-fest'
+import { PieceContentStatusObj } from '../../../lib/api/pieceContentStatus'
 
 export function pieceUiClassNames(
 	pieceInstance: PieceUi,
+	contentStatus: ReadonlyDeep<PieceContentStatusObj> | undefined,
 	baseClassName: string,
 	layerType?: SourceLayerType,
 	partId?: PartId,
@@ -42,12 +45,12 @@ export function pieceUiClassNames(
 		'next-is-touching': pieceInstance.cropped,
 
 		'source-missing':
-			pieceInstance.contentStatus?.status === PieceStatusCode.SOURCE_MISSING ||
-			pieceInstance.contentStatus?.status === PieceStatusCode.SOURCE_NOT_SET,
-		'source-unknown-state': pieceInstance.contentStatus?.status === PieceStatusCode.SOURCE_UNKNOWN_STATE,
-		'source-broken': pieceInstance.contentStatus?.status === PieceStatusCode.SOURCE_BROKEN,
-		'source-not-ready': pieceInstance.contentStatus?.status === PieceStatusCode.SOURCE_NOT_READY,
-		'unknown-state': pieceInstance.contentStatus?.status === PieceStatusCode.UNKNOWN,
+			contentStatus?.status === PieceStatusCode.SOURCE_MISSING ||
+			contentStatus?.status === PieceStatusCode.SOURCE_NOT_SET,
+		'source-unknown-state': contentStatus?.status === PieceStatusCode.SOURCE_UNKNOWN_STATE,
+		'source-broken': contentStatus?.status === PieceStatusCode.SOURCE_BROKEN,
+		'source-not-ready': contentStatus?.status === PieceStatusCode.SOURCE_NOT_READY,
+		'unknown-state': contentStatus?.status === PieceStatusCode.UNKNOWN,
 		disabled: pieceInstance.instance.disabled,
 
 		'invert-flash': highlight,

meteor/client/ui/SegmentContainer/PieceElement.tsx

@@ -3,6 +3,7 @@ import { ISourceLayer } from '@sofie-automation/blueprints-integration'
 import { PieceExtended } from '../../lib/RundownResolver'
 import { pieceUiClassNames } from '../../lib/ui/pieceUiClassNames'
 import { PartId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { useContentStatusForItem } from '../SegmentTimeline/withMediaObjectStatus'
 
 interface IProps {
 	className: string
@@ -36,9 +37,20 @@ export const PieceElement = React.forwardRef<HTMLDivElement, React.PropsWithChil
 	}: React.PropsWithChildren<IProps>,
 	ref
 ) {
+	const contentStatus = useContentStatusForItem(piece)
+
 	return (
 		<div
-			className={pieceUiClassNames(piece, className, layer?.type, partId, highlight, undefined, undefined)}
+			className={pieceUiClassNames(
+				piece,
+				contentStatus,
+				className,
+				layer?.type,
+				partId,
+				highlight,
+				undefined,
+				undefined
+			)}
 			data-obj-id={piece.instance._id}
 			onPointerEnter={onPointerEnter}
 			onPointerLeave={onPointerLeave}

meteor/client/ui/SegmentContainer/withResolvedSegment.ts

@@ -35,8 +35,6 @@ import {
 } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { PieceInstances, Segments } from '../../collections'
 import { RundownPlaylistCollectionUtil } from '../../../lib/collections/rundownPlaylistUtil'
-import { ReadonlyDeep } from 'type-fest'
-import { PieceContentStatusObj } from '../../../lib/api/pieceContentStatus'
 import { SegmentOrphanedReason } from '@sofie-automation/corelib/dist/dataModel/Segment'
 
 export interface SegmentUi extends SegmentExtended {
@@ -58,8 +56,6 @@ export type ISourceLayerUi = ISourceLayerExtended
 export interface PieceUi extends PieceExtended {
 	/** This item has already been linked to the parent item of the spanning item group */
 	linked?: boolean
-
-	contentStatus?: ReadonlyDeep<PieceContentStatusObj>
 }
 
 export type MinimalRundown = Pick<Rundown, '_id' | 'name' | 'timing' | 'showStyleBaseId' | 'endOfRundownIsShowBreak'>

meteor/client/ui/SegmentList/LinePartMainPiece/LinePartMainPiece.tsx

@@ -13,8 +13,7 @@ import { getElementDocumentOffset, OffsetPosition } from '../../../utils/positio
 import { getSplitItems } from '../../SegmentContainer/getSplitItems'
 import { PieceElement } from '../../SegmentContainer/PieceElement'
 import { getPieceSteps, PieceMultistepChevron } from '../../SegmentContainer/PieceMultistepChevron'
-import { PieceUi } from '../../SegmentContainer/withResolvedSegment'
-import { withMediaObjectStatus } from '../../SegmentTimeline/withMediaObjectStatus'
+import { useContentStatusForPieceInstance } from '../../SegmentTimeline/withMediaObjectStatus'
 import { PieceHoverInspector } from '../PieceHoverInspector'
 
 interface IProps {
@@ -52,14 +51,16 @@ function widthInBase(pieceMaxDuration: number, timelineBase: number): number {
 }
 
 // TODO: Create useMediaObjectStatus that would set up new subscriptions
-export const LinePartMainPiece = withMediaObjectStatus<IProps, {}>()(function LinePartMainPiece({
+export function LinePartMainPiece({
 	partId,
 	piece,
 	partDuration,
 	timelineBase,
 	capToPartDuration,
 	studio,
-}) {
+}: IProps): JSX.Element {
+	const contentStatus = useContentStatusForPieceInstance(piece.instance)
+
 	const [hover, setHover] = useState(false)
 	const [origin, setOrigin] = useState<OffsetPosition>({ left: 0, top: 0 })
 	const [width, setWidth] = useState(0)
@@ -75,15 +76,13 @@ export const LinePartMainPiece = withMediaObjectStatus<IProps, {}>()(function Li
 		}
 	}, [pieceMaxDuration, timelineBase])
 
-	const pieceUi = piece as PieceUi
-
 	const seek = (piece.instance.piece.content as any).seek ?? 0
 
 	const anomalies = useMemo(
 		() => (
 			<>
-				{pieceUi.contentStatus?.scenes &&
-					pieceUi.contentStatus?.scenes.map(
+				{contentStatus?.scenes &&
+					contentStatus?.scenes.map(
 						(i) =>
 							i < pieceMaxDuration &&
 							i - seek >= 0 && (
@@ -94,8 +93,8 @@ export const LinePartMainPiece = withMediaObjectStatus<IProps, {}>()(function Li
 								></span>
 							)
 					)}
-				{pieceUi.contentStatus?.freezes &&
-					pieceUi.contentStatus?.freezes.map(
+				{contentStatus?.freezes &&
+					contentStatus?.freezes.map(
 						(i) =>
 							i.start < pieceMaxDuration &&
 							i.start - seek >= 0 && (
@@ -109,8 +108,8 @@ export const LinePartMainPiece = withMediaObjectStatus<IProps, {}>()(function Li
 								></span>
 							)
 					)}
-				{pieceUi.contentStatus?.blacks &&
-					pieceUi.contentStatus?.blacks.map(
+				{contentStatus?.blacks &&
+					contentStatus?.blacks.map(
 						(i) =>
 							i.start < pieceMaxDuration &&
 							i.start - seek >= 0 && (
@@ -126,7 +125,7 @@ export const LinePartMainPiece = withMediaObjectStatus<IProps, {}>()(function Li
 					)}
 			</>
 		),
-		[pieceUi.contentStatus?.blacks, pieceUi.contentStatus?.freezes, pieceUi.contentStatus?.scenes]
+		[contentStatus?.blacks, contentStatus?.freezes, contentStatus?.scenes]
 	)
 
 	const onPointerEnter = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -161,7 +160,7 @@ export const LinePartMainPiece = withMediaObjectStatus<IProps, {}>()(function Li
 		setMousePosition(e.pageX - origin.left)
 	}
 
-	const noticeLevel = getNoticeLevelForPieceStatus(piece.contentStatus?.status)
+	const noticeLevel = getNoticeLevelForPieceStatus(contentStatus?.status)
 
 	const hasStepChevron = getPieceSteps(piece)
 
@@ -205,6 +204,7 @@ export const LinePartMainPiece = withMediaObjectStatus<IProps, {}>()(function Li
 					hoverScrubTimePosition={mouseTimePosition * (piece.instance.piece.content.sourceDuration || 0)}
 					hovering={hover}
 					pieceInstance={piece}
+					contentStatus={contentStatus}
 					layer={piece.sourceLayer}
 					originPosition={origin}
 					mousePosition={mousePosition}
@@ -213,7 +213,7 @@ export const LinePartMainPiece = withMediaObjectStatus<IProps, {}>()(function Li
 			)}
 		</PieceElement>
 	)
-})
+}
 
 const ColoredMark = React.memo(function ColoredMark({ color }: { color: string | undefined }) {
 	if (!color) return null

meteor/client/ui/SegmentList/LinePartPieceIndicator/LinePartIndicator.tsx

@@ -5,7 +5,6 @@ import { ISourceLayerExtended } from '../../../lib/RundownResolver'
 import { RundownUtils } from '../../../lib/rundown'
 import { AdLibPieceUi } from '../../../lib/shelf'
 import { PieceUi } from '../../SegmentContainer/withResolvedSegment'
-import { withMediaObjectStatus } from '../../SegmentTimeline/withMediaObjectStatus'
 
 interface IProps {
 	overlay?: (ref: HTMLDivElement | null, setIsOver: (isOver: boolean) => void) => React.ReactNode
@@ -20,7 +19,7 @@ interface IProps {
 	onDoubleClick?: React.EventHandler<React.MouseEvent<HTMLDivElement>>
 }
 
-export const LinePartIndicator = withMediaObjectStatus<IProps, {}>()(function LinePartIndicator({
+export function LinePartIndicator({
 	overlay,
 	count,
 	allSourceLayers,
@@ -29,7 +28,7 @@ export const LinePartIndicator = withMediaObjectStatus<IProps, {}>()(function Li
 	label,
 	onClick: onClickExternal,
 	onDoubleClick,
-}) {
+}: IProps): JSX.Element {
 	let typeClass = thisSourceLayer?.type ? RundownUtils.getSourceLayerClassName(thisSourceLayer.type) : undefined
 	const [element, setElement] = useState<HTMLDivElement | null>(null)
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
@@ -98,4 +97,4 @@ export const LinePartIndicator = withMediaObjectStatus<IProps, {}>()(function Li
 			{isMenuOpen && !!overlay && overlay(element, setIsMenuOpen)}
 		</>
 	)
-})
+}

meteor/client/ui/SegmentList/LinePartSecondaryPiece/LinePartSecondaryPiece.tsx

@@ -6,6 +6,7 @@ import { PieceHoverInspector } from '../PieceHoverInspector'
 import { getElementDocumentOffset, OffsetPosition } from '../../../utils/positions'
 import { PieceUi } from '../../SegmentContainer/withResolvedSegment'
 import StudioContext from '../../RundownView/StudioContext'
+import { useContentStatusForPieceInstance } from '../../SegmentTimeline/withMediaObjectStatus'
 
 interface IProps {
 	piece: PieceExtended
@@ -28,6 +29,8 @@ export const LinePartSecondaryPiece: React.FC<IProps> = React.memo(function Line
 	onClick: incomingOnClick,
 	onDoubleClick: incomingOnDoubleClick,
 }) {
+	const contentStatus = useContentStatusForPieceInstance(piece.instance)
+
 	const pieceEl = useRef<HTMLDivElement>(null)
 	const [hovering, setHover] = useState(false)
 	const [origin, setOrigin] = useState<OffsetPosition>({ left: 0, top: 0 })
@@ -109,6 +112,7 @@ export const LinePartSecondaryPiece: React.FC<IProps> = React.memo(function Line
 							mousePosition={mousePosition}
 							originPosition={origin}
 							pieceInstance={piece}
+							contentStatus={contentStatus}
 							studio={studio}
 						/>
 					)

meteor/client/ui/SegmentList/PieceHoverInspector.tsx

@@ -15,10 +15,13 @@ import { FloatingInspector } from '../FloatingInspector'
 import { L3rdFloatingInspector } from '../FloatingInspectors/L3rdFloatingInspector'
 import { VTFloatingInspector } from '../FloatingInspectors/VTFloatingInspector'
 import { PieceUi } from '../SegmentContainer/withResolvedSegment'
+import { ReadonlyDeep } from 'type-fest'
+import { PieceContentStatusObj } from '../../../lib/api/pieceContentStatus'
 
 export function PieceHoverInspector({
 	studio,
 	pieceInstance,
+	contentStatus,
 	hovering,
 	hoverScrubTimePosition,
 	originPosition,
@@ -27,19 +30,18 @@ export function PieceHoverInspector({
 }: Readonly<{
 	studio: UIStudio
 	pieceInstance: PieceUi
+	contentStatus: ReadonlyDeep<PieceContentStatusObj> | undefined
 	hovering: boolean
 	hoverScrubTimePosition: number
 	originPosition: OffsetPosition
 	mousePosition: number
 	layer: ISourceLayer | undefined
 }>): JSX.Element | null {
-	const status = pieceInstance.contentStatus?.status
-
 	const vtContent = pieceInstance.instance.piece.content as VTContent
 	const graphicsContent = pieceInstance.instance.piece.content as GraphicsContent
 	const transitionContent = pieceInstance.instance.piece.content as TransitionContent
 
-	const noticeLevel = getNoticeLevelForPieceStatus(status)
+	const noticeLevel = getNoticeLevelForPieceStatus(contentStatus?.status)
 
 	switch (layer?.type) {
 		case SourceLayerType.TRANSITION:
@@ -85,7 +87,7 @@ export function PieceHoverInspector({
 		case SourceLayerType.LIVE_SPEAK:
 			return (
 				<VTFloatingInspector
-					status={status ?? PieceStatusCode.UNKNOWN}
+					status={contentStatus?.status ?? PieceStatusCode.UNKNOWN}
 					showMiniInspector={hovering}
 					timePosition={hoverScrubTimePosition}
 					content={vtContent}
@@ -97,10 +99,10 @@ export function PieceHoverInspector({
 					}}
 					typeClass={layer && RundownUtils.getSourceLayerClassName(layer.type)}
 					itemElement={null}
-					noticeMessages={pieceInstance.contentStatus?.messages ?? null}
+					noticeMessages={contentStatus?.messages ?? null}
 					noticeLevel={noticeLevel}
 					studio={studio}
-					previewUrl={pieceInstance.contentStatus?.previewUrl}
+					previewUrl={contentStatus?.previewUrl}
 				/>
 			)
 	}

meteor/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/Renderers/VTRenderer.tsx

@@ -5,6 +5,7 @@ import { IDefaultRendererProps } from './DefaultRenderer'
 import { getNoticeLevelForPieceStatus } from '../../../../../lib/notifications/notifications'
 import { PieceStatusCode } from '@sofie-automation/corelib/dist/dataModel/Piece'
 import { LoopingPieceIcon } from '../../../../lib/ui/icons/looping'
+import { useContentStatusForPieceInstance } from '../../../SegmentTimeline/withMediaObjectStatus'
 
 export function VTRenderer({
 	piece: pieceInstance,
@@ -13,7 +14,7 @@ export function VTRenderer({
 	studio,
 	typeClass,
 }: Readonly<IDefaultRendererProps>): JSX.Element {
-	const status = pieceInstance.contentStatus?.status
+	const contentStatus = useContentStatusForPieceInstance(pieceInstance.instance)
 
 	const vtContent = pieceInstance.instance.piece.content as VTContent
 
@@ -22,7 +23,7 @@ export function VTRenderer({
 	return (
 		<>
 			<VTFloatingInspector
-				status={status || PieceStatusCode.UNKNOWN}
+				status={contentStatus?.status || PieceStatusCode.UNKNOWN}
 				showMiniInspector={!!hovering}
 				timePosition={timePosition}
 				content={vtContent}
@@ -34,10 +35,10 @@ export function VTRenderer({
 				}}
 				typeClass={typeClass}
 				itemElement={null}
-				noticeMessages={pieceInstance.contentStatus?.messages || null}
-				noticeLevel={getNoticeLevelForPieceStatus(status)}
+				noticeMessages={contentStatus?.messages || null}
+				noticeLevel={getNoticeLevelForPieceStatus(contentStatus?.status)}
 				studio={studio}
-				previewUrl={pieceInstance.contentStatus?.previewUrl}
+				previewUrl={contentStatus?.previewUrl}
 			/>
 			{pieceInstance.instance.piece.name}
 			{pieceInstance.instance.piece.content?.loop && (