Skip to content

Commit

Permalink
Merge pull request #298 from tv2/feat/type-safety-after-updated-develop
Browse files Browse the repository at this point in the history 
Feat: type safety in reducers/actions mixerconnections
  • Loading branch information
@olzzon
olzzon authored Jan 29, 2024
2 parents 525b09a + 56e9407 commit 22b7aae
Show file tree
Hide file tree
Showing 59 changed files with 1,952 additions and 1,599 deletions.
47 changes: 12 additions & 35 deletions client/src/components/ChanStrip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,10 @@ import React from 'react'
import ReactSlider from 'react-slider'

import '../assets/css/ChanStrip.css'
import { Store } from 'redux'
import { Store } from 'redux'
import { connect } from 'react-redux'
import {
storeShowChanStrip,
storeShowOptions,
storeShowMonitorOptions,
storeShowChanStripFull,
SettingsActionTypes,
} from '../../../shared/src/actions/settingsActions'
import { IFader } from '../../../shared/src/reducers/fadersReducer'
import {
Expand Down Expand Up @@ -46,29 +43,18 @@ class ChanStrip extends React.PureComponent<
super(props)
}

shouldComponentUpdate(nextProps: IChanStripInjectProps & IChanStripProps) {
if (nextProps.faderIndex > -1) {
return true
} else {
return false
}
}

handleShowRoutingOptions() {
this.props.dispatch(storeShowOptions(this.props.faderIndex))
this.props.dispatch(storeShowChanStrip(-1))
}

handleShowMonitorOptions() {
this.props.dispatch(storeShowMonitorOptions(this.props.faderIndex))
this.props.dispatch(storeShowChanStrip(-1))
}
handleShowChStripFull() {
this.props.dispatch(storeShowChanStripFull(this.props.faderIndex))
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_CHAN_STRIP_FULL,
channel: this.props.faderIndex,
})
}
handleClose = () => {
this.props.dispatch(storeShowChanStrip(-1))
}
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_CHAN_STRIP,
channel: -1,
}) }
handleInputSelect(selected: number) {
window.socketIoClient.emit(SOCKET_SET_INPUT_SELECTOR, {
faderIndex: this.props.faderIndex,
Expand Down Expand Up @@ -165,7 +151,6 @@ class ChanStrip extends React.PureComponent<
<div className="parameter-mini-text">{maxLabel + ' dB'}</div>
{window.mixerProtocol.channelTypes[0].toMixer
.CHANNEL_INPUT_GAIN ? (
<React.Fragment>
<ReactSlider
className="chan-strip-fader"
thumbClassName="chan-strip-thumb"
Expand All @@ -182,7 +167,6 @@ class ChanStrip extends React.PureComponent<
this.handleInputGain(event)
}}
/>
</React.Fragment>
) : null}
<div className="parameter-mini-text">{minLabel + ' dB'}</div>
</div>
Expand All @@ -202,9 +186,10 @@ class ChanStrip extends React.PureComponent<
<React.Fragment>
{this.fxParamFader(fxParamsList.DelayTime)}
<div className="delayButtons">
{DEL_VALUES.map((value: number) => {
{DEL_VALUES.map((value: number, index: number) => {
return (
<button
key={index}
className="delayTime"
onClick={() => {
this.changeDelay(
Expand Down Expand Up @@ -360,18 +345,15 @@ class ChanStrip extends React.PureComponent<
<div className="parameters">
<div className="horizontal">
{hasInput && (
<React.Fragment>
<div className="item">
<div className="title">INPUT</div>
<div className="content">
{this.inputSelector()}
{this.inputGain()}
</div>
</div>
</React.Fragment>
)}
{hasGainTrim && (
<React.Fragment>
<div className="item">
<div className="title">INPUT</div>
<div className="content">
Expand All @@ -380,10 +362,8 @@ class ChanStrip extends React.PureComponent<
)}
</div>
</div>
</React.Fragment>
)}
{hasComp && (
<React.Fragment>
<div className="item">
<div className="title">COMPRESSOR</div>
<div className="content">
Expand All @@ -398,17 +378,14 @@ class ChanStrip extends React.PureComponent<
{this.gainReduction()}
</div>
</div>
</React.Fragment>
)}
{hasDelay && (
<React.Fragment>
<div className="item">
<div className="title">DELAY</div>
<div className="content">
{this.delay()}
</div>
</div>
</React.Fragment>
)}
</div>

Expand Down
86 changes: 41 additions & 45 deletions client/src/components/ChanStripFull.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import '../assets/css/ChanStripFull.css'
import { Store } from 'redux'
import { connect } from 'react-redux'
import {
storeShowOptions,
storeShowMonitorOptions,
storeShowChanStripFull,
SettingsActionTypes,
} from '../../../shared/src/actions/settingsActions'
import { IFader } from '../../../shared/src/reducers/fadersReducer'
import {
Expand Down Expand Up @@ -43,34 +41,38 @@ const DEL_VALUES = [10, 1, -1, -10]
class ChanStripFull extends React.PureComponent<
IChanStripFullProps & IChanStripFullInjectProps & Store
> {
canvas: HTMLCanvasElement | undefined

constructor(props: any) {
super(props)
}

shouldComponentUpdate(
nextProps: IChanStripFullInjectProps & IChanStripFullProps
) {
if (nextProps.faderIndex > -1) {
return true
} else {
return false
}
}

handleShowRoutingOptions() {
this.props.dispatch(storeShowOptions(this.props.faderIndex))
this.props.dispatch(storeShowChanStripFull(-1))
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_OPTION,
channel: this.props.faderIndex,
})
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_CHAN_STRIP_FULL,
channel: -1,
})
}

handleShowMonitorOptions() {
this.props.dispatch(storeShowMonitorOptions(this.props.faderIndex))
this.props.dispatch(storeShowChanStripFull(-1))
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_MONITOR_OPTIONS,
channel: this.props.faderIndex,
})
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_CHAN_STRIP_FULL,
channel: -1,
})
}

handleClose = () => {
this.props.dispatch(storeShowChanStripFull(-1))
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_CHAN_STRIP_FULL,
channel: -1,
})
}
handleInputSelect(selected: number) {
window.socketIoClient.emit(SOCKET_SET_INPUT_SELECTOR, {
Expand Down Expand Up @@ -175,24 +177,21 @@ class ChanStripFull extends React.PureComponent<
<div className="chstrip-full-mini-text">{maxLabel + ' dB'}</div>
{window.mixerProtocol.channelTypes[0].toMixer
.CHANNEL_INPUT_GAIN ? (
<React.Fragment>
<ReactSlider
className="chstrip-full-fader"
thumbClassName="chstrip-full-thumb"
orientation="vertical"
invert
min={0}
max={1}
step={0.01}
value={
this.props.fader[this.props.faderIndex]
.inputGain
}
onChange={(event: any) => {
this.handleInputGain(event)
}}
/>
</React.Fragment>
<ReactSlider
className="chstrip-full-fader"
thumbClassName="chstrip-full-thumb"
orientation="vertical"
invert
min={0}
max={1}
step={0.01}
value={
this.props.fader[this.props.faderIndex].inputGain
}
onChange={(event: any) => {
this.handleInputGain(event)
}}
/>
) : null}
<div className="chstrip-full-mini-text">{minLabel + ' dB'}</div>
</div>
Expand All @@ -212,9 +211,10 @@ class ChanStripFull extends React.PureComponent<
<React.Fragment>
{this.fxParamFader(fxParamsList.DelayTime)}
<div className="chstrip-full-delay-buttons">
{DEL_VALUES.map((value: number) => {
{DEL_VALUES.map((value: number, index: number) => {
return (
<button
key={index}
className="delayTime"
onClick={() => {
this.changeDelay(
Expand Down Expand Up @@ -376,17 +376,14 @@ class ChanStripFull extends React.PureComponent<
return (
<div className="chstrip-full-parameters">
{hasInput && (
<React.Fragment>
<div className="chstrip-full-content-group">
<div className="title">INPUT</div>
<div className="chstrip-full-content">
{this.inputSelector()}
{this.inputGain()}
</div>
</div>
</React.Fragment>
)}
<React.Fragment>
{this.doesParamExists(fxParamsList.GainTrim) ? (
<div className="chstrip-full-content-group">
<div className="title">INPUT</div>
Expand All @@ -395,7 +392,7 @@ class ChanStripFull extends React.PureComponent<
</div>
</div>
) : (
<React.Fragment></React.Fragment>
<div/>
)}
{this.doesParamExists(fxParamsList.CompThrs) ? (
<div className="chstrip-full-content-group">
Expand Down Expand Up @@ -432,7 +429,7 @@ class ChanStripFull extends React.PureComponent<
</div>
</div>
) : (
<React.Fragment></React.Fragment>
<div/>
)}
{this.doesParamExists(fxParamsList.DelayTime) ? (
<div className="chstrip-full-content-group">
Expand Down Expand Up @@ -465,7 +462,6 @@ class ChanStripFull extends React.PureComponent<
</ul>
</div>
</div>
</React.Fragment>
</div>
)
} else {
Expand All @@ -481,7 +477,7 @@ class ChanStripFull extends React.PureComponent<
<ChanStripEq faderIndex={this.props.faderIndex} />
</div>
) : (
<React.Fragment></React.Fragment>
<div/>
)}
</React.Fragment>
)
Expand Down
13 changes: 8 additions & 5 deletions client/src/components/Channel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import '../assets/css/Channel.css'
import * as IO from '../../../shared/src/constants/SOCKET_IO_DISPATCHERS'
import { IChannelReference, IFader } from '../../../shared/src/reducers/fadersReducer'
import { ISettings } from '../../../shared/src/reducers/settingsReducer'
import { storeShowChanStrip } from '../../../shared/src/actions/settingsActions'
import { SettingsActionTypes } from '../../../shared/src/actions/settingsActions'
import { withTranslation } from 'react-i18next'
import { VuLabelConversionType } from '../../shared../../../shared/src/constants/MixerProtocolInterface'
import { MixerConnectionTypes, VuLabelConversionType } from '../../shared../../../shared/src/constants/MixerProtocolInterface'
import { getFaderLabel } from '../utils/labels'
import { Conversions } from '../../../shared/src/actions/utils/dbConversion'

Expand Down Expand Up @@ -136,13 +136,16 @@ class Channel extends React.Component<
}

handleShowChanStrip() {
this.props.dispatch(storeShowChanStrip(this.faderIndex))
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_CHAN_STRIP,
channel: this.faderIndex,
})
}

handleVuMeter() {
if (
window.mixerProtocol.protocol === 'CasparCG' ||
window.mixerProtocol.protocol === 'VMIX'
window.mixerProtocol.protocol === MixerConnectionTypes.CasparCG ||
window.mixerProtocol.protocol === MixerConnectionTypes.vMix
) {
return (
<React.Fragment>
Expand Down
10 changes: 8 additions & 2 deletions client/src/components/ChannelMonitorOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ClassNames from 'classnames'
import '../assets/css/ChannelMonitorOptions.css'
import { Store } from 'redux'
import { connect } from 'react-redux'
import { storeShowMonitorOptions } from '../../../shared/src/actions/settingsActions'
import { SettingsActionTypes } from '../../../shared/src/actions/settingsActions'
import { ISettings } from '../../../shared/src/reducers/settingsReducer'
import {
SOCKET_SET_AUX_LEVEL,
Expand Down Expand Up @@ -113,7 +113,10 @@ class ChannelMonitorOptions extends React.PureComponent<
}

handleClose = () => {
this.props.dispatch(storeShowMonitorOptions(this.faderIndex))
this.props.dispatch({
type: SettingsActionTypes.TOGGLE_SHOW_MONITOR_OPTIONS,
channel: this.faderIndex,
})
}

render() {
Expand All @@ -139,13 +142,15 @@ class ChannelMonitorOptions extends React.PureComponent<
<hr />
<label className="input">MONITOR AUX SEND :</label>
<input
title='Set the Aux Send for the monitor. Set to -1 to disable monitoring'
className="input-field"
value={this.props.fader[this.faderIndex].monitor}
onChange={(event) => this.handleSetAux(event)}
/>
<br />
<label className="input">SHOW IN MINI MONITORVIEW :</label>
<input
title='Show this channel in the Mini MonitorView'
type="checkbox"
checked={
this.props.fader[this.faderIndex].showInMiniMonitor
Expand All @@ -168,6 +173,7 @@ class ChannelMonitorOptions extends React.PureComponent<
>
{' Channel ' + (index + 1) + ' : '}
<input
title='Enable monitoring of this channel'
type="checkbox"
checked={isSelected}
onChange={(event) =>
Expand Down
Loading

0 comments on commit 22b7aae

Please sign in to comment.