diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css index afda3b11..cf9b69ec 100644 --- a/client/assets/css/ChanStripFull.css +++ b/client/assets/css/ChanStripFull.css @@ -60,38 +60,48 @@ height: 50px; } -.parameters > .eq-group, -.content > .eq-group { - display: flex; +.parameters > .eq-window, +.eq-full > .eq-window { top: 5px; left: 2px; - margin-left: 90px; + height: 400px; + width: 1500px; + margin-left: 150px; + margin-top: 10px; overflow: auto; - text-align: center; + text-align: left; font-size: 14px; color: #fff; + border-style: solid; + border-color: rgb(128, 128, 128); + border-width: 4px; } -.content > .eq-group { - margin-left: 0; +.parameters > .eq-text, +.content > .eq-text { + top: 5px; + left: 2px; + height: 400px; + width: 1500px; + margin-left: 150px; + margin-top: 10px; + overflow: auto; + text-align: center; + font-size: 14px; + color: #fff; + border-style: solid; + border-color: rgb(128, 128, 128); + border-width: 4px; } -.eq-group > .horizontal-space { +.eq-window > .horizontal-space { width: 150px; height: 50px; } -.eq > .group-text { - text-align: center; - line-height: 20px; - font-size: 110%; -} - -.zero-eq { - width: 63px; - height: 2px; - margin-left: -68px; - margin-right: 30px; - margin-top: 111px; +.eq-window > .dot { + position: absolute; + font-size: 60px; + height: 60px; } .zero-comp { @@ -255,8 +265,3 @@ #3a3a3a 100% ); } - -.eq-group > .dot { - font-size: 40px; - height: 40px; -} diff --git a/client/components/ChanStripFull.tsx b/client/components/ChanStripFull.tsx index 5f3dbcc6..c620ceb6 100644 --- a/client/components/ChanStripFull.tsx +++ b/client/components/ChanStripFull.tsx @@ -1,5 +1,6 @@ import React from 'react' import ReactSlider from 'react-slider' +import Draggable, { DraggableEvent } from 'react-draggable' import '../assets/css/ChanStripFull.css' import { Store } from 'redux' @@ -41,9 +42,22 @@ interface IChanStripFullProps { faderIndex: number } +enum EqColors { + 'yellow', + 'green', + 'blue', + 'red', +} + class ChanStripFull extends React.PureComponent< IChanStripFullProps & IChanStripFullInjectProps & Store > { + state = { + dragStartX: 0, + dragStartY: 0, + dragCurrentX: 0, + dragCurrentY: 0, + } constructor(props: any) { super(props) } @@ -110,11 +124,11 @@ class ChanStripFull extends React.PureComponent< }) } - handleFx(fxParam: fxParamsList, event: any) { + handleFx(fxParam: fxParamsList, level: any) { window.socketIoClient.emit(SOCKET_SET_FX, { fxParam: fxParam, channel: this.props.faderIndex, - level: parseFloat(event), + level: parseFloat(level), }) } @@ -126,6 +140,85 @@ class ChanStripFull extends React.PureComponent< }) } + + handleDragCaptureEq(key: number, event: MouseEvent) { + console.log('Realtime capture Gain :', String(fxParamsList[key]), 'X :',event.clientX, ' Y :',event.clientY) + let eqFreqKey: keyof typeof fxParamsList = String(fxParamsList[key]).replace('EqGain','EqFreq') as keyof typeof fxParamsList + + this.handleFx(fxParamsList[eqFreqKey], Math.round(100*(event.clientX-360) / 1500)/100) + this.handleFx(key, Math.round(100*(880 - event.clientY) / 440)/100) + } + eq() { + return ( +
+
EQUALIZER
+
+ {window.mixerProtocol.channelTypes[0].fromMixer.FX_PARAMS?.filter( + (param) => { + return ( + fxParamsList[param.key].includes('Eq') && + fxParamsList[param.key].includes('Gain') + ) + } + ).map((param: IFxProtocol) => { + let eqFreqKey: keyof typeof fxParamsList = String(fxParamsList[param.key]).replace('EqGain','EqFreq') as keyof typeof fxParamsList + return ( + + this.handleDragCaptureEq( + param.key, + event as MouseEvent + ) + } + > +
+ O +
+ + ) + })} +
+
+ {window.mixerProtocol.channelTypes[0].fromMixer.FX_PARAMS?.filter( + (param) => { + return ( + fxParamsList[param.key].includes('Eq') && + fxParamsList[param.key].includes('Gain') + ) + } + ).map((param: IFxProtocol) => { + let eqFreqKey: keyof typeof fxParamsList = String(fxParamsList[param.key]).replace('EqGain','EqFreq') as keyof typeof fxParamsList + return ( +
+ {param.params[0].label} + {' Gain : '} + { + this.props.fader[this.props.faderIndex] + .fxParam[param.key].value + } + {' Freq :'} + + { + this.props.fader[this.props.faderIndex] + .fxParam[fxParamsList[eqFreqKey]].value + } +
+ ) + })} +
+
+ ) + } inputSelectorButton(index: number) { const isActive = this.props.fader[this.props.faderIndex].inputSelector === index + 1 @@ -474,45 +567,6 @@ class ChanStripFull extends React.PureComponent< ) } - eq() { - return ( - -
-
-
-
EQUALIZER
-
-
- {window.mixerProtocol.channelTypes[0].toMixer.FX_PARAMS?.filter( - (param) => { - return fxParamsList[param.key].includes('Eq') && fxParamsList[param.key].includes('Gain') - } - ).map((param: IFxProtocol) => { - return ( - -
O
- - ) - })} - {window.mixerProtocol.channelTypes[0].toMixer.FX_PARAMS?.filter( - (param) => { - return fxParamsList[param.key].includes('Eq') && fxParamsList[param.key].includes('Gain') - } - ).map((param: IFxProtocol) => { - return ( - - {this.fxFader(param.key)} -

_______

- - ) - })} -
-
-
-
- - ) - } parameters() { if (this.props.offtubeMode) { const hasInput = @@ -610,8 +664,10 @@ class ChanStripFull extends React.PureComponent< )} - - {hasEq && this.eq()} + +
+
{hasEq && this.eq()}
+ ) } else { diff --git a/package.json b/package.json index b9983377..f8ca0363 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "osc": "https://github.com/olzzon/tv2-osc.js-no-serialport.git", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-draggable": "^4.4.3", "react-i18next": "^11.7.0", "react-redux": "^7.2.1", "react-select": "^3.1.0", diff --git a/storage/pages.json b/storage/pages.json index 28ac0b1d..500d37ae 100644 --- a/storage/pages.json +++ b/storage/pages.json @@ -4,5 +4,7 @@ "label": "LIVE", "faders": [0, 2, 3, 4, 8, 13, 14, 15, 31] }, - { "id": "studio", "label": "STUDIO", "faders": [0, 1, 4, 5, 9, 11] } + { "id": "studio", "label": "STUDIO", "faders": [0, 1, 4, 5, 9, 11] }, + { "id": "custom2", "label": "EXT", "faders": [5, 7, 8, 10] }, + { "id": "custom3", "label": "Custom 3", "faders": [] } ] diff --git a/yarn.lock b/yarn.lock index 2d2be63d..0e1b0ebf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3122,7 +3122,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.6: +classnames@^2.2.5, classnames@^2.2.6: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== @@ -8695,6 +8695,14 @@ react-dom@^16.13.1: prop-types "^15.6.2" scheduler "^0.19.1" +react-draggable@^4.4.3: + version "4.4.3" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3" + integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w== + dependencies: + classnames "^2.2.5" + prop-types "^15.6.0" + react-i18next@^11.7.0: version "11.7.0" resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.7.0.tgz#f27c4c237a274e007a48ac1210db83e33719908b"