wip: next bar alignment when no text

Author: olzzon

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

@@ -109,18 +109,20 @@ $hold-status-color: $liveline-timecode-color;
 				&.notext {
 					background: $general-next-color;
 					height: 20px;
+					margin-top: 8vh;
 					text-shadow: 0px 0px 6px #000000;
 				}
 				.director-screen__body__segment__countdown {
 					position: absolute;
 					font-size: 110px;
 					top: 0;
-					right: 3vw;
+					right: 0px;
 					height: 100%;
 					width: 20vw;
-					float: right;
-					text-align: left;
+					float: left;
+					text-align: right;
 					padding-left: 4vw;
+					padding-top: 6px;
 					color: #ff0;
 					background: linear-gradient(
 						90deg,
@@ -170,6 +172,7 @@ $hold-status-color: $liveline-timecode-color;
 				display: flex;
 				flex-direction: column;
 				text-align: left;
+				width: 87vw;
 
 				.director-screen__body__part__piece-name {
 					font-size: 13em;
@@ -270,6 +273,10 @@ $hold-status-color: $liveline-timecode-color;
 				z-index: 1;
 				font-stretch: 25;
 			}
+			.director-screen__body__part__next-icon--notext,
+			.director-screen__body__part__auto-icon--notext {
+				margin-top: 4vh !important; /* Override the default -50px when notext is true */
+			}
 		}
 
 		.clocks-segment-countdown-red {

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

@@ -157,7 +157,7 @@ function getShowStyleBaseIdSegmentPartUi(
 	}
 }
 
-export const getDirectorScreenReactive = (props: DirectorScreenProps): DirectorScreenTrackedProps => {
+const getDirectorScreenReactive = (props: DirectorScreenProps): DirectorScreenTrackedProps => {
 	const studio = UIStudios.findOne(props.studioId)
 
 	let playlist: DBRundownPlaylist | undefined
@@ -269,7 +269,7 @@ export const getDirectorScreenReactive = (props: DirectorScreenProps): DirectorS
 	}
 }
 
-export function useDirectorScreenSubscriptions(props: DirectorScreenProps): void {
+function useDirectorScreenSubscriptions(props: DirectorScreenProps): void {
 	useSubscription(MeteorPubSub.uiStudio, props.studioId)
 
 	const playlist = useTracker(
@@ -442,7 +442,7 @@ function DirectorScreenRender({
 												width: '90vw',
 												fontFamily: 'Roboto Flex',
 												fontSize: '1.4em',
-												minFontWidth: 20,
+												minFontWidth: 32,
 												maxFontWidth: 90,
 												minLetterSpacing: 2,
 											}}
@@ -502,9 +502,23 @@ function DirectorScreenRender({
 						{nextPartInstance && nextShowStyleBaseId ? (
 							<>
 								{currentPartInstance && currentPartInstance.instance.part.autoNext ? (
-									<span className="director-screen__body__part__auto-icon">AUTO</span>
+									<span
+										className={ClassNames('director-screen__body__part__auto-icon', {
+											'director-screen__body__part__auto-icon--notext':
+												nextSegment === undefined || nextSegment?._id === currentSegment?._id,
+										})}
+									>
+										AUTO
+									</span>
 								) : (
-									<span className="director-screen__body__part__next-icon">NEXT</span>
+									<span
+										className={ClassNames('director-screen__body__part__next-icon', {
+											'director-screen__body__part__next-icon--notext':
+												nextSegment === undefined || nextSegment?._id === currentSegment?._id,
+										})}
+									>
+										NEXT
+									</span>
 								)}
 								<div className="director-screen__body__part__piece-icon">
 									<PieceIconContainer
@@ -528,7 +542,7 @@ function DirectorScreenRender({
 													width: '90vw',
 													fontFamily: 'Roboto Flex',
 													fontSize: '1.4em',
-													minFontWidth: 20,
+													minFontWidth: 32,
 													maxFontWidth: 90,
 													minLetterSpacing: 2,
 												}}

packages/webui/src/client/ui/util/AdjustLabelFit.tsx

@@ -82,6 +82,10 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 }) => {
 	const labelRef = useRef<HTMLSpanElement>(null)
 	const containerRef = useRef<HTMLDivElement>(null)
+	// If label is longer than 140 characters, cut it off
+	if (label.length > 140) {
+		label = label.slice(0, 137) + '...'
+	}
 
 	// Convert to CSS values:
 	const widthValue = typeof width === 'number' ? `${width}px` : width