Merge pull request Sofie-Automation#1366 from bbc/feat/new-sourcelayers

nytamin · web-flow · commit 1b31e4570bb6 · 2025-02-03T11:41:05.000+01:00
feat: add new SourceLayer Types
diff --git a/meteor/server/api/rest/v1/typeConversion.ts b/meteor/server/api/rest/v1/typeConversion.ts
@@ -200,6 +200,9 @@ export function sourceLayerFrom(apiSourceLayer: APISourceLayer): ISourceLayer {
 		case 'transition':
 			layerType = SourceLayerType.TRANSITION
 			break
+		case 'lights':
+			layerType = SourceLayerType.LIGHTS
+			break
 		case 'unknown':
 			layerType = SourceLayerType.UNKNOWN
 			break
@@ -209,6 +212,9 @@ export function sourceLayerFrom(apiSourceLayer: APISourceLayer): ISourceLayer {
 		case 'studio-screen':
 			layerType = SourceLayerType.STUDIO_SCREEN
 			break
+		case 'remote-speak':
+			layerType = SourceLayerType.REMOTE_SPEAK
+			break
 		default:
 			layerType = SourceLayerType.UNKNOWN
 			assertNever(apiSourceLayer.layerType)
@@ -257,6 +263,9 @@ export function APISourceLayerFrom(sourceLayer: ISourceLayer): APISourceLayer {
 		case SourceLayerType.TRANSITION:
 			layerType = 'transition'
 			break
+		case SourceLayerType.LIGHTS:
+			layerType = 'lights'
+			break
 		case SourceLayerType.UNKNOWN:
 			layerType = 'unknown'
 			break
@@ -266,6 +275,9 @@ export function APISourceLayerFrom(sourceLayer: ISourceLayer): APISourceLayer {
 		case SourceLayerType.STUDIO_SCREEN:
 			layerType = 'studio-screen'
 			break
+		case SourceLayerType.REMOTE_SPEAK:
+			layerType = 'remote-speak'
+			break
 		default:
 			layerType = 'unknown'
 			assertNever(sourceLayer.type)
diff --git a/meteor/server/lib/rest/v1/showstyles.ts b/meteor/server/lib/rest/v1/showstyles.ts
@@ -249,7 +249,9 @@ export interface APISourceLayer {
 		| 'lower-third'
 		| 'live-speak'
 		| 'transition'
+		| 'lights'
 		| 'local'
 		| 'studio-screen'
+		| 'remote-speak'
 	exclusiveGroup?: string
 }
diff --git a/packages/blueprints-integration/src/content.ts b/packages/blueprints-integration/src/content.ts
@@ -42,6 +42,8 @@ export type SomeContent =
 	| GraphicsContent
 	| UnknownContent
 	| EvsContent
+	| RemoteSpeakContent
+	| LightingContent
 
 export type UnknownContent = BaseContent
 
@@ -194,4 +196,8 @@ export interface TransitionContent extends BaseContent {
 
 export type SomeTransitionContent = VTContent | TransitionContent
 
+export type RemoteSpeakContent = RemoteContent
+
+export type LightingContent = UnknownContent
+
 export { SourceLayerType }
diff --git a/packages/shared-lib/src/core/model/ShowStyle.ts b/packages/shared-lib/src/core/model/ShowStyle.ts
@@ -21,11 +21,14 @@ export enum SourceLayerType {
 	LIVE_SPEAK = 11,
 	/** Transition effects, content object can use VTContent or TransitionContent */
 	TRANSITION = 13,
-	// LIGHTS = 14,
+	/** Control of Studio Lighting, Effects, etc. */
+	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,
+	/** Remote source with (Local) Studio Audio */
+	REMOTE_SPEAK = 17,
 }
 
 /** A single source layer, f.g Cameras, VT, Graphics, Remotes */
diff --git a/packages/webui/src/client/styles/_itemTypeColors.scss b/packages/webui/src/client/styles/_itemTypeColors.scss
@@ -10,19 +10,39 @@ $segment-layer-background-graphics: #dc5c00;
 $segment-layer-background-graphics--second: darken($segment-layer-background-graphics, 10%);
 $segment-layer-border-live-speak: #2f74ff;
 /** Gradients need to be defined with each color separately, so that they can be applied in SVG **/
+$segment-layer-background-gradient-divider: rgba(0, 0, 0, 0.5) 1px;
 $segment-layer-background-live-speak-1: #2f74ff;
 $segment-layer-background-live-speak-2: #39762b;
 $segment-layer-background-live-speak: linear-gradient(
 	to bottom,
-	$segment-layer-background-live-speak-1 50%,
-	$segment-layer-background-live-speak-2 50%
+	$segment-layer-background-live-speak-1 70%,
+	$segment-layer-background-gradient-divider,
+	$segment-layer-background-live-speak-2 72%
 );
 $segment-layer-background-live-speak--second-1: darken(#2f74ff, 10%);
 $segment-layer-background-live-speak--second-2: darken(#39762b, 10%);
 $segment-layer-background-live-speak--second: linear-gradient(
 	to bottom,
-	$segment-layer-background-live-speak--second-1 50%,
-	$segment-layer-background-live-speak--second-2 50%
+	$segment-layer-background-live-speak--second-1 70%,
+	$segment-layer-background-gradient-divider,
+	$segment-layer-background-live-speak--second-2 72%
+);
+$segment-layer-border-remote-speak: #e80064;
+$segment-layer-background-remote-speak-1: #e80064;
+$segment-layer-background-remote-speak-2: #39762b;
+$segment-layer-background-remote-speak: linear-gradient(
+	to bottom,
+	$segment-layer-background-remote-speak-1 70%,
+	$segment-layer-background-gradient-divider,
+	$segment-layer-background-remote-speak-2 72%
+);
+$segment-layer-background-remote-speak--second-1: darken(#e80064, 10%);
+$segment-layer-background-remote-speak--second-2: darken(#39762b, 10%);
+$segment-layer-background-remote-speak--second: linear-gradient(
+	to bottom,
+	$segment-layer-background-remote-speak--second-1 70%,
+	$segment-layer-background-gradient-divider,
+	$segment-layer-background-remote-speak--second-2 72%
 );
 $segment-layer-background-remote: #e80064;
 $segment-layer-background-remote--second: darken($segment-layer-background-remote, 10%);
@@ -42,7 +62,7 @@ $segment-item-disabled-color: #c9c9c9;
 
 $layer-types-solid: 'unknown', 'camera', 'lower-third', 'graphics', 'remote', 'vt', 'local', 'script', 'mic', 'guest',
 	'studio-screen';
-$layer-types-gradient: 'live-speak'; //
+$layer-types-gradient: 'live-speak', 'remote-speak'; //
 
 $layer-types: join($layer-types-solid, $layer-types-gradient);
 
@@ -460,6 +480,12 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
 	--segment-layer-background-live-speak--second-1: #{$segment-layer-background-live-speak--second-1};
 	--segment-layer-background-live-speak--second-2: #{$segment-layer-background-live-speak--second-2};
 	--segment-layer-background-live-speak--second: #{$segment-layer-background-live-speak--second};
+	--segment-layer-background-remote-speak-1: #{$segment-layer-background-remote-speak-1};
+	--segment-layer-background-remote-speak-2: #{$segment-layer-background-remote-speak-2};
+	--segment-layer-background-remote-speak: #{$segment-layer-background-remote-speak};
+	--segment-layer-background-remote-speak--second-1: #{$segment-layer-background-remote-speak--second-1};
+	--segment-layer-background-remote-speak--second-2: #{$segment-layer-background-remote-speak--second-2};
+	--segment-layer-background-remote-speak--second: #{$segment-layer-background-remote-speak--second};
 	--segment-layer-background-remote: #{$segment-layer-background-remote};
 	--segment-layer-background-remote--second: #{$segment-layer-background-remote--second};
 	--segment-layer-background-local: #{$segment-layer-background-local};
diff --git a/packages/webui/src/client/styles/rundownView.scss b/packages/webui/src/client/styles/rundownView.scss
@@ -1914,7 +1914,7 @@ svg.icon {
 						}
 
 						&.splits,
-						&.live-speak {
+						&.live-speak &.remote-speak {
 							.segment-timeline__piece__preview {
 								position: absolute;
 								top: 0;
diff --git a/packages/webui/src/client/styles/shelf/adLibPanel.scss b/packages/webui/src/client/styles/shelf/adLibPanel.scss
@@ -213,6 +213,13 @@ $adlib-item-selected-color: var(--adlib-item-selected-color);
 						var(--$segment-layer-background-camera) 50.0001%
 					);
 				}
+				&.remote-speak {
+					background: linear-gradient(
+						to bottom,
+						var(--segment-layer-background-remote-speak-1) 50%,
+						var(--$segment-layer-background-remote-speak-2) 50.0001%
+					);
+				}
 
 				&.splits {
 					background: linear-gradient(
diff --git a/packages/webui/src/client/styles/shelf/dashboard.scss b/packages/webui/src/client/styles/shelf/dashboard.scss
@@ -313,6 +313,14 @@ $dashboard-button-height: 3.625em;
 			);
 		}
 
+		&.remote-speak {
+			background: linear-gradient(
+				to top,
+				var(--segment-layer-background-remote-speak-2) 1em,
+				var(--segment-layer-background-remote-speak-1) 1em
+			);
+		}
+
 		&.live {
 			box-shadow: $dashboard-panel__button__border-width $dashboard-panel__button__border-width 0 $general-live-color,
 				($dashboard-panel__button__border-width * -1) ($dashboard-panel__button__border-width * -1) 0
diff --git a/packages/webui/src/client/ui/ClockView/CameraScreen/index.tsx b/packages/webui/src/client/ui/ClockView/CameraScreen/index.tsx
@@ -1,5 +1,11 @@
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { CameraContent, RemoteContent, SourceLayerType, SplitsContent } from '@sofie-automation/blueprints-integration'
+import {
+	CameraContent,
+	RemoteContent,
+	RemoteSpeakContent,
+	SourceLayerType,
+	SplitsContent,
+} from '@sofie-automation/blueprints-integration'
 import { RundownId, ShowStyleBaseId, StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { Rundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
 import { unprotectString } from '@sofie-automation/corelib/dist/protectedString'
@@ -163,7 +169,7 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 
 	const pieceFilterFunction = useMemo(() => {
 		return (piece: PieceExtended) => {
-			const camLikeContent = piece.instance.piece.content as CameraContent | RemoteContent
+			const camLikeContent = piece.instance.piece.content as CameraContent | RemoteContent | RemoteSpeakContent
 			if (
 				sourceLayerIds !== null &&
 				(piece.sourceLayer?._id === undefined || !sourceLayerIds.includes(piece.sourceLayer?._id))
diff --git a/packages/webui/src/client/ui/PieceIcons/PieceCountdown.tsx b/packages/webui/src/client/ui/PieceIcons/PieceCountdown.tsx
@@ -27,6 +27,7 @@ const supportedLayers = new Set([
 	SourceLayerType.STUDIO_SCREEN,
 	SourceLayerType.LIVE_SPEAK,
 	SourceLayerType.REMOTE,
+	SourceLayerType.REMOTE_SPEAK,
 	SourceLayerType.SPLITS,
 	SourceLayerType.VT,
 	SourceLayerType.CAMERA,
diff --git a/packages/webui/src/client/ui/PieceIcons/PieceIcon.tsx b/packages/webui/src/client/ui/PieceIcons/PieceIcon.tsx
@@ -11,6 +11,7 @@ import { VTInputIcon } from './Renderers/VTInputIcon'
 import SplitInputIcon from './Renderers/SplitInputIcon'
 import { RemoteInputIcon } from './Renderers/RemoteInputIcon'
 import { LiveSpeakInputIcon } from './Renderers/LiveSpeakInputIcon'
+import { RemoteSpeakInputIcon } from './Renderers/RemoteSpeakInputIcon'
 import { GraphicsInputIcon } from './Renderers/GraphicsInputIcon'
 import { UnknownInputIcon } from './Renderers/UnknownInputIcon'
 import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
@@ -54,6 +55,9 @@ export const PieceIcon = (props: {
 					/>
 				)
 			}
+			case SourceLayerType.REMOTE_SPEAK: {
+				return <RemoteSpeakInputIcon abbreviation={props.sourceLayer.abbreviation} />
+			}
 			case SourceLayerType.LOCAL: {
 				const localContent = piece ? (piece.content as EvsContent | undefined) : undefined
 				return (
@@ -90,6 +94,7 @@ export const pieceIconSupportedLayers = new Set([
 	SourceLayerType.GRAPHICS,
 	SourceLayerType.LIVE_SPEAK,
 	SourceLayerType.REMOTE,
+	SourceLayerType.REMOTE_SPEAK,
 	SourceLayerType.SPLITS,
 	SourceLayerType.VT,
 	SourceLayerType.CAMERA,
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/RemoteSpeakInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/RemoteSpeakInputIcon.tsx
@@ -0,0 +1,35 @@
+export function RemoteSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
+	return (
+		<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
+			<rect width="126.5" height="89" className="remote-speak" />
+			<linearGradient id="background-gradient" gradientTransform="rotate(90)">
+				<stop className="stop1" offset={0.5} />
+				<stop className="stop2" offset={0.5} />
+			</linearGradient>
+			<text
+				x="5"
+				y="66.514"
+				textLength="116.5"
+				style={{
+					fill: '#ffffff',
+					fontFamily: 'open-sans',
+					fontSize: '40px',
+					letterSpacing: '0px',
+					lineHeight: '1.25',
+					wordSpacing: '0px',
+					textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
+				}}
+				xmlSpace="preserve"
+			>
+				<tspan
+					x="5"
+					y="66.514"
+					style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
+					className="label"
+				>
+					{abbreviation ? abbreviation : 'RSK'}
+				</tspan>
+			</text>
+		</svg>
+	)
+}
diff --git a/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/StoryboardSecondaryPiece.tsx b/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/StoryboardSecondaryPiece.tsx
@@ -44,10 +44,12 @@ function renderPieceInside(
 		case SourceLayerType.SPLITS:
 			return SplitsRenderer({ ...props, elementOffset, hovering, typeClass })
 		case SourceLayerType.AUDIO:
+		case SourceLayerType.LIGHTS:
 		case SourceLayerType.CAMERA:
 		case SourceLayerType.LIVE_SPEAK:
 		case SourceLayerType.VT:
 		case SourceLayerType.LOCAL:
+		case SourceLayerType.REMOTE_SPEAK:
 		case SourceLayerType.REMOTE:
 		case SourceLayerType.TRANSITION:
 		case SourceLayerType.UNKNOWN:
diff --git a/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/Renderers/ThumbnailRendererFactory.tsx b/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/Renderers/ThumbnailRendererFactory.tsx
@@ -37,6 +37,7 @@ export const ThumbnailRenderer = React.memo(function ThumbnailRenderer(props: Re
 			return <VTThumbnailRenderer {...props} />
 		case SourceLayerType.CAMERA:
 		case SourceLayerType.REMOTE:
+		case SourceLayerType.REMOTE_SPEAK:
 			return <CameraThumbnailRenderer {...props} />
 		case SourceLayerType.SPLITS:
 			return <SplitsThumbnailRenderer {...props} />
@@ -49,6 +50,7 @@ export const ThumbnailRenderer = React.memo(function ThumbnailRenderer(props: Re
 		case SourceLayerType.AUDIO:
 		case SourceLayerType.SCRIPT:
 		case SourceLayerType.TRANSITION:
+		case SourceLayerType.LIGHTS:
 		case SourceLayerType.UNKNOWN:
 		case undefined:
 			return <DefaultThumbnailRenderer {...props} />
diff --git a/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnail.scss b/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnail.scss
@@ -16,6 +16,10 @@
 		background-color: var(--segment-layer-background-live-speak-1);
 		background-repeat: repeat-x;
 	}
+	&.remote-speak {
+		background-color: var(--segment-layer-background-remote-speak-1);
+		background-repeat: repeat-x;
+	}
 
 	&.segment-storyboard__part__thumbnail--placeholder {
 		background: lighten($segment-background-color, 10%);
diff --git a/packages/webui/src/client/ui/Settings/ShowStyle/SourceLayer.tsx b/packages/webui/src/client/ui/Settings/ShowStyle/SourceLayer.tsx
@@ -43,6 +43,8 @@ function sourceLayerString(t: TFunction<'translation', undefined>, type: SourceL
 			return t('Lower Third')
 		// case SourceLayerType.MIC:
 		// 	return t('Studio Microphone')
+		case SourceLayerType.REMOTE_SPEAK:
+			return t('Remote Speak')
 		case SourceLayerType.REMOTE:
 			return t('Remote Source')
 		case SourceLayerType.SCRIPT:
@@ -55,6 +57,8 @@ function sourceLayerString(t: TFunction<'translation', undefined>, type: SourceL
 			return t('Unknown Layer')
 		case SourceLayerType.AUDIO:
 			return t('Audio Mixing')
+		case SourceLayerType.LIGHTS:
+			return t('Lighting')
 		case SourceLayerType.TRANSITION:
 			return t('Transition')
 		// case SourceLayerType.LIGHTS:

Original file line number	Diff line number	Diff line change
`@@ -1914,7 +1914,7 @@ svg.icon {`
`1914`	`1914`	`}`
`1915`	`1915`
`1916`	`1916`	`&.splits,`
`1917`		`- &.live-speak {`
	`1917`	`+ &.live-speak &.remote-speak {`
`1918`	`1918`	`.segment-timeline__piece__preview {`
`1919`	`1919`	`position: absolute;`
`1920`	`1920`	`top: 0;`