diff options
Diffstat (limited to 'frontend/app/views/graph/components')
| -rw-r--r-- | frontend/app/views/graph/components/audio.list.js | 148 | ||||
| -rw-r--r-- | frontend/app/views/graph/components/graph.header.js | 4 | ||||
| -rw-r--r-- | frontend/app/views/graph/components/page.edit.js | 1 | ||||
| -rw-r--r-- | frontend/app/views/graph/components/page.form.js | 63 |
4 files changed, 204 insertions, 12 deletions
diff --git a/frontend/app/views/graph/components/audio.list.js b/frontend/app/views/graph/components/audio.list.js new file mode 100644 index 0000000..011ab08 --- /dev/null +++ b/frontend/app/views/graph/components/audio.list.js @@ -0,0 +1,148 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import { unslugify } from 'app/utils' +import actions from 'app/actions' + +class AudioList extends Component { + state = { + playing: false, + play_id: -1, + } + + constructor(props) { + super(props) + this.toggleAudio = this.toggleAudio.bind(this) + this.upload = this.upload.bind(this) + this.audioDidEnd = this.audioDidEnd.bind(this) + } + + componentDidMount() { + this.audioElement = document.createElement('audio') + this.audioElement.addEventListener('ended', this.audioDidEnd) + } + + componentWillUnmount() { + this.audioElement.removeEventListener('ended', this.audioDidEnd) + this.audioElement.pause() + this.audioElement = null + } + + audioDidEnd() { + this.setState({ playing: false }) + } + + upload(e) { + e.preventDefault() + document.body.className = '' + const files = e.dataTransfer ? e.dataTransfer.files : e.target.files + let i + if (!files.length) return + Array.from(files).forEach(file => this.uploadTaggedFile(file, 'audio', file.filename)) + } + + uploadTaggedFile(file, tag, fn) { + return new Promise((resolve, reject) => { + this.setState({ status: "Uploading " + tag + "..." }) + const uploadData = { + tag, + file, + __file_filename: fn, + graph_id: this.props.graph.id, + username: 'swimmer', + } + // console.log(uploadData) + return actions.upload.upload(uploadData).then(data => { + // console.log(data) + resolve({ + ...data.res, + }) + }) + }) + } + + destroyFile(upload) { + return new Promise((resolve, reject) => { + actions.upload.destroy(upload) + .then(() => { + console.log('Destroy successful') + resolve() + }) + .catch(() => { + console.log('Error deleting the file') + reject() + }) + }) + } + + toggleAudio(upload) { + console.log(upload) + let playing = false + if (this.state.play_id === upload.id && this.state.playing) { + this.audioElement.pause() + } else { + this.audioElement.src = upload.url + this.audioElement.currentTime = 0 + this.audioElement.play() + playing = true + } + this.setState({ + playing, + play_id: upload.id, + }) + } + + render() { + const { playing, play_id } = this.state + const { graph } = this.props + // console.log(graph.uploads) + return ( + <div className='box audioList'> + <div className="uploadButton"> + <button> + <span> + {"Upload an audio file"} + </span> + </button> + <input + type="file" + accept="audio/mp3" + onChange={this.upload} + required={this.props.required} + /> + </div> + {graph.uploads.map(upload => ( + <div className='audioItem' key={upload.id} onClick={() => this.toggleAudio(upload)} > + <img + className='playButton' + src={ + (playing && play_id === upload.id) + ? "/static/img/icons_pause_white.svg" + : "/static/img/icons_play_white.svg" + } + /> + <div className='title'> + <div>{unslugify(upload.fn)}</div> + </div> + </div> + ))} + </div> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph.show.res, +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(AudioList) + + +/* + - upload new audio file + */
\ No newline at end of file diff --git a/frontend/app/views/graph/components/graph.header.js b/frontend/app/views/graph/components/graph.header.js index 46ad962..0766580 100644 --- a/frontend/app/views/graph/components/graph.header.js +++ b/frontend/app/views/graph/components/graph.header.js @@ -9,10 +9,12 @@ function GraphHeader(props) { return ( <header> <div> - <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link> + <Link to="/" className="logo arrow">{"◁ "}</Link> + <b>{props.site.siteTitle}</b> </div> <div> <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button> + <button onClick={() => props.graphActions.toggleAudioList()}>+ Audio</button> </div> </header> ) diff --git a/frontend/app/views/graph/components/page.edit.js b/frontend/app/views/graph/components/page.edit.js index 4025726..16a7eef 100644 --- a/frontend/app/views/graph/components/page.edit.js +++ b/frontend/app/views/graph/components/page.edit.js @@ -45,6 +45,7 @@ class PageEdit extends Component { return ( <PageForm data={show.res} + actions={{ graph: this.props.graphActions }} graph={this.props.graph.show.res} onSubmit={this.handleSubmit.bind(this)} /> diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js index 8fc00b0..a060698 100644 --- a/frontend/app/views/graph/components/page.form.js +++ b/frontend/app/views/graph/components/page.form.js @@ -2,8 +2,11 @@ import React, { Component } from 'react' import { Link } from 'react-router-dom' import { session } from 'app/session' +import actions from 'app/actions' +import { history } from 'app/store' -import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' +import { TextInput, ColorInput, Checkbox, LabelDescription, TextArea, SubmitButton, Loader } from 'app/common' +import AudioSelect from 'app/views/audio/components/audio.select' const newPage = (data) => ({ path: '', @@ -14,6 +17,8 @@ const newPage = (data) => ({ x: 0.05, y: 0.05, background_color: '#000000', + background_audio_id: 0, + restart_audio: false, }, ...data, }) @@ -26,6 +31,16 @@ export default class PageForm extends Component { errorFields: new Set([]), } + constructor(props){ + super(props) + this.handleChange = this.handleChange.bind(this) + this.handleSelect = this.handleSelect.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsSelect = this.handleSettingsSelect.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + this.handleDelete = this.handleDelete.bind(this) + } + componentDidMount() { const { graph, data, isNew } = this.props const title = isNew ? 'new page' : 'editing ' + data.title @@ -76,6 +91,10 @@ export default class PageForm extends Component { handleSettingsChange(e) { const { name, value } = e.target + this.handleSettingsSelect(name, value) + } + + handleSettingsSelect(name, value) { this.setState({ data: { ...this.state.data, @@ -110,11 +129,17 @@ export default class PageForm extends Component { } } - handleDelete() { + handleDelete(e) { + e && e.preventDefault() + e && e.stopPropagation() const { data } = this.state console.log(data) if (confirm('Really delete this page?')) { - actions.page.delete(page_id) + actions.page.destroy(data) + .then(() => { + this.props.actions.graph.hideEditPageForm() + history.goBack() + }) } } @@ -124,14 +149,14 @@ export default class PageForm extends Component { return ( <div className='box'> <h1>{title}</h1> - <form onSubmit={this.handleSubmit.bind(this)}> + <form onSubmit={this.handleSubmit}> <TextInput title="Path" name="path" required data={data} error={errorFields.has('path')} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <LabelDescription> @@ -143,32 +168,48 @@ export default class PageForm extends Component { required data={data} error={errorFields.has('title')} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <ColorInput - title='BG' + title='BG Color' name='background_color' data={data.settings} - onChange={this.handleSettingsChange.bind(this)} + onChange={this.handleSettingsChange} autoComplete="off" /> <TextArea title="Description" name="description" data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} + /> + + <AudioSelect + title="Background Audio" + name="background_audio_id" + selected={data.settings.background_audio_id} + onChange={this.handleSettingsSelect} /> + + <Checkbox + label="Restart audio on load" + name="restart_audio" + checked={data.settings.restart_audio} + onChange={this.handleSettingsSelect} + autoComplete="off" + /> + <div className='row buttons'> <SubmitButton title={submitTitle} - onClick={this.handleSubmit.bind(this)} + onClick={this.handleSubmit} /> {!isNew && <SubmitButton title={'Delete'} className='destroy' - onClick={this.handleDelete.bind(this)} + onClick={this.handleDelete} /> } </div> |