wip: split boxes background

Author: olzzon

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewPieceIcons.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/variables';
+
 // Variables
 $text-color: #ffffff;
 $font-size-base: 70px;
@@ -24,6 +26,11 @@ $letter-spacing: 0.02em;
 
 // Base icon styles
 .clock-view-piece-icon {
+	// Container layout
+	position: relative;
+	width: 207px;
+	height: 126px;
+
 	// Text styles:
 	fill: $text-color;
 	font-family: Roboto Flex;
@@ -35,6 +42,29 @@ $letter-spacing: 0.02em;
 	span {
 		// Common styles
 		@include layer-type-backgrounds; // Apply to all span elements that have layer type classes
+
+		// Position text inside the icon
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 2;
+	}
+
+	.piece-icon-text {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 2;
 	}
 
 	.live-speak {
@@ -47,17 +77,44 @@ $letter-spacing: 0.02em;
 		align-items: center;
 	}
 
-	// Split view specific styles
-	.upper,
-	.lower {
-		&.camera {
-			@include item-type-colors-svg();
+	// Split view container and layers
+	.split-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 4px;
+		overflow: hidden;
+		z-index: 1;
+
+		// Apply item-type-colors to each source layer type
+		@each $layer-type in $layer-types {
+			> .#{$layer-type} {
+				position: absolute;
+				left: 0;
+				width: 100%;
+				background-color: var(--segment-layer-background-#{$layer-type});
+
+				&.second {
+					background-color: var(--segment-layer-background-#{$layer-type}--second);
+				}
+			}
 		}
-		&.remote {
-			@include item-type-colors-svg();
+
+		// Position the layers
+		> div:first-child {
+			top: 0;
+			height: 50%;
+			border-top-left-radius: 4px;
+			border-top-right-radius: 4px;
 		}
-		&.remote.second {
-			@include item-type-colors-svg();
+
+		> div:last-child {
+			bottom: 0;
+			height: 50%;
+			border-bottom-left-radius: 4px;
+			border-bottom-right-radius: 4px;
 		}
 	}
 }

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewRenderers/SplitInputIcon.tsx

@@ -2,17 +2,18 @@ import * as React from 'react'
 import { PieceGeneric } from '@sofie-automation/corelib/dist/dataModel/Piece'
 import { SplitsContent, SourceLayerType } from '@sofie-automation/blueprints-integration'
 import { RundownUtils } from '../../../../lib/rundown'
-import classNames from 'classnames'
 import { ReadonlyDeep } from 'type-fest'
 
 type SplitIconPieceType = ReadonlyDeep<Omit<PieceGeneric, 'timelineObjectsString'>>
 
-export default class SplitInputIcon extends React.Component<{
+interface SplitInputIconProps {
 	abbreviation: string | undefined
 	piece: SplitIconPieceType | undefined
 	hideLabel?: boolean
-}> {
-	private getCameraLabel(piece: SplitIconPieceType | undefined) {
+}
+
+export default function SplitInputIcon({ abbreviation, piece, hideLabel }: Readonly<SplitInputIconProps>): JSX.Element {
+	function getCameraLabel() {
 		if (piece && piece.content) {
 			const c = piece.content as SplitsContent
 			const camera = c.boxSourceConfiguration.find((i) => i.type === SourceLayerType.CAMERA)
@@ -21,18 +22,15 @@ export default class SplitInputIcon extends React.Component<{
 				return (
 					<React.Fragment>
 						{label && label[1] ? label[1].substr(0, 1).toUpperCase() + ' ' : ''}
-						<span className="camera">{label ? label[2] : ''}</span>
+						<span>{label ? label[2] : ''}</span>
 					</React.Fragment>
 				)
-			} else {
-				return this.props.abbreviation !== undefined ? this.props.abbreviation : 'Spl'
 			}
-		} else {
-			return this.props.abbreviation !== undefined ? this.props.abbreviation : 'Spl'
 		}
+		return abbreviation !== undefined ? abbreviation : 'Spl'
 	}
 
-	private getLeftSourceType(piece: SplitIconPieceType | undefined): string {
+	function getLeftSourceType(): string {
 		if (piece && piece.content) {
 			const c = piece.content as SplitsContent
 			const left = (c.boxSourceConfiguration && c.boxSourceConfiguration[0])?.type || SourceLayerType.CAMERA
@@ -41,28 +39,23 @@ export default class SplitInputIcon extends React.Component<{
 		return 'camera'
 	}
 
-	private getRightSourceType(piece: SplitIconPieceType | undefined): string {
+	function getRightSourceType(): string {
 		if (piece && piece.content) {
 			const c = piece.content as SplitsContent
 			const right = (c.boxSourceConfiguration && c.boxSourceConfiguration[1])?.type || SourceLayerType.REMOTE
 			const sourceType = RundownUtils.getSourceLayerClassName(right)
-			return sourceType + (this.getLeftSourceType(piece) === sourceType ? ' second' : '')
+			return sourceType + (getLeftSourceType() === sourceType ? ' second' : '')
 		}
 		return 'remote'
 	}
 
-	render(): JSX.Element {
-		return (
-			<div className="clock-view-piece-icon">
-				<rect width="126.5" height="44.5" className={classNames('upper', this.getLeftSourceType(this.props.piece))} />
-				<rect
-					width="126.5"
-					height="44.5"
-					y="44.5"
-					className={classNames('lower', this.getRightSourceType(this.props.piece))}
-				/>
-				{!this.props.hideLabel && <span className="piece-icon-text">{this.getCameraLabel(this.props.piece)}</span>}
+	return (
+		<div className="clock-view-piece-icon">
+			<div className="split-view">
+				<div className={getLeftSourceType()}></div>
+				<div className={getRightSourceType()}></div>
 			</div>
-		)
-	}
+			{!hideLabel && <span className="piece-icon-text">{getCameraLabel()}</span>}
+		</div>
+	)
 }