Merge pull request #1299 from nrkno/fix/sofie-3542/rundown-view-crash

Author: jstarpl

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 renamed to 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>
 	)
 }