feat: routeset controlled ab player assignment

meteor/__mocks__/defaultCollectionObjects.ts

@@ -108,8 +108,8 @@ export function defaultStudio(_id: StudioId): DBStudio {
 			minimumTakeSpan: DEFAULT_MINIMUM_TAKE_SPAN,
 		},
 		_rundownVersionHash: '',
-		routeSets: {},
-		routeSetExclusivityGroups: {},
+		routeSetsWithOverrides: wrapDefaultObject({}),
+		routeSetExclusivityGroupsWithOverrides: wrapDefaultObject({}),
 		packageContainers: {},
 		previewContainerIds: [],
 		thumbnailContainerIds: [],

meteor/client/lib/Components/Checkbox.tsx

@@ -6,6 +6,7 @@ import ClassNames from 'classnames'
 interface ICheckboxControlProps {
 	classNames?: string
 	disabled?: boolean
+	title?: string
 
 	value: boolean
 	handleUpdate: (value: boolean) => void
@@ -15,6 +16,7 @@ export function CheckboxControl({
 	value,
 	disabled,
 	handleUpdate,
+	title,
 }: Readonly<ICheckboxControlProps>): JSX.Element {
 	const handleChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -25,11 +27,18 @@ export function CheckboxControl({
 
 	return (
 		<span className={ClassNames('checkbox', classNames)}>
-			<input type="checkbox" className="form-control" checked={value} onChange={handleChange} disabled={disabled} />
-			<span className="checkbox-checked">
+			<input
+				type="checkbox"
+				className="form-control"
+				checked={value}
+				onChange={handleChange}
+				disabled={disabled}
+				title={title}
+			/>
+			<span className="checkbox-checked" title={title}>
 				<FontAwesomeIcon icon={faCheckSquare} />
 			</span>
-			<span className="checkbox-unchecked">
+			<span className="checkbox-unchecked" title={title}>
 				<FontAwesomeIcon icon={faSquare} />
 			</span>
 		</span>

meteor/client/lib/Components/LabelAndOverrides.tsx

@@ -16,6 +16,7 @@ export interface LabelAndOverridesProps<T extends object, TValue> {
 	opPrefix: string
 	overrideHelper: OverrideOpHelperForItemContents
 
+	showClearButton?: boolean
 	formatDefaultValue?: (value: any) => JSX.Element | string | null
 
 	children: (value: TValue, setValue: (value: TValue) => void) => React.ReactNode
@@ -33,6 +34,7 @@ export function LabelAndOverrides<T extends object, TValue = any>({
 	itemKey,
 	opPrefix,
 	overrideHelper,
+	showClearButton,
 	formatDefaultValue,
 }: Readonly<LabelAndOverridesProps<T, TValue>>): JSX.Element {
 	const { t } = useTranslation()
@@ -51,7 +53,7 @@ export function LabelAndOverrides<T extends object, TValue = any>({
 
 	let displayValue: JSX.Element | string | null = '""'
 	if (item.defaults) {
-		const defaultValue: any = item.defaults[itemKey]
+		const defaultValue: any = objectPathGet(item.defaults, String(itemKey))
 		// Special cases for formatting of the default
 		if (formatDefaultValue) {
 			displayValue = formatDefaultValue(defaultValue)
@@ -75,7 +77,16 @@ export function LabelAndOverrides<T extends object, TValue = any>({
 		<label className="field">
 			<LabelActual label={label} />
 
-			{children(value, setValue)}
+			<div className="field-content">
+				{showClearButton && (
+					<button className="btn btn-primary field-clear" onClick={() => setValue(undefined)} title={t('Clear value')}>
+						&nbsp;
+						<FontAwesomeIcon icon={faSync} />
+					</button>
+				)}
+
+				{children(value, setValue)}
+			</div>
 
 			{item.defaults && (
 				<>

meteor/client/lib/forms/SchemaFormWithOverrides.tsx

@@ -46,13 +46,16 @@ interface FormComponentProps {
 		overrideHelper: OverrideOpHelperForItemContents
 		itemKey: string
 		opPrefix: string
+
+		/** Whether a clear button should be showed for fields not marked as "required" */
+		showClearButton: boolean
 	}
 
 	/** Whether this field has been marked as "required" */
 	isRequired: boolean
 }
 
-function useChildPropsForFormComponent(props: Readonly<SchemaFormWithOverridesProps>) {
+function useChildPropsForFormComponent(props: Readonly<SchemaFormWithOverridesProps>): FormComponentProps {
 	return useMemo(() => {
 		const title = getSchemaUIField(props.schema, SchemaFormUIField.Title) || props.attr
 		const description = getSchemaUIField(props.schema, SchemaFormUIField.Description)
@@ -67,10 +70,20 @@ function useChildPropsForFormComponent(props: Readonly<SchemaFormWithOverridesPr
 				itemKey: props.attr,
 				opPrefix: props.item.id,
 				overrideHelper: props.overrideHelper,
+
+				showClearButton: !!props.showClearButtonForNonRequiredFields && !props.isRequired,
 			},
 			isRequired: props.isRequired,
 		}
-	}, [props.schema, props.translationNamespaces, props.attr, props.item, props.overrideHelper, props.isRequired])
+	}, [
+		props.schema,
+		props.translationNamespaces,
+		props.attr,
+		props.item,
+		props.overrideHelper,
+		props.isRequired,
+		props.showClearButtonForNonRequiredFields,
+	])
 }
 
 export function SchemaFormWithOverrides(props: Readonly<SchemaFormWithOverridesProps>): JSX.Element {
@@ -179,6 +192,7 @@ const ObjectFormWithOverrides = (props: Readonly<SchemaFormWithOverridesProps>)
 						sofieEnumDefinitons={props.sofieEnumDefinitons}
 						allowTables={props.allowTables}
 						isRequired={props.schema.required?.includes(index) ?? false}
+						showClearButtonForNonRequiredFields={props.showClearButtonForNonRequiredFields}
 					/>
 				)
 			})}

meteor/client/lib/forms/schemaFormUtil.tsx

@@ -30,6 +30,11 @@ export interface SchemaFormCommonProps {
 	 * For example, a table inside a table will not display properly so this gets set automatically
 	 */
 	allowTables?: boolean
+
+	/**
+	 * Whether a clear button should be shown for any fields not marked as "required"
+	 */
+	showClearButtonForNonRequiredFields?: boolean
 }
 
 export function translateStringIfHasNamespaces(str: string, translationNamespaces: string[] | undefined): string {

meteor/client/lib/triggers/TriggersHandler.tsx

@@ -32,6 +32,7 @@ import {
 	RundownId,
 	RundownPlaylistId,
 	ShowStyleBaseId,
+	StudioId,
 	TriggeredActionId,
 } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import {
@@ -48,6 +49,7 @@ import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
 type HotkeyTriggerListener = (e: KeyboardEvent) => void
 
 interface IProps {
+	studioId: StudioId
 	rundownPlaylistId: RundownPlaylistId
 	currentRundownId: RundownId | null
 	showStyleBaseId: ShowStyleBaseId
@@ -317,6 +319,7 @@ export const TriggersHandler: React.FC<IProps> = function TriggersHandler(
 				let context = rundownPlaylistContext.get()
 				if (context === null) {
 					context = {
+						studioId: new ReactiveVar(props.studioId),
 						rundownPlaylistId: new ReactiveVar(playlist._id),
 						rundownPlaylist: new ReactiveVar(playlist),
 						currentRundownId: new ReactiveVar(props.currentRundownId),
@@ -339,6 +342,7 @@ export const TriggersHandler: React.FC<IProps> = function TriggersHandler(
 			}
 		})
 	}, [
+		props.studioId,
 		props.rundownPlaylistId,
 		props.currentRundownId,
 		props.currentPartId,

meteor/client/ui/RundownView.tsx

@@ -2992,8 +2992,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 									onToggleSupportPanel={this.onToggleSupportPanel}
 									isStudioMode={this.state.studioMode}
 									onTake={this.onTake}
-									studioRouteSets={studio.routeSets}
-									studioRouteSetExclusivityGroups={studio.routeSetExclusivityGroups}
+									studio={studio}
 									onStudioRouteSetSwitch={this.onStudioRouteSetSwitch}
 									onSegmentViewMode={this.onSegmentViewModeChange}
 								/>
@@ -3204,6 +3203,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 						this.props.studio &&
 						this.props.showStyleBase && (
 							<TriggersHandler
+								studioId={this.props.studio._id}
 								rundownPlaylistId={this.props.rundownPlaylistId}
 								showStyleBaseId={this.props.showStyleBase._id}
 								currentRundownId={this.props.currentRundown?._id || null}

meteor/client/ui/RundownView/RundownRightHandControls.tsx

@@ -2,11 +2,7 @@ import React, { useEffect, useState } from 'react'
 // @ts-expect-error No types available
 import * as VelocityReact from 'velocity-react'
 
-import {
-	StudioRouteSet,
-	StudioRouteBehavior,
-	StudioRouteSetExclusivityGroup,
-} from '@sofie-automation/corelib/dist/dataModel/Studio'
+import { StudioRouteSet, StudioRouteBehavior } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import { RewindAllSegmentsIcon } from '../../lib/ui/icons/rewindAllSegmentsIcon'
 
 import { Lottie } from '@crello/react-lottie'
@@ -26,15 +22,11 @@ import { SegmentViewMode } from '../../lib/ui/icons/listView'
 import { RundownPlaylistId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { MediaStatusPopUp } from './MediaStatusPopUp'
 import { MediaStatusIcon } from '../../lib/ui/icons/mediaStatus'
+import { UIStudio } from '../../../lib/api/studios'
 
 interface IProps {
 	playlistId: RundownPlaylistId
-	studioRouteSets: {
-		[id: string]: StudioRouteSet
-	}
-	studioRouteSetExclusivityGroups: {
-		[id: string]: StudioRouteSetExclusivityGroup
-	}
+	studio: UIStudio
 	isFollowingOnAir: boolean
 	onFollowOnAir?: () => void
 	onRewindSegments?: () => void
@@ -108,9 +100,13 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 		setSwitchboardOpen(false)
 	}
 
-	const availableRouteSets = Object.entries<StudioRouteSet>(props.studioRouteSets).filter(
-		([_id, routeSet]) => routeSet.behavior !== StudioRouteBehavior.HIDDEN
-	)
+	const availableRouteSets = Object.entries<StudioRouteSet>(props.studio.routeSets)
+		.filter(([_id, routeSet]) => routeSet.behavior !== StudioRouteBehavior.HIDDEN)
+		.sort((a, b) => {
+			if (a[1].name < b[1].name) return -1
+			if (a[1].name > b[1].name) return 1
+			return 0
+		})
 	const nonDefaultRoutes = availableRouteSets.filter(
 		([_id, routeSet]) => routeSet.defaultActive !== undefined && routeSet.active !== routeSet.defaultActive
 	).length
@@ -238,7 +234,7 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 					<SegmentViewMode />
 				</button>
 				{props.isStudioMode &&
-					props.studioRouteSets &&
+					props.studio.routeSets &&
 					props.onStudioRouteSetSwitch &&
 					availableRouteSets.length > 0 && (
 						<>
@@ -282,7 +278,7 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 								{switchboardOpen && (
 									<SwitchboardPopUp
 										availableRouteSets={availableRouteSets}
-										studioRouteSetExclusivityGroups={props.studioRouteSetExclusivityGroups}
+										studio={props.studio}
 										onStudioRouteSetSwitch={props.onStudioRouteSetSwitch}
 									/>
 								)}

meteor/client/ui/RundownView/SwitchboardPopUp.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-	StudioRouteSet,
-	StudioRouteSetExclusivityGroup,
-	StudioRouteBehavior,
-} from '@sofie-automation/corelib/dist/dataModel/Studio'
+import { StudioRouteSet, StudioRouteBehavior } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import classNames from 'classnames'
 import { RouteSetOverrideIcon } from '../../lib/ui/icons/switchboard'
 import Tooltip from 'rc-tooltip'
 import { TOOLTIP_DEFAULT_DELAY } from '../../lib/lib'
+import { UIStudio } from '../../../lib/api/studios'
 
 interface IProps {
 	onStudioRouteSetSwitch?: (
@@ -18,9 +15,7 @@ interface IProps {
 		state: boolean
 	) => void
 	availableRouteSets: [string, StudioRouteSet][]
-	studioRouteSetExclusivityGroups: {
-		[id: string]: StudioRouteSetExclusivityGroup
-	}
+	studio: UIStudio
 }
 
 /**
@@ -43,8 +38,8 @@ export function SwitchboardPopUp(props: Readonly<IProps>): JSX.Element {
 				<h2 className="mhn mvn">{t('Switchboard')}</h2>
 				{Object.entries<[string, StudioRouteSet][]>(exclusivityGroups).map(([key, routeSets]) => (
 					<div className="switchboard-pop-up-panel__group" key={key}>
-						{props.studioRouteSetExclusivityGroups[key]?.name && (
-							<p className="mhs mbs mtn">{props.studioRouteSetExclusivityGroups[key]?.name}</p>
+						{props.studio.routeSetExclusivityGroups[key]?.name && (
+							<p className="mhs mbs mtn">{props.studio.routeSetExclusivityGroups[key]?.name}</p>
 						)}
 						{routeSets.length === 2 &&
 						routeSets[0][1].behavior === StudioRouteBehavior.ACTIVATE_ONLY &&
@@ -164,7 +159,66 @@ export function SwitchboardPopUp(props: Readonly<IProps>): JSX.Element {
 						)}
 					</div>
 				))}
+				{/* <AbPoolsDisabling studio={props.studio} onStudioAbPoolDisablingSwitch={props.onStudioAbPoolDisablingSwitch} /> */}
 			</div>
 		</div>
 	)
 }
+
+// function AbPoolsDisabling(props: {
+// 	onStudioAbPoolDisablingSwitch?: IProps['onStudioAbPoolDisablingSwitch']
+// 	studio: UIStudio
+// }) {
+// 	const { t } = useTranslation()
+// 	if (!abPools) return <div />
+
+// 	return (
+// 		<div className="switchboard-pop-up-panel__group">
+// 			{Object.keys(abPools).map((poolKey: string) => {
+// 				const abPool = abPools[poolKey]
+// 				return (
+// 					<div key={poolKey} className="switchboard-pop-up-panel__group__controls">
+// 						AB Pool - {poolKey}:
+// 						<div className="switchboard-pop-up-panel__group">
+// 							{Object.keys(abPool.players).map((playerKey: string) => {
+// 								const player = abPool.players[playerKey]
+// 								return (
+// 									<div key={playerKey} className="switchboard-pop-up-panel__group__controls mhm mbs">
+// 										<span className="switchboard-pop-up-panel__group__controls__active">{t('Off')}</span>
+// 										<a
+// 											className={classNames('switch-button', 'sb-nocolor', {
+// 												'sb-on': !player.disabled,
+// 											})}
+// 											role="button"
+// 											onClick={(e) => {
+// 												props.onStudioAbPoolDisablingSwitch &&
+// 													props.onStudioAbPoolDisablingSwitch(e, poolKey, playerKey, !player.disabled)
+// 											}}
+// 											tabIndex={0}
+// 										>
+// 											<div className="sb-content">
+// 												<div className="sb-label">
+// 													<span className="mls">&nbsp;</span>
+// 													<span className="mrs right">&nbsp;</span>
+// 												</div>
+// 												<div className="sb-switch"></div>
+// 											</div>
+// 										</a>
+// 										<span
+// 											className={classNames({
+// 												'switchboard-pop-up-panel__group__controls__active': !player.disabled,
+// 												'switchboard-pop-up-panel__group__controls__inactive': player.disabled,
+// 											})}
+// 										>
+// 											{playerKey}
+// 										</span>
+// 									</div>
+// 								)
+// 							})}
+// 						</div>
+// 					</div>
+// 				)
+// 			})}
+// 		</div>
+// 	)
+// }

meteor/client/ui/Settings/Forms.scss

@@ -1,6 +1,6 @@
 .properties-grid {
 	display: grid;
-	grid-auto-columns: fit-content(350px) minmax(350px, 1fr) fit-content(350px) minmax(max-content, 100px);
+	grid-auto-columns: fit-content(350px) auto minmax(350px, 1fr) fit-content(350px) minmax(max-content, 100px);
 	gap: 0 10px;
 	margin-left: 10px;
 
@@ -28,6 +28,14 @@
 	grid-column: 1 / 5;
 }
 
+.properties-grid > .field > .field-content {
+	text-wrap: nowrap;
+
+	.field-clear {
+		margin-bottom: -6px !important;
+	}
+}
+
 .properties-grid > .field > .field-hint {
 	grid-column: 1 / 5;
 }