Skip to content

Commit 8a50457

Browse files
JulusianJulusian
committed
chore: refactor ShowStyleBaseSettings
1 parent 7b46c81 commit 8a50457

File tree

2 files changed

+133
-167
lines changed

2 files changed

+133
-167
lines changed

‎packages/webui/src/client/ui/RundownView/WarningDisplay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export function WarningDisplay({
9595
>
9696
<p>
9797
{t(
98-
'You are in rehearsal mode, the broadcast starts in less than 1 minute. Do you want to go into On-Air mode?',
98+
'You are in rehearsal mode, the broadcast starts in less than 1 minute. Do you want to go into On-Air mode?'
9999
)}
100100
</p>
101101
</ModalDialog>

‎packages/webui/src/client/ui/Settings/ShowStyleBaseSettings.tsx‎

Lines changed: 132 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import * as React from 'react'
2-
import { Translated, translateWithTracker } from '../../lib/ReactMeteorData/react-meteor-data.js'
1+
import { useTracker } from '../../lib/ReactMeteorData/react-meteor-data.js'
32
import { Spinner } from '../../lib/Spinner.js'
4-
import { OutputLayers, DBShowStyleBase, SourceLayers } from '@sofie-automation/corelib/dist/dataModel/ShowStyleBase'
5-
import { DBShowStyleVariant } from '@sofie-automation/corelib/dist/dataModel/ShowStyleVariant'
63
import RundownLayoutEditor from './RundownLayoutEditor.js'
7-
import { DBStudio, MappingsExt } from '@sofie-automation/corelib/dist/dataModel/Studio'
8-
import { BlueprintManifestType, IShowStyleConfigPreset } from '@sofie-automation/blueprints-integration'
4+
import { MappingsExt } from '@sofie-automation/corelib/dist/dataModel/Studio'
5+
import { BlueprintManifestType } from '@sofie-automation/blueprints-integration'
96
import { RundownLayoutsAPI } from '../../lib/rundownLayouts.js'
107
import { TriggeredActionsEditor } from './components/triggeredActions/TriggeredActionsEditor.js'
118
import { SourceLayerSettings } from './ShowStyle/SourceLayer.js'
@@ -19,8 +16,9 @@ import { applyAndValidateOverrides } from '@sofie-automation/corelib/dist/settin
1916
import { ShowStyleBaseId } from '@sofie-automation/corelib/dist/dataModel/Ids'
2017
import { Blueprints, ShowStyleBases, ShowStyleVariants, Studios } from '../../collections/index.js'
2118
import { JSONBlobParse } from '@sofie-automation/shared-lib/dist/lib/JSONBlob'
22-
import { JSONSchema } from '@sofie-automation/shared-lib/dist/lib/JSONSchemaTypes'
2319
import { ShowStyleBaseBlueprintConfigurationSettings } from './ShowStyle/BlueprintConfiguration/index.js'
20+
import { useTranslation } from 'react-i18next'
21+
import { useMemo } from 'react'
2422

2523
interface IProps {
2624
match: {
@@ -31,178 +29,146 @@ interface IProps {
3129
}
3230
}
3331
}
34-
interface IState {
35-
uploadFileKey: number // Used to force clear the input after use
36-
showUploadConfirm: boolean
37-
uploadFileName?: string
38-
uploadFileContents?: string
39-
}
40-
interface ITrackedProps {
41-
showStyleBase?: DBShowStyleBase
42-
showStyleVariants: Array<DBShowStyleVariant>
43-
compatibleStudios: Array<DBStudio>
44-
blueprintConfigSchema: JSONSchema | undefined
45-
blueprintConfigPreset: IShowStyleConfigPreset | undefined
46-
sourceLayers: SourceLayers
47-
outputLayers: OutputLayers
48-
layerMappings: { [studioId: string]: MappingsExt }
49-
}
50-
export default translateWithTracker<IProps, IState, ITrackedProps>((props: IProps) => {
51-
const showStyleBase = ShowStyleBases.findOne(props.match.params.showStyleBaseId)
52-
const compatibleStudios = showStyleBase
53-
? Studios.find({
54-
supportedShowStyleBase: {
55-
$in: [showStyleBase._id],
56-
},
57-
}).fetch()
58-
: []
59-
const blueprint = showStyleBase
60-
? Blueprints.findOne({
61-
_id: showStyleBase.blueprintId,
62-
blueprintType: BlueprintManifestType.SHOWSTYLE,
63-
})
64-
: undefined
6532

66-
const mappings: { [studioId: string]: MappingsExt } = {}
67-
for (const studio of compatibleStudios) {
68-
mappings[studio.name] = applyAndValidateOverrides(studio.mappingsWithOverrides).obj
69-
}
33+
export default function ShowStyleBaseSettings({ match }: IProps): JSX.Element {
34+
const { t } = useTranslation()
7035

71-
const sourceLayers = showStyleBase ? applyAndValidateOverrides(showStyleBase.sourceLayersWithOverrides).obj : {}
72-
const outputLayers = showStyleBase ? applyAndValidateOverrides(showStyleBase.outputLayersWithOverrides).obj : {}
36+
const { showStyleBaseId } = match.params
37+
const showStyleBase = useTracker(() => ShowStyleBases.findOne(showStyleBaseId), [showStyleBaseId])
7338

74-
return {
75-
showStyleBase: showStyleBase,
76-
showStyleVariants: showStyleBase
77-
? ShowStyleVariants.find(
78-
{
79-
showStyleBaseId: showStyleBase._id,
80-
},
81-
{
82-
sort: {
83-
_rank: 1,
84-
_id: 1,
39+
const showStyleVariants = useTracker(
40+
() =>
41+
showStyleBase
42+
? ShowStyleVariants.find(
43+
{
44+
showStyleBaseId: showStyleBase._id,
8545
},
86-
}
87-
).fetch()
88-
: [],
89-
compatibleStudios: compatibleStudios,
90-
blueprintConfigSchema: blueprint?.showStyleConfigSchema
91-
? JSONBlobParse(blueprint.showStyleConfigSchema)
92-
: undefined,
93-
blueprintConfigPreset:
94-
blueprint && blueprint.showStyleConfigPresets && showStyleBase?.blueprintConfigPresetId
95-
? blueprint.showStyleConfigPresets[showStyleBase.blueprintConfigPresetId]
46+
{
47+
sort: {
48+
_rank: 1,
49+
_id: 1,
50+
},
51+
}
52+
).fetch()
53+
: [],
54+
[showStyleBase?._id],
55+
[]
56+
)
57+
58+
const compatibleStudios = useTracker(
59+
() =>
60+
showStyleBase
61+
? Studios.find({
62+
supportedShowStyleBase: {
63+
$in: [showStyleBase._id],
64+
},
65+
}).fetch()
66+
: [],
67+
[showStyleBase?._id],
68+
[]
69+
)
70+
71+
const blueprint = useTracker(
72+
() =>
73+
showStyleBase
74+
? Blueprints.findOne({
75+
_id: showStyleBase.blueprintId,
76+
blueprintType: BlueprintManifestType.SHOWSTYLE,
77+
})
9678
: undefined,
97-
sourceLayers,
98-
outputLayers,
99-
layerMappings: mappings,
100-
}
101-
})(
102-
class ShowStyleBaseSettings extends React.Component<Translated<IProps & ITrackedProps>, IState> {
103-
constructor(props: Translated<IProps & ITrackedProps>) {
104-
super(props)
105-
this.state = {
106-
uploadFileKey: Date.now(),
107-
showUploadConfirm: false,
108-
}
109-
}
79+
[showStyleBase?.blueprintId]
80+
)
11081

111-
onUploadFile(e: React.ChangeEvent<HTMLInputElement>) {
112-
const file = e.target.files?.[0]
113-
if (!file) {
114-
return
115-
}
82+
const blueprintConfigPreset =
83+
blueprint && blueprint.showStyleConfigPresets && showStyleBase?.blueprintConfigPresetId
84+
? blueprint.showStyleConfigPresets[showStyleBase.blueprintConfigPresetId]
85+
: undefined
11686

117-
const reader = new FileReader()
118-
reader.onload = (e2) => {
119-
this.setState({
120-
uploadFileKey: Date.now(),
121-
showUploadConfirm: true,
122-
uploadFileName: file.name,
123-
uploadFileContents: (e2.target as any).result,
124-
})
125-
}
87+
const blueprintConfigSchema = useMemo(
88+
() => (blueprint?.showStyleConfigSchema ? JSONBlobParse(blueprint.showStyleConfigSchema) : undefined),
89+
[blueprint?.showStyleConfigSchema]
90+
)
12691

127-
reader.readAsText(file)
92+
const layerMappings = useMemo(() => {
93+
const mappings: { [studioId: string]: MappingsExt } = {}
94+
for (const studio of compatibleStudios) {
95+
mappings[studio.name] = applyAndValidateOverrides(studio.mappingsWithOverrides).obj
12896
}
97+
return mappings
98+
}, [compatibleStudios])
12999

130-
renderEditForm(showStyleBase: DBShowStyleBase) {
131-
const { t } = this.props
132-
return (
133-
<div className="studio-edit mx-4">
134-
<ErrorBoundary>
135-
<Switch>
136-
<Route path={`${this.props.match.path}/generic`}>
137-
<ShowStyleGenericProperties
138-
showStyleBase={showStyleBase}
139-
compatibleStudios={this.props.compatibleStudios}
140-
/>
141-
</Route>
142-
<Route path={`${this.props.match.path}/layers`}>
143-
<>
144-
<SourceLayerSettings showStyleBase={showStyleBase} />
145-
<OutputLayerSettings showStyleBase={showStyleBase} />
146-
</>
147-
</Route>
148-
<Route path={`${this.props.match.path}/action-triggers`}>
149-
<TriggeredActionsEditor
150-
showStyleBaseId={showStyleBase._id}
151-
sourceLayers={this.props.sourceLayers}
152-
outputLayers={this.props.outputLayers}
153-
/>
154-
</Route>
155-
<Route path={`${this.props.match.path}/hotkey-labels`}>
156-
<HotkeyLegendSettings showStyleBase={showStyleBase} />
157-
</Route>
100+
const sourceLayers = useMemo(
101+
() => (showStyleBase ? applyAndValidateOverrides(showStyleBase.sourceLayersWithOverrides).obj : {}),
102+
[showStyleBase?.sourceLayersWithOverrides]
103+
)
104+
const outputLayers = useMemo(
105+
() => (showStyleBase ? applyAndValidateOverrides(showStyleBase.outputLayersWithOverrides).obj : {}),
106+
[showStyleBase?.outputLayersWithOverrides]
107+
)
158108

159-
{RundownLayoutsAPI.getSettingsManifest(t).map((region) => {
160-
return (
161-
<Route key={region._id} path={`${this.props.match.path}/layouts-${region._id}`}>
162-
<RundownLayoutEditor
163-
showStyleBaseId={showStyleBase._id}
164-
sourceLayers={this.props.sourceLayers}
165-
outputLayers={this.props.outputLayers}
166-
studios={this.props.compatibleStudios}
167-
customRegion={region}
168-
/>
169-
</Route>
170-
)
171-
})}
109+
if (!showStyleBase) return <Spinner />
172110

173-
<Route path={`${this.props.match.path}/blueprint-config`}>
174-
<ShowStyleBaseBlueprintConfigurationSettings
175-
showStyleBase={showStyleBase}
176-
schema={this.props.blueprintConfigSchema}
177-
layerMappings={this.props.layerMappings}
178-
sourceLayers={this.props.sourceLayers}
179-
/>
180-
</Route>
181-
<Route path={`${this.props.match.path}/variants`}>
182-
<ShowStyleVariantsSettings
183-
showStyleVariants={this.props.showStyleVariants}
184-
blueprintConfigSchema={this.props.blueprintConfigSchema}
185-
blueprintTranslationNamespaces={['blueprint_' + this.props.showStyleBase?.blueprintId]}
186-
blueprintConfigPreset={this.props.blueprintConfigPreset}
187-
showStyleBase={showStyleBase}
188-
layerMappings={this.props.layerMappings}
189-
sourceLayers={this.props.sourceLayers}
111+
return (
112+
<div className="studio-edit mx-4">
113+
<ErrorBoundary>
114+
<Switch>
115+
<Route path={`${match.path}/generic`}>
116+
<ShowStyleGenericProperties showStyleBase={showStyleBase} compatibleStudios={compatibleStudios} />
117+
</Route>
118+
<Route path={`${match.path}/layers`}>
119+
<>
120+
<SourceLayerSettings showStyleBase={showStyleBase} />
121+
<OutputLayerSettings showStyleBase={showStyleBase} />
122+
</>
123+
</Route>
124+
<Route path={`${match.path}/action-triggers`}>
125+
<TriggeredActionsEditor
126+
showStyleBaseId={showStyleBase._id}
127+
sourceLayers={sourceLayers}
128+
outputLayers={outputLayers}
129+
/>
130+
</Route>
131+
<Route path={`${match.path}/hotkey-labels`}>
132+
<HotkeyLegendSettings showStyleBase={showStyleBase} />
133+
</Route>
134+
135+
{RundownLayoutsAPI.getSettingsManifest(t).map((region) => {
136+
return (
137+
<Route key={region._id} path={`${match.path}/layouts-${region._id}`}>
138+
<RundownLayoutEditor
139+
showStyleBaseId={showStyleBase._id}
140+
sourceLayers={sourceLayers}
141+
outputLayers={outputLayers}
142+
studios={compatibleStudios}
143+
customRegion={region}
190144
/>
191145
</Route>
146+
)
147+
})}
192148

193-
<Redirect to={`${this.props.match.path}/generic`} />
194-
</Switch>
195-
</ErrorBoundary>
196-
</div>
197-
)
198-
}
149+
<Route path={`${match.path}/blueprint-config`}>
150+
<ShowStyleBaseBlueprintConfigurationSettings
151+
showStyleBase={showStyleBase}
152+
schema={blueprintConfigSchema}
153+
layerMappings={layerMappings}
154+
sourceLayers={sourceLayers}
155+
/>
156+
</Route>
157+
<Route path={`${match.path}/variants`}>
158+
<ShowStyleVariantsSettings
159+
showStyleVariants={showStyleVariants}
160+
blueprintConfigSchema={blueprintConfigSchema}
161+
blueprintTranslationNamespaces={['blueprint_' + showStyleBase?.blueprintId]}
162+
blueprintConfigPreset={blueprintConfigPreset}
163+
showStyleBase={showStyleBase}
164+
layerMappings={layerMappings}
165+
sourceLayers={sourceLayers}
166+
/>
167+
</Route>
199168

200-
render(): JSX.Element {
201-
if (this.props.showStyleBase) {
202-
return this.renderEditForm(this.props.showStyleBase)
203-
} else {
204-
return <Spinner />
205-
}
206-
}
207-
}
208-
)
169+
<Redirect to={`${match.path}/generic`} />
170+
</Switch>
171+
</ErrorBoundary>
172+
</div>
173+
)
174+
}

0 commit comments

Comments
 (0)