Skip to content

Commit

Permalink
feat: multitouch - move to NoUISlider to support multitouch. ToDo CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
olzzons-mac authored and olzzons-mac committed Feb 12, 2020
1 parent 7921d9b commit b59d230
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 75 deletions.
2 changes: 1 addition & 1 deletion client/assets/css/Channel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@
border-width: 0px;
border-style: solid;
border-radius: 8px;
background-color: rgb(17, 17, 17);
background-color: rgb(117, 117, 117);
}

.channel-volume-thumb {
Expand Down
122 changes: 57 additions & 65 deletions client/components/ChanStrip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react';
import ReactSlider from 'react-slider'
import Nouislider from 'nouislider-react'
import "nouislider/distribute/nouislider.css"


import '../assets/css/ChanStrip.css';
import { Store } from 'redux';
Expand Down Expand Up @@ -156,16 +158,14 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Threshold
<ReactSlider
<Nouislider
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].threshold}
onChange={(event: any) => {
range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].threshold]}
connect
onSlide={(event: any) => {
this.handleThreshold(event)
}}
/>
Expand All @@ -178,16 +178,14 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Ratio
<ReactSlider
<Nouislider
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].ratio}
onChange={(event: any) => {
range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].ratio]}
connect
onSlide={(event: any) => {
this.handleRatio(event)
}}
/>
Expand Down Expand Up @@ -234,16 +232,14 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
</div>
<div className="parameter-text">
{Math.round(500*(this.props.fader[this.props.faderIndex].delayTime || 0))} ms
<ReactSlider
<Nouislider
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) => {
range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].delayTime || 0]}
connect
onSlide={(event: any) => {
this.handleDelay(event)
}}
/>
Expand All @@ -256,16 +252,14 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Low
<ReactSlider
<Nouislider
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].low}
onChange={(event: any) => {
range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].low]}
connect
onSlide={(event: any) => {
this.handleLow(event)
}}
/>
Expand All @@ -277,16 +271,15 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Lo-Mid
<ReactSlider
<Nouislider
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].loMid}
onChange={(event: any) => {

range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].loMid]}
connect
onSlide={(event: any) => {
this.handleLoMid(event)
}}
/>
Expand All @@ -298,16 +291,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Hi-Mid
<ReactSlider
<Nouislider
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].mid}
onChange={(event: any) => {

range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].mid]}
connect

onSlide={(event: any) => {
this.handleMid(event)
}}
/>
Expand All @@ -319,16 +312,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
High
<ReactSlider
<Nouislider
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].high}
onChange={(event: any) => {

range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].high]}
connect

onSlide={(event: any) => {
this.handleHigh(event)
}}
/>
Expand All @@ -346,16 +339,15 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<li key={channelIndex}>
{monitorName}
<ReactSlider
<Nouislider
className="chan-strip-fader"
thumbClassName = "chan-strip-thumb"

orientation = "vertical"
invert
min={0}
max={1}
step={0.01}
value= {this.props.channel[channelIndex].auxLevel[this.props.auxSendIndex]}
onChange={(event: any) => {

range={{ min: 0, max: 1 }}
start={[this.props.channel[channelIndex].auxLevel[this.props.auxSendIndex]]}
connect
onSlide={(event: any) => {
this.handleMonitorLevel(event, channelIndex)
}}
/>
Expand Down
23 changes: 20 additions & 3 deletions client/components/Channel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +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'

import Nouislider from 'nouislider-react'
import "nouislider/distribute/nouislider.css"

//assets:
import '../assets/css/Channel.css';
Expand Down Expand Up @@ -94,6 +94,23 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
}

fader() {
let thumb = 'channel-volume-thumb' + (this.props.fader.pgmOn ? '-color-pgm' : '') + (this.props.fader.voOn ? '-color-vo' : '')
if (this.props.fader.muteOn) {
thumb = 'channel-volume-thumb-color-mute'
}
return (
<Nouislider
className="channel-volume-fader"
orientation="vertical"
range={{ min: 0, max: 1 }}
start={[this.props.fader.faderLevel]}
connect
onSlide={(event: any) => {
this.handleLevel(event);
}}
/>
)
/*
let thumb = 'channel-volume-thumb' + (this.props.fader.pgmOn ? '-color-pgm' : '') + (this.props.fader.voOn ? '-color-vo' : '')
if (this.props.fader.muteOn) {
thumb = 'channel-volume-thumb-color-mute'
Expand All @@ -112,7 +129,7 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
this.handleLevel(event);
}}
/>
)
*/
}


Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,12 @@
"express": "^4.17.1",
"express-csp-header": "^2.3.2",
"http": "^0.0.0",
"nouislider-react": "^3.3.7",
"osc": "https://github.com/olzzon/tv2-osc.js-no-serialport.git",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-redux": "^7.1.1",
"react-select": "^3.0.6",
"react-slider": "^1.0.1",
"reactjs-popup": "^1.5.0",
"redux": "^4.0.4",
"socket.io": "^2.3.0",
Expand Down
17 changes: 12 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5939,6 +5939,18 @@ [email protected]:
query-string "^5.0.1"
sort-keys "^2.0.0"

nouislider-react@^3.3.7:
version "3.3.7"
resolved "https://registry.yarnpkg.com/nouislider-react/-/nouislider-react-3.3.7.tgz#4efbeb8a2407b990154e5a6819840f6752af0d58"
integrity sha512-vC2r66CAQrQCWmGXX8KTCy7uf/DnFN+z08brm9Yke9WiWTs9TXMlmjCj+vMbUXgLEyI3nDtAyScraoOBuqlmag==
dependencies:
nouislider "^14.1.1"

nouislider@^14.1.1:
version "14.1.1"
resolved "https://registry.yarnpkg.com/nouislider/-/nouislider-14.1.1.tgz#def812b2aaaa2ccf9e7a41dd0144a25dab5673e5"
integrity sha512-3/+Z/pTBoWoJf2YXSEWRmS27LW2XxOBmGEzkPyRzB/J6QvL+0mS3QwcQp0SmWhgO5CMzbSxPmb1lDDD4HP12bg==

npm-normalize-package-bin@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
Expand Down Expand Up @@ -6790,11 +6802,6 @@ react-select@^3.0.6:
react-input-autosize "^2.2.2"
react-transition-group "^2.2.1"

react-slider@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/react-slider/-/react-slider-1.0.1.tgz#4cb212d31c35d804805e31f02ce37771e95d5d45"
integrity sha512-SI2anLzeKlFxnntoM93VXrf3ll9uL/TYjIJB6PsQVp4mDVt2VfWyGtMoUvK/ir/PnjuirNtF1pU3cG9XCezfBA==

react-test-renderer@^16.11.0:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.12.0.tgz#11417ffda579306d4e841a794d32140f3da1b43f"
Expand Down

0 comments on commit b59d230

Please sign in to comment.