wip: additional layer info on HoverPreviews

Author: olzzon

meteor/server/publications/pieceContentStatusUI/checkPieceContentStatus.ts

@@ -240,7 +240,7 @@ export async function checkPieceContentStatusAndDependencies(
 				blacks: [],
 				scenes: [],
 
-				thumbnailUrl: undefined,
+				thumbnailUrl: '/dev/fakeThumbnail.png',
 				previewUrl: '/dev/fakePreview.mp4',
 
 				packageName: null,

packages/blueprints-integration/src/content.ts

@@ -8,6 +8,54 @@ export type WithTimeline<T extends BaseContent> = T & {
 	timelineObjects: TimelineObjectCoreExt<TSR.TSRTimelineContent>[]
 }
 
+// The PreviewContent types are a partly replica of the types in PreviewPopUpContext.tsx
+export type PreviewContent =
+	| {
+			type: 'iframe'
+			href: string
+			postMessage?: any
+			dimensions?: { width: number; height: number }
+	  }
+	| {
+			type: 'image'
+			src: string
+	  }
+	| {
+			type: 'video'
+			src: string
+	  }
+	| {
+			type: 'script'
+			script?: string
+			firstWords?: string
+			lastWords?: string
+			comment?: string
+			lastModified?: number
+	  }
+	| {
+			type: 'title'
+			content: string
+	  }
+	| {
+			type: 'inOutWords'
+			in?: string
+			out: string
+	  }
+	| {
+			type: 'layerInfo'
+			layerType: SourceLayerType
+			text: Array<string>
+			inTime?: number | string
+			outTime?: number | string
+	  }
+	| {
+			type: 'separationLine'
+	  }
+	| {
+			type: 'data'
+			content: { key: string; value: string }[]
+	  }
+
 export interface BaseContent {
 	editable?: BaseEditableParameters
 
@@ -25,6 +73,10 @@ export interface BaseContent {
 	 * Overwrite any default hover previews in Sofie
 	 */
 	popUpPreview?: PopupPreview
+	/**
+	 * Add custom content preview content
+	 */
+	additionalPreviewContent?: Array<PreviewContent>
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

packages/webui/public/dev/fakeThumbnail.png

@@ -11,6 +11,9 @@
 	}
 
 	.dashboard-panel__panel__button {
+		margin-top: 10px;
+		height: 110px;
+		max-width: 150px !important;
 		> .dashboard-panel__panel__button__content {
 			display: grid;
 			grid-template-columns: 1fr min-content;
@@ -31,7 +34,7 @@
 
 			> .dashboard-panel__panel__button__thumbnail {
 				position: relative;
-				height: auto;
+				height: 80px;
 				z-index: 1;
 				overflow: hidden;
 				grid-column: auto / span 2;

packages/webui/src/client/styles/shelf/dashboard-rundownView.scss

@@ -56,6 +56,16 @@
 		padding: 5px;
 	}
 
+	.preview-popUp__element-with-time-info {
+		width: 100%;
+		
+		.preview-popUp__element-with-time-info__layer-color {
+			width: 20px;
+			font-size: 1.2em;
+			@include item-type-colors();
+		}
+	}
+
 	.preview-popUp__warning {
 		width: 100%;
 

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import { PreviewContent } from './PreviewPopUpContext.js'
 import { WarningIconSmall } from '../../lib/ui/icons/notifications.js'
 import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
 import { TFunction, useTranslation } from 'react-i18next'
@@ -11,9 +10,11 @@ import { RundownUtils } from '../../lib/rundown.js'
 import { PieceInstancePiece } from '@sofie-automation/corelib/dist/dataModel/PieceInstance'
 import { ReadonlyObjectDeep } from 'type-fest/source/readonly-deep'
 import { PieceLifespan } from '@sofie-automation/blueprints-integration'
+import { LayerInfoPreview } from './Previews/LayerInfoPreview.js'
+import { PreviewContentUI } from './PreviewPopUpContext.js'
 
 interface PreviewPopUpContentProps {
-	content: PreviewContent
+	content: PreviewContentUI
 	time: number | null
 }
 
@@ -59,6 +60,10 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
 					</table>
 				</div>
 			)
+		case 'layerInfo':
+			return <LayerInfoPreview {...content} />
+		case 'separationLine':
+			return <hr className="separation-line" />
 		case 'boxLayout':
 			return <BoxLayoutPreview content={content} />
 		case 'warning':

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

@@ -6,6 +6,7 @@ import {
 	JSONBlobParse,
 	NoraPayload,
 	PieceLifespan,
+	PreviewContent,
 	PreviewType,
 	ScriptContent,
 	SourceLayerType,
@@ -33,11 +34,11 @@ export function convertSourceLayerItemToPreview(
 	item: ReadonlyObjectDeep<PieceInstancePiece> | IAdLibListItem,
 	contentStatus?: ReadonlyObjectDeep<PieceContentStatusObj>,
 	timeAsRendered?: { in?: number | null; dur?: number | null }
-): { contents: PreviewContent[]; options: Readonly<Partial<PreviewRequestOptions>> } {
+): { contents: PreviewContentUI[]; options: Readonly<Partial<PreviewRequestOptions>> } {
 	// first try to read the popup preview
 	if (item.content.popUpPreview) {
 		const popupPreview = item.content.popUpPreview
-		const contents: PreviewContent[] = []
+		const contents: PreviewContentUI[] = []
 		const options: Partial<PreviewRequestOptions> = {}
 
 		if (popupPreview.name) {
@@ -122,8 +123,12 @@ export function convertSourceLayerItemToPreview(
 			}
 		}
 
+		item.content.additionalPreviewContent?.forEach((content) => {
+			contents.push(content as PreviewContentUI)
+		})
+
 		if (popupPreview.warnings) {
-			contents.push(...popupPreview.warnings.map((w): PreviewContent => ({ type: 'warning', content: w.reason })))
+			contents.push(...popupPreview.warnings.map((w): PreviewContentUI => ({ type: 'warning', content: w.reason })))
 		}
 
 		return { contents, options }
@@ -136,7 +141,7 @@ export function convertSourceLayerItemToPreview(
 		const content = item.content as VTContent
 
 		return {
-			contents: _.compact<(PreviewContent | undefined)[]>([
+			contents: _.compact<(PreviewContentUI | undefined)[]>([
 				{
 					type: 'title',
 					content: content.fileName,
@@ -159,11 +164,11 @@ export function convertSourceLayerItemToPreview(
 								src: contentStatus.thumbnailUrl,
 							}
 						: undefined,
-				...(contentStatus?.messages?.map<PreviewContent>((m) => ({
+				...(contentStatus?.messages?.map<PreviewContentUI>((m) => ({
 					type: 'warning',
 					content: m as any,
 				})) || []),
-			]) as PreviewContent[],
+			]) as PreviewContentUI[],
 			options: {
 				size: contentStatus?.previewUrl ? 'large' : undefined,
 			},
@@ -220,7 +225,7 @@ export function convertSourceLayerItemToPreview(
 						current: item.content.step.current,
 						count: item.content.step.count,
 					},
-				]) as PreviewContent[],
+				]) as PreviewContentUI[],
 				options: { size: 'large' },
 			}
 		} catch (e) {
@@ -237,7 +242,7 @@ export function convertSourceLayerItemToPreview(
 						current: item.content.step.current,
 						count: item.content.step.count,
 					},
-				]) as PreviewContent[],
+				]) as PreviewContentUI[],
 				options: {},
 			}
 		}
@@ -287,43 +292,9 @@ export function convertSourceLayerItemToPreview(
 
 	return { contents: [], options: {} }
 }
-
-export type PreviewContent =
-	| {
-			type: 'iframe'
-			href: string
-			postMessage?: any
-			dimensions?: { width: number; height: number }
-	  }
-	| {
-			type: 'image'
-			src: string
-	  }
-	| {
-			type: 'video'
-			src: string
-	  }
-	| {
-			type: 'script'
-			script?: string
-			firstWords?: string
-			lastWords?: string
-			comment?: string
-			lastModified?: number
-	  }
-	| {
-			type: 'title'
-			content: string
-	  }
-	| {
-			type: 'inOutWords'
-			in?: string
-			out: string
-	  }
-	| {
-			type: 'data'
-			content: { key: string; value: string }[]
-	  }
+// PreviewContentUI should be the same as PreviewContent, but we need to extend it with some more types:
+export type PreviewContentUI =
+	| PreviewContent
 	| {
 			type: 'boxLayout'
 			boxSourceConfiguration: ReadonlyDeep<(SplitsContentBoxContent & SplitsContentBoxProperties)[]>
@@ -351,7 +322,7 @@ export interface IPreviewPopUpSession {
 	 * Update the open preview with new content or modify the content already being previewed, such as change current showing
 	 * time in the video, etc.
 	 */
-	readonly update: (content?: PreviewContent[]) => void
+	readonly update: (content?: PreviewContentUI[]) => void
 	/**
 	 * Set the time that the current pointer position is representing in the scope of the preview contents
 	 */
@@ -390,7 +361,7 @@ export interface IPreviewPopUpContext {
 	 */
 	requestPreview(
 		anchor: HTMLElement | VirtualElement,
-		content: PreviewContent[],
+		content: PreviewContentUI[],
 		opts?: PreviewRequestOptions
 	): IPreviewPopUpSession
 }
@@ -415,7 +386,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 	const previewRef = useRef<PreviewPopUpHandle>(null)
 
 	const [previewSession, setPreviewSession] = useState<PreviewSession | null>(null)
-	const [previewContent, setPreviewContent] = useState<PreviewContent[] | null>(null)
+	const [previewContent, setPreviewContent] = useState<PreviewContentUI[] | null>(null)
 	const [t, setTime] = useState<number | null>(null)
 
 	const context: IPreviewPopUpContext = {

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

@@ -0,0 +1,39 @@
+import { PreviewContent } from '@sofie-automation/blueprints-integration'
+import { RundownUtils } from '../../../lib/rundown'
+import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+
+type layerInfoContent = Extract<PreviewContent, { type: 'layerInfo' }>
+
+export function LayerInfoPreview(content: layerInfoContent): React.ReactElement {
+	const { t } = useTranslation()
+	const sourceLayerClassName =
+		content.layerType !== undefined ? RundownUtils.getSourceLayerClassName(content.layerType) : undefined
+
+	return (
+		<div className="preview-popUp__element-with-time-info">
+			<span className={classNames('preview-popUp__element-with-time-info__layer-color', sourceLayerClassName)}>
+				{'◼️'}
+			</span>
+			{content.text.map((line, index) => (
+				<div key={index} className="mini-inspector__full-text">
+					{line}
+				</div>
+			))}
+			<div className="preview-popUp__timing">
+				{content.inTime && (
+					<>
+						<span className="label">IN: </span> {RundownUtils.formatTimeToShortTime((content.inTime as any as number) || 0)}
+					</>
+				)}
+				&nbsp;{' '}
+				{content.outTime && (
+					<>
+						<span className="label">{t('DURATION: ')}</span>
+						{RundownUtils.formatTimeToShortTime((content.outTime as any as number) || 0)}
+					</>
+				)}
+			</div>
+		</div>
+	)
+}