summaryrefslogtreecommitdiff
path: root/app/client
diff options
context:
space:
mode:
Diffstat (limited to 'app/client')
-rw-r--r--app/client/actions.js2
-rw-r--r--app/client/common/audioPlayer/audioPlayer.actions.js15
-rw-r--r--app/client/common/audioPlayer/audioPlayer.component.js (renamed from app/client/common/audioPlayer.component.js)18
-rw-r--r--app/client/common/audioPlayer/audioPlayer.reducer.js44
-rw-r--r--app/client/common/fileList.component.js6
-rw-r--r--app/client/index.jsx2
-rw-r--r--app/client/modules/samplernn/samplernn.datasets.js4
-rw-r--r--app/client/modules/samplernn/samplernn.show.js11
-rw-r--r--app/client/store.js2
-rw-r--r--app/client/types.js6
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',
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 18:48:03 +0000