chore: add timing to l3d preview

Author: Mint de Wit

packages/blueprints-integration/src/previews.ts

@@ -33,6 +33,7 @@ export interface TablePreview extends PreviewBase {
 	type: PreviewType.Table
 
 	entries: { key: string; value: string }[]
+	displayTiming: boolean
 }
 export interface ScriptPreview extends PreviewBase {
 	type: PreviewType.Script

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

@@ -277,4 +277,21 @@
 		padding: 5px;
 		font-weight: 700;
 	}
+
+	.preview-popUp__timing {
+		padding: 5px;
+
+		overflow: none;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+
+		font-feature-settings: 'liga' off;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 100%; /* 15px */
+
+		.label {
+			font-weight: 300;
+		}
+	}
 }

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContent.tsx

@@ -2,11 +2,15 @@ import React from 'react'
 import { PreviewContent } from './PreviewPopUpContext'
 import { WarningIconSmall } from '../../lib/ui/icons/notifications'
 import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
-import { useTranslation } from 'react-i18next'
+import { TFunction, useTranslation } from 'react-i18next'
 import { VTPreviewElement } from './Previews/VTPreview'
 import { IFramePreview } from './Previews/IFramePreview'
 import { BoxLayoutPreview } from './Previews/BoxLayoutPreview'
 import { ScriptPreview } from './Previews/ScriptPreview'
+import { RundownUtils } from '../../lib/rundown'
+import { PieceInstancePiece } from '@sofie-automation/corelib/dist/dataModel/PieceInstance'
+import { ReadonlyObjectDeep } from 'type-fest/source/readonly-deep'
+import { PieceLifespan } from '@sofie-automation/blueprints-integration'
 
 interface PreviewPopUpContentProps {
 	content: PreviewContent
@@ -72,7 +76,49 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
 					{content.total && '/' + content.total}
 				</div>
 			)
+		case 'timing':
+			return (
+				<div className="preview-popUp__timing">
+					<span className="label">IN: </span> {RundownUtils.formatTimeToShortTime(content.timeAsRendered?.in || 0)}
+					<span className="label"> DURATION: </span>
+					{getDurationText(t, content.lifespan, content.timeAsRendered, content.enable)}
+				</div>
+			)
 		default:
 			return <></>
 	}
 }
+
+function getDurationText(
+	t: TFunction,
+	lifespan: PieceLifespan,
+	timeAsRendered?: { in?: number; dur?: number },
+	enable?: ReadonlyObjectDeep<PieceInstancePiece>['enable']
+): string {
+	if (!timeAsRendered?.dur && !enable?.duration) {
+		return getLifeSpanText(t, lifespan)
+	} else {
+		return RundownUtils.formatTimeToShortTime(
+			timeAsRendered?.dur ?? (typeof enable?.duration === 'number' ? enable?.duration : 0)
+		)
+	}
+}
+
+function getLifeSpanText(t: TFunction, lifespan: PieceLifespan): string {
+	switch (lifespan) {
+		case PieceLifespan.WithinPart:
+			return t('Until next take')
+		case PieceLifespan.OutOnSegmentChange:
+			return t('Until next segment')
+		case PieceLifespan.OutOnSegmentEnd:
+			return t('Until end of segment')
+		case PieceLifespan.OutOnRundownChange:
+			return t('Until next rundown')
+		case PieceLifespan.OutOnRundownEnd:
+			return t('Until end of rundown')
+		case PieceLifespan.OutOnShowStyleEnd:
+			return t('Until end of showstyle')
+		default:
+			return ''
+	}
+}

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx

@@ -5,15 +5,17 @@ import { PreviewPopUpContent } from './PreviewPopUpContent'
 import {
 	JSONBlobParse,
 	NoraPayload,
+	PieceLifespan,
 	PreviewType,
 	ScriptContent,
 	SourceLayerType,
 	SplitsContent,
 	SplitsContentBoxContent,
 	SplitsContentBoxProperties,
+	TransitionContent,
 	VTContent,
 } from '@sofie-automation/blueprints-integration'
-import { ReadonlyObjectDeep } from 'type-fest/source/readonly-deep'
+import { ReadonlyDeep, ReadonlyObjectDeep } from 'type-fest/source/readonly-deep'
 import { PieceContentStatusObj } from '@sofie-automation/meteor-lib/dist/api/pieceContentStatus'
 import { ITranslatableMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
 import _ from 'underscore'
@@ -28,7 +30,8 @@ type VirtualElement = {
 export function convertSourceLayerItemToPreview(
 	sourceLayerType: SourceLayerType | undefined,
 	item: ReadonlyObjectDeep<PieceInstancePiece> | IAdLibListItem,
-	contentStatus?: ReadonlyObjectDeep<PieceContentStatusObj>
+	contentStatus?: ReadonlyObjectDeep<PieceContentStatusObj>,
+	timeAsRendered?: { in?: number | null; dur?: number | null }
 ): PreviewContent[] {
 	// first try to read the popup preview
 	if (item.content.popUpPreview) {
@@ -79,6 +82,14 @@ export function convertSourceLayerItemToPreview(
 						type: 'data',
 						content: [...popupPreview.preview.entries],
 					})
+					if (popupPreview.preview.displayTiming) {
+						contents.push({
+							type: 'timing',
+							timeAsRendered,
+							enable: 'enable' in item ? item.enable : undefined,
+							lifespan: item.lifespan,
+						})
+					}
 					break
 				case PreviewType.VT:
 					if (contentStatus?.previewUrl) {
@@ -194,7 +205,13 @@ export function convertSourceLayerItemToPreview(
 				type: 'title',
 				content: item.name,
 			},
-			// todo - item inpoint and duration
+			// note - this may have contained some NORA data before but idk the details on how to add that back
+			{
+				type: 'timing',
+				timeAsRendered,
+				enable: 'enable' in item ? item.enable : undefined,
+				lifespan: item.lifespan,
+			},
 		]
 	} else if (sourceLayerType === SourceLayerType.SCRIPT) {
 		const content = item.content as ScriptContent
@@ -210,6 +227,9 @@ export function convertSourceLayerItemToPreview(
 	} else if (sourceLayerType === SourceLayerType.SPLITS) {
 		const content = item.content as SplitsContent
 		return [{ type: 'boxLayout', boxSourceConfiguration: content.boxSourceConfiguration }]
+	} else if (sourceLayerType === SourceLayerType.TRANSITION) {
+		const content = item.content as TransitionContent
+		if (content.preview) return [{ type: 'image', src: '/api/private/blueprints/assets/' + content.preview }]
 	}
 
 	return []
@@ -252,7 +272,7 @@ export type PreviewContent =
 	  }
 	| {
 			type: 'boxLayout'
-			boxSourceConfiguration: (SplitsContentBoxContent & SplitsContentBoxProperties)[]
+			boxSourceConfiguration: ReadonlyDeep<(SplitsContentBoxContent & SplitsContentBoxProperties)[]>
 			showLabels?: boolean
 			backgroundArt?: string
 	  }
@@ -265,6 +285,12 @@ export type PreviewContent =
 			current: number
 			total?: number
 	  }
+	| {
+			type: 'timing'
+			timeAsRendered?: { in?: number | null; dur?: number | null }
+			enable?: ReadonlyObjectDeep<PieceInstancePiece>['enable']
+			lifespan: PieceLifespan
+	  }
 
 export interface IPreviewPopUpSession {
 	/**

packages/webui/src/client/ui/PreviewPopUp/Previews/VTPreview.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { StyledTimecode } from '../../../lib/StyledTimecode'
 import classNames from 'classnames'
+import StudioContext from '../../RundownView/StudioContext'
 
 interface VTPreviewProps {
 	content: {
@@ -12,6 +13,7 @@ interface VTPreviewProps {
 	}
 	time: number | null
 }
+
 function setVideoElementPosition(
 	vEl: HTMLVideoElement,
 	timePosition: number,
@@ -28,8 +30,10 @@ function setVideoElementPosition(
 	}
 	vEl.currentTime = targetTime / 1000
 }
+
 export function VTPreviewElement({ content, time }: VTPreviewProps): React.ReactElement {
 	const videoElement = useRef<HTMLVideoElement>(null)
+	const studioContext = useContext(StudioContext)
 
 	useEffect(() => {
 		if (!videoElement.current) return
@@ -45,16 +49,17 @@ export function VTPreviewElement({ content, time }: VTPreviewProps): React.React
 
 	const itemDuration = content.itemDuration ?? 0
 	const offsetTimePosition = (time ?? 0) + (content.seek ?? 0)
-	const showFrameMarker = offsetTimePosition === 0 || (itemDuration > 0 && offsetTimePosition >= itemDuration)
+	// note - we should probably be following the content's framerate for this
+	const showFrameMarker = offsetTimePosition <= 20 || (itemDuration > 0 && offsetTimePosition >= itemDuration - 20)
 
-	// todo - add studio settings. I _really_ don't look forward to prop drilling these....
 	return (
 		<div className="preview-popUp__video">
 			{showFrameMarker && (
 				<div
 					className={classNames('preview-popUp__video-frame-marker', {
-						'preview-popUp__video-frame-marker--first-frame': offsetTimePosition === 0,
-						'preview-popUp__video-frame-marker--last-frame': itemDuration > 0 && offsetTimePosition >= itemDuration,
+						'preview-popUp__video-frame-marker--first-frame': offsetTimePosition <= 20,
+						'preview-popUp__video-frame-marker--last-frame':
+							itemDuration > 0 && offsetTimePosition >= itemDuration - 20,
 					})}
 				>
 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -64,7 +69,7 @@ export function VTPreviewElement({ content, time }: VTPreviewProps): React.React
 			)}
 			<video src={content.src} ref={videoElement} crossOrigin="anonymous" playsInline={true} muted={true} />
 			<div className="time">
-				<StyledTimecode studioSettings={undefined} time={Math.round(time ?? 0)} />
+				<StyledTimecode studioSettings={studioContext?.settings} time={Math.round(time ?? 0)} />
 			</div>
 		</div>
 	)

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

@@ -3243,24 +3243,26 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 		renderDetachedShelf() {
 			return (
 				<RundownTimingProvider playlist={this.props.playlist} defaultDuration={Settings.defaultDisplayDuration}>
-					<ErrorBoundary>
-						<Shelf
-							buckets={this.props.buckets}
-							isExpanded={this.state.isInspectorShelfExpanded}
-							onChangeExpanded={this.onShelfChangeExpanded}
-							hotkeys={this.defaultHotkeys(this.props.t)}
-							playlist={this.props.playlist}
-							showStyleBase={this.props.showStyleBase}
-							showStyleVariant={this.props.showStyleVariant}
-							studioMode={this.props.userPermissions.studio}
-							onChangeBottomMargin={this.onChangeBottomMargin}
-							rundownLayout={this.state.shelfLayout}
-							studio={this.props.studio}
-							fullViewport={true}
-							shelfDisplayOptions={this.props.shelfDisplayOptions}
-							bucketDisplayFilter={this.props.bucketDisplayFilter}
-						/>
-					</ErrorBoundary>
+					<PreviewPopUpContextProvider>
+						<ErrorBoundary>
+							<Shelf
+								buckets={this.props.buckets}
+								isExpanded={this.state.isInspectorShelfExpanded}
+								onChangeExpanded={this.onShelfChangeExpanded}
+								hotkeys={this.defaultHotkeys(this.props.t)}
+								playlist={this.props.playlist}
+								showStyleBase={this.props.showStyleBase}
+								showStyleVariant={this.props.showStyleVariant}
+								studioMode={this.props.userPermissions.studio}
+								onChangeBottomMargin={this.onChangeBottomMargin}
+								rundownLayout={this.state.shelfLayout}
+								studio={this.props.studio}
+								fullViewport={true}
+								shelfDisplayOptions={this.props.shelfDisplayOptions}
+								bucketDisplayFilter={this.props.bucketDisplayFilter}
+							/>
+						</ErrorBoundary>
+					</PreviewPopUpContextProvider>
 					<ErrorBoundary>{this.renderSorensenContext()}</ErrorBoundary>
 				</RundownTimingProvider>
 			)

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

@@ -30,7 +30,10 @@ export function LinePartScriptPiece({ pieces }: IProps): JSX.Element {
 	const contentStatus = thisPieces[0] && useContentStatusForPieceInstance(thisPieces[0].instance)
 	const previewContents =
 		thisPieces[0] &&
-		convertSourceLayerItemToPreview(thisPieces[0].sourceLayer?.type, thisPieces[0].instance.piece, contentStatus)
+		convertSourceLayerItemToPreview(thisPieces[0].sourceLayer?.type, thisPieces[0].instance.piece, contentStatus, {
+			in: thisPieces[0].renderedInPoint,
+			dur: thisPieces[0].renderedDuration,
+		})
 
 	function onMouseEnter(e: React.PointerEvent<HTMLDivElement>) {
 		// setHover(true)

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

@@ -48,7 +48,12 @@ export const LinePartSecondaryPiece: React.FC<IProps> = React.memo(function Line
 
 	const previewContext = useContext(PreviewPopUpContext)
 	const previewSession = useRef<IPreviewPopUpSession | null>(null)
-	const previewContents = convertSourceLayerItemToPreview(piece.sourceLayer?.type, piece.instance.piece, contentStatus)
+	const previewContents = convertSourceLayerItemToPreview(
+		piece.sourceLayer?.type,
+		piece.instance.piece,
+		contentStatus,
+		{ in: piece.renderedInPoint, dur: piece.renderedDuration }
+	)
 
 	const onPointerEnter = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') {

packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnailInner.tsx

@@ -56,7 +56,7 @@ export function StoryboardPartThumbnailInner({
 		if (e.pointerType !== 'mouse') {
 			return
 		}
-		// setHover(true)
+		setHover(true)
 
 		const newOffset = thumbnailEl.current && getElementDocumentOffset(thumbnailEl.current)
 		if (newOffset !== null) {

packages/webui/src/client/ui/SegmentTimeline/Parts/InvalidPartCover.tsx

@@ -1,23 +1,39 @@
-import React from 'react'
+import React, { useContext, useRef } from 'react'
 import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
+import { IPreviewPopUpSession, PreviewPopUpContext } from '../../PreviewPopUp/PreviewPopUpContext'
 
 interface IProps {
 	className?: string
 	part: DBPart
 	align?: 'start' | 'center' | 'end'
 }
 
-export function InvalidPartCover({ className }: Readonly<IProps>): JSX.Element {
+export function InvalidPartCover({ className, part }: Readonly<IProps>): JSX.Element {
 	const element = React.createRef<HTMLDivElement>()
 
-	function onMouseEnter() {
+	const previewContext = useContext(PreviewPopUpContext)
+	const previewSession = useRef<IPreviewPopUpSession | null>(null)
+
+	function onMouseEnter(e: React.MouseEvent<HTMLDivElement>) {
 		if (!element.current) {
 			return
 		}
+
+		if (part.invalidReason?.message && !previewSession.current) {
+			previewSession.current = previewContext.requestPreview(e.target as HTMLDivElement, [
+				{
+					type: 'warning',
+					content: part.invalidReason?.message,
+				},
+			])
+		}
 	}
 
 	function onMouseLeave() {
-		//
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
 	}
 
 	return (