fix: default to blank and new context structures

bitfocus · May 22, 2024 · af506db · af506db
1 parent 149156e
commit af506db
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 23 deletions.
diff --git a/companion/lib/Data/UserConfig.js b/companion/lib/Data/UserConfig.js
@@ -101,7 +101,7 @@ class DataUserConfig extends CoreBase {
 		},
 		gridSizeInlineGrow: false, // TODO: temporary until the styling of growing is better
 
-		installName: 'Bitfocus Companion',
+		installName: '',
 	}
 	/**
 	 * The user configuration settings

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
@@ -417,7 +417,7 @@ interface AppContentProps {
 	buttonGridHotPress: boolean
 }
 
-function AppContent({ buttonGridHotPress }: AppContentProps) {
+const AppContent = observer(function AppContent({ buttonGridHotPress }: AppContentProps) {
 	const routerLocation = useLocation()
 	let hasMatchedPane = false
 	const getClassForPane = (prefix: string) => {
@@ -430,11 +430,14 @@ function AppContent({ buttonGridHotPress }: AppContentProps) {
 		}
 	}
 
-	const userConfig = useContext(UserConfigContext)
+	const { userConfig } = useContext(RootAppStoreContext)
 
 	useEffect(() => {
-		document.title = `${userConfig?.installName} - Admin`
-	}, [userConfig])
+		document.title =
+			userConfig.properties?.installName && userConfig.properties?.installName.length > 0
+				? `${userConfig.properties?.installName} - Admin (Bitfocus Companion)`
+				: 'Bitfocus Companion - Admin'
+	}, [userConfig.properties?.installName])
 
 	return (
 		<CContainer fluid className="fadeIn">
@@ -542,4 +545,4 @@ function AppContent({ buttonGridHotPress }: AppContentProps) {
 			</CTabContent>
 		</CContainer>
 	)
-}
+})
diff --git a/webui/src/Emulator/Emulator.tsx b/webui/src/Emulator/Emulator.tsx
@@ -71,8 +71,11 @@ export function Emulator() {
 	useUserConfigSubscription(socket, userConfigStore)
 
 	useEffect(() => {
-		document.title = `${userConfigStore?.properties?.installName} - Emulator`
-	}, [userConfigStore])
+		document.title =
+			userConfigStore.properties?.installName && userConfigStore.properties?.installName.length > 0
+				? `${userConfigStore.properties?.installName} - Emulator (Bitfocus Companion)`
+				: 'Bitfocus Companion - Emulator'
+	}, [userConfigStore.properties?.installName])
 
 	const keymap = useMemo(() => {
 		if (config?.emulator_control_enable) {

diff --git a/webui/src/Emulator/List.tsx b/webui/src/Emulator/List.tsx
@@ -8,8 +8,9 @@ import { SurfacesStore } from '../Stores/SurfacesStore.js'
 import { useSurfacesSubscription } from '../Hooks/useSurfacesSubscription.js'
 import { UserConfigStore } from '../Stores/UserConfigStore.js'
 import { useUserConfigSubscription } from '../Hooks/useUserConfigSubscription.js'
+import { observer } from 'mobx-react-lite'
 
-export function EmulatorList() {
+export const EmulatorList = observer(function EmulatorList() {
 	const socket = useContext(SocketContext)
 
 	const [loadError, setLoadError] = useState<string | null>(null)
@@ -24,8 +25,11 @@ export function EmulatorList() {
 	const userConfigReady = useUserConfigSubscription(socket, userConfigStore)
 
 	useEffect(() => {
-		document.title = `${userConfigStore?.properties?.installName} - Emulators`
-	}, [userConfigStore])	
+		document.title =
+			userConfigStore.properties?.installName && userConfigStore.properties?.installName.length > 0
+				? `${userConfigStore.properties?.installName} - Emulators (Bitfocus Companion)`
+				: 'Bitfocus Companion - Emulators'
+	}, [userConfigStore.properties?.installName])
 
 	const emulators = useComputed(() => {
 		const emulators: ClientSurfaceItem[] = []
@@ -77,7 +81,7 @@ export function EmulatorList() {
 			</CContainer>
 		</div>
 	)
-}
+})
 
 interface EmulatorCardProps {
 	surface: ClientSurfaceItem

diff --git a/webui/src/Layout/Header.tsx b/webui/src/Layout/Header.tsx
@@ -1,19 +1,20 @@
 import React, { useContext, useEffect, useState } from 'react'
 import { CHeader, CHeaderBrand, CHeaderNavItem, CHeaderNav, CHeaderNavLink, CToggler } from '@coreui/react'
-import { SocketContext, UserConfigContext, socketEmitPromise } from '../util.js'
+import { socketEmitPromise } from '../util.js'
 import { faLock } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { AppUpdateInfo, AppVersionInfo } from '@companion-app/shared/Model/Common.js'
+import { RootAppStoreContext } from '../Stores/RootAppStore.js'
+import { observer } from 'mobx-react-lite'
 
 interface MyHeaderProps {
 	toggleSidebar: () => void
 	canLock: boolean
 	setLocked: (locked: boolean) => void
 }
 
-export function MyHeader({ toggleSidebar, canLock, setLocked }: MyHeaderProps) {
-	const socket = useContext(SocketContext)
-	const userConfig = useContext(UserConfigContext)
+export const MyHeader = observer(function MyHeader({ toggleSidebar, canLock, setLocked }: MyHeaderProps) {
+	const { socket, userConfig } = useContext(RootAppStoreContext)
 
 	const [versionInfo, setVersionInfo] = useState<AppVersionInfo | null>(null)
 	const [updateData, setUpdateData] = useState<AppUpdateInfo | null>(null)
@@ -47,8 +48,8 @@ export function MyHeader({ toggleSidebar, canLock, setLocked }: MyHeaderProps) {
 			</CHeaderBrand>
 
 			<CHeaderNav className="d-md-down-none">
-				{userConfig?.installName !== 'Bitfocus Companion' && (
-					<CHeaderNavItem className="install-name">{userConfig?.installName}:</CHeaderNavItem>
+				{userConfig.properties?.installName && userConfig.properties?.installName.length > 0 && (
+					<CHeaderNavItem className="install-name">{userConfig.properties?.installName}:</CHeaderNavItem>
 				)}
 
 				<CHeaderNavItem>
@@ -75,4 +76,4 @@ export function MyHeader({ toggleSidebar, canLock, setLocked }: MyHeaderProps) {
 			)}
 		</CHeader>
 	)
-}
+})
diff --git a/webui/src/TabletView/index.tsx b/webui/src/TabletView/index.tsx
@@ -63,8 +63,11 @@ export const TabletView = observer(function TabletView() {
 	const rawGridSize = userConfigStore.properties?.gridSize
 
 	useEffect(() => {
-		document.title = `${userConfigStore.properties?.installName} - Web Buttons`
-	}, [userConfigStore])
+		document.title =
+			userConfigStore.properties?.installName && userConfigStore.properties?.installName.length > 0
+				? `${userConfigStore.properties?.installName} - Web Buttons (Bitfocus Companion)`
+				: 'Bitfocus Companion - Web Buttons'
+	}, [userConfigStore.properties?.installName])
 
 	useEffect(() => {
 		const onConnect = () => {

diff --git a/webui/src/UserConfig/CompanionConfig.tsx b/webui/src/UserConfig/CompanionConfig.tsx
@@ -3,14 +3,15 @@ import { CButton, CInput } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUndo } from '@fortawesome/free-solid-svg-icons'
 import type { UserConfigModel } from '@companion-app/shared/Model/UserConfigModel.js'
+import { observer } from 'mobx-react-lite'
 
 interface CompanionConfigProps {
 	config: UserConfigModel
 	setValue: (key: keyof UserConfigModel, value: any) => void
 	resetValue: (key: keyof UserConfigModel) => void
 }
 
-export function CompanionConfig({ config, setValue, resetValue }: CompanionConfigProps) {
+export const CompanionConfig = observer(function CompanionConfig({ config, setValue, resetValue }: CompanionConfigProps) {
 	return (
 		<>
 			<tr>
@@ -36,4 +37,4 @@ export function CompanionConfig({ config, setValue, resetValue }: CompanionConfi
 			</tr>
 		</>
 	)
-}
+})