Start edit sample implementation

server/boot/db.js

@@ -1,4 +1,5 @@
 const db = require('../db')
+const logger = require('../logger')
 
 module.exports = function () {
   db.serialize(() => {
@@ -51,5 +52,23 @@ module.exports = function () {
       FOREIGN KEY(profile) REFERENCES profiles(id),
       FOREIGN KEY(sample) REFERENCES samples(id))`
     )
+
+    db.get('PRAGMA user_version', (err, row) => {
+      if (err) {
+        logger.error(err)
+      } else {
+        const userVersion = row.user_version
+
+        if (userVersion === 0) {
+          db.run('ALTER TABLE samples ADD COLUMN fade_in REAL DEFAULT 0')
+          db.run('ALTER TABLE samples ADD COLUMN fade_out REAL DEFAULT 0')
+          db.run('ALTER TABLE samples ADD COLUMN loop_points_enabled INTEGER DEFAULT 0')
+          db.run('ALTER TABLE samples ADD COLUMN loop_start REAL DEFAULT 0')
+          db.run('ALTER TABLE samples ADD COLUMN loop_end REAL DEFAULT 0')
+
+          db.run('PRAGMA user_version = 1')
+        }
+      }
+    })
   })
 }

server/routes/samples.js

@@ -77,7 +77,15 @@ router.get('/samples', (req, res) => {
 
   const samples = []
 
-  db.all('SELECT id, name FROM samples WHERE user = ?', [req.user.id], (err, rows) => {
+  db.all(`SELECT
+    id,
+    name,
+    fade_in as fadeIn,
+    fade_out as fadeOut,
+    loop_points_enabled as loopPointsEnabled,
+    loop_start as loopStart,
+    loop_end as loopEnd
+    FROM samples WHERE user = ?`, [req.user.id], (err, rows) => {
     if (err) {
       logger.error(err)
       return res.sendStatus(500)
@@ -88,6 +96,11 @@ router.get('/samples', (req, res) => {
 
       sample.id = row.id
       sample.name = row.name
+      sample.fadeIn = row.fadeIn
+      sample.fadeOut = row.fadeOut
+      sample.loopPointsEnabled = row.loopPointsEnabled === 1
+      sample.loopStart = row.loopStart
+      sample.loopEnd = row.loopEnd
       sample.user = req.user.id
 
       samples.push(sample)
@@ -97,4 +110,38 @@ router.get('/samples', (req, res) => {
   })
 })
 
+router.get('/samples/:sampleId', (req, res) => {
+  if (!req.user) {
+    return res.sendStatus(401)
+  }
+
+  db.get(`SELECT
+    id,
+    name,
+    fade_in as fadeIn,
+    fade_out as fadeOut,
+    loop_points_enabled as loopPointsEnabled,
+    loop_start as loopStart,
+    loop_end as loopEnd
+    FROM samples WHERE user = ? AND id = ?`, [req.user.id, req.params.sampleId], (err, row) => {
+    if (err) {
+      logger.error(err)
+      return res.sendStatus(500)
+    }
+
+    const sample = {}
+
+    sample.id = row.id
+    sample.name = row.name
+    sample.fadeIn = row.fadeIn
+    sample.fadeOut = row.fadeOut
+    sample.loopPointsEnabled = row.loopPointsEnabled === 1
+    sample.loopStart = row.loopStart
+    sample.loopEnd = row.loopEnd
+    sample.user = req.user.id
+
+    res.json({ sample: sample })
+  })
+})
+
 module.exports = router

src/components/Noise.vue

@@ -680,6 +680,101 @@
             </v-card>
           </v-form>
         </v-dialog>
+
+        <v-dialog
+          v-model="editSampleDialog"
+          max-width="600px"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              class="mx-3 my-3 mb-5"
+              :disabled="playDisabled || allSamples.length === 0"
+              v-on="on"
+              @click="resetEditSampleForm"
+            >
+              Edit Samples
+            </v-btn>
+          </template>
+          <v-form
+            ref="editSampleForm"
+            v-model="isEditSampleValid"
+          >
+            <v-card>
+              <v-card-title>
+                <span class="text-h5">Edit Sample</span>
+              </v-card-title>
+              <v-card-text>
+                <v-container>
+                  <v-row justify="center">
+                    <v-select
+                      v-model="selectedEditSample"
+                      :items="sampleItems"
+                      item-text="name"
+                      return-object
+                      label="Samples"
+                      class="mx-3"
+                    />
+                  </v-row>
+
+                  <v-row>
+                    <v-checkbox
+                      v-model="useLoopPoints"
+                      :disabled="playDisabled"
+                      label="Use Loop Points"
+                      class="mx-3"
+                    />
+                  </v-row>
+
+                  <v-row>
+                    <v-text-field
+                      v-model="loopStart"
+                      type="number"
+                      label="Loop Start"
+                      class="mx-3"
+                      :disabled="!useLoopPoints"
+                      :rules="[rules.gt(-1)]"
+                    />
+
+                    <v-text-field
+                      v-model="loopEnd"
+                      type="number"
+                      label="Loop End"
+                      class="mx-3"
+                      :disabled="!useLoopPoints"
+                      :rules="[rules.gt(-1)]"
+                    />
+                  </v-row>
+
+                  <v-row justify="center">
+                    <v-btn
+                      class="mx-3 mt-3"
+                      @click="previewSample"
+                    >
+                      Preview Sample
+                    </v-btn>
+                  </v-row>
+                </v-container>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  text
+                  @click="editSampleDialog = false"
+                >
+                  Cancel
+                </v-btn>
+                <v-btn
+                  text
+                  :disabled="!isEditSampleValid"
+                  @click="editSample"
+                >
+                  Edit
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-form>
+        </v-dialog>
       </v-col>
 
       <v-snackbar

src/components/noise.js

@@ -1,4 +1,4 @@
-import { Filter, LFO, Noise, Players, Transport, Tremolo } from 'tone'
+import { Filter, LFO, Noise, Player, Players, Transport, Tremolo } from 'tone'
 
 export default {
   name: 'Noise',
@@ -46,6 +46,14 @@ export default {
     selectedSample: null,
     uploadSampleDialog: false,
     addSampleDialog: false,
+    editSampleDialog: false,
+    useLoopPoints: false,
+    loopStart: 0,
+    loopEnd: 0,
+    samplePreviewPlaying: false,
+    selectedEditSample: {},
+    sampleItems: [],
+    isEditSampleValid: false,
     checkedSamples: [],
     sampleName: '',
     isSampleUploadValid: false,
@@ -81,8 +89,10 @@ export default {
     this.filter = new Filter()
     this.tremolo = new Tremolo()
     this.lfo = new LFO()
+    this.samplePreviewPlayer = new Player()
     this.players = new Players()
     this.populateProfileItems(0)
+    this.populateSampleItems()
     this.getSamples()
     this.getCurrentUser()
   },
@@ -117,6 +127,15 @@ export default {
         this.lfo.connect(this.filter.frequency).start()
       }
 
+      this.loadedSamples.forEach(s => {
+        this.players.player(s.id).loop = true
+        this.players.player(s.id).fadeIn = s.fadeIn
+        this.players.player(s.id).fadeOut = s.fadeOut
+        if (s.loopPointEnabled) {
+          this.players.player(s.id).setLoopPoints(s.loopStart, s.loopEnd)
+        }
+      })
+
       if (this.isTimerEnabled) {
         this.duration = parseInt((this.hours * 3600)) + parseInt((this.minutes * 60)) + parseInt(this.seconds)
         this.noise.sync().start(0).stop(this.duration)
@@ -126,14 +145,12 @@ export default {
         this.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
 
         this.loadedSamples.forEach(s => {
-          this.players.player(s.id).loop = true
           this.players.player(s.id).unsync().sync().start(0).stop(this.duration)
         })
       } else {
         this.noise.sync().start(0)
 
         this.loadedSamples.forEach(s => {
-          this.players.player(s.id).loop = true
           this.players.player(s.id).unsync().sync().start(0)
         })
       }
@@ -225,6 +242,17 @@ export default {
           }
         })
     },
+    populateSampleItems () {
+      this.$http.get('/samples')
+        .then(response => {
+          if (response.status === 200) {
+            this.sampleItems = response.data.samples
+            if (this.sampleItems.length > 0) {
+              this.selectedEditSample = this.sampleItems[0]
+            }
+          }
+        })
+    },
     addDefaultProfile () {
       this.$http.post('/profiles/default')
         .then(response => {
@@ -364,6 +392,7 @@ export default {
         .then(response => {
           if (response.status === 200) {
             this.getSamples()
+            this.populateSampleItems()
             this.infoSnackbarText = 'Sample Uploaded'
             this.infoSnackbar = true
           }
@@ -415,6 +444,11 @@ export default {
         this.$refs.uploadSampleForm.reset()
       }
     },
+    resetEditSampleForm () {
+      if (this.$refs.editSampleForm) {
+        this.$refs.editSampleForm.reset()
+      }
+    },
     openImportDialog () {
       this.profileMoreDialog = false
       this.importDialog = true
@@ -510,6 +544,29 @@ export default {
         })
 
       this.exportDialog = false
+    },
+    previewSample () {
+      this.samplePreviewPlayer.toDestination()
+
+      if (this.samplePreviewPlaying) {
+        this.samplePreviewPlayer.stop()
+        this.samplePreviewPlaying = false
+      } else {
+        this.$http.get('/samples/'.concat(this.selectedEditSample.id))
+          .then(async response => {
+            if (response.status === 200) {
+              const sample = response.data.sample
+
+              await this.samplePreviewPlayer.load('/samples/' + sample.user + '_' + sample.name)
+              this.samplePreviewPlayer.loop = true
+              this.samplePreviewPlayer.start()
+
+              this.samplePreviewPlaying = true
+            }
+          })
+      }
+    },
+    editSample () {
     }
   }
 }