chore: update list view with new previews

Author: Mint de Wit

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

@@ -1,5 +1,5 @@
 import { EvsContent, SourceLayerType } from '@sofie-automation/blueprints-integration'
-import React, { useMemo, useRef, useState } from 'react'
+import React, { useContext, useMemo, useRef, useState } from 'react'
 import { PieceExtended } from '../../../lib/RundownResolver'
 // TODO: Move to a shared lib file
 import { PartId, PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
@@ -15,6 +15,12 @@ import { PieceElement } from '../../SegmentContainer/PieceElement'
 import { getPieceSteps, PieceMultistepChevron } from '../../SegmentContainer/PieceMultistepChevron'
 import { useContentStatusForPieceInstance } from '../../SegmentTimeline/withMediaObjectStatus'
 import { PieceHoverInspector } from '../PieceHoverInspector'
+import {
+	convertPreviewToContents,
+	convertSourceLayerItemToPreview,
+	IPreviewPopUpSession,
+	PreviewPopUpContext,
+} from '../../PreviewPopUp/PreviewPopUpContext'
 
 interface IProps {
 	partId: PartId
@@ -128,11 +134,25 @@ export function LinePartMainPiece({
 		[contentStatus?.blacks, contentStatus?.freezes, contentStatus?.scenes]
 	)
 
+	const previewContext = useContext(PreviewPopUpContext)
+	const previewSession = useRef<IPreviewPopUpSession | null>(null)
+	const previewContents = piece.instance.piece.content.popUpPreview
+		? convertPreviewToContents(piece.instance.piece.content.popUpPreview, contentStatus)
+		: piece.sourceLayer
+		? convertSourceLayerItemToPreview(piece.sourceLayer?.type, piece, contentStatus)
+		: []
+
 	const onPointerEnter = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') {
 			return
 		}
-		setHover(true)
+		// setHover(true)
+
+		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 newOffset = pieceEl.current && getElementDocumentOffset(pieceEl.current)
 		if (newOffset !== null) {
@@ -149,6 +169,10 @@ export function LinePartMainPiece({
 			return
 		}
 		setHover(false)
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
 	}
 
 	const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -158,6 +182,10 @@ export function LinePartMainPiece({
 		const newMousePosition = Math.max(0, Math.min(1, (e.pageX - origin.left - 5) / (width - 10)))
 		setMouseTimePosition(newMousePosition)
 		setMousePosition(e.pageX - origin.left)
+
+		previewSession.current?.setPointerTime(
+			newMousePosition * (piece.instance.piece.content.sourceDuration ?? contentStatus?.contentDuration ?? 0)
+		)
 	}
 
 	const noticeLevel = getNoticeLevelForPieceStatus(contentStatus?.status)

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

@@ -1,8 +1,15 @@
 import { ScriptContent, SourceLayerType } from '@sofie-automation/blueprints-integration'
-import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { PieceExtended } from '../../../lib/RundownResolver'
 import { IFloatingInspectorPosition } from '../../FloatingInspectors/IFloatingInspectorPosition'
 import { MicFloatingInspector } from '../../FloatingInspectors/MicFloatingInspector'
+import {
+	PreviewPopUpContext,
+	IPreviewPopUpSession,
+	convertPreviewToContents,
+	convertSourceLayerItemToPreview,
+} from '../../PreviewPopUp/PreviewPopUpContext'
+import { useContentStatusForPieceInstance } from '../../SegmentTimeline/withMediaObjectStatus'
 
 interface IProps {
 	pieces: PieceExtended[]
@@ -40,12 +47,31 @@ export function LinePartScriptPiece({ pieces }: IProps): JSX.Element {
 		})
 	}, [])
 
-	function onMouseEnter() {
-		setHover(true)
+	const previewContext = useContext(PreviewPopUpContext)
+	const previewSession = useRef<IPreviewPopUpSession | null>(null)
+	const contentStatus = thisPieces[0] && useContentStatusForPieceInstance(thisPieces[0].instance)
+	const previewContents =
+		thisPieces[0] &&
+		(thisPieces[0].instance.piece.content.popUpPreview
+			? convertPreviewToContents(thisPieces[0].instance.piece.content.popUpPreview, contentStatus)
+			: thisPieces[0].sourceLayer
+			? convertSourceLayerItemToPreview(thisPieces[0].sourceLayer?.type, thisPieces[0], contentStatus)
+			: [])
+
+	function onMouseEnter(e: React.PointerEvent<HTMLDivElement>) {
+		// setHover(true)
+		if (previewContents && previewContents.length > 0)
+			previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+				startCoordinate: e.screenX,
+			})
 	}
 
 	function onMouseLeave() {
 		setHover(false)
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
 	}
 
 	const hasPiece = thisPieces[0]

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

@@ -1,12 +1,18 @@
 import classNames from 'classnames'
-import React, { CSSProperties, useCallback, useMemo, useRef, useState } from 'react'
+import React, { CSSProperties, useCallback, useContext, useMemo, useRef, useState } from 'react'
 import { PieceExtended } from '../../../lib/RundownResolver'
 import { RundownUtils } from '../../../lib/rundown'
 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'
+import {
+	PreviewPopUpContext,
+	IPreviewPopUpSession,
+	convertPreviewToContents,
+	convertSourceLayerItemToPreview,
+} from '../../PreviewPopUp/PreviewPopUpContext'
 
 interface IProps {
 	piece: PieceExtended
@@ -47,11 +53,24 @@ export const LinePartSecondaryPiece: React.FC<IProps> = React.memo(function Line
 		}
 	}, [piece, partDuration, timelineBase])
 
+	const previewContext = useContext(PreviewPopUpContext)
+	const previewSession = useRef<IPreviewPopUpSession | null>(null)
+	const previewContents = piece.instance.piece.content.popUpPreview
+		? convertPreviewToContents(piece.instance.piece.content.popUpPreview, contentStatus)
+		: piece.sourceLayer
+		? convertSourceLayerItemToPreview(piece.sourceLayer?.type, piece, contentStatus)
+		: []
+
 	const onPointerEnter = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') {
 			return
 		}
-		setHover(true)
+		// setHover(true)
+
+		if (previewContents.length > 0)
+			previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
+				startCoordinate: e.screenX,
+			})
 
 		const newOffset = pieceEl.current && getElementDocumentOffset(pieceEl.current)
 		if (newOffset !== null) {
@@ -64,6 +83,10 @@ export const LinePartSecondaryPiece: React.FC<IProps> = React.memo(function Line
 			return
 		}
 		setHover(false)
+		if (previewSession.current) {
+			previewSession.current.close()
+			previewSession.current = null
+		}
 	}
 
 	const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {