wip: implement adjustable label length and size

Author: olzzon

packages/webui/src/client/styles/countdown/director.scss

@@ -16,22 +16,28 @@ $hold-status-color: $liveline-timecode-color;
 .director-screen {
 	font-family: Roboto Flex;
 
-	.director-screen__header {
+	.director-screen__top {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 14vh;
+		padding-left: 10px;
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
-		font-size: 2em;
+		background-color: #3F3F3F;
 		color: #888;
+		font-size: 2em;
 		padding: 0 0.2em;
-		padding-left: 10px;
 
 	}
 
 
 	.director-screen__body {
 		position: fixed;
-		top: 20vh;
+		top: 14vh;
 		bottom: 0;
 		left: 0;
 		right: 0;
@@ -65,21 +71,27 @@ $hold-status-color: $liveline-timecode-color;
 				line-height: 100%;
 				letter-spacing: 0%;
 				vertical-align: middle;
+				color: #fff;
 
 				&.live {
 					background: $general-live-color;
-					color: #fff;
 					text-shadow: 0px 0px 6px #000000;
 				}
-
+				
 				&.next {
 					background: $general-next-color;
-					color: #000;
+					text-shadow: 0px 0px 6px #000000;
 				}
 			}
 			.director-screen__body__segment__countdown {
+				height: 100%;
+				width: 30vw;
+				color: #FF5218;
 				float: right;
-				margin-right: 10px;
+				text-align: right;
+				padding-right: 10px;
+				background: linear-gradient(90deg, rgba(223, 0, 0, 0) 0%, #DF0000 7.86%, rgba(116, 0, 0, 0.808) 16.21%, rgba(0, 0, 0, 0.6) 24.94%);
+
 			}
 
 			.director-screen__body__rundown-countdown {
@@ -174,17 +186,14 @@ $hold-status-color: $liveline-timecode-color;
 			}
 
 			&.director-screen__body__part--next-part {
+				border-top: solid 2em $general-next-color;
 				.director-screen__body__part__piece-icon,
 				.director-screen__body__part__piece-name {
 					grid-row: 2 / -1;
 				}
 			}
 		}
 
-		.director-screen__body__part + .director-screen__body__part {
-			border-top: solid 0.8em #454545;
-		}
-
 		.clocks-segment-countdown-red {
 			color: $general-late-color;
 		}

packages/webui/src/client/ui/ClockView/DirectorScreen.tsx

@@ -357,8 +357,8 @@ function DirectorScreenRender({
 
 		return (
 			<div className="director-screen">
-				<div className="director-screen__header">
-					<div className="director-screen__header__planned-end">
+				<div className="director-screen__top">
+					<div className="director-screen__top__planned-end">
 						<div>
 							<PlannedEndComponent value={expectedEnd} />
 						</div>
@@ -387,6 +387,9 @@ function DirectorScreenRender({
 					</div>
 				</div>
 				<div className="director-screen__body">
+					{
+						// Current Part:
+					}
 					<div className="director-screen__body__part">
 						<div
 							className={ClassNames('director-screen__body__segment-name', {
@@ -419,6 +422,15 @@ function DirectorScreenRender({
 										showStyleBaseId={currentShowStyleBaseId}
 										rundownIds={rundownIds}
 										playlistActivationId={playlist?.activationId}
+										autowidth={{
+											label: '',
+											width: '80%',
+											fontFamily: 'Roboto Flex',
+											fontSize: '2em',
+											minWidthPercentage: 5,
+											minLetterSpacing: 2,
+											useVariableFont: true,
+										}}
 									/>
 								</div>
 								<div className="director-screen__body__part__piece-countdown">
@@ -451,6 +463,9 @@ function DirectorScreenRender({
 							</div>
 						) : null}
 					</div>
+					{
+						// Next Part:
+					}
 					<div className="director-screen__body__part director-screen__body__part--next-part">
 						<div
 							className={ClassNames('director-screen__body__segment-name', {

packages/webui/src/client/ui/PieceIcons/PieceName.tsx

@@ -8,10 +8,12 @@ import { PieceGeneric } from '@sofie-automation/corelib/dist/dataModel/Piece'
 import { RundownPlaylistActivationId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { ReadonlyDeep } from 'type-fest'
 import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
+import { AdjustLabelFit, AdjustLabelFitProps } from '../util/AdjustLabelFit'
 
 interface INamePropsHeader extends IPropsHeader {
 	partName: string
 	playlistActivationId: RundownPlaylistActivationId | undefined
+	autowidth?: AdjustLabelFitProps
 }
 
 const supportedLayers = new Set([
@@ -21,7 +23,7 @@ const supportedLayers = new Set([
 	SourceLayerType.LOCAL,
 ])
 
-function getLocalPieceLabel(piece: ReadonlyDeep<PieceGeneric>): JSX.Element | null {
+function getLocalPieceLabel(piece: ReadonlyDeep<PieceGeneric>, autowidth?: AdjustLabelFitProps): JSX.Element | null {
 	const { color } = piece.content as EvsContent
 	return (
 		<>
@@ -30,17 +32,21 @@ function getLocalPieceLabel(piece: ReadonlyDeep<PieceGeneric>): JSX.Element | nu
 					·
 				</span>
 			)}
-			{piece.name}
+			<AdjustLabelFit {...autowidth} label={piece.name || ''} />
 		</>
 	)
 }
 
-function getPieceLabel(piece: ReadonlyDeep<PieceGeneric>, type: SourceLayerType): JSX.Element | null {
+function getPieceLabel(
+	piece: ReadonlyDeep<PieceGeneric>,
+	type: SourceLayerType,
+	autowidth?: AdjustLabelFitProps
+): JSX.Element | null {
 	switch (type) {
 		case SourceLayerType.LOCAL:
-			return getLocalPieceLabel(piece)
+			return getLocalPieceLabel(piece, autowidth)
 		default:
-			return <>{piece.name}</>
+			return <AdjustLabelFit {...autowidth} label={piece.name || ''} />
 	}
 }
 
@@ -59,7 +65,7 @@ export function PieceNameContainer(props: Readonly<INamePropsHeader>): JSX.Eleme
 	useSubscription(MeteorPubSub.uiShowStyleBase, props.showStyleBaseId)
 
 	if (pieceInstance && sourceLayer && supportedLayers.has(sourceLayer.type)) {
-		return getPieceLabel(pieceInstance.piece, sourceLayer.type)
+		return getPieceLabel(pieceInstance.piece, sourceLayer.type, props.autowidth)
 	}
-	return <>{props.partName || ''}</>
+	return <AdjustLabelFit {...props.autowidth} label={props.partName || ''} />
 }