chore: cleanup previews data structure

Author: mint-dewit

packages/blueprints-integration/src/content.ts

@@ -2,7 +2,7 @@ import { JSONBlob } from '@sofie-automation/shared-lib/dist/lib/JSONBlob'
 import { Time } from './common'
 import { TSR, TimelineObjectCoreExt } from './timeline'
 import { SourceLayerType } from '@sofie-automation/shared-lib/dist/core/model/ShowStyle'
-import { Previews } from './previews'
+import { PopupPreview } from './previews'
 
 export type WithTimeline<T extends BaseContent> = T & {
 	timelineObjects: TimelineObjectCoreExt<TSR.TSRTimelineContent>[]
@@ -21,9 +21,10 @@ export interface BaseContent {
 	ignoreFreezeFrame?: boolean
 	ignoreAudioFormat?: boolean
 
-	popUpPreview?: Previews
-	// note - should we allow multiple previews?
-	// note - what properties can be removed from the main content object now?
+	/**
+	 * Overwrite any default hover previews in Sofie
+	 */
+	popUpPreview?: PopupPreview
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/blueprints-integration/src/previews.ts

@@ -1,13 +1,13 @@
+import { SplitsContentBoxContent, SplitsContentBoxProperties } from './content'
 import { NoteSeverity } from './lib'
+import { ITranslatableMessage } from './translations'
 
-export type Previews =
-	| InvalidPreview
-	| TablePreview
-	| ScriptPreview
-	| HTMLPreview
-	| SplitPreview
-	| VTPreview
-	| BlueprintImagePreview
+export interface PopupPreview<P extends Previews = Previews> {
+	name?: string
+	preview?: P
+	warnings?: InvalidPreview[]
+}
+export type Previews = TablePreview | ScriptPreview | HTMLPreview | SplitPreview | VTPreview | BlueprintImagePreview
 
 export enum PreviewType {
 	Invalid = 'invalid',
@@ -24,18 +24,14 @@ interface PreviewBase {
 }
 
 export interface InvalidPreview extends PreviewBase {
-	// todo - is this required or would we just pull this from the piece warning anyway
 	type: PreviewType.Invalid
 
 	severity: NoteSeverity
-	reason: string // todo - translate
+	reason: ITranslatableMessage
 }
 export interface TablePreview extends PreviewBase {
-	// todo - translations
 	type: PreviewType.Table
 
-	heading: string
-	subheading?: string
 	entries: { key: string; value: string }[]
 }
 export interface ScriptPreview extends PreviewBase {
@@ -47,31 +43,35 @@ export interface ScriptPreview extends PreviewBase {
 	lastModified?: number
 }
 export interface HTMLPreview extends PreviewBase {
-	// todo - steps and how to control them
+	// todo - expose if and how steps can be controlled
 	type: PreviewType.HTML
 
-	previewUrl: string
+	name?: string
 
+	previewUrl: string
 	previewDimension?: { width: number; height: number }
-	hasSteps?: boolean
 
 	postMessageOnLoad?: any
+
+	steps?: { current: number; total: number }
 }
 export interface SplitPreview extends PreviewBase {
 	type: PreviewType.Split
 
 	background?: string // file asset upload?
-	boxes: any // todo
+	boxes: (SplitsContentBoxContent & SplitsContentBoxProperties)[]
 }
 export interface VTPreview extends PreviewBase {
 	type: PreviewType.VT
 
 	// note: the info required for the preview follows from package manager so there's nothing for blueprins here
 	// note: if we want to allow a preview for different media than saved on the piece (because perhaps the media is in a non-primary piece) should we allow to specifiy the package to preview?
-	// todo - turn this into a "PackagePreview"?
+
+	inWords?: string // note - only displayed if outWords are present
+	outWords?: string
 }
 export interface BlueprintImagePreview extends PreviewBase {
 	type: PreviewType.BlueprintImage
 
-	image?: string // to be put in as asset
+	image: string // to be put in as asset
 }

packages/webui/src/client/lib/VideoPreviewPlayer.tsx

@@ -14,7 +14,7 @@ function setVideoElementPosition(
 	if (loop && vEl.duration > 0) {
 		targetTime =
 			targetTime % ((itemDuration > 0 ? Math.min(vEl.duration * 1000, itemDuration) : vEl.duration * 1000) * 1000)
-	} else {
+	} else if (itemDuration > 0) {
 		targetTime = Math.min(timePosition, itemDuration)
 	}
 	vEl.currentTime = targetTime / 1000
@@ -55,7 +55,7 @@ export function VideoPreviewPlayer({
 				<div
 					className={classNames('video-preview-player__frame-marker', {
 						'video-preview-player__frame-marker--first-frame': offsetTimePosition === 0,
-						'video-preview-player__frame-marker--last-frame': offsetTimePosition >= itemDuration,
+						'video-preview-player__frame-marker--last-frame': itemDuration > 0 && offsetTimePosition >= itemDuration,
 					})}
 				>
 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -158,7 +158,6 @@
 			font-weight: 200;
 			font-size: 0.8em;
 			letter-spacing: 0em;
-			line-height: 80%;
 			max-width: 60vw;
 			overflow: hidden;
 			text-overflow: ellipsis;

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

@@ -44,10 +44,10 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
 				<div className="preview-popUp__table">
 					<table>
 						<tbody>
-							{Object.entries(content.content).map(([key, entry]) => (
+							{content.content.map(({ key, value }) => (
 								<tr>
 									<td className="preview-popup__label">{key}</td>
-									<td className="preview-popup__value">{entry}</td>
+									<td className="preview-popup__value">{value}</td>
 								</tr>
 							))}
 						</tbody>