feat: chanStrip delaybuttons to fineadjust delay value

olzzon · Feb 5, 2020 · 7ee1418 · 7ee1418
1 parent 983cefb
commit 7ee1418
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 16 deletions.
diff --git a/client/assets/css/ChanStrip.css b/client/assets/css/ChanStrip.css
@@ -81,6 +81,24 @@
 	font-size: 100%;
 }
 
+.parameter-group > .delayButtons {
+	width: 30px;
+	margin-top: 24px;
+}
+
+.delayButtons > .delayTime {
+	outline : none;
+    -moz-outline : none;
+    color: white;
+    height: 45px;
+    width: 70px;
+    border-color: rgb(71, 71, 71);
+    background-color: rgb(53, 53, 53);
+    margin-left: -50px;
+    margin-top: 5px;
+    border-radius: 7px;
+}
+
 .parameters > .monitor-sends {
 	list-style-type: none;
 	display: flex;

diff --git a/client/components/ChanStrip.tsx b/client/components/ChanStrip.tsx
@@ -98,6 +98,15 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
         )
     }
 
+    changeDelay(currentValue: number, addValue: number) {
+        window.socketIoClient.emit( SOCKET_SET_DELAY_TIME, 
+            {
+                channel: this.props.faderIndex,
+                delayTime: currentValue + addValue
+            }
+        )
+    }
+
     handleLow(event: any) {
         window.socketIoClient.emit( SOCKET_SET_LOW, 
             {
@@ -188,22 +197,58 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
 
     delay() {
         return (
-            <div className="parameter-text">
-                Time ms
-                <ReactSlider 
-                    className="chan-strip-fader"
-                    thumbClassName = "chan-strip-thumb"
-                    orientation = "vertical"
-                    invert
-                    min={0}
-                    max={1}
-                    step={0.01}
-                    value= {this.props.fader[this.props.faderIndex].delayTime || 0}
-                    onChange={(event: any) => {
-                        this.handleDelay(event)
-                    }}
-                />
-            </div>
+            <React.Fragment>
+                <div className="delayButtons">
+                    <button
+                        className="delayTime"
+                        onClick={() => {
+                            this.changeDelay((this.props.fader[this.props.faderIndex].delayTime || 0), 10/500)
+                        }}
+                    >
+                        +10ms
+                    </button>
+                    <button
+                        className="delayTime"
+                        onClick={() => {
+                            this.changeDelay((this.props.fader[this.props.faderIndex].delayTime || 0), 1/500)
+                        }}
+                    >
+                        +1ms
+                    </button>
+                    <button
+                        className="delayTime"
+                        onClick={() => {
+                            this.changeDelay((this.props.fader[this.props.faderIndex].delayTime || 0), -1/500)
+                        }}
+                    >
+                        -1ms
+                    </button>
+                    <button
+                        className="delayTime"
+                        onClick={() => {
+                            this.changeDelay((this.props.fader[this.props.faderIndex].delayTime || 0), -10/500)
+                        }}
+                    >
+                        -10ms
+                    </button>
+                </div>
+                <div className="parameter-text">
+                    {Math.round(500*(this.props.fader[this.props.faderIndex].delayTime || 0))} ms
+                    <ReactSlider 
+                        className="chan-strip-fader"
+                        thumbClassName = "chan-strip-thumb"
+                        orientation = "vertical"
+                        invert
+                        min={0}
+                        max={1}
+                        step={0.01}
+                        value= {this.props.fader[this.props.faderIndex].delayTime || 0}
+                        onChange={(event: any) => {
+                            this.handleDelay(event)
+                        }}
+                    />
+                </div>
+            </React.Fragment>
         )
     }