audioplayer you can toggle

10 files changed, 98 insertions, 12 deletions

diff --git a/app/client/actions.js b/app/client/actions.js
index 9f43743..7336eab 100644
--- a/app/client/actions.js
+++ b/app/client/actions.js
@@ -5,6 +5,7 @@ import * as queueActions from './queue/queue.actions'
 import * as systemActions from './system/system.actions'
 import * as socketActions from './socket/socket.actions'
 import * as datasetActions from './dataset/dataset.actions'
+import * as audioPlayerActions from './common/audioPlayer/audioPlayer.actions'
 
 import { dispatch } from './store'
 
@@ -16,6 +17,7 @@ export default
             ['queue', queueActions],
             ['system', systemActions],
             ['dataset', datasetActions],
+            ['audioPlayer', audioPlayerActions],
           ])
           .map(p => [p[0], bindActionCreators(p[1], dispatch)])
           .concat([
diff --git a/app/client/common/audioPlayer/audioPlayer.actions.js b/app/client/common/audioPlayer/audioPlayer.actions.js
new file mode 100644
index 0000000..3d3ea10
--- /dev/null
+++ b/app/client/common/audioPlayer/audioPlayer.actions.js
@@ -0,0 +1,15 @@
+
+import types from '../../types'
+
+export const play = (file) => {
+  return { type: types.audioPlayer.play, file }
+}
+export const pause = () => {
+  return { type: types.audioPlayer.pause }
+}
+export const resume = () => {
+  return { type: types.audioPlayer.resume }
+}
+export const enqueue = (file) => {
+  return { type: types.audioPlayer.enqueue, file}
+}
\ No newline at end of file
diff --git a/app/client/common/audioPlayer.component.js b/app/client/common/audioPlayer/audioPlayer.component.js
index f10a505..481a685 100644
--- a/app/client/common/audioPlayer.component.js
+++ b/app/client/common/audioPlayer/audioPlayer.component.js
@@ -1,9 +1,7 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import * as liveActions from '../live/live.actions'
-
-const audio = document.createElement('audio')
+import * as audioPlayerActions from './audioPlayer.actions'
 
 class AudioPlayer extends Component {
   constructor(props){
@@ -11,17 +9,22 @@ class AudioPlayer extends Component {
     this.handleClick = this.handleClick.bind(this)
   }
   handleClick(e){
-    this.props.onClick && this.props.onClick()
+    const { audioPlayer, actions } = this.props
+    if (audioPlayer.playing) {
+      actions.pause()
+    } else {
+      actions.resume()
+    }
   }
   render() {
-    const { player={} } = this.props
+    const { audioPlayer } = this.props
     return (
       <div className='audioPlayer'>
         <span>{this.props.title}</span>
         <button
           onClick={this.handleClick}
         >
-          {player.playing ? '>' : 'pause'}
+          {audioPlayer.playing ? '>' : 'pause'}
         </button>
       </div>
     )
@@ -29,10 +32,11 @@ class AudioPlayer extends Component {
 }
 
 const mapStateToProps = state => ({
-  player: state.audioPlayer,
+  audioPlayer: state.audioPlayer,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(audioPlayerActions, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(AudioPlayer)
diff --git a/app/client/common/audioPlayer/audioPlayer.reducer.js b/app/client/common/audioPlayer/audioPlayer.reducer.js
new file mode 100644
index 0000000..e249325
--- /dev/null
+++ b/app/client/common/audioPlayer/audioPlayer.reducer.js
@@ -0,0 +1,44 @@
+import types from '../../types'
+
+const audioPlayerInitialState = {
+  loading: false,
+  error: null,
+  status: '',
+  current: null,
+  index: -1,
+  playlist: [],
+}
+
+const audio = document.createElement('audio')
+
+const audioPlayerReducer = (state = audioPlayerInitialState, action) => {
+  switch(action.type) {
+    case types.audioPlayer.play:
+      if (! action.file.url) {
+        return state
+      }
+      audio.src = action.file.url
+      audio.play()
+      return {
+        ...state,
+        playing: true,
+        current: action.file,
+      }
+    case types.audioPlayer.pause:
+      audio.pause()
+      return {
+        ...state,
+        playing: false,
+      }
+    case types.audioPlayer.resume:
+      audio.play()
+      return {
+        ...state,
+        playing: true,
+      }
+    default:
+      return state
+  }
+}
+
+export default audioPlayerReducer
diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js
index f596c8d..d060e01 100644
--- a/app/client/common/fileList.component.js
+++ b/app/client/common/fileList.component.js
@@ -27,7 +27,7 @@ export const FileList = props => {
         fields={fieldSet(fields)}
         className={rowClassName}
         linkFiles
-        onClick
+        onClick={onClick}
       />
     })
   if (! (files && files.length)) {
@@ -79,8 +79,8 @@ export const FileRow = props => {
           {file.persisted === false
             ? <span className='unpersisted'>{file.name || file.url}</span>
             : (linkFiles && file.url)
-            ? <a target='_blank' href={file.url}>{file.name || file.url}</a>
-            : <span class='link' onClick={() => onClick(file)}>{file.name || file.url}</span>
+            ? <a target='_blank' onClick={(e) => onClick && onClick(file, e)} href={file.url}>{file.name || file.url}</a>
+            : <span class='link' onClick={(e) => onClick && onClick(file, e)}>{file.name || file.url}</span>
           }
         </div>
       }
diff --git a/app/client/index.jsx b/app/client/index.jsx
index b09282f..51e92df 100644
--- a/app/client/index.jsx
+++ b/app/client/index.jsx
@@ -8,7 +8,7 @@ import * as socket from './socket'
 import * as util from './util'
 
 import Header from './common/header.component'
-import AudioPlayer from './common/audioPlayer.component'
+import AudioPlayer from './common/audioPlayer/audioPlayer.component'
 import System from './system/system.component'
 import Dashboard from './dashboard/dashboard.component'
 import modules from './modules'
diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js
index 08f43c2..d29cf6a 100644
--- a/app/client/modules/samplernn/samplernn.datasets.js
+++ b/app/client/modules/samplernn/samplernn.datasets.js
@@ -83,7 +83,7 @@ class SampleRNNDatasets extends Component {
     )
   }
   renderGroups(){
-    const { samplernn, onPickDataset, actions } = this.props
+    const { samplernn, onPickDataset, onPickFile, actions } = this.props
     const folder = samplernn.folder
     const { mapFn, sortFn } = util.sort.orderByFn('date desc')
     const datasets = folder.datasets.map(mapFn).sort(sortFn).map(pair => {
@@ -99,6 +99,7 @@ class SampleRNNDatasets extends Component {
                 fileListClassName=''
                 rowClassName='input_file'
                 options={this.fileOptions}
+                onClick={onPickFile}
               />
             }
           </div>
@@ -127,6 +128,7 @@ class SampleRNNDatasets extends Component {
                 files={dataset.output}
                 orderBy='epoch desc'
                 fields={'name date epoch size'}
+                onPickFile={onPickFile}
               />
             }
           </div>
diff --git a/app/client/modules/samplernn/samplernn.show.js b/app/client/modules/samplernn/samplernn.show.js
index 8e271fc..2d27b8d 100644
--- a/app/client/modules/samplernn/samplernn.show.js
+++ b/app/client/modules/samplernn/samplernn.show.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import * as util from '../../util'
 
 import * as samplernnActions from './samplernn.actions'
+import * as audioPlayerActions from '../../common/audioPlayer/audioPlayer.actions'
 
 import DatasetForm from '../../dataset/dataset.form'
 import NewDatasetForm from '../../dataset/dataset.new'
@@ -35,10 +36,19 @@ class SampleRNNShow extends Component {
         }
         <SampleRNNDatasets
           id={this.props.match.params.id || localStorage.getItem('samplernn.last_id')}
+          onPickFile={(file, e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            console.log('picked a file', file)
+            this.handlePick(file)
+          }}
         />
       </div>
     )
   }
+  handlePick(file){
+    this.props.audioPlayer.play(file)
+  }
 }
 
 const mapStateToProps = state => ({
@@ -48,6 +58,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
   actions: bindActionCreators(samplernnActions, dispatch),
+  audioPlayer: bindActionCreators(audioPlayerActions, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNShow)
diff --git a/app/client/store.js b/app/client/store.js
index 256d5f6..99eed29 100644
--- a/app/client/store.js
+++ b/app/client/store.js
@@ -11,6 +11,7 @@ import dashboardReducer from './dashboard/dashboard.reducer'
 import liveReducer from './live/live.reducer'
 import datasetReducer from './dataset/dataset.reducer'
 import queueReducer from './queue/queue.reducer'
+import audioPlayerReducer from './common/audioPlayer/audioPlayer.reducer'
 import { moduleReducer } from './modules/module.reducer'
 
 const appReducer = combineReducers({
@@ -21,6 +22,7 @@ const appReducer = combineReducers({
   queue: queueReducer,
   router: routerReducer,
   module: moduleReducer,
+  audioPlayer: audioPlayerReducer,
 })
 
 export const history = createHistory()
diff --git a/app/client/types.js b/app/client/types.js
index c408d56..22d7ebc 100644
--- a/app/client/types.js
+++ b/app/client/types.js
@@ -69,6 +69,12 @@ export default {
 		saving_video: 'SAVING_VIDEO',
 		save_video: 'SAVE_VIDEO',
 	},
+	audioPlayer: {
+		play: 'AUDIO_PLAY',
+		pause: 'AUDIO_PAUSE',
+		resume: 'AUDIO_RESUME',
+		enqueue: 'AUDIO_ENQUEUE',
+	},
 	dataset: {
 		upload_files: 'UPLOAD_FILES',
 		file_progress: 'FILE_PROGRESS',