Merge branch 'wip/backend-frontend' of github.com:nrkno/sofie-prompte…

…r-editor into wip/backend-frontend # Conflicts: # packages/apps/client/src/stores/RootAppStore.ts
nrkno · Jan 18, 2024 · 8389fc0 · 8389fc0
2 parents b092263 + 401ee40
commit 8389fc0
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 34 deletions.
diff --git a/packages/apps/client/src/CurrentRundown/CurrentRundown.tsx b/packages/apps/client/src/CurrentRundown/CurrentRundown.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import { action } from 'mobx'
 import { observer } from 'mobx-react-lite'
-import { AppStore } from '../stores/AppStore'
+import { RootAppStore } from '../stores/RootAppStore'
 import { Segment } from './Segment'
 import { Button } from 'react-bootstrap'
 import classes from './CurrentRundown.module.scss'
 import { useNavigate } from 'react-router-dom'
 
 const CurrentRundown = observer((): React.JSX.Element => {
-	const openRundown = AppStore.rundownStore.openRundown
+	const openRundown = RootAppStore.rundownStore.openRundown
 	const navigate = useNavigate()
 
 	if (!openRundown) {

diff --git a/packages/apps/client/src/CurrentRundown/Segment.tsx b/packages/apps/client/src/CurrentRundown/Segment.tsx
@@ -3,19 +3,19 @@ import { observer } from 'mobx-react-lite'
 import { UISegment } from '../model/UISegment'
 import { Line } from './Line'
 import classes from './CurrentRundown.module.scss'
-import { AppStore } from '../stores/AppStore'
+import { RootAppStore } from '../stores/RootAppStore'
 import { UILineId } from '../model/UILine'
 
 const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Element | null => {
 	if (!segment) return null
 
 	function isSelected(lineId: UILineId) {
-		return lineId === AppStore.uiStore.selectedLineId
+		return lineId === RootAppStore.uiStore.selectedLineId
 	}
 
 	function onClick(e: React.MouseEvent<HTMLLIElement>) {
 		const lineId = e.currentTarget.dataset['lineId'] as UILineId
-		AppStore.uiStore.setSelectedLineId(lineId)
+		RootAppStore.uiStore.setSelectedLineId(lineId)
 	}
 
 	return (

diff --git a/packages/apps/client/src/RundownList/RundownEntry.tsx b/packages/apps/client/src/RundownList/RundownEntry.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import { AppStore } from '../stores/AppStore'
+import { RootAppStore } from '../stores/RootAppStore'
 import { UIRundownId } from '../model/UIRundown'
 import { Button } from 'react-bootstrap'
 import { useNavigate } from 'react-router-dom'
 
 export const RundownEntry = observer(({ rundownId }: { rundownId: UIRundownId }): React.JSX.Element => {
-	const rundownEntry = AppStore.rundownStore.allRundowns.get(rundownId)
+	const rundownEntry = RootAppStore.rundownStore.allRundowns.get(rundownId)
 	const navigate = useNavigate()
 
 	const onOpen = () => {

diff --git a/packages/apps/client/src/RundownList/RundownList.tsx b/packages/apps/client/src/RundownList/RundownList.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { keys } from 'mobx'
 import { observer } from 'mobx-react-lite'
-import { AppStore } from '../stores/AppStore'
+import { RootAppStore } from '../stores/RootAppStore'
 import { UIRundownId } from '../model/UIRundown'
 import { RundownEntry } from './RundownEntry'
 
 export const RundownList = observer((): React.JSX.Element => {
-	const allRundownIds = keys<UIRundownId>(AppStore.rundownStore.allRundowns)
+	const allRundownIds = keys<UIRundownId>(RootAppStore.rundownStore.allRundowns)
 
 	return (
 		<>

diff --git a/packages/apps/client/src/RundownScript/RundownScript.tsx b/packages/apps/client/src/RundownScript/RundownScript.tsx
@@ -5,7 +5,7 @@ import { CurrentRundown } from '../CurrentRundown/CurrentRundown'
 import { ScriptEditor } from '../ScriptEditor/ScriptEditor'
 import { Helmet } from 'react-helmet-async'
 import { RundownPlaylistId, protectString } from '@sofie-prompter-editor/shared-model'
-import { AppStore } from '../stores/AppStore'
+import { RootAppStore } from '../stores/RootAppStore'
 import { useParams } from 'react-router-dom'
 import { SplitPanel } from '../components/SplitPanel/SplitPanel'
 
@@ -17,7 +17,7 @@ const RundownScript = observer((): React.JSX.Element => {
 	useEffect(() => {
 		if (!playlistId) return
 
-		AppStore.rundownStore.loadRundown(playlistId)
+		RootAppStore.rundownStore.loadRundown(playlistId)
 	}, [playlistId])
 
 	return (
@@ -27,8 +27,8 @@ const RundownScript = observer((): React.JSX.Element => {
 				<body data-bs-theme="dark" />
 			</Helmet>
 			<SplitPanel
-				position={AppStore.uiStore.viewDividerPosition}
-				onChange={(e) => AppStore.uiStore.setViewDividerPosition(e.value)}
+				position={RootAppStore.uiStore.viewDividerPosition}
+				onChange={(e) => RootAppStore.uiStore.setViewDividerPosition(e.value)}
 				className={classes.RundownScript}
 				childrenBegin={<CurrentRundown />}
 				childrenEnd={<ScriptEditor />}

diff --git a/packages/apps/client/src/ScriptEditor/Editor.tsx b/packages/apps/client/src/ScriptEditor/Editor.tsx
@@ -14,7 +14,7 @@ import { readOnlyNodeFilter } from './plugins/readOnlyNodeFilter'
 import { formatingKeymap } from './keymaps'
 import { deselectAll } from './commands/deselectAll'
 import { fromMarkdown } from '../lib/prosemirrorDoc'
-import { AppStore } from '../stores/AppStore'
+import { RootAppStore } from '../stores/RootAppStore'
 import { IReactionDisposer, reaction } from 'mobx'
 
 export function Editor({
@@ -112,7 +112,7 @@ export function Editor({
 
 		const mainDisposer = reaction(
 			() => {
-				const openRundown = AppStore.rundownStore.openRundown
+				const openRundown = RootAppStore.rundownStore.openRundown
 
 				if (!openRundown) return null
 
@@ -133,7 +133,7 @@ export function Editor({
 				console.log(performance.mark('begin'))
 				lineReactionDisposers.forEach((destr) => destr())
 
-				const openRundown = AppStore.rundownStore.openRundown
+				const openRundown = RootAppStore.rundownStore.openRundown
 
 				if (!rundown || !editorView.current || !openRundown) return
 

diff --git a/packages/apps/client/src/stores/AppStore.ts → ...es/apps/client/src/stores/RootAppStore.ts b/packages/apps/client/src/stores/AppStore.ts → ...es/apps/client/src/stores/RootAppStore.ts
@@ -1,8 +1,8 @@
 import type EventEmitter from 'eventemitter3'
 import { action, makeObservable, observable } from 'mobx'
-import { RundownStore } from './RundownStore'
-import { MockConnection } from '../mocks/MockConnection'
-import { UIStore } from './UIStore'
+import { RundownStore } from './RundownStore.ts'
+import { MockConnection } from '../mocks/MockConnection.ts'
+import { UIStore } from './UIStore.ts'
 import { APIConnection as APIConnectionImpl } from '../api/ApiConnection.ts'
 import { FeathersTypedService } from '../api/lib.ts'
 import {
@@ -20,7 +20,7 @@ import { OutputSettingsStore } from './OutputSettingsStore.ts'
 
 const USE_MOCK_CONNECTION = false
 
-class AppStoreClass {
+class RootAppStoreClass {
 	connected = false
 	connection: APIConnection
 	rundownStore: RundownStore
@@ -53,23 +53,22 @@ class AppStoreClass {
 	})
 }
 
-export const AppStore = new AppStoreClass()
+export const RootAppStore = new RootAppStoreClass()
 
 export interface APIConnection extends EventEmitter {
 	readonly connected: boolean
 	readonly host: string
 	readonly port: number
 
 	readonly systemStatus: FeathersTypedService<SystemStatusServiceDefinition.Service>
+	readonly controller: FeathersTypedService<ControllerServiceDefinition.Service>
+	readonly outputSettings: FeathersTypedService<OutputSettingsServiceDefinition.Service>
+	readonly viewPort: FeathersTypedService<ViewPortServiceDefinition.Service>
 
 	readonly playlist: FeathersTypedService<PlaylistServiceDefinition.Service>
 	readonly rundown: FeathersTypedService<RundownServiceDefinition.Service>
 	readonly segment: FeathersTypedService<SegmentServiceDefinition.Service>
 	readonly part: FeathersTypedService<PartServiceDefinition.Service>
 
-	readonly controller: FeathersTypedService<ControllerServiceDefinition.Service>
-	readonly outputSettings: FeathersTypedService<OutputSettingsServiceDefinition.Service>
-	readonly viewPort: FeathersTypedService<ViewPortServiceDefinition.Service>
-
 	readonly example: FeathersTypedService<ExampleServiceDefinition.Service>
 }
diff --git a/packages/apps/client/src/stores/RootOutputStore.ts b/packages/apps/client/src/stores/RootOutputStore.ts
@@ -0,0 +1,48 @@
+import { IReactionDisposer, action, makeObservable, observable, reaction } from 'mobx'
+import { APIConnection } from './RootAppStore.js'
+import { APIConnection as APIConnectionImpl } from '../api/ApiConnection.js'
+
+export class OutputStore {
+	reactions: IReactionDisposer[] = []
+	connection: APIConnection
+	connected = false
+
+	constructor() {
+		makeObservable(this, {
+			connected: observable,
+		})
+
+		const apiConnection = new APIConnectionImpl()
+		this.connection = apiConnection
+		this.connection.on('disconnected', this.onDisconnected)
+
+		this.connection.on('connected', this.onConnected)
+	}
+
+	onConnected = action('onConnected', () => {
+		this.connected = true
+	})
+
+	onDisconnected = action('onDisconnected', () => {
+		this.connected = false
+	})
+
+	setupUIOutputSubscriptions = action(() => {
+		this.reactions.push(
+			reaction(
+				() => this.connected,
+				async (connected) => {
+					if (!connected) return
+
+					await this.connection.viewPort.subscribeToViewPort('')
+				},
+				{
+					fireImmediately: true,
+				}
+			)
+		)
+
+		// this.connection.playlist.on('created', this.onPlaylistCreated)
+		// Note: updated and removed events are handled by the UIRundownEntry's themselves
+	})
+}
diff --git a/packages/apps/client/src/stores/RundownStore.ts b/packages/apps/client/src/stores/RundownStore.ts
@@ -1,6 +1,6 @@
 import { observable, action, flow, makeObservable, IReactionDisposer, reaction } from 'mobx'
 import { RundownPlaylist, RundownPlaylistId } from '@sofie-prompter-editor/shared-model'
-import { APIConnection, AppStore } from './AppStore'
+import { APIConnection, RootAppStore } from './RootAppStore'
 import { UIRundown } from '../model/UIRundown'
 import { UIRundownEntry } from '../model/UIRundownEntry'
 
@@ -12,7 +12,7 @@ export class RundownStore {
 
 	reactions: IReactionDisposer[] = []
 
-	constructor(public appStore: typeof AppStore, public connection: APIConnection) {
+	constructor(public appStore: typeof RootAppStore, public connection: APIConnection) {
 		makeObservable(this, {
 			openRundown: observable,
 			showingOnlyScripts: observable,

diff --git a/packages/apps/client/src/stores/UIStore.ts b/packages/apps/client/src/stores/UIStore.ts
@@ -1,19 +1,25 @@
-import { makeAutoObservable } from 'mobx'
+import { action, makeAutoObservable, makeObservable, observable } from 'mobx'
 import { UILineId } from '../model/UILine'
 
 export class UIStore {
-	viewDividerPosition: number = 0.5
+	viewDividerPosition: number = 0
 	selectedLineId: UILineId | null = null
 
 	constructor() {
-		makeAutoObservable(this)
+		makeObservable(this, {
+			viewDividerPosition: observable,
+			selectedLineId: observable,
+		})
+
+		this.viewDividerPosition = Number(window.localStorage.getItem('viewDividerPosition')) || 0.5
 	}
 
-	setViewDividerPosition(value: number) {
+	setViewDividerPosition = action('setViewDividerPosition', (value: number) => {
 		this.viewDividerPosition = value
-	}
+		window.localStorage.setItem('viewDividerPosition', String(value))
+	})
 
-	setSelectedLineId(lineId: UILineId | null) {
+	setSelectedLineId = action('setSelectedLineId', (lineId: UILineId | null) => {
 		this.selectedLineId = lineId
-	}
+	})
 }