wip: LayerInfoPreview handle in,out,duration as string and numbers

Author: olzzon

packages/blueprints-integration/src/previews.ts

@@ -62,6 +62,7 @@ export type PreviewContent =
 			text: Array<string>
 			inTime?: number | string
 			outTime?: number | string
+			duration?: number | string
 	  }
 	| {
 			type: 'separationLine'

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

@@ -59,8 +59,10 @@
 	.preview-popUp__element-with-time-info {
 		width: 100%;
 		display: flex;
+		font-feature-settings: 'liga' off;
+
 		margin-bottom: 0px;
-		
+
 		.preview-popUp__element-with-time-info__layer-color {
 			width: 25px;
 			height: 20px;
@@ -70,6 +72,19 @@
 			font-size: 1.4em;
 			@include item-type-colors();
 		}
+
+		.preview-popUp__element-with-time-info__timing {
+			overflow: none;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+
+			font-weight: 500;
+			line-height: 100%; /* 15px */
+
+			.label {
+				font-weight: 300;
+			}
+		}
 	}
 
 	.preview-popup__separation-line {

packages/webui/src/client/ui/PreviewPopUp/Previews/LayerInfoPreview.tsx

@@ -19,18 +19,31 @@ export function LayerInfoPreview(content: layerInfoContent): React.ReactElement
 						{line}
 					</div>
 				))}
-				<div className="preview-popUp__timing">
-					{content.inTime && (
+				<div className="preview-popUp__element-with-time-info__timing">
+					{content.inTime !== undefined && (
 						<>
-							<span className="label">IN: </span>{' '}
-							{RundownUtils.formatTimeToShortTime((content.inTime as any as number) || 0)}
+							<span className="label">{t('IN')}: </span>
+							{typeof content.inTime === 'number'
+								? RundownUtils.formatTimeToShortTime(content.inTime || 0)
+								: content.inTime}
 						</>
 					)}
 					&nbsp;{' '}
-					{content.outTime && (
+					{content.duration !== undefined && (
 						<>
-							<span className="label">{t('DURATION: ')}</span>
-							{RundownUtils.formatTimeToShortTime((content.outTime as any as number) || 0)}
+							<span className="label">{t('DURATION')}: </span>
+							{typeof content.duration === 'number'
+								? RundownUtils.formatTimeToShortTime(content.duration || 0)
+								: content.duration}
+						</>
+					)}
+					&nbsp;{' '}
+					{content.outTime !== undefined && (
+						<>
+							<span className="label">{t('OUT')}: </span>
+							{typeof content.outTime === 'number'
+								? RundownUtils.formatTimeToShortTime(content.outTime || 0)
+								: content.outTime}
 						</>
 					)}
 				</div>