fix: change OutputSettingsStore to expose outputSettings properties i…

…ndividually reactive. Also added outputSettings.patch() method.

packages/apps/backend/src/api-server/services/OutputSettingsService.ts

@@ -75,6 +75,10 @@ export class OutputSettingsService extends EventEmitter<Definition.Events> imple
 		this.store.outputSettings.update(data)
 		return this.get(null)
 	}
+	public async patch(_id: null, partialData: Partial<Data>, _params?: Params): Promise<Result> {
+		this.store.outputSettings.patch(partialData)
+		return this.get(null)
+	}
 
 	public async subscribe(_: unknown, params: Params): Promise<void> {
 		if (!params.connection) throw new Error('No connection!')

packages/apps/backend/src/data-stores/OutputSettingsStore.ts

@@ -34,6 +34,10 @@ export class OutputSettingsStore {
 	update(data: OutputSettings) {
 		this._updateIfChanged(data)
 	}
+	patch(partialData: Partial<OutputSettings>) {
+		const data = { ...this.outputSettings.get(), ...partialData }
+		this._updateIfChanged(data)
+	}
 
 	private _updateIfChanged(outputSettings: OutputSettings) {
 		if (!isEqual(this.outputSettings.get(), outputSettings)) {

packages/apps/client/src/TestController.tsx

@@ -15,9 +15,8 @@ const TestController: React.FC = observer(() => {
 	useEffect(() => {
 		RootAppStore.outputSettingsStore.initialize() // load and subscribe
 	}, [])
-	const outputSettings = computed(() => RootAppStore.outputSettingsStore.outputSettings).get()
+	const outputSettings = RootAppStore.outputSettingsStore.outputSettings
 
-	console.log('outputSettings', outputSettings)
 	const systemStatus = toJS(RootAppStore.systemStatusStore.systemStatus)
 
 	// useApiConnection(
@@ -96,7 +95,6 @@ const TestController: React.FC = observer(() => {
 						<EditObject
 							obj={outputSettings}
 							onChange={(newData) => {
-								// console.log('newdata', newData)
 								RootAppStore.connection.outputSettings.update(null, newData).catch(console.error)
 							}}
 						/>

packages/apps/client/src/TestUtil.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
 import { APIConnection } from './api/ApiConnection.ts'
+import { observer } from 'mobx-react-lite'
 
 export function useApiConnection(
 	effect: (connected: boolean) => void,
@@ -30,7 +31,7 @@ export function useApiConnection(
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const EditObject: React.FC<{ obj: any; onChange: (value: any) => void }> = ({ obj, onChange }) => {
+export const EditObject: React.FC<{ obj: any; onChange: (value: any) => void }> = observer(({ obj, onChange }) => {
 	const updateProperty = React.useCallback(
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		(key: string, value: any) => {
@@ -66,7 +67,7 @@ export const EditObject: React.FC<{ obj: any; onChange: (value: any) => void }>
 			</tbody>
 		</table>
 	)
-}
+})
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const EditValue: React.FC<{ value: any; onChange: (value: any) => void }> = ({ value, onChange }) => {
 	const valueType = typeof value

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

@@ -3,12 +3,16 @@ import { OutputSettings } from '@sofie-prompter-editor/shared-model'
 import { APIConnection, RootAppStore } from './RootAppStore.ts'
 
 export class OutputSettingsStore {
-	// showingOnlyScripts = false
-
-	// allRundowns = observable.map<RundownPlaylistId, UIRundownEntry>()
-	// openRundown: UIRundown | null = null
-
-	outputSettings: OutputSettings | null = null // observable.ref<OutputSettings | null>({})
+	outputSettings = observable.object<OutputSettings>({
+		fontSize: 0,
+		mirrorHorizontally: false,
+		mirrorVertically: false,
+		focusPosition: 'start',
+		showFocusPosition: false,
+		marginHorizontal: 0,
+		marginVertical: 0,
+		activeRundownPlaylistId: null,
+	})
 
 	initialized = false
 	private initializing = false
@@ -19,8 +23,6 @@ export class OutputSettingsStore {
 		makeObservable(this, {
 			outputSettings: observable,
 			initialized: observable,
-			// openRundown: observable,
-			// showingOnlyScripts: observable,
 		})
 
 		// Note: we DON'T initialize here,
@@ -43,7 +45,6 @@ export class OutputSettingsStore {
 				async (connected) => {
 					if (!connected) return
 
-					console.log('subscribing!')
 					await this.connection.outputSettings.subscribe()
 				},
 				{
@@ -53,7 +54,6 @@ export class OutputSettingsStore {
 		)
 
 		this.connection.outputSettings.on('updated', this.onUpdatedOutputSettings)
-		// Note: updated and removed events are handled by the UIRundownEntry's themselves
 	})
 	private loadInitialData = flow(function* (this: OutputSettingsStore) {
 		const outputSettings = yield this.connection.outputSettings.get(null)
@@ -63,11 +63,10 @@ export class OutputSettingsStore {
 	})
 
 	private onUpdatedOutputSettings = action('onUpdatedOutputSettings', (newData: OutputSettings) => {
-		this.outputSettings = newData
-		// for (const key in newData) {
-		// 	// @ts-expect-error hack?
-		// 	// this.outputSettings[key] = newData[key]
-		// }
+		for (const [key, value] of Object.entries(newData)) {
+			// @ts-expect-error hack
+			this.outputSettings[key] = value
+		}
 	})
 
 	destroy = () => {

packages/shared/model/src/client-server-api/OutputSettingsService.ts

@@ -14,7 +14,7 @@ export const ALL_METHODS = [
 	'get',
 	// 'create',
 	'update',
-	// 'patch',
+	'patch',
 	// 'remove',
 	//
 	'subscribe',
@@ -26,6 +26,7 @@ interface Methods {
 	get(id: null, params?: Params): Promise<Data>
 	// create(data: Data, params?: Params): Promise<Result>
 	update(id: null, data: Data, params?: Params): Promise<Result>
+	patch(_id: null, _data: Partial<Data>, _params?: Params): Promise<Result>
 
 	/** Subscribe to Controller data */
 	subscribe(_?: unknown, params?: Params): Promise<void>