audioplayer you can toggle

1 files changed, 174 insertions, 26 deletions

diff --git a/public/bundle.js b/public/bundle.js
index c5179d9..08b82ff 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -109,13 +109,17 @@ var _dataset = __webpack_require__(/*! ./dataset/dataset.actions */ "./app/clien
 
 var datasetActions = _interopRequireWildcard(_dataset);
 
+var _audioPlayer = __webpack_require__(/*! ./common/audioPlayer/audioPlayer.actions */ "./app/client/common/audioPlayer/audioPlayer.actions.js");
+
+var audioPlayerActions = _interopRequireWildcard(_audioPlayer);
+
 var _store = __webpack_require__(/*! ./store */ "./app/client/store.js");
 
 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; } }
 
 exports.default = Object.keys(_api.actions).map(function (a) {
   return [a, _api.actions[a]];
-}).concat([['live', liveActions], ['queue', queueActions], ['system', systemActions], ['dataset', datasetActions]]).map(function (p) {
+}).concat([['live', liveActions], ['queue', queueActions], ['system', systemActions], ['dataset', datasetActions], ['audioPlayer', audioPlayerActions]]).map(function (p) {
   return [p[0], (0, _redux.bindActionCreators)(p[1], _store.dispatch)];
 }).concat([['socket', socketActions]]).reduce(function (a, b) {
   return (a[b[0]] = b[1]) && a;
@@ -841,10 +845,46 @@ function parseTumblrPost(media_list, post) {
 
 /***/ }),
 
-/***/ "./app/client/common/audioPlayer.component.js":
-/*!****************************************************!*\
-  !*** ./app/client/common/audioPlayer.component.js ***!
-  \****************************************************/
+/***/ "./app/client/common/audioPlayer/audioPlayer.actions.js":
+/*!**************************************************************!*\
+  !*** ./app/client/common/audioPlayer/audioPlayer.actions.js ***!
+  \**************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.enqueue = exports.resume = exports.pause = exports.play = undefined;
+
+var _types = __webpack_require__(/*! ../../types */ "./app/client/types.js");
+
+var _types2 = _interopRequireDefault(_types);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var play = exports.play = function play(file) {
+  return { type: _types2.default.audioPlayer.play, file: file };
+};
+var pause = exports.pause = function pause() {
+  return { type: _types2.default.audioPlayer.pause };
+};
+var resume = exports.resume = function resume() {
+  return { type: _types2.default.audioPlayer.resume };
+};
+var enqueue = exports.enqueue = function enqueue(file) {
+  return { type: _types2.default.audioPlayer.enqueue, file: file };
+};
+
+/***/ }),
+
+/***/ "./app/client/common/audioPlayer/audioPlayer.component.js":
+/*!****************************************************************!*\
+  !*** ./app/client/common/audioPlayer/audioPlayer.component.js ***!
+  \****************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -863,9 +903,9 @@ var _reactRedux = __webpack_require__(/*! react-redux */ "./node_modules/react-r
 
 var _redux = __webpack_require__(/*! redux */ "./node_modules/redux/es/redux.js");
 
-var _live = __webpack_require__(/*! ../live/live.actions */ "./app/client/live/live.actions.js");
+var _audioPlayer = __webpack_require__(/*! ./audioPlayer.actions */ "./app/client/common/audioPlayer/audioPlayer.actions.js");
 
-var liveActions = _interopRequireWildcard(_live);
+var audioPlayerActions = _interopRequireWildcard(_audioPlayer);
 
 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; } }
 
@@ -875,8 +915,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 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 audio = document.createElement('audio');
-
 var AudioPlayer = function (_Component) {
   _inherits(AudioPlayer, _Component);
 
@@ -892,13 +930,20 @@ var AudioPlayer = function (_Component) {
   _createClass(AudioPlayer, [{
     key: 'handleClick',
     value: function handleClick(e) {
-      this.props.onClick && this.props.onClick();
+      var _props = this.props,
+          audioPlayer = _props.audioPlayer,
+          actions = _props.actions;
+
+      if (audioPlayer.playing) {
+        actions.pause();
+      } else {
+        actions.resume();
+      }
     }
   }, {
     key: 'render',
     value: function render() {
-      var _props$player = this.props.player,
-          player = _props$player === undefined ? {} : _props$player;
+      var audioPlayer = this.props.audioPlayer;
 
       return (0, _preact.h)(
         'div',
@@ -913,7 +958,7 @@ var AudioPlayer = function (_Component) {
           {
             onClick: this.handleClick
           },
-          player.playing ? '>' : 'pause'
+          audioPlayer.playing ? '>' : 'pause'
         )
       );
     }
@@ -924,18 +969,87 @@ var AudioPlayer = function (_Component) {
 
 var mapStateToProps = function mapStateToProps(state) {
   return {
-    player: state.audioPlayer
+    audioPlayer: state.audioPlayer
   };
 };
 
 var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
-  return {};
+  return {
+    actions: (0, _redux.bindActionCreators)(audioPlayerActions, dispatch)
+  };
 };
 
 exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(AudioPlayer);
 
 /***/ }),
 
+/***/ "./app/client/common/audioPlayer/audioPlayer.reducer.js":
+/*!**************************************************************!*\
+  !*** ./app/client/common/audioPlayer/audioPlayer.reducer.js ***!
+  \**************************************************************/
+/*! no static exports found */
+/***/ (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 _types = __webpack_require__(/*! ../../types */ "./app/client/types.js");
+
+var _types2 = _interopRequireDefault(_types);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var audioPlayerInitialState = {
+  loading: false,
+  error: null,
+  status: '',
+  current: null,
+  index: -1,
+  playlist: []
+};
+
+var audio = document.createElement('audio');
+
+var audioPlayerReducer = function audioPlayerReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : audioPlayerInitialState;
+  var action = arguments[1];
+
+  switch (action.type) {
+    case _types2.default.audioPlayer.play:
+      if (!action.file.url) {
+        return state;
+      }
+      audio.src = action.file.url;
+      audio.play();
+      return _extends({}, state, {
+        playing: true,
+        current: action.file
+      });
+    case _types2.default.audioPlayer.pause:
+      audio.pause();
+      return _extends({}, state, {
+        playing: false
+      });
+    case _types2.default.audioPlayer.resume:
+      audio.play();
+      return _extends({}, state, {
+        playing: true
+      });
+    default:
+      return state;
+  }
+};
+
+exports.default = audioPlayerReducer;
+
+/***/ }),
+
 /***/ "./app/client/common/button.component.js":
 /*!***********************************************!*\
   !*** ./app/client/common/button.component.js ***!
@@ -1091,7 +1205,7 @@ var FileList = exports.FileList = function FileList(props) {
       fields: fieldSet(fields),
       className: rowClassName,
       linkFiles: true,
-      onClick: true
+      onClick: onClick
     });
   });
   if (!(files && files.length)) {
@@ -1167,12 +1281,14 @@ var FileRow = exports.FileRow = function FileRow(props) {
         file.name || file.url
       ) : linkFiles && file.url ? (0, _preact.h)(
         'a',
-        { target: '_blank', href: file.url },
+        { target: '_blank', onClick: function onClick(e) {
+            return _onClick && _onClick(file, e);
+          }, href: file.url },
         file.name || file.url
       ) : (0, _preact.h)(
         'span',
-        { 'class': 'link', onClick: function onClick() {
-            return _onClick(file);
+        { 'class': 'link', onClick: function onClick(e) {
+            return _onClick && _onClick(file, e);
           } },
         file.name || file.url
       )
@@ -3146,7 +3262,7 @@ var _header = __webpack_require__(/*! ./common/header.component */ "./app/client
 
 var _header2 = _interopRequireDefault(_header);
 
-var _audioPlayer = __webpack_require__(/*! ./common/audioPlayer.component */ "./app/client/common/audioPlayer.component.js");
+var _audioPlayer = __webpack_require__(/*! ./common/audioPlayer/audioPlayer.component */ "./app/client/common/audioPlayer/audioPlayer.component.js");
 
 var _audioPlayer2 = _interopRequireDefault(_audioPlayer);
 
@@ -5207,6 +5323,7 @@ var SampleRNNDatasets = function (_Component) {
       var _props3 = this.props,
           samplernn = _props3.samplernn,
           onPickDataset = _props3.onPickDataset,
+          onPickFile = _props3.onPickFile,
           actions = _props3.actions;
 
       var folder = samplernn.folder;
@@ -5231,7 +5348,8 @@ var SampleRNNDatasets = function (_Component) {
               className: 'input_files',
               fileListClassName: '',
               rowClassName: 'input_file',
-              options: _this3.fileOptions
+              options: _this3.fileOptions,
+              onClick: onPickFile
             })
           ),
           (0, _preact.h)(
@@ -5297,7 +5415,8 @@ var SampleRNNDatasets = function (_Component) {
             !!dataset.output.length && (0, _preact.h)(_fileList.FileList, {
               files: dataset.output,
               orderBy: 'epoch desc',
-              fields: 'name date epoch size'
+              fields: 'name date epoch size',
+              onPickFile: onPickFile
             })
           ),
           _this3.props.afterRow && _this3.props.afterRow(dataset)
@@ -6436,6 +6555,10 @@ var _samplernn = __webpack_require__(/*! ./samplernn.actions */ "./app/client/mo
 
 var samplernnActions = _interopRequireWildcard(_samplernn);
 
+var _audioPlayer = __webpack_require__(/*! ../../common/audioPlayer/audioPlayer.actions */ "./app/client/common/audioPlayer/audioPlayer.actions.js");
+
+var audioPlayerActions = _interopRequireWildcard(_audioPlayer);
+
 var _dataset = __webpack_require__(/*! ../../dataset/dataset.form */ "./app/client/dataset/dataset.form.js");
 
 var _dataset2 = _interopRequireDefault(_dataset);
@@ -6477,6 +6600,8 @@ var SampleRNNShow = function (_Component) {
   _createClass(SampleRNNShow, [{
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
           samplernn = _props.samplernn,
           match = _props.match,
@@ -6504,10 +6629,21 @@ var SampleRNNShow = function (_Component) {
           canUpload: true, canAddURL: true
         }),
         (0, _preact.h)(_samplernn3.default, {
-          id: this.props.match.params.id || localStorage.getItem('samplernn.last_id')
+          id: this.props.match.params.id || localStorage.getItem('samplernn.last_id'),
+          onPickFile: function onPickFile(file, e) {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('picked a file', file);
+            _this2.handlePick(file);
+          }
         })
       );
     }
+  }, {
+    key: 'handlePick',
+    value: function handlePick(file) {
+      this.props.audioPlayer.play(file);
+    }
   }]);
 
   return SampleRNNShow;
@@ -6522,7 +6658,8 @@ var mapStateToProps = function mapStateToProps(state) {
 
 var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
   return {
-    actions: (0, _redux.bindActionCreators)(samplernnActions, dispatch)
+    actions: (0, _redux.bindActionCreators)(samplernnActions, dispatch),
+    audioPlayer: (0, _redux.bindActionCreators)(audioPlayerActions, dispatch)
   };
 };
 
@@ -7193,11 +7330,14 @@ var _queue = __webpack_require__(/*! ./queue/queue.reducer */ "./app/client/queu
 
 var _queue2 = _interopRequireDefault(_queue);
 
+var _audioPlayer = __webpack_require__(/*! ./common/audioPlayer/audioPlayer.reducer */ "./app/client/common/audioPlayer/audioPlayer.reducer.js");
+
+var _audioPlayer2 = _interopRequireDefault(_audioPlayer);
+
 var _module = __webpack_require__(/*! ./modules/module.reducer */ "./app/client/modules/module.reducer.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import navReducer from './nav.reducer'
 var appReducer = (0, _redux.combineReducers)({
   system: _system2.default,
   dashboard: _dashboard2.default,
@@ -7205,9 +7345,11 @@ var appReducer = (0, _redux.combineReducers)({
   dataset: _dataset2.default,
   queue: _queue2.default,
   router: _reactRouterRedux.routerReducer,
-  module: _module.moduleReducer
+  module: _module.moduleReducer,
+  audioPlayer: _audioPlayer2.default
 });
 
+// import navReducer from './nav.reducer'
 var history = exports.history = (0, _createBrowserHistory2.default)();
 var store = exports.store = (0, _redux.createStore)(appReducer, (0, _redux.compose)((0, _redux.applyMiddleware)(
 // createLogger(),
@@ -7939,6 +8081,12 @@ exports.default = (_system$app$folder$fi = {
 		save_frame: 'SAVE_FRAME',
 		saving_video: 'SAVING_VIDEO',
 		save_video: 'SAVE_VIDEO'
+	},
+	audioPlayer: {
+		play: 'AUDIO_PLAY',
+		pause: 'AUDIO_PAUSE',
+		resume: 'AUDIO_RESUME',
+		enqueue: 'AUDIO_ENQUEUE'
 	}
 }, _defineProperty(_system$app$folder$fi, 'dataset', {
 	upload_files: 'UPLOAD_FILES',