feat: whenConnected helper method on RootAppStore

packages/apps/client/src/CurrentRundown/CurrentRundown.tsx

@@ -6,6 +6,7 @@ import { Segment } from './Segment'
 import { Button } from 'react-bootstrap'
 import classes from './CurrentRundown.module.scss'
 import { useNavigate } from 'react-router-dom'
+import { SystemStatusAlertBars } from '../components/SystemStatusAlertBars/SystemStatusAlertBars'
 
 const CurrentRundown = observer((): React.JSX.Element => {
 	const openRundown = RootAppStore.rundownStore.openRundown
@@ -20,14 +21,22 @@ const CurrentRundown = observer((): React.JSX.Element => {
 		navigate('/')
 	})
 
+	const onSendToOutput = action(() => {
+		RootAppStore.rundownStore.sendRundownToOutput(openRundown.id)
+	})
+
 	return (
 		<>
 			<h1>{openRundown.name}</h1>
 			<p>
 				<Button variant="secondary" onClick={onClose}>
 					Close
 				</Button>
+				<Button variant="primary" onClick={onSendToOutput}>
+					Send to Output
+				</Button>
 			</p>
+			<SystemStatusAlertBars />
 			<ul className={classes.SegmentLineList}>
 				{openRundown.segmentsInOrder.map((segment) => (
 					<li key={segment.id} data-segment-id={segment.id} className={classes.SegmentContainer}>

packages/apps/client/src/RundownList/RundownList.tsx

@@ -4,12 +4,14 @@ import { observer } from 'mobx-react-lite'
 import { RootAppStore } from '../stores/RootAppStore'
 import { UIRundownId } from '../model/UIRundown'
 import { RundownEntry } from './RundownEntry'
+import { SystemStatusAlertBars } from '../components/SystemStatusAlertBars/SystemStatusAlertBars'
 
 export const RundownList = observer((): React.JSX.Element => {
 	const allRundownIds = keys<UIRundownId>(RootAppStore.rundownStore.allRundowns)
 
 	return (
 		<>
+			<SystemStatusAlertBars />
 			<ul>
 				{allRundownIds.map((rundownId) => (
 					<li key={rundownId}>

packages/apps/client/src/components/AlertBar/AlertBar.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Alert } from 'react-bootstrap'
+
+export function AlertBar({
+	children,
+	variant,
+}: {
+	children?: React.ReactNode
+	variant?: AlertVariants
+}): React.JSX.Element {
+	return <Alert variant={variant ?? 'primary'}>{children}</Alert>
+}
+
+type AlertVariants = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'

packages/apps/client/src/components/SystemStatusAlertBars/SystemStatusAlertBars.tsx

@@ -0,0 +1,16 @@
+import { observer } from 'mobx-react-lite'
+import React from 'react'
+import { RootAppStore } from '../../stores/RootAppStore'
+import { AlertBar } from '../AlertBar/AlertBar'
+
+export const SystemStatusAlertBars = observer(function SystemStatusAlertBars(): React.JSX.Element {
+	const isAPIConnected = RootAppStore.connected
+	const isSofieConnected = RootAppStore.sofieConnected
+	return (
+		<>
+			{!isAPIConnected ? <AlertBar variant="danger">Prompter is having network troubles</AlertBar> : null}
+			{isSofieConnected ? <AlertBar variant="danger">Prompter is having network troubles</AlertBar> : null}
+		</>
+	)
+})
+SystemStatusAlertBars.displayName = 'SystemStatusAlertBars'

packages/apps/client/src/stores/RootAppStore.ts

@@ -1,5 +1,5 @@
 import type EventEmitter from 'eventemitter3'
-import { action, makeObservable, observable } from 'mobx'
+import { IReactionDisposer, action, makeObservable, observable, reaction } from 'mobx'
 import { RundownStore } from './RundownStore.ts'
 import { MockConnection } from '../mocks/MockConnection.ts'
 import { UIStore } from './UIStore.ts'
@@ -22,6 +22,7 @@ const USE_MOCK_CONNECTION = false
 
 class RootAppStoreClass {
 	connected = false
+	sofieConnected = false
 	connection: APIConnection
 	rundownStore: RundownStore
 	outputSettingsStore: OutputSettingsStore
@@ -30,6 +31,7 @@ class RootAppStoreClass {
 	constructor() {
 		makeObservable(this, {
 			connected: observable,
+			sofieConnected: observable,
 		})
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -42,15 +44,44 @@ class RootAppStoreClass {
 		this.connection.on('disconnected', this.onDisconnected)
 
 		this.connection.on('connected', this.onConnected)
+
+		this.connection.systemStatus.subscribe()
+		this.connection.systemStatus.on('updated', this.onSystemStatusUpdated)
+
+		this.connection.systemStatus.get('').then(this.onSystemStatusUpdated)
 	}
 
+	onSystemStatusUpdated = action(
+		'onSystemStatusUpdated',
+		(systemStatus: { statusMessage: string | null; connectedToCore: boolean }) => {
+			console.log(systemStatus)
+			this.sofieConnected = systemStatus.connectedToCore
+		}
+	)
+
 	onConnected = action('onConnected', () => {
+		console.log('Backend connected')
 		this.connected = true
 	})
 
 	onDisconnected = action('onDisconnected', () => {
+		console.log('Backend disconnected')
 		this.connected = false
 	})
+
+	whenConnected = (clb: () => void | Promise<void>): IReactionDisposer => {
+		return reaction(
+			() => this.connected,
+			async (connected) => {
+				if (!connected) return
+
+				await clb()
+			},
+			{
+				fireImmediately: true,
+			}
+		)
+	}
 }
 
 export const RootAppStore = new RootAppStoreClass()

packages/apps/client/src/stores/RundownStore.ts

@@ -1,5 +1,5 @@
 import { observable, action, flow, makeObservable, IReactionDisposer, reaction } from 'mobx'
-import { RundownPlaylist, RundownPlaylistId } from '@sofie-prompter-editor/shared-model'
+import { OutputSettings, RundownPlaylist, RundownPlaylistId } from '@sofie-prompter-editor/shared-model'
 import { APIConnection, RootAppStore } from './RootAppStore'
 import { UIRundown } from '../model/UIRundown'
 import { UIRundownEntry } from '../model/UIRundownEntry'
@@ -10,33 +10,42 @@ export class RundownStore {
 	allRundowns = observable.map<RundownPlaylistId, UIRundownEntry>()
 	openRundown: UIRundown | null = null
 
+	outputSettings: OutputSettings | null = null
+
 	reactions: IReactionDisposer[] = []
 
 	constructor(public appStore: typeof RootAppStore, public connection: APIConnection) {
 		makeObservable(this, {
 			openRundown: observable,
 			showingOnlyScripts: observable,
+			outputSettings: observable,
 		})
 
 		// get all rundowns
 		this.setupUIRundownDataSubscriptions()
 		this.loadAllUIRundownData()
+
+		this.setupOutputSettingsSubscription()
+		this.loadOutputSettingsData()
 	}
 
+	setupOutputSettingsSubscription = action(() => {
+		this.reactions.push(this.appStore.whenConnected(() => this.connection.outputSettings.subscribeToController()))
+
+		this.connection.outputSettings.on('created', this.onOutputSettingsUpdated)
+		this.connection.outputSettings.on('updated', this.onOutputSettingsUpdated)
+	})
+
+	private onOutputSettingsUpdated = action('onOutputSettingsUpdated', (outputSettings: OutputSettings) => {
+		this.outputSettings = outputSettings
+	})
+
+	loadOutputSettingsData = action(() => {
+		this.connection.outputSettings.get('').then(this.onOutputSettingsUpdated)
+	})
+
 	setupUIRundownDataSubscriptions = action(() => {
-		this.reactions.push(
-			reaction(
-				() => this.appStore.connected,
-				async (connected) => {
-					if (!connected) return
-
-					await this.connection.playlist.subscribeToPlaylists()
-				},
-				{
-					fireImmediately: true,
-				}
-			)
-		)
+		this.reactions.push(this.appStore.whenConnected(() => this.connection.playlist.subscribeToPlaylists()))
 
 		this.connection.playlist.on('created', this.onPlaylistCreated)
 		// Note: updated and removed events are handled by the UIRundownEntry's themselves
@@ -86,6 +95,15 @@ export class RundownStore {
 		this.openRundown = newRundown
 	})
 
+	sendRundownToOutput = (id: RundownPlaylistId) => {
+		if (!this.outputSettings) return
+		// TODO: This really shouldn't require the entire outputSettings object to be available first
+		this.connection.outputSettings.update('', {
+			...this.outputSettings,
+			activeRundownPlaylistId: id,
+		})
+	}
+
 	destroy = () => {
 		this.reactions.forEach((dispose) => dispose())
 	}