Skip to content

Commit

Permalink
feat: settings.tsx preparing multiple audio mixers support
Browse files Browse the repository at this point in the history
  • Loading branch information
olzzon authored and olzzon committed Oct 5, 2020
1 parent 975f65b commit d2076b2
Showing 1 changed file with 145 additions and 82 deletions.
227 changes: 145 additions & 82 deletions client/components/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,51 +70,75 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
}

handleRemoteMidiInputPort = (selectedOption: any) => {
var settingsCopy = Object.assign({}, this.state.settings)
let settingsCopy = Object.assign({}, this.state.settings)
settingsCopy.remoteFaderMidiInputPort = selectedOption.value
this.setState({ settings: settingsCopy })
}

handleRemoteMidiOutputPort = (selectedOption: any) => {
var settingsCopy = Object.assign({}, this.state.settings)
let settingsCopy = Object.assign({}, this.state.settings)
settingsCopy.remoteFaderMidiOutputPort = selectedOption.value
this.setState({ settings: settingsCopy })
}

handleMixerMidiInputPort = (selectedOption: any) => {
var settingsCopy = Object.assign({}, this.state.settings)
let settingsCopy = Object.assign({}, this.state.settings)
settingsCopy.mixers[0].mixerMidiInputPort = selectedOption.value
this.setState({ settings: settingsCopy })
}

handleMixerMidiOutputPort = (selectedOption: any) => {
var settingsCopy = Object.assign({}, this.state.settings)
let settingsCopy = Object.assign({}, this.state.settings)
settingsCopy.mixers[0].mixerMidiOutputPort = selectedOption.value
this.setState({ settings: settingsCopy })
}

handleChange = (event: ChangeEvent<HTMLInputElement>) => {
var settingsCopy = Object.assign({}, this.state.settings)
let settingsCopy = Object.assign({}, this.state.settings)
if (event.target.type === 'checkbox') {
;(settingsCopy as any)[event.target.name] = !!event.target.checked
(settingsCopy as any)[event.target.name] = !!event.target.checked
} else {
;(settingsCopy as any)[event.target.name] = event.target.value
(settingsCopy as any)[event.target.name] = event.target.value
}
this.setState({ settings: settingsCopy })
}

handleNumberOfMixers = (event: ChangeEvent<HTMLInputElement>) => {
let settingsCopy = Object.assign({}, this.state.settings)
settingsCopy.numberOfMixers = parseInt(event.target.value) || 1
settingsCopy = this.setNumberOfMixers(settingsCopy)
this.setState({ settings: settingsCopy })
}

setNumberOfMixers = (settings: any) => {
console.log(settings.mixers)
settings.mixers = settings.mixers.map((mixer: any, index: number) => {
if (index < settings.numberOfMixers) {
return mixer
}
})
for (let i =0; i< settings.numberOfMixers; i++) {
if (settings.mixers[i] === undefined) {
settings.mixers.push(settings.mixers[0])
}
}
return settings
}

handleMixerChange = (event: ChangeEvent<HTMLInputElement>) => {
var settingsCopy = Object.assign({}, this.state.settings)
let settingsCopy = Object.assign({}, this.state.settings)
if (event.target.type === 'checkbox') {
(settingsCopy.mixers[0] as any)[event.target.name] = !!event.target.checked
(settingsCopy.mixers[0] as any)[event.target.name] = !!event.target
.checked
} else {
(settingsCopy.mixers[0] as any)[event.target.name] = event.target.value
(settingsCopy.mixers[0] as any)[event.target.name] =
event.target.value
}
this.setState({ settings: settingsCopy })
}

handleProtocolChange = (selectedOption: any) => {
var settingsCopy = Object.assign({}, this.state.settings)
let settingsCopy = Object.assign({}, this.state.settings)
settingsCopy.mixers[0].mixerProtocol = selectedOption.value
window.mixerProtocol =
window.mixerProtocolPresets[settingsCopy.mixers[0].mixerProtocol]
Expand All @@ -123,9 +147,8 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {

handleNumberOfChannels = (index: number, event: any) => {
let settingsCopy = Object.assign({}, this.state.settings)
settingsCopy.mixers[0].numberOfChannelsInType[index] = parseInt(
event.target.value
) || 1
settingsCopy.mixers[0].numberOfChannelsInType[index] =
parseInt(event.target.value) || 1
this.setState({ settings: settingsCopy })
}

Expand Down Expand Up @@ -175,7 +198,6 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
renderChannelTypeSettings = () => {
return (
<div className="settings-show-channel-selection">
<div className="settings-header">NUMBER OF CHANNELTYPES:</div>
{window.mixerProtocol.channelTypes.map(
(item: any, index: number) => {
return (
Expand Down Expand Up @@ -229,8 +251,10 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
<Select
styles={selectorColorStyles}
value={{
label: this.state.settings.mixers[0].mixerMidiOutputPort,
value: this.state.settings.mixers[0].mixerMidiOutputPort,
label: this.state.settings.mixers[0]
.mixerMidiOutputPort,
value: this.state.settings.mixers[0]
.mixerMidiOutputPort,
}}
onChange={this.handleMixerMidiOutputPort}
options={this.midiOutputPortList}
Expand All @@ -240,24 +264,107 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
)
}

renderMixerSettings = () => {
return (
<div>
{this.state.settings.mixers.map((mixer: any, index: number) => {
return (
<React.Fragment>
<div className="settings-header">
MIXER {index + 1} SETTINGS:
</div>

<Select
styles={selectorColorStyles}
value={{
label:
window.mixerProtocolPresets[
mixer.mixerProtocol
].label,
value: mixer.mixerProtocol,
}}
onChange={this.handleProtocolChange}
options={window.mixerProtocolList}
/>
<br />
<label className="settings-input-field">
MIXER IP :
<input
name="deviceIp"
type="text"
value={
mixer.deviceIp
}
onChange={this.handleMixerChange}
/>
</label>
<br />
<label className="settings-input-field">
MIXER PORT :
<input
name="devicePort"
type="text"
value={
mixer.devicePort
}
onChange={this.handleMixerChange}
/>
</label>
<br />
<label className="settings-input-field">
PROTOCOL LATENCY :
<input
name="protocolLatency"
type="text"
value={
mixer.protocolLatency
}
onChange={this.handleMixerChange}
/>
</label>
<br />
<label className="settings-input-field">
NUMBER OF AUX :
<input
name="numberOfAux"
type="text"
value={
mixer.numberOfAux
}
onChange={this.handleMixerChange}
/>
</label>
<br />
<label className="settings-input-field">
NEXT SEND AUX NR.:
<input
name="nextSendAux"
type="text"
value={
mixer.nextSendAux
}
onChange={this.handleMixerChange}
/>
</label>
<br />
{window.mixerProtocol.protocol === 'MIDI'
? this.renderMixerMidiSettings()
: ''}
<br />
{this.renderChannelTypeSettings()}
<br />
</React.Fragment>
)
})}
</div>
)
}

render() {
return (
<div className="settings-body">
<div className="settings-header">MIXER SETTINGS:</div>
<div className="settings-header">GENERIC SETTINGS:</div>

<Select
styles={selectorColorStyles}
value={{
label:
window.mixerProtocolPresets[
this.state.settings.mixers[0].mixerProtocol
].label,
value: this.state.settings.mixers[0].mixerProtocol,
}}
onChange={this.handleProtocolChange}
options={window.mixerProtocolList}
/>
<br />
<label className="settings-input-field">
LOCAL MIXER IP:
<input
Expand All @@ -278,26 +385,6 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
/>
</label>
<br />
<label className="settings-input-field">
MIXER IP :
<input
name="deviceIp"
type="text"
value={this.state.settings.mixers[0].deviceIp}
onChange={this.handleMixerChange}
/>
</label>
<br />
<label className="settings-input-field">
MIXER PORT :
<input
name="devicePort"
type="text"
value={this.state.settings.mixers[0].devicePort}
onChange={this.handleMixerChange}
/>
</label>
<br />
<label className="settings-input-field">
FADE TIME :
<input
Expand Down Expand Up @@ -342,16 +429,6 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
%
</label>
<br />
<label className="settings-input-field">
PROTOCOL LATENCY :
<input
name="protocolLatency"
type="text"
value={this.state.settings.mixers[0].protocolLatency}
onChange={this.handleMixerChange}
/>
</label>
<br />
<label className="settings-input-field">
NUMBER OF FADERS :
<input
Expand All @@ -363,22 +440,12 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
</label>
<br />
<label className="settings-input-field">
NUMBER OF AUX :
<input
name="numberOfAux"
type="text"
value={this.state.settings.mixers[0].numberOfAux}
onChange={this.handleMixerChange}
/>
</label>
<br />
<label className="settings-input-field">
NEXT SEND AUX NR.:
NUMBER OF MIXERS :
<input
name="nextSendAux"
name="numberOfMixers"
type="text"
value={this.state.settings.mixers[0].nextSendAux}
onChange={this.handleMixerChange}
value={this.state.settings.numberOfMixers}
onChange={this.handleNumberOfMixers}
/>
</label>
<br />
Expand Down Expand Up @@ -442,12 +509,8 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
/>
</label>
<br />
{window.mixerProtocol.protocol === 'MIDI'
? this.renderMixerMidiSettings()
: ''}
<br />
{this.renderChannelTypeSettings()}
<br />

{this.renderMixerSettings()}
<button
className="settings-cancel-button"
onClick={() => {
Expand All @@ -472,7 +535,7 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
const mapStateToProps = (state: any, t: any): IAppProps => {
return {
store: state,
t: t
t: t,
}
}

Expand Down

0 comments on commit d2076b2

Please sign in to comment.