Skip to content

Commit

Permalink
fix: metering - possibly undefined (wasn´t discovered, as the meterin…
Browse files Browse the repository at this point in the history 
…g previously wasn´t visible if it was undefined)
  • Loading branch information
olzzon authored and olzzon committed Oct 11, 2020
1 parent 622cc2e commit 9ee5094
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 31 deletions.
38 changes: 23 additions & 15 deletions client/components/ReductionMeter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,18 @@ export class ReductionMeter extends React.Component<
totalPeak: number = 0
windowPeak: number = 0
windowLast: number = 0
meterMax: number = 1
meterMin: number = 0
meterTest: number = 0.75
meterZero: number = 0.75
WINDOW: number = 2000

constructor(props: any) {
super(props)
this.meterMax = window.mixerProtocol.meter?.max || 1
this.meterMin = window.mixerProtocol.meter?.min || 0
this.meterTest = window.mixerProtocol.meter?.test || 0.75
this.meterZero = window.mixerProtocol.meter?.zero || 0.75
}

public shouldComponentUpdate(nextProps: IReductionMeterInjectedProps) {
Expand All @@ -34,7 +42,7 @@ export class ReductionMeter extends React.Component<
totalHeight = () => {
return (
170 /
(window.mixerProtocol.meter.max - window.mixerProtocol.meter.min)
(this.meterMax - this.meterMin)
)
}

Expand All @@ -58,32 +66,32 @@ export class ReductionMeter extends React.Component<

calcLower = () => {
let val = this.props.reductionVal
if (val >= window.mixerProtocol.meter.test) {
val = window.mixerProtocol.meter.test
if (val >= this.meterTest) {
val = this.meterTest
}
return this.totalHeight() * val
}

calcMiddle = () => {
let val = this.props.reductionVal
if (val < window.mixerProtocol.meter.test) {
if (val < this.meterTest) {
val = 0
} else if (val >= window.mixerProtocol.meter.zero) {
} else if (val >= this.meterZero) {
val =
window.mixerProtocol.meter.zero -
window.mixerProtocol.meter.test
this.meterZero -
this.meterTest
} else {
val = this.props.reductionVal - window.mixerProtocol.meter.test
val = this.props.reductionVal - this.meterTest
}
return this.totalHeight() * val + 1
}

calcUpper = () => {
let val = this.props.reductionVal
if (val < window.mixerProtocol.meter.zero) {
if (val < this.meterZero) {
val = 0
} else {
val = this.props.reductionVal - window.mixerProtocol.meter.zero
val = this.props.reductionVal - this.meterZero
}

return this.totalHeight() * val + 1
Expand Down Expand Up @@ -123,27 +131,27 @@ export class ReductionMeter extends React.Component<

// middle part
let middle = this.calcMiddle()
let middleRef = this.totalHeight() * window.mixerProtocol.meter.test
let middleRef = this.totalHeight() * this.meterTest
context.fillStyle = 'rgb(53, 167, 0)'
context.fillRect(0, middleRef, this.canvas.clientWidth, middle) // (this.totalHeight() * (range - window.mixerProtocol.meter.test) - this.calcMiddle()), this.canvas.clientWidth, this.calcMiddle())
context.fillRect(0, middleRef, this.canvas.clientWidth, middle) // (this.totalHeight() * (range - this.meterTest) - this.calcMiddle()), this.canvas.clientWidth, this.calcMiddle())

// upper part (too high/clip)
let upper = this.calcUpper()
let upperRef = this.totalHeight() * window.mixerProtocol.meter.zero
let upperRef = this.totalHeight() * this.meterZero
context.fillStyle = 'rgb(206, 0, 0)'
context.fillRect(0, upperRef, this.canvas.clientWidth, upper)

// windowed peak
const windowPeak = this.getWindowPeak()
if (this.windowPeak < window.mixerProtocol.meter.zero) {
if (this.windowPeak < this.meterZero) {
context.fillStyle = 'rgb(16, 56, 0)'
} else {
context.fillStyle = 'rgb(100, 100, 100)'
}
context.fillRect(0, windowPeak, this.canvas.clientWidth, 2)

// absolute peak
if (this.totalPeak < window.mixerProtocol.meter.zero) {
if (this.totalPeak < this.meterZero) {
context.fillStyle = 'rgb(64, 64, 64)'
} else {
context.fillStyle = 'rgb(255, 0, 0)'
Expand Down
40 changes: 24 additions & 16 deletions client/components/VuMeter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,20 @@ export class VuMeter extends React.PureComponent<IVuMeterInjectedProps> {
totalPeak: number = 0
windowPeak: number = 0
windowLast: number = 0
meterMax: number = 1
meterMin: number = 0
meterTest: number = 0.75
meterZero: number = 0.75
WINDOW: number = 2000

private _painting = false

constructor(props: any) {
super(props)
this.meterMax = window.mixerProtocol.meter?.max || 1
this.meterMin = window.mixerProtocol.meter?.min || 0
this.meterTest = window.mixerProtocol.meter?.test || 0.75
this.meterZero = window.mixerProtocol.meter?.zero || 0.75
}

componentDidMount() {
Expand All @@ -35,7 +43,7 @@ export class VuMeter extends React.PureComponent<IVuMeterInjectedProps> {
totalHeight = () => {
return (
((this.props.showSnaps ? 1 : 2) * 200) /
(window.mixerProtocol.meter.max - window.mixerProtocol.meter.min)
(this.meterMax - this.meterMin)
)
}

Expand All @@ -59,28 +67,28 @@ export class VuMeter extends React.PureComponent<IVuMeterInjectedProps> {

calcLower = () => {
let val = this.props.vuVal
if (val >= window.mixerProtocol.meter.test) {
val = window.mixerProtocol.meter.test
if (val >= this.meterTest) {
val = this.meterTest
}
return this.totalHeight() * val
}

calcMiddle = () => {
let val = this.props.vuVal
if (val < window.mixerProtocol.meter.test) {
val = window.mixerProtocol.meter.test
} else if (val >= window.mixerProtocol.meter.zero) {
val = window.mixerProtocol.meter.zero
if (val < this.meterTest) {
val = this.meterTest
} else if (val >= this.meterZero) {
val = this.meterZero
}
return this.totalHeight() * (val - window.mixerProtocol.meter.test) + 1
return this.totalHeight() * (val - this.meterTest) + 1
}

calcUpper = () => {
let val = this.props.vuVal
if (val < window.mixerProtocol.meter.zero) {
val = window.mixerProtocol.meter.zero
if (val < this.meterZero) {
val = this.meterZero
}
return this.totalHeight() * (val - window.mixerProtocol.meter.zero) + 1
return this.totalHeight() * (val - this.meterZero) + 1
}

setRef = (el: HTMLCanvasElement) => {
Expand Down Expand Up @@ -109,7 +117,7 @@ export class VuMeter extends React.PureComponent<IVuMeterInjectedProps> {
if (!context) return

const range =
window.mixerProtocol.meter.max - window.mixerProtocol.meter.min
this.meterMax - this.meterMin
context.clearRect(
0,
0,
Expand All @@ -130,7 +138,7 @@ export class VuMeter extends React.PureComponent<IVuMeterInjectedProps> {
context.fillStyle = 'rgb(53, 167, 0)'
context.fillRect(
0,
this.totalHeight() * (range - window.mixerProtocol.meter.test) -
this.totalHeight() * (range - this.meterTest) -
this.calcMiddle(),
this.canvas.clientWidth,
this.calcMiddle()
Expand All @@ -140,15 +148,15 @@ export class VuMeter extends React.PureComponent<IVuMeterInjectedProps> {
context.fillStyle = 'rgb(206, 0, 0)'
context.fillRect(
0,
this.totalHeight() * (range - window.mixerProtocol.meter.zero) -
this.totalHeight() * (range - this.meterZero) -
this.calcUpper(),
this.canvas.clientWidth,
this.calcUpper()
)

// windowed peak
const windowPeak = this.getWindowPeak()
if (this.windowPeak < window.mixerProtocol.meter.zero) {
if (this.windowPeak < this.meterZero) {
context.fillStyle = 'rgb(16, 56, 0)'
} else {
context.fillStyle = 'rgb(100, 100, 100)'
Expand All @@ -161,7 +169,7 @@ export class VuMeter extends React.PureComponent<IVuMeterInjectedProps> {
)

// absolute peak
if (this.totalPeak < window.mixerProtocol.meter.zero) {
if (this.totalPeak < this.meterZero) {
context.fillStyle = 'rgb(64, 64, 64)'
} else {
context.fillStyle = 'rgb(255, 0, 0)'
Expand Down

0 comments on commit 9ee5094

Please sign in to comment.