feat: move CasparCG input settings into channelstrip on left side

olzzon · Jan 27, 2020 · 7d20317 · 7d20317
1 parent 7918b05
commit 7d20317
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 82 deletions.
diff --git a/client/components/ChanStrip.tsx b/client/components/ChanStrip.tsx
@@ -11,6 +11,7 @@ import {
  } from '../../server/reducers/settingsActions'
 import { IFader } from '../../server/reducers/fadersReducer'
 import { SOCKET_SET_THRESHOLD, SOCKET_SET_RATIO, SOCKET_SET_LOW, SOCKET_SET_LO_MID, SOCKET_SET_MID, SOCKET_SET_HIGH, SOCKET_SET_AUX_LEVEL } from '../../server/constants/SOCKET_IO_DISPATCHERS';
+import CcgChannelSettings from './CcgChannelSettings';
 
 interface IChanStripInjectProps {
     label: string,
@@ -278,45 +279,52 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
         )
     }
     parameters() {
-        return (
-            <div className="parameters">
-                <div className="group-text">
-                    {"COMPRESSOR"}
-                </div>
-                <div className="parameter-group">
-                    {this.threshold()}
-                    <p className="zero-comp">______</p>
-                    {this.ratio()}
-                    <p className="zero-comp">______</p>
-                </div>
-                <hr/>
-                <div className="group-text">
-                    {"EQUALIZER"}
-                </div>
-                <div className="parameter-group">
-                    {this.low()}
-                    <p className="zero-eq">_______</p>
-                    {this.loMid()}
-                    <p className="zero-eq">_______</p>
-                    {this.mid()}
-                    <p className="zero-eq">_______</p>
-                    {this.high()}
-                    <p className="zero-eq">_______</p>
-                </div>
-                <hr/>
-                <div className="group-text">
-                {this.props.label || ("FADER " + (this.props.faderIndex + 1))}
-                    {" - MONITOR MIX MINUS"}
+        if (this.props.selectedProtocol.includes("caspar")) {
+            return (
+                <CcgChannelSettings channelIndex={this.props.faderIndex} />
+            )
+        }
+        else {
+            return (
+                <div className="parameters">
+                    <div className="group-text">
+                        {"COMPRESSOR"}
+                    </div>
+                    <div className="parameter-group">
+                        {this.threshold()}
+                        <p className="zero-comp">______</p>
+                        {this.ratio()}
+                        <p className="zero-comp">______</p>
+                    </div>
+                    <hr/>
+                    <div className="group-text">
+                        {"EQUALIZER"}
+                    </div>
+                    <div className="parameter-group">
+                        {this.low()}
+                        <p className="zero-eq">_______</p>
+                        {this.loMid()}
+                        <p className="zero-eq">_______</p>
+                        {this.mid()}
+                        <p className="zero-eq">_______</p>
+                        {this.high()}
+                        <p className="zero-eq">_______</p>
+                    </div>
+                    <hr/>
+                    <div className="group-text">
+                    {this.props.label || ("FADER " + (this.props.faderIndex + 1))}
+                        {" - MONITOR MIX MINUS"}
+                    </div>
+                    <ul className="monitor-sends">
+                        {this.props.channel.map((ch: any, index: number) => {
+                            if (ch.auxLevel[this.props.auxSendIndex] >= 0) {
+                                return this.monitor(index)
+                            } 
+                        })}
+                    </ul>
                 </div>
-                <ul className="monitor-sends">
-                    {this.props.channel.map((ch: any, index: number) => {
-                        if (ch.auxLevel[this.props.auxSendIndex] >= 0) {
-                            return this.monitor(index)
-                        } 
-                    })}
-                </ul>
-            </div>
-        )
+            )
+        }
     }
 
     render() {

diff --git a/client/components/ChannelRouteSettings.tsx b/client/components/ChannelRouteSettings.tsx
@@ -95,50 +95,43 @@ class ChannelRouteSettings extends React.PureComponent<IChannelProps & IChannelS
     }
 
     render() {
-        if (this.props.selectedProtocol.includes("caspar")) {
-            return (
-                <CcgChannelSettings channelIndex={this.props.faderIndex} />
-            )
-        }
-        else {
-            return (
-                <div className="channel-route-body">
-                    <h2>{this.props.label || ("FADER " + (this.faderIndex + 1))}</h2>
-                    <button 
-                        className="close"
-                        onClick={() => this.handleClose()}
-                    >X</button>
-                    <button 
-                        className="button"
-                        onClick={() => this.handleClearRouting()}
-                    >CLEAR ALL</button>
-                    <button 
-                        className="button"
-                        onClick={() => this.handle11Routing()}
-                    >ROUTE 1:1</button>
-                    <hr />
-                    {this.props.channel.map((channel: any, index: number) => {
-                        return <div 
-                            key={index}
-                            className={ClassNames("channel-route-text", {
-                                'checked': this.props.channel[index].assignedFader === this.faderIndex
-                            })}
-                            >
-                            {(" Channel " + (index + 1) + " : ")}
-                            <input
-                                type="checkbox"
-                                checked={this.props.channel[index].assignedFader === this.faderIndex}
-                                onChange={(event) => this.handleAssignChannel(index, event)}
-                            />
-                            {this.props.channel[index].assignedFader >= 0
-                                ? ("   (Fader " + (this.props.channel[index].assignedFader + 1) + ")")
-                                : ' (not assigned)'}
-                        </div>
-                    })
-                    }
-                </div>
-            )
-        }
+        return (
+            <div className="channel-route-body">
+                <h2>{this.props.label || ("FADER " + (this.faderIndex + 1))}</h2>
+                <button 
+                    className="close"
+                    onClick={() => this.handleClose()}
+                >X</button>
+                <button 
+                    className="button"
+                    onClick={() => this.handleClearRouting()}
+                >CLEAR ALL</button>
+                <button 
+                    className="button"
+                    onClick={() => this.handle11Routing()}
+                >ROUTE 1:1</button>
+                <hr />
+                {this.props.channel.map((channel: any, index: number) => {
+                    return <div 
+                        key={index}
+                        className={ClassNames("channel-route-text", {
+                            'checked': this.props.channel[index].assignedFader === this.faderIndex
+                        })}
+                        >
+                        {(" Channel " + (index + 1) + " : ")}
+                        <input
+                            type="checkbox"
+                            checked={this.props.channel[index].assignedFader === this.faderIndex}
+                            onChange={(event) => this.handleAssignChannel(index, event)}
+                        />
+                        {this.props.channel[index].assignedFader >= 0
+                            ? ("   (Fader " + (this.props.channel[index].assignedFader + 1) + ")")
+                            : ' (not assigned)'}
+                    </div>
+                })
+                }
+            </div>
+        )
     }
 }