wip: add NEXT and AUTO

Author: olzzon

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

@@ -70,7 +70,7 @@ $hold-status-color: $liveline-timecode-color;
 			display: grid;
 			grid-template:
 				24em
-				70em
+				50em
 				30em / #{'min(13vw, 27vh)'} auto;
 			white-space: nowrap;
 
@@ -79,14 +79,17 @@ $hold-status-color: $liveline-timecode-color;
 				grid-column: 1 / -1;
 				text-align: left;
 				padding-left: 10px;
+				letter-spacing: 0%;
 				vertical-align: middle;
+				color: #fff;
 				position: relative;
 				/* PartNameWide */
 				font-family: 'Roboto Flex';
 				font-style: normal;
 				font-weight: 700;
-				font-size: 99px;
+				font-size: 90px;
 				line-height: 110%;
+				/* or 110px */
 				letter-spacing: 0.01em;
 				font-feature-settings: 'pnum' on, 'lnum' on;
 
@@ -215,6 +218,30 @@ $hold-status-color: $liveline-timecode-color;
 					grid-row: 2 / -1;
 				}
 			}
+
+			.director-screen__body__part__next {
+				background-color: $general-next-color;
+				position: relative;
+				clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
+			}
+			.director-screen__body__part__auto {
+				background-color: #DF0000;
+				position: relative;
+				border-radius: 0 25px 25px 0;
+			}
+			
+			.director-screen__body__part__next,
+			.director-screen__body__part__auto {
+				grid-row: 1;
+				grid-column: 1;
+				margin-top: -50px;
+				text-align: center;
+				font-size: 1.5rem;
+				color: #000;
+				padding-top: 10px;
+				max-width: 100px;
+				max-height: 50px;
+			}
 		}
 
 		.clocks-segment-countdown-red {

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

@@ -494,6 +494,11 @@ function DirectorScreenRender({
 						</div>
 						{nextPartInstance && nextShowStyleBaseId ? (
 							<>
+								{currentPartInstance && currentPartInstance.instance.part.autoNext ? (
+									<span className="director-screen__body__part__auto">AUTO</span>
+								) : (
+									<span className="director-screen__body__part__next">NEXT</span>
+								)}
 								<div className="director-screen__body__part__piece-icon">
 									<PieceIconContainer
 										partInstanceId={nextPartInstance.instance._id}
@@ -503,13 +508,6 @@ function DirectorScreenRender({
 									/>
 								</div>
 								<div className="director-screen__body__part__piece-name">
-									{currentPartInstance && currentPartInstance.instance.part.autoNext ? (
-										<img
-											className="director-screen__body__part__auto-next-icon"
-											src="/icons/auto-presenter-screen.svg"
-											alt="Autonext"
-										/>
-									) : null}
 									{nextPartInstance && nextShowStyleBaseId && nextPartInstance.instance.part.title ? (
 										<PieceNameContainer
 											partName={nextPartInstance.instance.part.title}