Skip to content

Commit 4c425bd

Browse files
JulusianJulusian
committed
wip: rework
1 parent 820cb58 commit 4c425bd

File tree

3 files changed

+84
-115
lines changed

3 files changed

+84
-115
lines changed

‎packages/webui/src/client/ui/Settings/components/GenericDeviceSettingsComponent.tsx‎

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import { useEffect, useState } from 'react'
21
import { useTranslation } from 'react-i18next'
3-
import { PeripheralDevice, PeripheralDeviceType } from '@sofie-automation/corelib/dist/dataModel/PeripheralDevice'
2+
import { PeripheralDevice } from '@sofie-automation/corelib/dist/dataModel/PeripheralDevice'
43
import { DeviceItem } from '../../Status/SystemStatus/DeviceItem'
54
import { ConfigManifestOAuthFlowComponent } from './ConfigManifestOAuthFlow'
6-
import { protectString, unprotectString } from '../../../lib/tempLib'
7-
import { MeteorCall } from '../../../lib/meteorApi'
8-
import { PeripheralDeviceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
9-
import { stringifyError } from '@sofie-automation/shared-lib/dist/lib/stringifyError'
5+
import { unprotectString } from '../../../lib/tempLib'
6+
import { useDebugStatesForPlayoutDevice } from './useDebugStatesForPlayoutDevice'
107

118
interface IGenericDeviceSettingsComponentProps {
129
device: PeripheralDevice
@@ -19,7 +16,7 @@ export function GenericDeviceSettingsComponent({
1916
}: Readonly<IGenericDeviceSettingsComponentProps>): JSX.Element {
2017
const { t } = useTranslation()
2118

22-
const debugStates = useDebugStates(device)
19+
const debugStates = useDebugStatesForPlayoutDevice(device)
2320

2421
return (
2522
<>
@@ -49,35 +46,3 @@ export function GenericDeviceSettingsComponent({
4946
</>
5047
)
5148
}
52-
53-
function useDebugStates(device: PeripheralDevice) {
54-
const [debugStates, setDebugStates] = useState(() => new Map<PeripheralDeviceId, object>())
55-
const deviceHasDebugStates = !!(
56-
device.type === PeripheralDeviceType.PLAYOUT &&
57-
device.settings &&
58-
(device.settings as any)['debugState']
59-
)
60-
61-
useEffect(() => {
62-
if (deviceHasDebugStates) {
63-
const interval = setInterval(() => {
64-
MeteorCall.systemStatus
65-
.getDebugStates(device._id)
66-
.then((res) => {
67-
const states: Map<PeripheralDeviceId, object> = new Map()
68-
for (const [key, state] of Object.entries<any>(res)) {
69-
states.set(protectString(key), state)
70-
}
71-
setDebugStates(states)
72-
})
73-
.catch((err) => console.log(`Error fetching device states: ${stringifyError(err)}`))
74-
}, 1000)
75-
76-
return () => {
77-
clearInterval(interval)
78-
}
79-
}
80-
}, [device._id, device.type, deviceHasDebugStates])
81-
82-
return debugStates
83-
}

‎packages/webui/src/client/ui/Settings/components/useDebugStatesForPlayoutDevice.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { PeripheralDeviceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
2+
import { PeripheralDevice } from '@sofie-automation/corelib/dist/dataModel/PeripheralDevice'
3+
import { protectString } from '@sofie-automation/corelib/dist/protectedString'
4+
import { stringifyError } from '@sofie-automation/shared-lib/dist/lib/stringifyError'
5+
import { PeripheralDeviceType } from '@sofie-automation/shared-lib/dist/peripheralDevice/peripheralDeviceAPI'
6+
import { useState, useEffect, useContext } from 'react'
7+
import { MeteorCall } from '../../../lib/meteorApi'
8+
import { DBStudio, StudioDeviceSettings } from '@sofie-automation/corelib/dist/dataModel/Studio'
9+
import { applyAndValidateOverrides } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
10+
import { Studios } from '../../../collections'
11+
import { useTracker } from '../../../lib/ReactMeteorData/ReactMeteorData'
12+
import { UserPermissionsContext } from '../../UserPermissions'
13+
14+
export function useDebugStatesForPlayoutDevice(device: PeripheralDevice): ReadonlyMap<PeripheralDeviceId, object> {
15+
const [debugStates, setDebugStates] = useState(() => new Map<PeripheralDeviceId, object>())
16+
17+
const userPermissions = useContext(UserPermissionsContext)
18+
19+
const deviceHasDebugStates = useTracker(() => {
20+
if (!userPermissions.developer) return false
21+
22+
if (device.type !== PeripheralDeviceType.PLAYOUT) return false
23+
if (!device.studioId) return false
24+
25+
const studio = Studios.findOne(device.studioId, {
26+
projection: {
27+
peripheralDeviceSettings: 1,
28+
},
29+
}) as Pick<DBStudio, 'peripheralDeviceSettings'> | undefined
30+
if (!studio) return false
31+
32+
const deviceSettings = applyAndValidateOverrides(studio.peripheralDeviceSettings.deviceSettings).obj
33+
const settingsForDevice = Object.values<StudioDeviceSettings>(deviceSettings).find(
34+
(s) => s.peripheralDeviceId === device._id
35+
)
36+
37+
return !!(settingsForDevice && (settingsForDevice.options as any)['debugState'])
38+
}, [userPermissions.developer, device._id, device.studioId])
39+
40+
useEffect(() => {
41+
if (deviceHasDebugStates) {
42+
const interval = setInterval(() => {
43+
MeteorCall.systemStatus
44+
.getDebugStates(device._id)
45+
.then((res) => {
46+
const states: Map<PeripheralDeviceId, object> = new Map()
47+
for (const [key, state] of Object.entries<any>(res)) {
48+
states.set(protectString(key), state)
49+
}
50+
setDebugStates(states)
51+
})
52+
.catch((err) => console.log(`Error fetching device states: ${stringifyError(err)}`))
53+
}, 1000)
54+
55+
return () => {
56+
clearInterval(interval)
57+
}
58+
} else {
59+
setDebugStates(new Map())
60+
}
61+
}, [device._id, device.type, deviceHasDebugStates])
62+
63+
return debugStates
64+
}

‎packages/webui/src/client/ui/Status/SystemStatus/SystemStatus.tsx‎

Lines changed: 16 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,29 @@
1-
import { useContext, useEffect, useMemo, useState } from 'react'
1+
import { useEffect, useState } from 'react'
22
import { useSubscription, useTracker } from '../../../lib/ReactMeteorData/react-meteor-data'
3-
import { PeripheralDevice, PeripheralDeviceType } from '@sofie-automation/corelib/dist/dataModel/PeripheralDevice'
3+
import { PeripheralDevice } from '@sofie-automation/corelib/dist/dataModel/PeripheralDevice'
44
import { useTranslation } from 'react-i18next'
5-
import { protectString, unprotectString } from '../../../lib/tempLib'
5+
import { unprotectString } from '../../../lib/tempLib'
66
import { NotificationCenter, NoticeLevel, Notification } from '../../../lib/notifications/notifications'
77
import { StatusResponse } from '@sofie-automation/meteor-lib/dist/api/systemStatus'
88
import { MeteorCall } from '../../../lib/meteorApi'
99
import { CoreSystem, PeripheralDevices } from '../../../collections'
1010
import { PeripheralDeviceId } from '@sofie-automation/shared-lib/dist/core/model/Ids'
1111
import { logger } from '../../../lib/logging'
1212
import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
13-
import { stringifyError } from '@sofie-automation/shared-lib/dist/lib/stringifyError'
1413
import { CoreItem } from './CoreItem'
1514
import { DeviceItem } from './DeviceItem'
16-
import { UserPermissions, UserPermissionsContext } from '../../UserPermissions'
15+
import { useDebugStatesForPlayoutDevice } from '../../Settings/components/useDebugStatesForPlayoutDevice'
1716

1817
export function SystemStatus(): JSX.Element {
1918
const { t } = useTranslation()
2019

21-
const userPermissions = useContext(UserPermissionsContext)
22-
2320
// Subscribe to data:
2421
useSubscription(CorelibPubSub.peripheralDevices, null)
2522

2623
const coreSystem = useTracker(() => CoreSystem.findOne(), [])
2724
const devices = useTracker(() => PeripheralDevices.find({}, { sort: { lastConnected: -1 } }).fetch(), [], [])
2825

2926
const systemStatus = useSystemStatus()
30-
const playoutDebugStates = usePlayoutDebugStates(devices, userPermissions)
31-
3227
const devicesHierarchy = convertDevicesIntoHeirarchy(devices)
3328

3429
return (
@@ -40,12 +35,7 @@ export function SystemStatus(): JSX.Element {
4035
{coreSystem && <CoreItem coreSystem={coreSystem} systemStatus={systemStatus} />}
4136

4237
{devicesHierarchy.map((d) => (
43-
<DeviceItemWithChildren
44-
key={unprotectString(d.device._id)}
45-
playoutDebugStates={playoutDebugStates}
46-
parentDevice={null}
47-
device={d}
48-
/>
38+
<ParentDeviceItemWithChildren key={unprotectString(d.device._id)} device={d} />
4939
))}
5040
</div>
5141
</div>
@@ -101,66 +91,6 @@ function useSystemStatus(): StatusResponse | undefined {
10191
return sytemStatus
10292
}
10393

104-
function usePlayoutDebugStates(
105-
devices: PeripheralDevice[],
106-
userPermissions: UserPermissions
107-
): Map<PeripheralDeviceId, object> {
108-
const { t } = useTranslation()
109-
110-
const [playoutDebugStates, setPlayoutDebugStates] = useState<Map<PeripheralDeviceId, object>>(new Map())
111-
112-
const playoutDeviceIds = useMemo(() => {
113-
const deviceIds: PeripheralDeviceId[] = []
114-
115-
for (const device of devices) {
116-
if (device.type === PeripheralDeviceType.PLAYOUT && device.settings && (device.settings as any)['debugState']) {
117-
deviceIds.push(device._id)
118-
}
119-
}
120-
121-
deviceIds.sort()
122-
return deviceIds
123-
}, [devices])
124-
125-
useEffect(() => {
126-
if (!userPermissions.developer) {
127-
setPlayoutDebugStates(new Map())
128-
return
129-
}
130-
131-
let destroyed = false
132-
133-
const refreshDebugStates = () => {
134-
for (const deviceId of playoutDeviceIds) {
135-
MeteorCall.systemStatus
136-
.getDebugStates(deviceId)
137-
.then((res) => {
138-
if (destroyed) return
139-
140-
setPlayoutDebugStates((oldState) => {
141-
// Create a new map based on the old one
142-
const newStates = new Map(oldState.entries())
143-
for (const [key, state] of Object.entries<any>(res)) {
144-
newStates.set(protectString(key), state)
145-
}
146-
return newStates
147-
})
148-
})
149-
.catch((err) => console.log(`Error fetching device states: ${stringifyError(err)}`))
150-
}
151-
}
152-
153-
const interval = setInterval(refreshDebugStates, 1000)
154-
155-
return () => {
156-
clearInterval(interval)
157-
destroyed = true
158-
}
159-
}, [t, JSON.stringify(playoutDeviceIds), userPermissions.developer])
160-
161-
return playoutDebugStates
162-
}
163-
16494
function convertDevicesIntoHeirarchy(devices: PeripheralDevice[]): DeviceInHierarchy[] {
16595
const devicesMap = new Map<PeripheralDeviceId, DeviceInHierarchy>()
16696
const devicesToAdd: DeviceInHierarchy[] = []
@@ -194,8 +124,18 @@ function convertDevicesIntoHeirarchy(devices: PeripheralDevice[]): DeviceInHiera
194124
return devicesHeirarchy
195125
}
196126

127+
interface ParentDeviceItemWithChildrenProps {
128+
device: DeviceInHierarchy
129+
}
130+
131+
function ParentDeviceItemWithChildren({ device }: ParentDeviceItemWithChildrenProps) {
132+
const playoutDebugStates = useDebugStatesForPlayoutDevice(device.device)
133+
134+
return <DeviceItemWithChildren playoutDebugStates={playoutDebugStates} parentDevice={null} device={device} />
135+
}
136+
197137
interface DeviceItemWithChildrenProps {
198-
playoutDebugStates: Map<PeripheralDeviceId, object>
138+
playoutDebugStates: ReadonlyMap<PeripheralDeviceId, object>
199139
parentDevice: DeviceInHierarchy | null
200140
device: DeviceInHierarchy
201141
}

0 commit comments

Comments
 (0)