Add sourcelayer "studio screen" (SOFIE-3132)

meteor/client/styles/_itemTypeColors.scss

@@ -33,11 +33,13 @@ $segment-layer-background-mic: #1e6820;
 $segment-layer-background-guest: #008a92;
 $segment-layer-background-local: #9a2bd8;
 $segment-layer-background-local--second: darken($segment-layer-background-local, 10%);
+$segment-layer-background-studio-screen: #641fb3;
 
 $segment-item-disabled-background: #898989;
 $segment-item-disabled-color: #c9c9c9;
 
-$layer-types-solid: 'unknown', 'camera', 'lower-third', 'graphics', 'remote', 'vt', 'local', 'script', 'mic', 'guest';
+$layer-types-solid: 'unknown', 'camera', 'lower-third', 'graphics', 'remote', 'vt', 'local', 'script', 'mic', 'guest',
+	'studio-screen';
 $layer-types-gradient: 'live-speak'; //
 
 $layer-types: join($layer-types-solid, $layer-types-gradient);
@@ -457,4 +459,5 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
 	--segment-layer-background-script: #{$segment-layer-background-script};
 	--segment-layer-background-mic: #{$segment-layer-background-mic};
 	--segment-layer-background-guest: #{$segment-layer-background-guest};
+	--segment-layer-background-studio-screen: #{$segment-layer-background-studio-screen};
 }

meteor/client/ui/PieceIcons/PieceCountdown.tsx

@@ -24,6 +24,7 @@ export interface IPropsHeader {
 
 const supportedLayers = new Set([
 	SourceLayerType.GRAPHICS,
+	SourceLayerType.STUDIO_SCREEN,
 	SourceLayerType.LIVE_SPEAK,
 	SourceLayerType.REMOTE,
 	SourceLayerType.SPLITS,

meteor/client/ui/SegmentContainer/PieceMultistepChevron.tsx

@@ -12,7 +12,9 @@ export const PieceMultistepChevron = function PieceMultistepChevron({
 	const noraContent = piece.instance.piece.content as NoraContent | undefined
 
 	const hasStepChevron =
-		(piece.sourceLayer?.type === SourceLayerType.GRAPHICS || piece.sourceLayer?.type === SourceLayerType.LOWER_THIRD) &&
+		(piece.sourceLayer?.type === SourceLayerType.GRAPHICS ||
+			piece.sourceLayer?.type === SourceLayerType.LOWER_THIRD ||
+			piece.sourceLayer?.type === SourceLayerType.STUDIO_SCREEN) &&
 		noraContent?.payload?.step?.enabled
 
 	if (!hasStepChevron) return null

meteor/client/ui/SegmentList/PieceHoverInspector.tsx

@@ -62,6 +62,7 @@ export function PieceHoverInspector({
 			)
 		case SourceLayerType.GRAPHICS:
 		case SourceLayerType.LOWER_THIRD:
+		case SourceLayerType.STUDIO_SCREEN:
 			return (
 				<L3rdFloatingInspector
 					showMiniInspector={hovering}

meteor/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/StoryboardSecondaryPiece.tsx

@@ -40,6 +40,7 @@ function renderPieceInside(
 			return ScriptRenderer({ ...props, elementOffset, hovering, typeClass })
 		case SourceLayerType.GRAPHICS:
 		case SourceLayerType.LOWER_THIRD:
+		case SourceLayerType.STUDIO_SCREEN:
 			return GraphicsRenderer({ ...props, elementOffset, hovering, typeClass })
 		case SourceLayerType.SPLITS:
 			return SplitsRenderer({ ...props, elementOffset, hovering, typeClass })

meteor/client/ui/SegmentStoryboard/StoryboardPartThumbnail/Renderers/ThumbnailRendererFactory.ts

@@ -40,6 +40,7 @@
 			return SplitsThumbnailRenderer(props)
 		case SourceLayerType.GRAPHICS:
 		case SourceLayerType.LOWER_THIRD:
+		case SourceLayerType.STUDIO_SCREEN:
 			return GraphicsThumbnailRenderer(props)
 		case SourceLayerType.LOCAL:
 			return LocalThumbnailRenderer(props)

meteor/client/ui/SegmentTimeline/SourceLayerItem.tsx

@@ -563,6 +563,7 @@ export const SourceLayerItem = withTranslation()(
 					)
 				case SourceLayerType.GRAPHICS:
 				case SourceLayerType.LOWER_THIRD:
+				case SourceLayerType.STUDIO_SCREEN:
 					return (
 						<L3rdSourceRenderer
 							key={unprotectString(this.props.piece.instance._id)}

meteor/client/ui/Settings/ShowStyle/SourceLayer.tsx

@@ -61,6 +61,8 @@ function sourceLayerString(t: TFunction<'translation', undefined>, type: SourceL
 		// 	return t('Lights')
 		case SourceLayerType.LOCAL:
 			return t('Local')
+		case SourceLayerType.STUDIO_SCREEN:
+			return t('Studio Screen')
 		default:
 			assertNever(type)
 			return SourceLayerType[type]

meteor/client/ui/Shelf/DashboardPieceButton.tsx

@@ -455,7 +455,8 @@ export class DashboardPieceButtonBase<T = {}> extends MeteorReactComponent<
 						: this.props.layer.type === SourceLayerType.SPLITS
 						? this.renderSplits(isList && this.props.showThumbnailsInList)
 						: this.props.layer.type === SourceLayerType.GRAPHICS ||
-						  this.props.layer.type === SourceLayerType.LOWER_THIRD
+						  this.props.layer.type === SourceLayerType.LOWER_THIRD ||
+						  this.props.layer.type === SourceLayerType.STUDIO_SCREEN
 						? this.renderGraphics(isButtons || (isList && this.props.showThumbnailsInList))
 						: null}
 

meteor/client/ui/Shelf/Renderers/ItemRendererFactory.ts

@@ -27,6 +27,7 @@
 			return React.createElement(VTListItemRenderer, props)
 		case SourceLayerType.GRAPHICS:
 		case SourceLayerType.LOWER_THIRD:
+		case SourceLayerType.STUDIO_SCREEN:
 			return React.createElement(L3rdListItemRenderer, props)
 	}
 

meteor/lib/api/rest.ts

@@ -753,6 +753,7 @@
 		| 'live-speak'
 		| 'transition'
 		| 'local'
+		| 'studio-screen'
 	exclusiveGroup?: string
 }
 

meteor/server/api/rest/v1/typeConversion.ts

@@ -169,6 +169,9 @@
 		case 'vt':
 			layerType = SourceLayerType.VT
 			break
+		case 'studio-screen':
+			layerType = SourceLayerType.STUDIO_SCREEN
+			break
 		default:
 			layerType = SourceLayerType.UNKNOWN
 			assertNever(apiSourceLayer.layerType)
@@ -223,6 +226,9 @@
 		case SourceLayerType.VT:
 			layerType = 'vt'
 			break
+		case SourceLayerType.STUDIO_SCREEN:
+			layerType = 'studio-screen'
+			break
 		default:
 			layerType = 'unknown'
 			assertNever(sourceLayer.type)

packages/shared-lib/src/core/model/ShowStyle.ts

@@ -24,6 +24,8 @@ export enum SourceLayerType {
 	// LIGHTS = 14,
 	/** Uncontrolled local sources, such as PowerPoint presentation inputs, Weather systems, EVS replay machines, etc. */
 	LOCAL = 15,
+	/** Sources that are intended for a studio screen, such as weather, presentations etc. */
+	STUDIO_SCREEN = 16,
 }
 
 /** A single source layer, f.g Cameras, VT, Graphics, Remotes */