view mode toggle

3 files changed, 25 insertions, 10 deletions

diff --git a/app/client/common/paramGroup.component.js b/app/client/common/paramGroup.component.js
index 2533642..6dd45f6 100644
--- a/app/client/common/paramGroup.component.js
+++ b/app/client/common/paramGroup.component.js
@@ -14,20 +14,22 @@ class ParamGroup extends Component {
     this.props.actions.set_param(this.props.name, new_value)
   }
   render() {
-    const props = this.props
     const checked = this.props.opt[this.props.name]
-    const className = checked ? 'paramGroup active' : 'paramGroup inactive'
+    const toggle = !this.props.noToggle
+    const className = (!toggle || checked) ? 'paramGroup active' : 'paramGroup inactive'
     return (
       <div className={className}>
         <label>
-          <h3>{props.title}</h3>
-          <input
-            type='checkbox'
-            onClick={this.handleClick}
-            checked={checked}
-          />
+          <h3>{this.props.title}</h3>
+          {toggle ?
+            <input
+              type='checkbox'
+              onClick={this.handleClick}
+              checked={checked}
+            />
+          : null}
         </label>
-        {props.children}
+        {this.props.children}
       </div>
     )
   }
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index 1fedbfb..e3e3f48 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -66,7 +66,7 @@ class Slider extends Component {
       text_value = parseFloat(value).toFixed(2)
     }
     return (
-      <div class='slider'>
+      <div class='slider param'>
         <label>
           <span>{title || name.replace(/_/g, ' ')}</span>
           <input type='text' value={text_value} onBlur={this.handleInput} />
diff --git a/app/client/live/index.js b/app/client/live/index.js
index 558cd40..5b5e1d6 100644
--- a/app/client/live/index.js
+++ b/app/client/live/index.js
@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import Player from './components/player.component'
 import ParamGroup from '../common/paramGroup.component'
 import Slider from '../common/slider.component'
+import Select from '../common/select.component'
 
 import * as liveActions from './actions'
 
@@ -21,6 +22,18 @@ class App extends Component {
         <div className='params'>
           <div className='column'>
             <ParamGroup
+              title='Playback'
+              noToggle
+            >
+              <Select
+                name='send_image'
+                title='view mode'
+                options={['a','b','sequence','recursive']}
+              />
+            </ParamGroup>
+          </div>
+          <div className='column'>
+            <ParamGroup
               title='Transition'
               name='transition'
             >