Skip to content

Commit

Permalink
feat: multitouch - added styling, moved ChanStrip params back to sing…
Browse files Browse the repository at this point in the history 
…le touch (using react-slider)
  • Loading branch information
olzzons-mac authored and olzzons-mac committed Feb 12, 2020
1 parent b59d230 commit 313089e
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 73 deletions.
7 changes: 3 additions & 4 deletions client/assets/css/Channel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,10 +245,9 @@
height: 420px;
margin-left: 55px;
margin-top: 20px;
border-width: 0px;
border-style: solid;
border-radius: 8px;
background-color: rgb(117, 117, 117);
background-color: rgb(15, 15, 15);
border-color: rgba(0,0,0);

}

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

import ReactSlider from 'react-slider'

import '../assets/css/ChanStrip.css';
import { Store } from 'redux';
Expand Down Expand Up @@ -158,14 +156,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Threshold
<Nouislider
<ReactSlider
className="chan-strip-fader"

thumbClassName = "chan-strip-thumb"
orientation = "vertical"
range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].threshold]}
connect
onSlide={(event: any) => {
invert
min={0}
max={1}
step={0.01}
value= {this.props.fader[this.props.faderIndex].threshold}
onChange={(event: any) => {
this.handleThreshold(event)
}}
/>
Expand All @@ -178,14 +178,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Ratio
<Nouislider
<ReactSlider
className="chan-strip-fader"

thumbClassName = "chan-strip-thumb"
orientation = "vertical"
range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].ratio]}
connect
onSlide={(event: any) => {
invert
min={0}
max={1}
step={0.01}
value= {this.props.fader[this.props.faderIndex].ratio}
onChange={(event: any) => {
this.handleRatio(event)
}}
/>
Expand Down Expand Up @@ -232,14 +234,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
</div>
<div className="parameter-text">
{Math.round(500*(this.props.fader[this.props.faderIndex].delayTime || 0))} ms
<Nouislider
<ReactSlider
className="chan-strip-fader"

thumbClassName = "chan-strip-thumb"
orientation = "vertical"
range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].delayTime || 0]}
connect
onSlide={(event: any) => {
invert
min={0}
max={1}
step={0.01}
value= {this.props.fader[this.props.faderIndex].delayTime || 0}
onChange={(event: any) => {
this.handleDelay(event)
}}
/>
Expand All @@ -252,14 +256,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Low
<Nouislider
<ReactSlider
className="chan-strip-fader"

thumbClassName = "chan-strip-thumb"
orientation = "vertical"
range={{ min: 0, max: 1 }}
start={[this.props.fader[this.props.faderIndex].low]}
connect
onSlide={(event: any) => {
invert
min={0}
max={1}
step={0.01}
value= {this.props.fader[this.props.faderIndex].low}
onChange={(event: any) => {
this.handleLow(event)
}}
/>
Expand All @@ -271,15 +277,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
Lo-Mid
<Nouislider
<ReactSlider
className="chan-strip-fader"

thumbClassName = "chan-strip-thumb"
orientation = "vertical"

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

thumbClassName = "chan-strip-thumb"
orientation = "vertical"

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

onSlide={(event: any) => {
invert
min={0}
max={1}
step={0.01}
value= {this.props.fader[this.props.faderIndex].mid}
onChange={(event: any) => {
this.handleMid(event)
}}
/>
Expand All @@ -312,16 +319,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<div className="parameter-text">
High
<Nouislider
<ReactSlider
className="chan-strip-fader"

thumbClassName = "chan-strip-thumb"
orientation = "vertical"

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

onSlide={(event: any) => {
invert
min={0}
max={1}
step={0.01}
value= {this.props.fader[this.props.faderIndex].high}
onChange={(event: any) => {
this.handleHigh(event)
}}
/>
Expand All @@ -339,15 +346,16 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
return (
<li key={channelIndex}>
{monitorName}
<Nouislider
<ReactSlider
className="chan-strip-fader"

thumbClassName = "chan-strip-thumb"
orientation = "vertical"

range={{ min: 0, max: 1 }}
start={[this.props.channel[channelIndex].auxLevel[this.props.auxSendIndex]]}
connect
onSlide={(event: any) => {
invert
min={0}
max={1}
step={0.01}
value= {this.props.channel[channelIndex].auxLevel[this.props.auxSendIndex]}
onChange={(event: any) => {
this.handleMonitorLevel(event, channelIndex)
}}
/>
Expand Down
13 changes: 1 addition & 12 deletions client/components/Channel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { connect } from "react-redux";
import VuMeter from './VuMeter';
import { Store } from 'redux';
import Nouislider from 'nouislider-react'
import "nouislider/distribute/nouislider.css"
import '../assets/css/NoUiSlider.css'

//assets:
import '../assets/css/Channel.css';
Expand Down Expand Up @@ -116,19 +116,8 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
thumb = 'channel-volume-thumb-color-mute'
}
return (
<ReactSlider
className="channel-volume-fader"
thumbClassName = { thumb }
orientation="vertical"
invert
min={0}
max={1}
step={0.01}
value= {this.props.fader.faderLevel}
onChange={(event: any) => {
this.handleLevel(event);
}}
/>
*/
}

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
"react-dom": "^16.10.1",
"react-redux": "^7.1.1",
"react-select": "^3.0.6",
"react-slider": "^1.0.2",
"reactjs-popup": "^1.5.0",
"redux": "^4.0.4",
"socket.io": "^2.3.0",
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6802,6 +6802,11 @@ react-select@^3.0.6:
react-input-autosize "^2.2.2"
react-transition-group "^2.2.1"

react-slider@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-slider/-/react-slider-1.0.2.tgz#066e61ce5cfd7983dbee735971204f541f382d79"
integrity sha512-fl2qPKa5+z1YQ94H74xcB8JEyaxjQJQN4ZAVD+pfX/CN4tMdQwMDjB8Y2XmvVK4BjMwoYFaLG8zFKC4oHNcuGQ==

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 313089e

Please sign in to comment.