1 files changed, 141 insertions, 7 deletions

diff --git a/public/bundle.js b/public/bundle.js
index cf517bf..59910d9 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -165,9 +165,9 @@ var ParamGroup = function (_Component) {
   }, {
     key: 'render',
     value: function render() {
-      var props = this.props;
       var checked = this.props.opt[this.props.name];
-      var className = checked ? 'paramGroup active' : 'paramGroup inactive';
+      var toggle = !this.props.noToggle;
+      var className = !toggle || checked ? 'paramGroup active' : 'paramGroup inactive';
       return (0, _preact.h)(
         'div',
         { className: className },
@@ -177,15 +177,15 @@ var ParamGroup = function (_Component) {
           (0, _preact.h)(
             'h3',
             null,
-            props.title
+            this.props.title
           ),
-          (0, _preact.h)('input', {
+          toggle ? (0, _preact.h)('input', {
             type: 'checkbox',
             onClick: this.handleClick,
             checked: checked
-          })
+          }) : null
         ),
-        props.children
+        this.props.children
       );
     }
   }]);
@@ -209,6 +209,120 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 
 /***/ }),
 
+/***/ "./app/client/common/select.component.js":
+/*!***********************************************!*\
+  !*** ./app/client/common/select.component.js ***!
+  \***********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _preact = __webpack_require__(/*! preact */ "./node_modules/preact/dist/preact.esm.js");
+
+var _reactRedux = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
+
+var _redux = __webpack_require__(/*! redux */ "./node_modules/redux/es/redux.js");
+
+var _actions = __webpack_require__(/*! ../live/actions */ "./app/client/live/actions.js");
+
+var liveActions = _interopRequireWildcard(_actions);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Select = function (_Component) {
+  _inherits(Select, _Component);
+
+  function Select(props) {
+    _classCallCheck(this, Select);
+
+    var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
+
+    _this.handleChange = _this.handleChange.bind(_this);
+    return _this;
+  }
+
+  _createClass(Select, [{
+    key: 'handleChange',
+    value: function handleChange(e) {
+      clearTimeout(this.timeout);
+      var new_value = e.target.value;
+      this.props.actions.set_param(this.props.name, new_value);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var value = this.props.opt[this.props.name];
+      var options = this.props.options.map(function (key, i) {
+        return (0, _preact.h)(
+          'option',
+          { value: key, key: i },
+          capitalize(key)
+        );
+      });
+      return (0, _preact.h)(
+        'div',
+        { className: 'select param' },
+        (0, _preact.h)(
+          'label',
+          null,
+          (0, _preact.h)(
+            'span',
+            null,
+            this.props.title
+          ),
+          (0, _preact.h)(
+            'select',
+            {
+              onChange: this.handleChange,
+              value: value
+            },
+            options
+          )
+        ),
+        this.props.children
+      );
+    }
+  }]);
+
+  return Select;
+}(_preact.Component);
+
+function capitalize(s) {
+  return (s || "").replace(/(?:^|\s)\S/g, function (a) {
+    return a.toUpperCase();
+  });
+}
+
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    opt: state.live.opt
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
+  return {
+    actions: (0, _redux.bindActionCreators)(liveActions, dispatch)
+  };
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Select);
+
+/***/ }),
+
 /***/ "./app/client/common/slider.component.js":
 /*!***********************************************!*\
   !*** ./app/client/common/slider.component.js ***!
@@ -330,7 +444,7 @@ var Slider = function (_Component) {
       }
       return (0, _preact.h)(
         'div',
-        { 'class': 'slider' },
+        { 'class': 'slider param' },
         (0, _preact.h)(
           'label',
           null,
@@ -534,6 +648,10 @@ var _slider = __webpack_require__(/*! ../common/slider.component */ "./app/clien
 
 var _slider2 = _interopRequireDefault(_slider);
 
+var _select = __webpack_require__(/*! ../common/select.component */ "./app/client/common/select.component.js");
+
+var _select2 = _interopRequireDefault(_select);
+
 var _actions = __webpack_require__(/*! ./actions */ "./app/client/live/actions.js");
 
 var liveActions = _interopRequireWildcard(_actions);
@@ -577,6 +695,22 @@ var App = function (_Component) {
             (0, _preact.h)(
               _paramGroup2.default,
               {
+                title: 'Playback',
+                noToggle: true
+              },
+              (0, _preact.h)(_select2.default, {
+                name: 'send_image',
+                title: 'view mode',
+                options: ['a', 'b', 'sequence', 'recursive']
+              })
+            )
+          ),
+          (0, _preact.h)(
+            'div',
+            { className: 'column' },
+            (0, _preact.h)(
+              _paramGroup2.default,
+              {
                 title: 'Transition',
                 name: 'transition'
               },