From 15d9d864b539e221c6494b3535abef724517f207 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 16 Mar 2021 18:19:26 +0100
Subject: uploading audio files and displaying them in a list

---
 frontend/app/views/graph/components/audio.list.js  | 150 +++++++++++++++++++++
 .../app/views/graph/components/graph.header.js     |   1 +
 2 files changed, 151 insertions(+)
 create mode 100644 frontend/app/views/graph/components/audio.list.js

(limited to 'frontend/app/views/graph/components')

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..bd8fe16
--- /dev/null
+++ b/frontend/app/views/graph/components/audio.list.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+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)
+    console.log(playing, play_id)
+    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 unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '')
+
+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 b969400..0766580 100644
--- a/frontend/app/views/graph/components/graph.header.js
+++ b/frontend/app/views/graph/components/graph.header.js
@@ -14,6 +14,7 @@ function GraphHeader(props) {
       </div>
       <div>
         <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button>
+        <button onClick={() => props.graphActions.toggleAudioList()}>+ Audio</button>
       </div>
     </header>
   )
-- 
cgit v1.2.3-70-g09d2