chore: update StoryBoard view with new previews

Author: Mint de Wit

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

@@ -68,7 +68,7 @@ export function convertSourceLayerItemToPreview(
 	piece: PieceUi,
 	contentStatus?: ReadonlyObjectDeep<PieceContentStatusObj>
 ): PreviewContent[] {
-	if (sourceLayerType === SourceLayerType.VT) {
+	if (sourceLayerType === SourceLayerType.VT || sourceLayerType === SourceLayerType.LIVE_SPEAK) {
 		const content = piece.instance.piece.content as VTContent
 
 		return _.compact([

packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/StoryboardSecondaryPiece.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useContext, useRef, useState } from 'react'
 import { RundownUtils } from '../../../lib/rundown'
 import { ISourceLayer, SourceLayerType } from '@sofie-automation/blueprints-integration'
 import { PieceUi } from '../../SegmentContainer/withResolvedSegment'
@@ -12,6 +12,13 @@ import { SplitsRenderer } from './Renderers/SplitsRenderer'
 import { PieceElement } from '../../SegmentContainer/PieceElement'
 import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
 import { PartId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { useContentStatusForPieceInstance } from '../../SegmentTimeline/withMediaObjectStatus'
+import {
+	convertPreviewToContents,
+	convertSourceLayerItemToPreview,
+	IPreviewPopUpSession,
+	PreviewPopUpContext,
+} from '../../PreviewPopUp/PreviewPopUpContext'
 
 interface IProps {
 	layer: ISourceLayer
@@ -82,10 +89,17 @@ export function StoryboardSecondaryPiece(props: IProps): JSX.Element {
 
 	const typeClass = piece?.sourceLayer?.type ? RundownUtils.getSourceLayerClassName(piece?.sourceLayer?.type) : ''
 
+	const previewContext = useContext(PreviewPopUpContext)
+	const previewSession = useRef<IPreviewPopUpSession | null>(null)
+	const contentStatus = useContentStatusForPieceInstance(piece.instance)
+	const previewContents = piece.instance.piece.content.popUpPreview
+		? convertPreviewToContents(piece.instance.piece.content.popUpPreview, contentStatus)
+		: convertSourceLayerItemToPreview(props.layer.type, piece, contentStatus)
+
 	const onPointerEnter = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') return
 
-		setHovering({ pageX: e.pageX, pageY: e.pageY })
+		// setHovering({ pageX: e.pageX, pageY: e.pageY })
 		if (!element.current) return
 
 		const offset = getElementDocumentOffset(element.current)
@@ -98,12 +112,22 @@ export function StoryboardSecondaryPiece(props: IProps): JSX.Element {
 			width,
 		})
 
+		if (previewContents.length > 0)
+			previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+				startCoordinate: e.screenX,
+			})
+
 		if (onPointerEnterCallback) onPointerEnterCallback(e)
 	}
 
 	const onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
 		setHovering(null)
 
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
+
 		if (onPointerLeaveCallback) onPointerLeaveCallback(e)
 	}
 

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useContext, useRef, useState } from 'react'
 import { ISourceLayer } from '@sofie-automation/blueprints-integration'
 import { PieceExtended } from '../../../lib/RundownResolver'
 import { getElementDocumentOffset, OffsetPosition } from '../../../utils/positions'
@@ -7,6 +7,13 @@ import { ThumbnailRenderer } from './Renderers/ThumbnailRendererFactory'
 import { PieceElement } from '../../SegmentContainer/PieceElement'
 import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
 import { PartId, PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { useContentStatusForPieceInstance } from '../../SegmentTimeline/withMediaObjectStatus'
+import {
+	convertPreviewToContents,
+	convertSourceLayerItemToPreview,
+	IPreviewPopUpSession,
+	PreviewPopUpContext,
+} from '../../PreviewPopUp/PreviewPopUpContext'
 
 interface IProps {
 	partId: PartId
@@ -40,11 +47,21 @@ export function StoryboardPartThumbnailInner({
 	const [mousePosition, setMousePosition] = useState(0)
 	const thumbnailEl = useRef<HTMLDivElement>(null)
 
+	const previewContext = useContext(PreviewPopUpContext)
+	const previewSession = useRef<IPreviewPopUpSession | null>(null)
+
+	const contentStatus = useContentStatusForPieceInstance(piece.instance)
+	const previewContents = piece.instance.piece.content.popUpPreview
+		? convertPreviewToContents(piece.instance.piece.content.popUpPreview, contentStatus)
+		: layer
+		? convertSourceLayerItemToPreview(layer.type, piece, contentStatus)
+		: []
+
 	const onPointerEnter = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') {
 			return
 		}
-		setHover(true)
+		// setHover(true)
 
 		const newOffset = thumbnailEl.current && getElementDocumentOffset(thumbnailEl.current)
 		if (newOffset !== null) {
@@ -58,13 +75,24 @@ export function StoryboardPartThumbnailInner({
 		if (newHeight !== null) {
 			setHeight(newHeight)
 		}
+
+		if (previewContents.length > 0)
+			previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+				time: mousePosition * (piece.instance.piece.content.sourceDuration || 0),
+				startCoordinate: e.screenX,
+			})
 	}
 
 	const onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') {
 			return
 		}
 		setHover(false)
+
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
 	}
 
 	const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -73,6 +101,9 @@ export function StoryboardPartThumbnailInner({
 		}
 		const newMousePosition = Math.max(0, Math.min(1, (e.pageX - origin.left - 5) / (width - 10)))
 		setMousePosition(newMousePosition)
+		previewSession.current?.setPointerTime(
+			mousePosition * (piece.instance.piece.content.sourceDuration ?? contentStatus?.contentDuration ?? 0)
+		)
 	}
 
 	return (