feat: feedback for input sel, gain and pages

olzzon · Jun 22, 2020 · da57f6a · da57f6a
1 parent 3f3b867
commit da57f6a
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 38 deletions.
diff --git a/client/assets/css/ChanStrip.css b/client/assets/css/ChanStrip.css
@@ -133,6 +133,9 @@
     margin-top: 5px;
     border-radius: 7px;
 }
+.input-buttons > .input-select.active {
+    background-color: #2f475b;
+}
 
 .parameters > .monitor-sends {
     list-style-type: none;

diff --git a/client/assets/css/Channel.css b/client/assets/css/Channel.css
@@ -183,6 +183,9 @@
     border-radius: 7px;
     border-color: rgba(99, 99, 99, 0.301);
 }
+.channel-strip-button.active {
+    background-color: #2f475b;
+}
 
 .channel-volume-fader {
     width: 10px;

diff --git a/client/assets/css/Channels.css b/client/assets/css/Channels.css
@@ -23,7 +23,13 @@
     width: 100px;
     min-height: 950px;
     color: white;
-    background: linear-gradient(#2f2f2f 0px,#2f2f2f 790px, rgb(0, 0, 0) 1px, #2f2f2f 800px, #2f2f2f 100%);
+    background: linear-gradient(
+        #2f2f2f 0px,
+        #2f2f2f 790px,
+        rgb(0, 0, 0) 1px,
+        #2f2f2f 800px,
+        #2f2f2f 100%
+    );
     margin: 4px;
     border-radius: 9px;
     border-color: rgb(80, 80, 80);
@@ -32,8 +38,8 @@
 }
 
 .channels-show-mixer-online {
-    outline : none;
-    -moz-outline : none;
+    outline: none;
+    -moz-outline: none;
     color: rgb(255, 255, 255);
     height: 60px;
     width: 90px;
@@ -51,8 +57,8 @@
 }
 
 .channels-show-snaps-button {
-    outline : none;
-    -moz-outline : none;
+    outline: none;
+    -moz-outline: none;
     color: white;
     height: 60px;
     width: 90px;
@@ -64,10 +70,9 @@
     border-radius: 7px;
 }
 
-
 .channels-show-settings-button {
-    outline : none;
-    -moz-outline : none;
+    outline: none;
+    -moz-outline: none;
     color: white;
     height: 60px;
     width: 90px;
@@ -78,11 +83,13 @@
     margin-top: 10px;
     border-radius: 7px;
 }
-
+.channels-show-settings-button.active {
+    background-color: #2f475b;
+}
 
 .channels-show-storage-button {
-    outline : none;
-    -moz-outline : none;
+    outline: none;
+    -moz-outline: none;
     color: white;
     height: 60px;
     width: 90px;
@@ -94,10 +101,9 @@
     border-radius: 7px;
 }
 
-
 .channels-mix-button {
-    outline : none;
-    -moz-outline : none;
+    outline: none;
+    -moz-outline: none;
     color: white;
     height: 90px;
     width: 90px;
@@ -109,10 +115,9 @@
     border-radius: 7px;
 }
 
-
 .channels-clear-button {
-    outline : none;
-    -moz-outline : none;
+    outline: none;
+    -moz-outline: none;
     color: white;
     height: 90px;
     width: 90px;
@@ -134,8 +139,8 @@
 }
 
 .channels-snap-mix-button {
-    outline : none;
-    -moz-outline : none;
+    outline: none;
+    -moz-outline: none;
     background-color: rgb(199, 202, 0);
     color: rgb(44, 44, 44);
     margin-left: 20px;

diff --git a/client/components/ChanStrip.tsx b/client/components/ChanStrip.tsx
@@ -148,9 +148,11 @@ class ChanStrip extends React.PureComponent<
     }
 
     inputSelectorButton(index: number) {
+        const isActive =
+            this.props.fader[this.props.faderIndex].inputSelector === index + 1
         return (
             <button
-                className="input-select"
+                className={'input-select' + (isActive ? ' active' : '')}
                 onClick={() => {
                     this.handleInputSelect(index + 1)
                 }}
@@ -462,20 +464,30 @@ class ChanStrip extends React.PureComponent<
     }
     parameters() {
         if (this.props.offtubeMode) {
+            const hasComp =
+                window.mixerProtocol.channelTypes[0].toMixer.THRESHOLD ||
+                window.mixerProtocol.channelTypes[0].toMixer.DELAY_TIME
+            const hasDelay =
+                window.mixerProtocol.channelTypes[0].toMixer.DELAY_TIME
+            const hasEq =
+                window.mixerProtocol.channelTypes[0].toMixer.LOW ||
+                window.mixerProtocol.channelTypes[0].toMixer.LO_MID ||
+                window.mixerProtocol.channelTypes[0].toMixer.MID ||
+                window.mixerProtocol.channelTypes[0].toMixer.HIGH
             return (
                 <div className="parameters">
                     <div className="group-text">
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; INPUT
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; COMPRESSOR
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {hasComp && 'COMPRESSOR'}
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DELAY
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {hasDelay && 'DELAY'}
                     </div>
 
                     <div className="inp-comp-del-group">
@@ -499,7 +511,7 @@ class ChanStrip extends React.PureComponent<
                         ) : null}
                     </div>
                     <hr />
-                    <div className="group-text">{'EQUALIZER'}</div>
+                    <div className="group-text">{hasEq && 'EQUALIZER'}</div>
                     <div className="eq-group">
                         {window.mixerProtocol.channelTypes[0].toMixer.LOW ? (
                             <React.Fragment>

diff --git a/client/components/Channel.tsx b/client/components/Channel.tsx
@@ -199,10 +199,12 @@ class Channel extends React.Component<
     }
 
     chanStripButton = () => {
+        const isActive = this.props.settings.showChanStrip === this.faderIndex
         return (
             <button
                 className={ClassNames('channel-strip-button', {
                     on: this.props.settings.showChanStrip,
+                    active: isActive,
                 })}
                 onClick={(event) => {
                     this.handleShowChanStrip()

diff --git a/client/components/Channels.tsx b/client/components/Channels.tsx
@@ -22,6 +22,7 @@ import {
     SOCKET_CLEAR_PST,
     SOCKET_RESTART_SERVER,
 } from '../../server/constants/SOCKET_IO_DISPATCHERS'
+import { classNames } from 'react-select/src/utils'
 
 interface IChannelsInjectProps {
     channels: IChannels
@@ -99,13 +100,19 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
             return undefined
         }
 
+        const curPage = this.props.settings.currentPage
+
         const customPageButtons = []
         const pages = window.customPagesList
         if (pages) {
             for (const p of pages) {
+                const isActive =
+                    curPage.type === PageType.CustomPage && curPage.id === p.id
                 customPageButtons.push(
                     <button
-                        className="channels-show-settings-button"
+                        className={ClassNames('channels-show-settings-button', {
+                            active: isActive,
+                        })}
                         onClick={() => {
                             this.handlePages(PageType.CustomPage, p.id)
                         }}
@@ -120,9 +127,14 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
         const numberOfFaders = this.props.settings.numberOfFaders
         const pageLength = this.props.settings.pageLength
         for (let i = 0; i < Math.ceil(numberOfFaders / pageLength); i++) {
+            const isActive =
+                curPage.type === PageType.NumberedPage &&
+                curPage.start === i * this.props.settings.pageLength
             numberedButtons.push(
                 <button
-                    className="channels-show-settings-button"
+                    className={ClassNames('channels-show-settings-button', {
+                        active: isActive,
+                    })}
                     onClick={() => {
                         this.handlePages(PageType.NumberedPage, i)
                     }}
@@ -133,12 +145,15 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
             )
         }
 
+        const isAllActive = curPage.type === PageType.All
         return (
             <React.Fragment>
                 {customPageButtons}
                 {numberedButtons}
                 <button
-                    className="channels-show-settings-button"
+                    className={ClassNames('channels-show-settings-button', {
+                        active: isAllActive,
+                    })}
                     onClick={() => {
                         this.handlePages(PageType.All, 0)
                     }}