fix: type mismatch and confusing ui for enabling/disabling ab players

Author: Julusian

packages/job-worker/src/playout/abPlayback/__tests__/routeSetDisabling.spec.ts

@@ -26,6 +26,35 @@ describe('route set disabling ab players', () => {
 		expect(result).toEqual(DEFAULT_PLAYERS)
 	})
 
+	test('mismatch of playerId types', () => {
+		const routesets: Record<string, StudioRouteSet> = {
+			route1: {
+				name: '',
+				active: false,
+				behavior: StudioRouteBehavior.TOGGLE,
+				routes: [],
+				abPlayers: [
+					{
+						poolName: POOL_NAME,
+						playerId: '1', // because ui field is always a string
+					},
+				],
+			},
+		}
+
+		const players: ABPlayerDefinition[] = [
+			{
+				playerId: 1, // number because blueprint defined it as such
+			},
+			{ playerId: 2 },
+		]
+
+		const result = runDisablePlayersFiltering(routesets, players)
+
+		const expectedPlayers = players.filter((p) => p.playerId !== 1)
+		expect(result).toEqual(expectedPlayers)
+	})
+
 	describe('single routeset per player', () => {
 		const ROUTESETS_SEPARATE: Record<string, StudioRouteSet> = {
 			pl1: {

packages/job-worker/src/playout/abPlayback/routeSetDisabling.ts

@@ -1,11 +1,12 @@
-import type { ABPlayerDefinition, AbPlayerId } from '@sofie-automation/blueprints-integration'
+import type { ABPlayerDefinition } from '@sofie-automation/blueprints-integration'
 import type { StudioRouteSet } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import { logger } from '../../logging'
 
 /**
  * Map<poolName, Map<playerId, disablePlayer>>
+ * Note: this explicitly uses a string for the playerId, to avoid issues with types for values from the ui
  */
-type MembersOfRouteSets = Map<string, Map<AbPlayerId, boolean>>
+type MembersOfRouteSets = Map<string, Map<string, boolean>>
 
 export function findPlayersInRouteSets(routeSets: Record<string, StudioRouteSet>): MembersOfRouteSets {
 	const routeSetEnabledPlayers: MembersOfRouteSets = new Map()
@@ -18,8 +19,8 @@ export function findPlayersInRouteSets(routeSets: Record<string, StudioRouteSet>
 			}
 
 			// Make sure player is marked as enabled
-			const currentState = poolEntry.get(abPlayer.playerId)
-			poolEntry.set(abPlayer.playerId, currentState || routeSet.active)
+			const currentState = poolEntry.get(String(abPlayer.playerId))
+			poolEntry.set(String(abPlayer.playerId), currentState || routeSet.active)
 		}
 	}
 	return routeSetEnabledPlayers
@@ -35,7 +36,7 @@ export function abPoolFilterDisabled(
 
 	// Filter out any disabled players:
 	return players.filter((player) => {
-		const playerState = poolRouteSetEnabledPlayers.get(player.playerId)
+		const playerState = poolRouteSetEnabledPlayers.get(String(player.playerId))
 		if (playerState === false) {
 			logger.silly(`AB Pool ${poolName} playerId : ${player.playerId} are disabled`)
 			return false

packages/webui/src/client/ui/Settings/Studio/Routings/RouteSetAbPlayers.tsx

@@ -115,9 +115,9 @@ function AbPlayerRow({
 			</button>
 			<div className="properties-grid">
 				<LabelAndOverrides
-					label={t('Pool PlayerId')}
+					label={t('Pool name')}
 					item={player}
-					itemKey={'playerId'}
+					itemKey={'poolName'}
 					opPrefix={player.id}
 					overrideHelper={tableOverrideHelper}
 				>
@@ -131,9 +131,9 @@ function AbPlayerRow({
 					)}
 				</LabelAndOverrides>
 				<LabelAndOverrides
-					label={t('Pool name')}
+					label={t('Pool PlayerId')}
 					item={player}
-					itemKey={'poolName'}
+					itemKey={'playerId'}
 					opPrefix={player.id}
 					overrideHelper={tableOverrideHelper}
 				>