From 104cbbce3c1f76644d06ec9cdea856a85daca0fb Mon Sep 17 00:00:00 2001
From: olzzon <olzzon@Kaspers-MacBook-Pro.local>
Date: Mon, 9 Nov 2020 18:47:33 +0100
Subject: [PATCH] feat: Full channelstrip - only show eq,comp,delay if part of
 protocol

---
 client/assets/css/ChanStripFull.css |  5 ++
 client/components/ChanStripFull.tsx | 78 ++++++++++++++++++++---------
 2 files changed, 58 insertions(+), 25 deletions(-)

diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css
index 11d07e2d..326ead13 100644
--- a/client/assets/css/ChanStripFull.css
+++ b/client/assets/css/ChanStripFull.css
@@ -153,9 +153,14 @@
 }
 .content > .delayButtons {
     width: 30px;
+    min-height: 220px;
     margin-top: 24px;
     margin-left: 50px;
 }
+.noDelayButtons {
+    margin-top: 24px;
+    min-height: 220px;
+}
 
 .delayButtons > .delayTime {
     outline: none;
diff --git a/client/components/ChanStripFull.tsx b/client/components/ChanStripFull.tsx
index bf3806c5..154e751f 100644
--- a/client/components/ChanStripFull.tsx
+++ b/client/components/ChanStripFull.tsx
@@ -565,7 +565,7 @@ class ChanStripFull extends React.PureComponent<
     }
 
     fxParamFader(fxParam: fxParamsList) {
-        if (!window.mixerProtocol.channelTypes[0].fromMixer[fxParam]) {
+        if (!this.doesParamExists(fxParam)) {
             return
         }
         let maxLabel: number =
@@ -656,6 +656,10 @@ class ChanStripFull extends React.PureComponent<
         )
     }
 
+    doesParamExists(fxParam: fxParamsList): boolean {
+        return !!window.mixerProtocol.channelTypes[0].fromMixer[fxParam]
+    }
+
     parameters() {
         if (this.props.offtubeMode) {
             const hasInput =
@@ -678,30 +682,50 @@ class ChanStripFull extends React.PureComponent<
                             </React.Fragment>
                         )}
                         <React.Fragment>
-                            <div className="item">
-                                <div className="title">COMPRESSOR</div>
-                                <div className="content">
-                                    {this.fxParamFader(fxParamsList.CompThrs)}
-                                    <p className="zero-comp">______</p>
-                                    {this.fxParamFader(fxParamsList.CompRatio)}
-                                    <p className="zero-comp">______</p>
-                                    {this.gainReduction()}
-                                    {this.fxParamFader(fxParamsList.CompMakeUp)}
-                                    <p className="zero-comp">______</p>
-                                    {this.fxParamFader(fxParamsList.CompAttack)}
-                                    <p className="zero-comp">______</p>
-                                    {this.fxParamFader(fxParamsList.CompHold)}
-                                    <p className="zero-comp">______</p>
-                                    {this.fxParamFader(
-                                        fxParamsList.CompRelease
-                                    )}
-                                    <p className="zero-comp">______</p>
+                            {this.doesParamExists(fxParamsList.CompThrs) ? (
+                                <div className="item">
+                                    <div className="title">COMPRESSOR</div>
+                                    <div className="content">
+                                        {this.fxParamFader(
+                                            fxParamsList.CompThrs
+                                        )}
+                                        <p className="zero-comp">______</p>
+                                        {this.fxParamFader(
+                                            fxParamsList.CompRatio
+                                        )}
+                                        <p className="zero-comp">______</p>
+                                        {this.gainReduction()}
+                                        {this.fxParamFader(
+                                            fxParamsList.CompMakeUp
+                                        )}
+                                        <p className="zero-comp">______</p>
+                                        {this.fxParamFader(
+                                            fxParamsList.CompAttack
+                                        )}
+                                        <p className="zero-comp">______</p>
+                                        {this.fxParamFader(
+                                            fxParamsList.CompHold
+                                        )}
+                                        <p className="zero-comp">______</p>
+                                        {this.fxParamFader(
+                                            fxParamsList.CompRelease
+                                        )}
+                                        <p className="zero-comp">______</p>
+                                    </div>
                                 </div>
-                            </div>
-                            <div className="item">
-                                <div className="title">DELAY</div>
-                                <div className="content">{this.delay()}</div>
-                            </div>
+                            ) : (
+                                <React.Fragment></React.Fragment>
+                            )}
+                            {this.doesParamExists(fxParamsList.DelayTime) ? (
+                                <div className="item">
+                                    <div className="title">DELAY</div>
+                                    <div className="content">
+                                        {this.delay()}
+                                    </div>
+                                </div>
+                            ) : (
+                                <div className="noDelayButtons"></div>
+                            )}
                             <div className="item">
                                 <div className="title">
                                     {this.props.label ||
@@ -728,7 +752,11 @@ class ChanStripFull extends React.PureComponent<
                     </div>
                     <React.Fragment>
                         <hr />
-                        <div className="horizontal">{this.eq()}</div>
+                        {this.doesParamExists(fxParamsList.EqGain01) ? (
+                            <div className="horizontal">{this.eq()}</div>
+                        ) : (
+                            <React.Fragment></React.Fragment>
+                        )}
                     </React.Fragment>
                 </div>
             )