Merge branch 'feat/vt-in-out-words-2' into bbc-release52

Author: olzzon

packages/blueprints-integration/src/content.ts

@@ -55,6 +55,10 @@ export interface VTContent extends BaseContent {
 	/** Duration of extra content past sourceDuration. Not planned to play back but present on the media and playable. */
 	postrollDuration?: number
 	editable?: VTEditableParameters
+	/** This is for the VT's in out words */
+	firstWords?: string
+	lastWords?: string
+	fullScript?: string
 }
 
 export interface GraphicsContent extends BaseContent {

packages/webui/src/client/styles/rundownView.scss

@@ -3158,8 +3158,8 @@ svg.icon {
 		> .video-preview,
 		> .thumbnail {
 			display: block;
-			width: 320px;
-			height: 180px;
+			width: 414px;
+			height: 233px; 
 			background: #000;
 		}
 
@@ -3273,6 +3273,19 @@ svg.icon {
 		word-break: break-all;
 		white-space: normal;
 	}
+	.mini-inspector__value__right {
+		font-weight: 200;
+		font-size: 0.8em;
+		letter-spacing: 0em;
+		max-width: 60vw;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-break: break-all;
+		white-space: normal;
+		position: absolute;
+		bottom: 7px;
+		right: 7px;
+	}
 	.mini-inspector__system {
 		font-weight: 300;
 		font-style: italic;

packages/webui/src/client/ui/FloatingInspectors/VTFloatingInspector.tsx

@@ -13,6 +13,7 @@ import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
 import { ITranslatableMessage, translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
 import { IFloatingInspectorPosition, useInspectorPosition } from './IFloatingInspectorPosition'
 import { ReadonlyDeep } from 'type-fest'
+import { getIgnorePieceContentStatus } from '../../lib/localStorage'
 
 interface IProps {
 	status: PieceStatusCode | undefined
@@ -109,19 +110,22 @@ export const VTFloatingInspector: React.FC<IProps> = ({
 	const { t } = useTranslation()
 	const inspectorRef = useRef<HTMLDivElement>(null)
 
+	const debugMode = getIgnorePieceContentStatus()
+	const playPreviewUrl = debugMode ? 'http://some-ip-here:3000/preview.mp4' : previewUrl || ''
+
 	const itemDuration = content?.sourceDuration || renderedDuration || 0
 	const seek = content?.seek ?? 0
 	const loop = content?.loop ?? false
 
 	const offsetTimePosition = timePosition + seek
 
-	const showVideoPlayerInspector = !hideHoverscrubPreview && previewUrl
+	const showVideoPlayerInspector = !hideHoverscrubPreview && (previewUrl || debugMode)
 	const showMiniInspectorClipData = shouldShowFloatingInspectorContent(status ?? PieceStatusCode.UNKNOWN, content)
 	const showMiniInspectorNotice = noticeLevel !== null
 	const showMiniInspectorData = showMiniInspectorNotice || showMiniInspectorClipData
 	const showAnyFloatingInspector = Boolean(showVideoPlayerInspector) || showMiniInspectorData
 
-	const shown = showMiniInspector && itemElement !== undefined && showAnyFloatingInspector
+	const shown = showMiniInspector && (itemElement !== undefined || debugMode) && showAnyFloatingInspector
 
 	const { style: floatingInspectorStyle, isFlipped } = useInspectorPosition(position, inspectorRef, shown)
 
@@ -142,9 +146,15 @@ export const VTFloatingInspector: React.FC<IProps> = ({
 		>
 			{showMiniInspectorNotice && noticeLevel && renderNotice(t, noticeLevel, noticeMessages)}
 			{showMiniInspectorClipData && (
-				<div className="segment-timeline__mini-inspector__properties">
-					<span className="mini-inspector__value">{content?.fileName}</span>
-				</div>
+				<>
+					<div className="segment-timeline__mini-inspector__properties">
+						<span className="mini-inspector__value">{content?.fileName}</span>
+					</div>
+					<div className="segment-timeline__mini-inspector__properties">
+						<span className="mini-inspector__value">{content?.firstWords}</span>
+						<span className="mini-inspector__value__right">{content?.lastWords}</span>
+					</div>
+				</>
 			)}
 		</div>
 	)
@@ -157,7 +167,7 @@ export const VTFloatingInspector: React.FC<IProps> = ({
 					ref={inspectorRef}
 					loop={loop}
 					seek={seek}
-					previewUrl={previewUrl}
+					previewUrl={playPreviewUrl}
 					timePosition={offsetTimePosition}
 					studioSettings={studio?.settings}
 					floatingInspectorStyle={floatingInspectorStyle}