From eb6fa4259d50672bf40377da2f6fb4bbf150b940 Mon Sep 17 00:00:00 2001 From: olzzon Date: Wed, 1 Dec 2021 14:21:31 +0100 Subject: [PATCH] feat: fullch strip GUI - split Eq part to own component. --- client/assets/css/ChanStripEq.css | 22 ++ client/assets/css/ChanStripFull.css | 120 +++----- client/components/ChanStripEq.tsx | 445 ++++++++++++++++++++++++++++ client/components/ChanStripFull.tsx | 433 ++++----------------------- 4 files changed, 561 insertions(+), 459 deletions(-) create mode 100644 client/assets/css/ChanStripEq.css create mode 100644 client/components/ChanStripEq.tsx diff --git a/client/assets/css/ChanStripEq.css b/client/assets/css/ChanStripEq.css new file mode 100644 index 00000000..7572329d --- /dev/null +++ b/client/assets/css/ChanStripEq.css @@ -0,0 +1,22 @@ +.eq-full > .eq-window { + top: 2vh; + left: 2vw; + margin-top: 3vh; + margin-left: 10vw; + height: 30vh; + width: 0vw; +} + +.eq-full > .eq-canvas { + position: absolute; + margin-left: -36.5vw; + margin-top: 5vh; + height: 30vh; + width: 72vw; +} + +.eq-window > .dot { + position: absolute; + font-size: 5vh; + height: 10vh; +} diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css index 4d514894..f8dc6d1c 100644 --- a/client/assets/css/ChanStripFull.css +++ b/client/assets/css/ChanStripFull.css @@ -1,4 +1,4 @@ -.chan-strip-full-body { +.chstrip-full-body { position: fixed; top: 5vh; left: 5vw; @@ -12,66 +12,52 @@ border-radius: 8px; text-align: left; z-index: 2; - color: #fff; } -.chan-strip-full-body > .ch-strip-full-header { +.chstrip-full-body > .ch-strip-full-header { margin-left: 5vw; margin-top: 1vh; margin-right: 10vw; /* width: 420px; */ font-size: 3vh; - color: #fff; white-space: nowrap; } -.chan-strip-full-body > .parameters { +.chstrip-full-body > .chstrip-full-parameters { top: 2vh; left: 2vw; height: 100vh; overflow: auto; font-size: 1.5vh; text-align: center; - color: #fff; } -.chan-strip-full-body .parameters .horizontal { +.chstrip-full-body .chstrip-full-parameters .horizontal { display: flex; justify-content: space-evenly; } -.chan-strip-full-body .parameters .horizontal .item .content { +.chstrip-full-content { display: flex; } -.parameters > .inp-comp-del-group { +.chstrip-full-parameters > .inp-comp-del-group { display: flex; top: 2vh; left: 2vw; margin-left: 2vw; - overflow: auto; - font-size: 1.5vh; - text-align: center; - color: #fff; } .eq-full > .eq-window { top: 2vh; left: 2vw; margin-top: 3vh; - margin-left: 14vw; + margin-left: 10vw; height: 30vh; - width: 70vw; - overflow: auto; - text-align: left; - font-size: 1.5vh; - color: #fff; - background-color: #2a42274d; - border-style: solid; - border-color: rgba(128, 128, 128, 0.144); - border-width: 4px; + width: 0vw; } + .eq-full > .eq-canvas { position: absolute; margin-left: -36.5vw; @@ -85,17 +71,10 @@ justify-content: space-evenly; top: 2vh; left: 2vw; - width: 80vw; + width: 85vw; height: 10vh; - margin-left: 1vw; + margin-left: 2vw; margin-top: 2vh; - overflow: auto; - text-align: center; - font-size: 1.5vh; - color: #fff; - border-style: solid; - border-color: rgb(128, 128, 128); - border-width: 4px; } .eq-window > .dot { @@ -104,7 +83,7 @@ height: 10vh; } -.zero-comp { +.chstrip-full-zero-comp { width: 1vw; height: 0.2vh; margin-left: -6.5vw; @@ -112,15 +91,14 @@ font-size: 0.8vw; } -.zero-monitor { - width: 2px; - height: 20px; - margin-left: 10px; - margin-top: -150px; +.chstrip-full-zero-monitor { + width: 1vw; + height: 0.2vh; + margin-left: 3.5vw; + margin-top: -12vh; } -.parameters > .parameter-text, -.content > .parameter-text { +.chstrip-full-parameter-text { list-style-type: none; text-align: center; margin-top: 2vh; @@ -149,8 +127,7 @@ border-color: rgb(99, 99, 99); } -.parameter-text > .parameter-mini-text, -.content > .parameter-mini-text { +.chstrip-full-mini-text { list-style-type: none; text-align: center; max-width: 9vw; @@ -158,49 +135,34 @@ font-size: 0.8vh; } -.inp-comp-del-group > .delayButtons { - width: 5vw; +.chstrip-full-delay-buttons { margin-top: 3vh; - margin-left: 3vw; -} -.content > .delayButtons { - width: 30px; - min-height: 220px; - margin-top: 24px; - margin-left: 50px; + margin-left: 1vw; } .noDelayButtons { margin-top: 24px; min-height: 220px; } -.delayButtons > .delayTime { +.chstrip-full-delay-buttons > .delayTime { outline: none; -moz-outline: none; color: white; height: 5vh; - width: 5vw; + width: 4vw; border-color: rgb(71, 71, 71); background-color: rgb(53, 53, 53); - margin-left: -50px; - margin-top: 5px; + margin-left: 0vw; + margin-top: 1vh; border-radius: 7px; } -.inp-comp-del-group > .input-buttons { +.chstrip-full-content > .input-buttons { width: 30px; margin-top: 24px; margin-left: 50px; } -.inp-comp-del-group .input-buttons.disabled { - visibility: hidden; -} -.content > .input-buttons { - width: 30px; - margin-top: 24px; - margin-left: 50px; -} -.content > .input-buttons.disabled { +.chstrip-full-content > .input-buttons.disabled { visibility: hidden; } @@ -220,16 +182,12 @@ background-color: #2f475b; } -.parameters > .monitor-sends, -.content > .monitor-sends { +.chstrip-full-monitor-sends { list-style-type: none; display: flex; text-align: center; - margin-top: 15px; - margin-left: 1px; - padding: 0px; - line-height: 10px; - font-size: 95%; + margin-top: 2vh; + margin-left: 1vw; } .ch-strip-full-header > .close { @@ -242,7 +200,6 @@ width: 5vh; height: 5vh; font-size: 2vw; - /* margin-top: 5px; */ right: 3vw; } @@ -251,14 +208,13 @@ border-color: rgb(99, 99, 99); background-color: rgb(27, 27, 27); border-radius: 7px; - margin-left: 10px; + margin-left: 3vw; width: 10vw; height: 4vh; font-size: 0.8vw; - color: #fff; } -.chan-strip-full-fader { +.chstrip-full-fader { width: 0.5vw; height: 15vh; margin-left: 5vw; @@ -269,10 +225,11 @@ border-radius: 8px; background-color: rgb(17, 17, 17); } -.chan-strip-full-thumb { - margin-left: -0.5vw; +.chstrip-full-thumb { + margin-left: -1.2vw; color: #3a3a3a; font-size: 1vh; + line-height: 4vh; width: 3vw; height: 4vh; border: 1px solid #c5c2c2; @@ -289,7 +246,7 @@ ); } -.chan-strip-q { +.chstrip-q { width: 15vw; height: 0.5vh; margin-left: 5vw; @@ -300,12 +257,13 @@ border-radius: 8px; background-color: rgb(17, 17, 17); } -.chan-strip-q-thumb { - margin-top: -1vh; +.chstrip-q-thumb { + margin-top: -2vh; color: #3a3a3a; font-size: 0.8vh; width: 3vw; height: 4vh; + line-height: 4vh; border: 1px solid #c5c2c2; border-radius: 8px; background: linear-gradient( diff --git a/client/components/ChanStripEq.tsx b/client/components/ChanStripEq.tsx new file mode 100644 index 00000000..c29491d3 --- /dev/null +++ b/client/components/ChanStripEq.tsx @@ -0,0 +1,445 @@ +import React from 'react' +import Draggable from 'react-draggable' +import ReactSlider from 'react-slider' + +import '../assets/css/ChanStripEq.css' +import { Store } from 'redux' +import { connect } from 'react-redux' +import { IFader } from '../../server/reducers/fadersReducer' +import { SOCKET_SET_FX } from '../../server/constants/SOCKET_IO_DISPATCHERS' +import { fxParamsList } from '../../server/constants/MixerProtocolInterface' +import { IChannel } from '../../server/reducers/channelsReducer' +import { getFaderLabel } from '../utils/labels' + +interface IChanStripFullInjectProps { + label: string + selectedProtocol: string + numberOfChannelsInType: Array + channel: IChannel[] + fader: IFader[] + auxSendIndex: number + offtubeMode: boolean +} + +interface IChanStripFullProps { + faderIndex: number +} + +enum EqColors { + 'rgb(93, 184, 180)', + 'rgb(53, 112, 127)', + 'rgb(217, 21, 133)', + 'rgb(229, 159, 34)', +} + +interface IFreqLabels { + label: string + posY: number +} +const EQ_FREQ_LABELS: IFreqLabels[] = [ + { + label: '50', + posY: 400, + }, + { + label: '100', + posY: 525, + }, + { + label: '250', + posY: 700, + }, + { + label: '500', + posY: 850, + }, + { + label: '1k', + posY: 1025, + }, + { + label: '2k', + posY: 1160, + }, + { + label: '5k', + posY: 1350, + }, + { + label: '10k', + posY: 1490, + }, +] + +// Constant for calculation Eq dot positions: +const EQ_MIN_HZ = 20 +const EQ_MAX_HZ = 20000 +const EQ_X_SIZE = 1150 +const EQ_WIN_X = 450 +const EQ_Y_SIZE = 250 +const EQ_X_OFFSET = 315 +const EQ_Y_OFFSET = 740 + +// Constants for Delay buttons: +const DEL_VALUES = [10, 1, -1, -10] + +class ChanStripEq 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 + } + } + + handleFx(fxParam: fxParamsList, level: any) { + if (level < 0) { + level = 0 + } + if (level > 1) { + level = 1 + } + // window.storeRedux.dispatch(storeFaderFx(fxParam, this.props.faderIndex, parseFloat(level))) + window.socketIoClient.emit(SOCKET_SET_FX, { + fxParam: fxParam, + channel: this.props.faderIndex, + level: parseFloat(level), + }) + } + + handleDragCaptureEq(key: number, event: any) { + let eqFreqKey = + fxParamsList[ + String(fxParamsList[key]).replace( + 'EqGain', + 'EqFreq' + ) as keyof typeof fxParamsList + ] + let eventX = event.clientX ?? event.touches[0].clientX + let eventY = event.clientY ?? event.touches[0].clientY + this.handleFx(eqFreqKey, this.freqPositionToValue(eventX)) + this.handleFx( + key, + Math.round((100 * (EQ_Y_OFFSET - eventY)) / EQ_Y_SIZE) / 100 + ) + } + + valueToFreqPosition(value: number) { + return EQ_X_SIZE * value + } + freqPositionToValue(position: number) { + return (position - EQ_X_OFFSET) / EQ_X_SIZE + } + + logOscToLinFreq(value: number) { + return Math.round( + Math.pow( + 10, + value * (Math.log10(EQ_MAX_HZ) - Math.log10(EQ_MIN_HZ)) + + Math.log10(EQ_MIN_HZ) + ) + ) + } + + setRef = (el: HTMLCanvasElement) => { + this.canvas = el + this.paintEqBackground() + } + + paintEqBackground() { + if (!this.canvas) { + return + } + this.canvas.width = this.canvas.clientWidth + this.canvas.height = this.canvas.clientHeight + const context = this.canvas.getContext('2d', { + antialias: false, + stencil: false, + preserveDrawingBuffer: true, + }) as CanvasRenderingContext2D + + if (!context) return + + // Fill background color: + + context.rect(55, 0, this.canvas.width, this.canvas.height) + context.fillStyle = '#2a42274d' + context.fill() + // Draw X-Y axis: + context.beginPath() + context.strokeStyle = 'white' + context.moveTo(55, 0) + context.lineTo(55, this.canvas.height) + context.stroke() + // Draw zero gain line: + context.beginPath() + context.strokeStyle = 'rgba(128, 128, 128, 0.244) 10px' + context.moveTo(55, this.canvas.height / 2) + context.lineTo(this.canvas.width, this.canvas.height / 2) + context.stroke() + // Freq on zero gain line: + context.beginPath() + EQ_FREQ_LABELS.forEach((freq: IFreqLabels) => { + context.font = String(this.canvas.height / 20) + 'px Ariel' + context.strokeStyle = 'white' + context.strokeText( + freq.label, + freq.posY, + this.canvas.height / 2 + 20 + ) + }) + // Freq on zero gain line: + context.strokeText( + String( + window.mixerProtocol.channelTypes[0].fromMixer[ + fxParamsList.EqGain01 + ]?.[0].maxLabel + ) + ' dB', + 1, + 20 + ) + context.strokeText('0 dB', 1, this.canvas.height / 2 + 20) + context.strokeText( + String( + window.mixerProtocol.channelTypes[0].fromMixer[ + fxParamsList.EqGain01 + ]?.[0].maxLabel + ) + ' dB', + 1, + this.canvas.height + ) + context.stroke() + } + + eqGraphics() { + return ( +
+ {Object.keys(fxParamsList) + .filter((fxKey: number | string) => { + return String(fxKey).includes('EqGain') + }) + .map((keyName: string) => { + let fxKey = keyName as keyof typeof fxParamsList + let eqFreqKey = + fxParamsList[ + fxKey.replace( + 'EqGain', + 'EqFreq' + ) as keyof typeof fxParamsList + ] + return ( + + this.handleDragCaptureEq( + fxParamsList[fxKey], + event + ) + } + > +
+ O +
+ + ) + })} +
+ ) + } + + eqText() { + return ( +
+ {Object.keys(fxParamsList) + .filter((fxKey: number | string) => { + return String(fxKey).includes('EqGain') + }) + .map((keyName: string) => { + let fxKey = keyName as keyof typeof fxParamsList + let eqFreqKey = + fxParamsList[ + fxKey.replace( + 'EqGain', + 'EqFreq' + ) as keyof typeof fxParamsList + ] + let eqQKey = + fxParamsList[ + fxKey.replace( + 'EqGain', + 'EqQ' + ) as keyof typeof fxParamsList + ] + let maxGain: number = + window.mixerProtocol.channelTypes[0].fromMixer[ + fxParamsList[fxKey] + ]?.[0].maxLabel ?? 1 + let minGain = + window.mixerProtocol.channelTypes[0].fromMixer[ + fxParamsList[fxKey] + ]?.[0].minLabel ?? 0 + + return ( +
+
+ {' Gain : '} + {Math.round( + 10 * + ((maxGain - minGain) * + (this.props.fader[ + this.props.faderIndex + ][fxParamsList[fxKey]]?.[0] ?? 0) + + minGain) + ) / 10} + {' Freq :'} + {this.logOscToLinFreq( + this.props.fader[this.props.faderIndex][ + eqFreqKey + ]?.[0] ?? 0 + )} + {this.qFader(eqQKey)} +
+ ) + })} +
+ ) + } + + qFader(fxParam: fxParamsList) { + let maxLabel: number = + window.mixerProtocol.channelTypes[0].fromMixer[fxParam]?.[0] + .maxLabel ?? 1 + let minLabel = + window.mixerProtocol.channelTypes[0].fromMixer[fxParam]?.[0] + .minLabel ?? 0 + let valueLabel = + window.mixerProtocol.channelTypes[0].fromMixer[fxParam]?.[0] + .valueLabel ?? '' + return ( +
+
+ {Math.round( + ((maxLabel - minLabel) * + (1 - + Math.pow( + 1 - + this.props.fader[this.props.faderIndex][ + fxParam + ]?.[0], + 3 + )) + + minLabel) * + 10 + ) / 10} + {valueLabel} +
+ ( +
+ {Math.round( + ((maxLabel - minLabel) * + (1 - + Math.pow( + 1 - parseFloat(state.valueNow), + 3 + )) + + minLabel) * + 10 + ) / 10} + {valueLabel} +
+ )} + onChange={(event: any) => { + this.handleFx(fxParam, event) + }} + /> +
+ ) + } + + render() { + return ( +
+ +
EQUALIZER
+ {this.eqGraphics()} + {this.eqText()} +
+ ) + } +} + +const mapStateToProps = (state: any, props: any): IChanStripFullInjectProps => { + let inject: IChanStripFullInjectProps = { + label: '', + selectedProtocol: state.settings[0].mixers[0].mixerProtocol, + numberOfChannelsInType: + state.settings[0].mixers[0].numberOfChannelsInType, + channel: state.channels[0].chMixerConnection[0].channel, + fader: state.faders[0].fader, + auxSendIndex: -1, + offtubeMode: state.settings[0].offtubeMode, + } + if (props.faderIndex >= 0) { + inject = { + label: getFaderLabel(props.faderIndex, 'FADER'), + selectedProtocol: state.settings[0].mixers[0].mixerProtocol, + numberOfChannelsInType: + state.settings[0].mixers[0].numberOfChannelsInType, + channel: state.channels[0].chMixerConnection[0].channel, + fader: state.faders[0].fader, + auxSendIndex: state.faders[0].fader[props.faderIndex].monitor - 1, + offtubeMode: state.settings[0].offtubeMode, + } + } + return inject +} + +export default connect(mapStateToProps)( + ChanStripEq +) as any diff --git a/client/components/ChanStripFull.tsx b/client/components/ChanStripFull.tsx index bd3e7375..eecdf90a 100644 --- a/client/components/ChanStripFull.tsx +++ b/client/components/ChanStripFull.tsx @@ -1,6 +1,5 @@ import React from 'react' import ReactSlider from 'react-slider' -import Draggable from 'react-draggable' import '../assets/css/ChanStripFull.css' import { Store } from 'redux' @@ -22,6 +21,7 @@ import ClassNames from 'classnames' import { fxParamsList } from '../../server/constants/MixerProtocolInterface' import { IChannel } from '../../server/reducers/channelsReducer' import { getFaderLabel } from '../utils/labels' +import ChanStripEq from './ChanStripEq' interface IChanStripFullInjectProps { label: string @@ -37,61 +37,6 @@ interface IChanStripFullProps { faderIndex: number } -enum EqColors { - 'rgb(93, 184, 180)', - 'rgb(53, 112, 127)', - 'rgb(217, 21, 133)', - 'rgb(229, 159, 34)', -} - -interface IFreqLabels { - label: string - posY: number -} -const EQ_FREQ_LABELS: IFreqLabels[] = [ - { - label: '50', - posY: 400, - }, - { - label: '100', - posY: 525, - }, - { - label: '250', - posY: 700, - }, - { - label: '500', - posY: 850, - }, - { - label: '1k', - posY: 1025, - }, - { - label: '2k', - posY: 1160, - }, - { - label: '5k', - posY: 1350, - }, - { - label: '10k', - posY: 1490, - }, -] - -// Constant for calculation Eq dot positions: -const EQ_MIN_HZ = 20 -const EQ_MAX_HZ = 20000 -const EQ_X_SIZE = 1450 -const EQ_WIN_X = 450 -const EQ_X_OFFSET = 350 -const EQ_Y_SIZE = 330 -const EQ_Y_OFFSET = 840 - // Constants for Delay buttons: const DEL_VALUES = [10, 1, -1, -10] @@ -171,230 +116,6 @@ class ChanStripFull extends React.PureComponent< }) } - handleDragCaptureEq(key: number, event: any) { - let eqFreqKey = - fxParamsList[ - String(fxParamsList[key]).replace( - 'EqGain', - 'EqFreq' - ) as keyof typeof fxParamsList - ] - let eventX = event.clientX ?? event.touches[0].clientX - let eventY = event.clientY ?? event.touches[0].clientY - this.handleFx(eqFreqKey, this.freqPositionToValue(eventX)) - this.handleFx( - key, - Math.round((100 * (EQ_Y_OFFSET - eventY)) / EQ_Y_SIZE) / 100 - ) - } - - valueToFreqPosition(value: number) { - return EQ_X_SIZE * value - } - freqPositionToValue(position: number) { - return (position - EQ_X_OFFSET) / EQ_X_SIZE - } - - logOscToLinFreq(value: number) { - return Math.round( - Math.pow( - 10, - value * (Math.log10(EQ_MAX_HZ) - Math.log10(EQ_MIN_HZ)) + - Math.log10(EQ_MIN_HZ) - ) - ) - } - - setRef = (el: HTMLCanvasElement) => { - this.canvas = el - this.paintEqBackground() - } - - paintEqBackground() { - if (!this.canvas) { - return - } - this.canvas.width = this.canvas.clientWidth - this.canvas.height = this.canvas.clientHeight - const context = this.canvas.getContext('2d', { - antialias: false, - stencil: false, - preserveDrawingBuffer: true, - }) as CanvasRenderingContext2D - - if (!context) return - - // Draw X-Y axis: - context.beginPath() - context.strokeStyle = 'white' - context.moveTo(55, 0) - context.lineTo(55, this.canvas.height) - context.stroke() - // Draw zero gain line: - context.beginPath() - context.strokeStyle = 'rgba(128, 128, 128, 0.244) 10px' - context.moveTo(55, this.canvas.height/2) - context.lineTo(this.canvas.width, this.canvas.height/2) - context.stroke() - // Freq on zero gain line: - context.beginPath() - EQ_FREQ_LABELS.forEach((freq: IFreqLabels) => { - context.font = String(this.canvas.height/ 20) + 'px Ariel' - context.strokeStyle = 'white' - context.strokeText(freq.label, freq.posY, this.canvas.height/2 + 20) - }) - // Freq on zero gain line: - context.strokeText( - String( - window.mixerProtocol.channelTypes[0].fromMixer[ - fxParamsList.EqGain01 - ]?.[0].maxLabel - ) + ' dB', - 1, - 20 - ) - context.strokeText('0 dB', 1, this.canvas.height/2 + 20) - context.strokeText( - String( - window.mixerProtocol.channelTypes[0].fromMixer[ - fxParamsList.EqGain01 - ]?.[0].maxLabel - ) + ' dB', - 1, - this.canvas.height - ) - context.stroke() - } - - eq() { - return ( -
- -
EQUALIZER
- {this.eqGraphics()} - {this.eqText()} -
- ) - } - eqGraphics() { - return ( -
- {Object.keys(fxParamsList) - .filter((fxKey: number | string) => { - return String(fxKey).includes('EqGain') - }) - .map((keyName: string) => { - let fxKey = keyName as keyof typeof fxParamsList - let eqFreqKey = - fxParamsList[ - fxKey.replace( - 'EqGain', - 'EqFreq' - ) as keyof typeof fxParamsList - ] - return ( - - this.handleDragCaptureEq( - fxParamsList[fxKey], - event - ) - } - > -
- O -
- - ) - })} -
- ) - } - - eqText() { - return ( -
- {Object.keys(fxParamsList) - .filter((fxKey: number | string) => { - return String(fxKey).includes('EqGain') - }) - .map((keyName: string) => { - let fxKey = keyName as keyof typeof fxParamsList - let eqFreqKey = - fxParamsList[ - fxKey.replace( - 'EqGain', - 'EqFreq' - ) as keyof typeof fxParamsList - ] - let eqQKey = - fxParamsList[ - fxKey.replace( - 'EqGain', - 'EqQ' - ) as keyof typeof fxParamsList - ] - let maxGain: number = - window.mixerProtocol.channelTypes[0].fromMixer[ - fxParamsList[fxKey] - ]?.[0].maxLabel ?? 1 - let minGain = - window.mixerProtocol.channelTypes[0].fromMixer[ - fxParamsList[fxKey] - ]?.[0].minLabel ?? 0 - - return ( -
-
- {' Gain : '} - {Math.round( - 10 * - ((maxGain - minGain) * - (this.props.fader[ - this.props.faderIndex - ][fxParamsList[fxKey]]?.[0] ?? 0) + - minGain) - ) / 10} - {' Freq :'} - {this.logOscToLinFreq( - this.props.fader[this.props.faderIndex][ - eqFreqKey - ]?.[0] ?? 0 - )} - {this.qFader(eqQKey)} -
- ) - })} -
- ) - } - inputSelectorButton(index: number) { const isActive = this.props.fader[this.props.faderIndex].inputSelector === index + 1 @@ -449,15 +170,15 @@ class ChanStripFull extends React.PureComponent< window.mixerProtocol.channelTypes[0].fromMixer .CHANNEL_INPUT_GAIN?.[0].minLabel ?? 0 return ( -
+
Gain -
{maxLabel + ' dB'}
+
{maxLabel + ' dB'}
{window.mixerProtocol.channelTypes[0].toMixer .CHANNEL_INPUT_GAIN ? ( ) : null} -
{minLabel + ' dB'}
+
{minLabel + ' dB'}
) } gainReduction() { return ( -
+
Redution
@@ -490,7 +211,7 @@ class ChanStripFull extends React.PureComponent< return ( {this.fxParamFader(fxParamsList.DelayTime)} -
+
{DEL_VALUES.map((value: number) => { return (