Merge pull request #87 from olzzon/develop

Faders improved for better touchscreen support
tv2 · Oct 17, 2019 · b72cbd7 · b72cbd7
2 parents 8317496 + 4dd9095
commit b72cbd7
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,10 @@ yarn start
 ```
 
 ## Settings:
+### Show PFL Controls:
+As NEXT has been implemented, and PFL usually only work on on channel at a time, the PFL is only working correctly on 1:1 routed setups (And with the CasparCG protocol)
+
+
 (Mixer presets are stored in MixerProtocolPresets.js)
 ### Following preset name are possible:
 * CasparCG

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     },
     "dependencies": {
         "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/rc-slider": "^8.6.5",
         "@types/react-redux": "^7.1.4",
         "@types/react-select": "^3.0.4",
         "casparcg-connection": "^4.7.0",
@@ -49,6 +50,7 @@
         "react-dom": "^16.10.1",
         "react-redux": "^7.1.1",
         "react-select": "^3.0.6",
+        "react-slider": "^1.0.0",
         "redux": "^4.0.4",
         "typescript": "^3.6.3",
         "webmidi": "^2.5.1"

diff --git a/src/@types/react-slider/index.d.ts b/src/@types/react-slider/index.d.ts
@@ -0,0 +1 @@
+declare module 'react-slider'
diff --git a/src/assets/css/Channel.css b/src/assets/css/Channel.css
@@ -21,8 +21,9 @@
 .channel-pgm-button {
     outline : none;
     -moz-outline : none;
-    margin-left: 10px;
-    margin-top: 260px;
+    margin-left: 3px;
+    margin-right: 3px;
+    margin-top: 40px;
     color: white;
     height: 90px;
     width: 80px;
@@ -41,7 +42,8 @@
 .channel-vo-button {
     outline : none;
     -moz-outline : none;
-    margin-left: 10px;
+    margin-left: 3px;
+    margin-right: 3px;
     margin-top: 5px;
     color: white;
     height: 90px;
@@ -60,7 +62,8 @@
 .channel-pst-button {
     outline : none;
     -moz-outline : none;
-    margin-left: 10px;
+    margin-left: 3px;
+    margin-right: 3px;
     margin-top: 30px;
     color: white;
     height: 90px;
@@ -83,7 +86,8 @@
 .channel-pfl-button {
     outline : none;
     -moz-outline : none;
-    margin-left: 10px;
+    margin-left: 3px;
+    margin-right: 3px;
     margin-top: 5px;
     color: white;
     height: 90px;
@@ -155,68 +159,12 @@
 }
 
 
-.channel-volume-slider {
-    width: 460px;
-    margin-top: 260px;
-    transform: translate(-160px, 0px) rotate(270deg);
-    /*do same for other browsers if required*/
-    background-color: rgb(39, 39, 39);
-
-    -webkit-overflow-scrolling: touch;
-}
-
-.channel-body.with-snaps .channel-volume-slider {
+.channel-body.with-snaps {
     width: 220px;
     margin-top: 140px;
     transform: translate(-40px, 0) rotate(270deg);
 }
 
-input[type=range] {
-    -webkit-appearance: none;
-}
-
-input[type=range]:focus {
-    outline: none;
-}
-
-input[type=range]::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 10px;
-    cursor: pointer;
-    box-shadow: 2px 2px 2px #222222, 0px 0px 2px #2f2f2f;
-    background: #424242;
-    border-radius: 5px;
-    border: 1px solid black;
-}
-
-input[type=range]::-webkit-slider-thumb {
-    box-shadow: 1px 1px 1px #111111, 0px 0px 1px #1e1e1e;
-    border: 1px solid #aaa;
-    height: 50px;
-    width: 70px;
-    border-radius: 8px;
-    background: linear-gradient(to left, #3a3a3a 0%, #c2c2c2 20%, #919191 50%, #00a 1px, #919191 52%, #c2c2c2 80%, #3a3a3a 100%);
-    cursor: pointer;
-    -webkit-appearance: none;
-    margin-top: -21px;
-    position: relative;
-}
-
-input[color-pgm=pgm-on]::-webkit-slider-thumb {
-    border: 1px solid rgb(253, 60, 60);
-    background: linear-gradient(to left, #3a1d1d 0%, #c04d4d 20%, #811919 50%, #00a 1px, #8a2626 52%, #bd5151 80%, #411f1f 100%);
-}
-
-input[color-vo=vo-on]::-webkit-slider-thumb {
-    border: 1px solid rgb(252, 255, 86);
-    background: linear-gradient(to left, #353006 0%, #c59327 20%, #856b14 50%, #00a 1px, #866724 52%, #cca22d 80%, #463b0a 100%);
-}
-
-
-input[type=range]:focus::-webkit-slider-runnable-track {
-    background: #000000;
-}
-
 .channel-settings {
     position: absolute;
     top: 5px;
@@ -243,3 +191,30 @@ input[type=range]:focus::-webkit-slider-runnable-track {
 .channel-body.with-snaps .vumeter-body {
     height: 230px;
 }
+
+.channel-volume-fader {
+    width: 10px;
+    height: 420px;
+    margin-left: 55px;
+    margin-top: 60px;
+    border-width: 0px;
+    border-style: solid;
+    border-radius: 8px;
+    background-color: rgb(17, 17, 17);
+}
+
+.channel-volume-thumb {
+    margin-left: -19px;
+    width: 45px;
+    height: 70px;
+    background-color: red;
+    border-color: #c5c2c2;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 8px;
+    background: linear-gradient(to top, #3a3a3a 0%, #c2c2c2 20%, #919191 50%, #00a 1px, #919191 52%, #c2c2c2 80%, #3a3a3a 100%);
+}
+
+:focus {
+    outline: 0;
+    }
diff --git a/src/assets/css/VuMeter.css b/src/assets/css/VuMeter.css
@@ -2,8 +2,8 @@
     position: absolute;
     top: 30px;
     width: 30px;
-    margin-top: 10px;
-    margin-left: 14px;
+    margin-top: 20px;
+    margin-left: 2px;
     background-color: black;
     border-radius: 7px;
     height: 430px;

diff --git a/src/components/Channel.tsx b/src/components/Channel.tsx
@@ -4,6 +4,8 @@ import * as ClassNames from 'classnames';
 import { connect } from "react-redux";
 import VuMeter from './VuMeter';
 import { Store } from 'redux';
+import ReactSlider from 'react-slider'
+
 
 //assets:
 import '../assets/css/Channel.css';
@@ -110,11 +112,11 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
         this.props.dispatch({
             type:'SET_FADER_LEVEL',
             channel: this.channelIndex,
-            level: parseFloat(event.target.value)
+            level: parseFloat(event)
         });
         window.mixerGenericConnection.updateOutLevel(this.channelIndex);
         if (window.huiRemoteConnection) {
-            window.huiRemoteConnection.updateRemoteFaderState(this.channelIndex, event.target.value)
+            window.huiRemoteConnection.updateRemoteFaderState(this.channelIndex, event)
         }
     }
 
@@ -136,24 +138,16 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
 
     fader() {
         return (
-            <input className="channel-volume-slider"
-                id="typeinp"
-                type="range"
-                color-pgm = {this.props.pgmOn ? 'pgm-on' : ''}
-                color-vo = {this.props.voOn ? 'vo-on' : ''}
-
-                min={this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_FADER_LEVEL[0].mixerMessage != 'none' ?
-                    this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_FADER_LEVEL[0].min
-                    : this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_OUT_GAIN[0].min
-                }
-                max={this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_FADER_LEVEL[0].mixerMessage != 'none' ?
-                    this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_FADER_LEVEL[0].max
-                    : this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_OUT_GAIN[0].max
-                }
-                step={this.mixerProtocol.fader.step}
+            <ReactSlider 
+                className="channel-volume-fader"
+                thumbClassName="channel-volume-thumb"
+                orientation="vertical"
+                invert
+                min={0}
+                max={1}
+                step={0.01}
                 value= {this.props.faderLevel}
-                onChange={event => {
-                    event.preventDefault();
+                onChange={(event: any) => {
                     this.handleLevel(event);
                 }}
             />