refactor audioplayer

1 files changed, 436 insertions, 199 deletions

diff --git a/public/bundle.js b/public/bundle.js
index ac72fb1..b860674 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -5683,14 +5683,20 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _preact = __webpack_require__(3);
 
+var _audioPlayerContainer = __webpack_require__(114);
+
+var _audioPlayerContainer2 = _interopRequireDefault(_audioPlayerContainer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
-
 // import { Link } from 'react-router-dom'
 
+
 var Header = function (_Component) {
   _inherits(Header, _Component);
 
@@ -5713,7 +5719,8 @@ var Header = function (_Component) {
           'b',
           null,
           'spawn cortex'
-        )
+        ),
+        (0, _preact.h)(_audioPlayerContainer2.default, null)
       );
     }
   }]);
@@ -5824,7 +5831,8 @@ var Tasks = function (_Component) {
     var _this = _possibleConstructorReturn(this, (Tasks.__proto__ || Object.getPrototypeOf(Tasks)).call(this));
 
     _this.state = {
-      adding: false
+      adding: false,
+      tasks: []
     };
     _client2.default.task.index().then(function (tasks) {
       return _this.setState({ tasks: tasks });
@@ -5837,7 +5845,8 @@ var Tasks = function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var tasks = (this.props.tasks || []).map(function (task, i) {
+      //           <span class='name'>{task.result_file.name}</span>
+      var tasks = (this.state.tasks || []).map(function (task, i) {
         return (0, _preact.h)(
           'div',
           { key: i, onClick: function onClick() {
@@ -5845,8 +5854,28 @@ var Tasks = function (_Component) {
             } },
           (0, _preact.h)(
             'span',
+            null,
+            task.id
+          ),
+          (0, _preact.h)(
+            'span',
+            null,
+            task.created_at
+          ),
+          (0, _preact.h)(
+            'span',
+            { 'class': 'name' },
+            task.content_file.name
+          ),
+          (0, _preact.h)(
+            'span',
             { 'class': 'name' },
-            task.name
+            task.style_file.name
+          ),
+          (0, _preact.h)(
+            'span',
+            null,
+            task.alpha
           )
         );
       });
@@ -5862,10 +5891,23 @@ var Tasks = function (_Component) {
             (0, _preact.h)(
               'b',
               null,
-              'tasks'
+              'create task'
+            )
+          ),
+          (0, _preact.h)(_taskForm2.default, null)
+        ),
+        (0, _preact.h)(
+          'div',
+          { 'class': 'window' },
+          (0, _preact.h)(
+            'div',
+            { 'class': 'heading' },
+            (0, _preact.h)(
+              'b',
+              null,
+              'recent tasks'
             )
           ),
-          (0, _preact.h)(_taskForm2.default, null),
           (0, _preact.h)(
             'div',
             { 'class': 'list' },
@@ -5901,9 +5943,9 @@ var _Folders = __webpack_require__(62);
 
 var _Folders2 = _interopRequireDefault(_Folders);
 
-var _Folder = __webpack_require__(64);
+var _Files = __webpack_require__(111);
 
-var _Folder2 = _interopRequireDefault(_Folder);
+var _Files2 = _interopRequireDefault(_Files);
 
 var _client = __webpack_require__(8);
 
@@ -5970,7 +6012,7 @@ var Browser = function (_Component) {
         });
         if (!folder_list.length) return;
         var folder = folder_list[0];
-        return (0, _preact.h)(_Folder2.default, {
+        return (0, _preact.h)(_Files2.default, {
           folder: folder,
           onClose: function onClose() {
             return _this2.closeFolder(folder);
@@ -6244,182 +6286,7 @@ var FolderForm = function (_Component) {
 exports.default = FolderForm;
 
 /***/ }),
-/* 64 */
-/***/ (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__(3);
-
-var _client = __webpack_require__(8);
-
-var _client2 = _interopRequireDefault(_client);
-
-var _FileUploadButton = __webpack_require__(65);
-
-var _FileUploadButton2 = _interopRequireDefault(_FileUploadButton);
-
-var _taskContentLink = __webpack_require__(106);
-
-var _taskContentLink2 = _interopRequireDefault(_taskContentLink);
-
-var _taskStyleLink = __webpack_require__(107);
-
-var _taskStyleLink2 = _interopRequireDefault(_taskStyleLink);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 Folder = function (_Component) {
-  _inherits(Folder, _Component);
-
-  function Folder(props) {
-    _classCallCheck(this, Folder);
-
-    var _this = _possibleConstructorReturn(this, (Folder.__proto__ || Object.getPrototypeOf(Folder)).call(this));
-
-    _this.state = {
-      files: props.folder.files || []
-    };
-    _this.addFiles = _this.addFiles.bind(_this);
-    if (!props.folder.files) {
-      _client2.default.file.index({ folder_id: props.folder.id }).then(function (files) {
-        return _this.setState({ files: files });
-      });
-    }
-    _this.audio = document.createElement('audio');
-    return _this;
-  }
-
-  _createClass(Folder, [{
-    key: 'addFiles',
-    value: function addFiles(newFiles) {
-      if (!newFiles) return;
-      var files = this.state.files.concat(newFiles).sort(function (a, b) {
-        return b.id - a.id;
-      });
-      this.setState({ files: files });
-    }
-  }, {
-    key: 'handleClick',
-    value: function handleClick(file) {
-      if (file.type === 'audio') {
-        this.audio.setAttribute('src', mp3path(file));
-        this.audio.play();
-        document.body.style.backgroundImage = 'url(' + pngpath(file) + ')';
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var files = this.state.files.map(toFilenamePair).sort(sortByFilename).map(fromPair).map(function (file, i) {
-        if (!file) return;
-        return (0, _preact.h)(
-          'div',
-          { key: i },
-          (0, _preact.h)(
-            'span',
-            { 'class': 'name', onClick: function onClick() {
-                return _this2.handleClick(file);
-              } },
-            file.name
-          ),
-          (0, _preact.h)(
-            'span',
-            { 'class': 'mime' },
-            file.mime
-          ),
-          (0, _preact.h)(
-            'span',
-            { 'class': 'actions' },
-            (0, _preact.h)(
-              _taskContentLink2.default,
-              { file: file },
-              ' content '
-            ),
-            (0, _preact.h)(
-              _taskStyleLink2.default,
-              { file: file },
-              ' style '
-            )
-          )
-        );
-      });
-      return (0, _preact.h)(
-        'div',
-        { 'class': 'window' },
-        (0, _preact.h)(
-          'div',
-          { 'class': 'heading' },
-          (0, _preact.h)(
-            'b',
-            null,
-            this.props.folder.name
-          ),
-          (0, _preact.h)(
-            'div',
-            { 'class': 'buttons' },
-            (0, _preact.h)(_FileUploadButton2.default, { folder: this.props.folder, addFiles: this.addFiles }),
-            (0, _preact.h)(
-              'button',
-              { onClick: this.props.onClose },
-              '\xD7'
-            )
-          )
-        ),
-        (0, _preact.h)(
-          'div',
-          { 'class': 'list' },
-          files
-        )
-      );
-    }
-  }]);
-
-  return Folder;
-}(_preact.Component);
-
-exports.default = Folder;
-
-
-function toFilenamePair(file) {
-  return [file.name.toLowerCase(), file];
-}
-function sortByFilename(a, b) {
-  return a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1;
-}
-function fromPair(pair) {
-  return pair[1];
-}
-
-function filepath(file) {
-  return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name);
-}
-function mp3path(file) {
-  if (file.mime !== 'audio/mp3') {
-    return filepath(file) + '.mp3';
-  }
-  return filepath(file);
-}
-function pngpath(file) {
-  return filepath(file) + '.png';
-}
-
-/***/ }),
+/* 64 */,
 /* 65 */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -6521,7 +6388,7 @@ var _client2 = _interopRequireDefault(_client);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function TaskFormView(props) {
-  console.log(props);
+  // console.log(props)
   return (0, _preact.h)(
     'div',
     { 'class': 'form' },
@@ -8688,10 +8555,15 @@ var _currentTask = __webpack_require__(109);
 
 var _currentTask2 = _interopRequireDefault(_currentTask);
 
+var _audioPlayer = __webpack_require__(115);
+
+var _audioPlayer2 = _interopRequireDefault(_audioPlayer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var cortexApp = (0, _redux.combineReducers)({
-  currentTask: _currentTask2.default
+  currentTask: _currentTask2.default,
+  audioPlayer: _audioPlayer2.default
 });
 
 exports.default = cortexApp;
@@ -8706,6 +8578,19 @@ exports.default = cortexApp;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var audioPlayFile = exports.audioPlayFile = function audioPlayFile(file) {
+  return {
+    type: 'AUDIO_PLAY_FILE',
+    file: file
+  };
+};
+
+var audioPause = exports.audioPause = function audioPause() {
+  return {
+    type: 'AUDIO_PAUSE'
+  };
+};
+
 var setContent = exports.setContent = function setContent(content) {
   return {
     type: 'SET_CONTENT',
@@ -8895,7 +8780,6 @@ var currentTask = function currentTask() {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var action = arguments[1];
 
-  console.log(action.type);
   switch (action.type) {
     case 'SET_CONTENT':
       return _extends({}, state, {
@@ -8910,19 +8794,23 @@ var currentTask = function currentTask() {
         alpha: action.alpha
       });
     case 'CREATE_TASK':
-      _client2.default.task.create(state).then(function (data) {
+      var record = {
+        content_file_id: state.content.id,
+        style_file_id: state.style.id,
+        alpha: state.alpha || '0.001',
+        command: 'nsatf.py',
+        completed: false
+      };
+      _client2.default.task.create(record).then(function (data) {
         (0, _actions.addTask)(data);
       });
 
-      return {
-        content: null,
-        style: null,
-        alpha: state.alpha
-        //     case 'ADD_TASK':
-        //       return {
-        //         ...state
-        //       }
-      };default:
+      return state;
+    //     case 'ADD_TASK':
+    //       return {
+    //         ...state
+    //       }
+    default:
       return state;
   }
 };
@@ -8981,6 +8869,355 @@ var TaskForm = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_Ta
 
 exports.default = TaskForm;
 
+/***/ }),
+/* 111 */
+/***/ (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__(3);
+
+var _actions = __webpack_require__(105);
+
+var _client = __webpack_require__(8);
+
+var _client2 = _interopRequireDefault(_client);
+
+var _FileUploadButton = __webpack_require__(65);
+
+var _FileUploadButton2 = _interopRequireDefault(_FileUploadButton);
+
+var _fileLink = __webpack_require__(116);
+
+var _fileLink2 = _interopRequireDefault(_fileLink);
+
+var _taskContentLink = __webpack_require__(106);
+
+var _taskContentLink2 = _interopRequireDefault(_taskContentLink);
+
+var _taskStyleLink = __webpack_require__(107);
+
+var _taskStyleLink2 = _interopRequireDefault(_taskStyleLink);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 Files = function (_Component) {
+  _inherits(Files, _Component);
+
+  function Files(props) {
+    _classCallCheck(this, Files);
+
+    var _this = _possibleConstructorReturn(this, (Files.__proto__ || Object.getPrototypeOf(Files)).call(this));
+
+    _this.state = {
+      files: props.folder.files || [],
+      selected: null
+    };
+    _this.addFiles = _this.addFiles.bind(_this);
+    if (!props.folder.files) {
+      _client2.default.file.index({ folder_id: props.folder.id }).then(function (files) {
+        return _this.setState({ files: files });
+      });
+    }
+    return _this;
+  }
+
+  _createClass(Files, [{
+    key: 'addFiles',
+    value: function addFiles(newFiles) {
+      if (!newFiles) return;
+      var files = this.state.files.concat(newFiles).sort(function (a, b) {
+        return b.id - a.id;
+      });
+      this.setState({ files: files });
+    }
+  }, {
+    key: 'handleClick',
+    value: function handleClick(file) {
+      if (file.type === 'audio') {
+        (0, _actions.audioPlayFile)(file);
+        document.body.style.backgroundImage = 'url(' + pngpath(file) + ')';
+      }
+      this.setState({ selected: file });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var files = this.state.files.map(toFilenamePair).sort(sortByFilename).map(fromPair).map(function (file, i) {
+        if (!file) return;
+        return (0, _preact.h)(
+          'div',
+          { key: i, 'class': _this2.state.selected === file ? 'selected' : '' },
+          (0, _preact.h)(
+            'span',
+            { 'class': 'name' },
+            (0, _preact.h)(
+              _fileLink2.default,
+              { file: file },
+              file.name
+            )
+          ),
+          (0, _preact.h)(
+            'span',
+            { 'class': 'mime' },
+            file.mime
+          ),
+          (0, _preact.h)(
+            'span',
+            { 'class': 'duration' },
+            file.duration.toFixed(1) + 's'
+          ),
+          (0, _preact.h)(
+            'span',
+            { 'class': 'actions' },
+            (0, _preact.h)(
+              _taskContentLink2.default,
+              { file: file },
+              'content'
+            ),
+            (0, _preact.h)(
+              _taskStyleLink2.default,
+              { file: file },
+              'style'
+            )
+          )
+        );
+      });
+      return (0, _preact.h)(
+        'div',
+        { 'class': 'window' },
+        (0, _preact.h)(
+          'div',
+          { 'class': 'heading' },
+          (0, _preact.h)(
+            'b',
+            null,
+            this.props.folder.name
+          ),
+          (0, _preact.h)(
+            'div',
+            { 'class': 'buttons' },
+            (0, _preact.h)(_FileUploadButton2.default, { folder: this.props.folder, addFiles: this.addFiles }),
+            (0, _preact.h)(
+              'button',
+              { onClick: this.props.onClose },
+              '\xD7'
+            )
+          )
+        ),
+        (0, _preact.h)(
+          'div',
+          { 'class': 'list' },
+          files
+        )
+      );
+    }
+  }]);
+
+  return Files;
+}(_preact.Component);
+
+exports.default = Files;
+
+
+function toFilenamePair(file) {
+  return [file.name.toLowerCase(), file];
+}
+function sortByFilename(a, b) {
+  return a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1;
+}
+function fromPair(pair) {
+  return pair[1];
+}
+
+function filepath(file) {
+  return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name);
+}
+function mp3path(file) {
+  if (file.mime !== 'audio/mp3') {
+    return filepath(file) + '.mp3';
+  }
+  return filepath(file);
+}
+function pngpath(file) {
+  return filepath(file) + '.png';
+}
+
+/***/ }),
+/* 112 */,
+/* 113 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AudioPlayer;
+
+var _preact = __webpack_require__(3);
+
+var audio = document.createElement('audio');
+
+function AudioPlayer(props) {
+  if (props.file) {
+    audio.src = mp3path(props.file);
+    audio.play();
+    return (0, _preact.h)(
+      'div',
+      null,
+      'Playing ',
+      props.file.name
+    );
+  } else {
+    return (0, _preact.h)(
+      'div',
+      null,
+      'Not Playing'
+    );
+  }
+}
+
+function filepath(file) {
+  return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name);
+}
+function mp3path(file) {
+  if (file.mime !== 'audio/mp3') {
+    return filepath(file) + '.mp3';
+  }
+  return filepath(file);
+}
+function pngpath(file) {
+  return filepath(file) + '.png';
+}
+
+/***/ }),
+/* 114 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _reactRedux = __webpack_require__(94);
+
+var _AudioPlayer = __webpack_require__(113);
+
+var _AudioPlayer2 = _interopRequireDefault(_AudioPlayer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mapStateToProps = function mapStateToProps(state) {
+  return state.audioPlayer;
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
+  return {};
+};
+
+var AudioPlayerContainer = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_AudioPlayer2.default);
+
+exports.default = AudioPlayerContainer;
+
+/***/ }),
+/* 115 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _client = __webpack_require__(8);
+
+var _client2 = _interopRequireDefault(_client);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var audioPlayer = function audioPlayer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var action = arguments[1];
+
+  switch (action.type) {
+    case 'AUDIO_PLAY_FILE':
+      return _extends({}, state, {
+        file: action.file
+      });
+    case 'AUDIO_PAUSE':
+      return _extends({}, state, {
+        paused: !state.paused
+      });
+    default:
+      return state;
+  }
+};
+
+exports.default = audioPlayer;
+
+/***/ }),
+/* 116 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _reactRedux = __webpack_require__(94);
+
+var _actions = __webpack_require__(105);
+
+var _Link = __webpack_require__(108);
+
+var _Link2 = _interopRequireDefault(_Link);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mapStateToProps = function mapStateToProps(state, ownProps) {
+  return {};
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
+  return {
+    onClick: function onClick() {
+      switch (ownProps.file.type) {
+        case 'audio':
+          dispatch((0, _actions.audioPlayFile)(ownProps.file));
+          break;
+      }
+    }
+  };
+};
+
+var FileLink = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_Link2.default);
+
+exports.default = FileLink;
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=bundle.js.map
\ No newline at end of file