Skip to content

Commit

Permalink
feat: full ch-strip - graphical eq drag gain+freq working
Browse files Browse the repository at this point in the history
  • Loading branch information
olzzon authored and olzzon committed Oct 26, 2020
1 parent f5dae71 commit d4efe28
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 70 deletions.
55 changes: 30 additions & 25 deletions client/assets/css/ChanStripFull.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -255,8 +265,3 @@
#3a3a3a 100%
);
}

.eq-group > .dot {
font-size: 40px;
height: 40px;
}
142 changes: 99 additions & 43 deletions client/components/ChanStripFull.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)
}
Expand Down Expand Up @@ -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),
})
}

Expand All @@ -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 (
<div className="eq-full">
<div className="title">EQUALIZER</div>
<div className="eq-window">
{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 (
<Draggable
position={{ x: this.props.fader[this.props.faderIndex]
.fxParam[fxParamsList[eqFreqKey]].value*1500, y: 330-this.props.fader[this.props.faderIndex]
.fxParam[param.key].value*330 }}
grid={[5, 5]}
scale={1}
onDrag={(event) =>
this.handleDragCaptureEq(
param.key,
event as MouseEvent
)
}
>
<div
className="dot"
style={{
color: String(EqColors[param.key]),
}}
>
O
</div>
</Draggable>
)
})}
</div>
<div className="eq-text">
{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 (
<div style={{color: EqColors[param.key] }}>
{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
}
</div>
)
})}
</div>
</div>
)
}
inputSelectorButton(index: number) {
const isActive =
this.props.fader[this.props.faderIndex].inputSelector === index + 1
Expand Down Expand Up @@ -474,45 +567,6 @@ class ChanStripFull extends React.PureComponent<
)
}

eq() {
return (
<React.Fragment>
<hr />
<div className="horizontal">
<div className="item">
<div className="title">EQUALIZER</div>
<div className="content">
<div className="eq-group">
{window.mixerProtocol.channelTypes[0].toMixer.FX_PARAMS?.filter(
(param) => {
return fxParamsList[param.key].includes('Eq') && fxParamsList[param.key].includes('Gain')
}
).map((param: IFxProtocol) => {
return (
<React.Fragment>
<div className="dot" draggable={true}>O</div>
</React.Fragment>
)
})}
{window.mixerProtocol.channelTypes[0].toMixer.FX_PARAMS?.filter(
(param) => {
return fxParamsList[param.key].includes('Eq') && fxParamsList[param.key].includes('Gain')
}
).map((param: IFxProtocol) => {
return (
<React.Fragment>
{this.fxFader(param.key)}
<p className="zero-eq">_______</p>
</React.Fragment>
)
})}
</div>
</div>
</div>
</div>
</React.Fragment>
)
}
parameters() {
if (this.props.offtubeMode) {
const hasInput =
Expand Down Expand Up @@ -610,8 +664,10 @@ class ChanStripFull extends React.PureComponent<
</React.Fragment>
)}
</div>

{hasEq && this.eq()}
<React.Fragment>
<hr />
<div className="horizontal">{hasEq && this.eq()}</div>
</React.Fragment>
</div>
)
} else {
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 3 additions & 1 deletion storage/pages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": [] }
]
10 changes: 9 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit d4efe28

Please sign in to comment.