feat: multiple mixers - channel faders assign menu - label for each m…

…ixer
olzzon · Oct 9, 2020 · f49a953 · f49a953
1 parent 2086754
commit f49a953
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 114 deletions.
diff --git a/client/assets/css/ChannelRouteSettings.css b/client/assets/css/ChannelRouteSettings.css
@@ -1,74 +1,81 @@
-.channel-route-body {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 400px;
-	overflow: auto;
-    max-height: 90vh;
-    background-color: rgb(31, 31, 31);
-    border-color: rgb(124, 124, 124);
-    border-style: solid;
-    border-width: 4px;
-	text-align: left;
-	z-index: 2;
-
-	color: #fff;
-}
-
-.channel-route-body > h2 {
-	border-bottom: 1px solid #999;
-	margin: 0;
-	padding: 10px 0;
-	line-height: 50px;
-	text-align: center;
-
-}
-
-
-.channel-route-text {
-	color: dimgray;
-	margin: 0;
-	margin-left: 40px;
-	padding: 0px 0;
-	line-height: 20px;
-	text-align: left;
-	font-size: 110%;
-}
-
-.channel-route-text.checked {
-	font-weight: bold;
-	color: white;
-}
-
-.channel-route-body > .close {
-	position: absolute;
-	outline : none;
-    border-color: rgb(99, 99, 99);
-    background-color: rgb(27, 27, 27);
-	border-radius: 100%;
-	display: block;
-	color: #fff;
-	width: 50px;
-	height: 50px;
-	font-size: 30px;
-	line-height: 50px;
-	top: -5px;
-	right: 9px;
-}
-
-.channel-route-body > button {
-	line-height: 10px;
-	outline : none;
-    border-color: rgb(99, 99, 99);
-    background-color: rgb(27, 27, 27);
-    margin-right: 10px;
-	margin-top: 15px;
-    margin-bottom: 15px;
-	margin-left: 10px;
-	border-radius: 7px;
-	color: #fff;
-	width: 34%;
-	font-size: 10px;
-    line-height: 50px;
-}
+.channel-route-body {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    overflow: auto;
+    max-height: 90vh;
+    background-color: rgb(31, 31, 31);
+    border-color: rgb(124, 124, 124);
+    border-style: solid;
+    border-width: 4px;
+    text-align: left;
+    z-index: 2;
+
+    color: #fff;
+}
+
+.channel-route-body > h2 {
+    border-bottom: 1px solid #999;
+    margin: 0;
+    padding: 10px 0;
+    line-height: 50px;
+    text-align: center;
+}
+
+.channel-route-mixer-name {
+    font-size: 150%;
+    border-bottom: 1px solid #999;
+    margin: 0;
+    padding: 10px 0;
+    line-height: 50px;
+    text-align: center;
+}
+
+.channel-route-text {
+    color: dimgray;
+    margin: 0;
+    margin-left: 40px;
+    padding: 0px 0;
+    line-height: 20px;
+    text-align: left;
+    font-size: 110%;
+}
+
+.channel-route-text.checked {
+    font-weight: bold;
+    color: white;
+}
+
+.channel-route-body > .close {
+    position: absolute;
+    outline: none;
+    border-color: rgb(99, 99, 99);
+    background-color: rgb(27, 27, 27);
+    border-radius: 100%;
+    display: block;
+    color: #fff;
+    width: 50px;
+    height: 50px;
+    font-size: 30px;
+    line-height: 50px;
+    top: -5px;
+    right: 9px;
+}
+
+.channel-route-body > button {
+    line-height: 10px;
+    outline: none;
+    border-color: rgb(99, 99, 99);
+    background-color: rgb(27, 27, 27);
+    margin-right: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-left: 10px;
+    border-radius: 7px;
+    color: #fff;
+    width: 34%;
+    font-size: 10px;
+    line-height: 50px;
+}
diff --git a/client/components/ChannelRouteSettings.tsx b/client/components/ChannelRouteSettings.tsx
@@ -102,6 +102,39 @@ class ChannelRouteSettings extends React.PureComponent<
         this.props.dispatch(storeShowOptions(this.faderIndex))
     }
 
+    renderMixer(chConnection: IchConnection, mixerIndex: number) {
+        return (
+            <div>
+                <p className='channel-route-mixer-name'> {'MIXER ' + (mixerIndex + 1)}</p>
+{
+            chConnection.channel.map((channel: any, index: number) => {
+            return (
+                <div
+                    key={index}
+                    className={ClassNames('channel-route-text', {
+                        checked: channel.assignedFader === this.faderIndex,
+                    })}
+                >
+                    {' Channel ' + (index + 1) + ' : '}
+                    <input
+                        type="checkbox"
+                        checked={channel.assignedFader === this.faderIndex}
+                        onChange={(event) =>
+                            this.handleAssignChannel(mixerIndex, index, event)
+                        }
+                    />
+                    {channel.assignedFader >= 0
+                        ? '   (Fader ' + (channel.assignedFader + 1) + ')'
+                        : ' (not assigned)'}
+                </div>
+            )
+
+        }
+        )}
+        </div>
+        )
+    }
+
     render() {
         return (
             <div className="channel-route-body">
@@ -123,46 +156,8 @@ class ChannelRouteSettings extends React.PureComponent<
                 </button>
                 <hr />
                 {this.props.chConnections.map(
-                    (chConnection: IchConnection, mixerIndex: number) => {
-                        return chConnection.channel.map(
-                            (channel: any, index: number) => {
-                                return (
-                                    <div
-                                        key={index}
-                                        className={ClassNames(
-                                            'channel-route-text',
-                                            {
-                                                checked:
-                                                    channel.assignedFader ===
-                                                    this.faderIndex,
-                                            }
-                                        )}
-                                    >
-                                        {' Channel ' + (index + 1) + ' : '}
-                                        <input
-                                            type="checkbox"
-                                            checked={
-                                                channel.assignedFader ===
-                                                this.faderIndex
-                                            }
-                                            onChange={(event) =>
-                                                this.handleAssignChannel(
-                                                    mixerIndex,
-                                                    index,
-                                                    event
-                                                )
-                                            }
-                                        />
-                                        {channel.assignedFader >= 0
-                                            ? '   (Fader ' +
-                                              (channel.assignedFader + 1) +
-                                              ')'
-                                            : ' (not assigned)'}
-                                    </div>
-                                )
-                            }
-                        )
-                    }
+                    (chConnection: IchConnection, mixerIndex: number) =>
+                        this.renderMixer(chConnection, mixerIndex)
                 )}
             </div>
         )