Merge pull request Sofie-Automation#1478 from bbc/upstream/fix-in-outword-in-new-hoverpvw

Author: jstarpl

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

@@ -174,24 +174,30 @@
 	}
 
 	.preview-popUp__in-out-words {
-		font-size: 0.8em;
 		letter-spacing: 0em;
 
 		width: 100%;
 		overflow: hidden;
-		text-overflow: ellipsis;
+		text-overflow: clip;
 		white-space: nowrap;
 
-		display: flex;
-		justify-content: space-between;
-
+		margin-top: -25px; //Pull up the in/out words a bit
 		padding: 7px;
 
+		.separation-line {
+			width: 100%;
+			height: 1px;
+			background-color: #5b5b5b;
+			margin-bottom: 5px;
+		}
+
 		.in-words,
 		.out-words {
+			color: white;
+			font-weight: 500;
 			white-space: nowrap;
 			overflow: hidden;
-			text-overflow: ellipsis;
+			text-overflow: clip;
 		}
 
 		.out-words {

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

@@ -38,6 +38,7 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
 		case 'inOutWords':
 			return (
 				<div className="preview-popUp__in-out-words">
+					<hr className="separation-line" />
 					<div className="in-words">{content.in}</div>
 					<div className="out-words">{content.out}</div>
 				</div>

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

@@ -98,6 +98,13 @@ export function convertSourceLayerItemToPreview(
 					}
 					break
 				case PreviewType.VT:
+					if (popupPreview.preview.outWords) {
+						contents.push({
+							type: 'inOutWords',
+							in: popupPreview.preview.inWords,
+							out: popupPreview.preview.outWords,
+						})
+					}
 					if (contentStatus?.previewUrl) {
 						contents.push({
 							type: 'video',
@@ -109,13 +116,6 @@ export function convertSourceLayerItemToPreview(
 							src: contentStatus.thumbnailUrl,
 						})
 					}
-					if (popupPreview.preview.outWords) {
-						contents.push({
-							type: 'inOutWords',
-							in: popupPreview.preview.inWords,
-							out: popupPreview.preview.outWords,
-						})
-					}
 					break
 			}
 		}
@@ -139,6 +139,13 @@ export function convertSourceLayerItemToPreview(
 					type: 'title',
 					content: content.fileName,
 				},
+				content.lastWords
+					? {
+							type: 'inOutWords',
+							in: content.firstWords,
+							out: content.lastWords,
+						}
+					: undefined,
 				contentStatus?.previewUrl
 					? {
 							type: 'video',
@@ -150,13 +157,6 @@ export function convertSourceLayerItemToPreview(
 								src: contentStatus.thumbnailUrl,
 							}
 						: undefined,
-				content.lastWords
-					? {
-							type: 'inOutWords',
-							in: content.firstWords,
-							out: content.lastWords,
-						}
-					: undefined,
 				...(contentStatus?.messages?.map<PreviewContent>((m) => ({
 					type: 'warning',
 					content: m as any,
@@ -261,6 +261,7 @@ export function convertSourceLayerItemToPreview(
 				{
 					type: 'script',
 					script: content.fullScript,
+					firstWords: content.firstWords,
 					lastWords: content.lastWords,
 					comment: content.comment,
 					lastModified: content.lastModified ?? undefined,
@@ -301,6 +302,7 @@ export type PreviewContent =
 	| {
 			type: 'script'
 			script?: string
+			firstWords?: string
 			lastWords?: string
 			comment?: string
 			lastModified?: number