Add sample edit feature

server/boot/db.js

@@ -61,7 +61,6 @@ module.exports = function () {
 
         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')

server/routes/profiles.js

@@ -351,7 +351,9 @@ router.get('/profiles/:profileId', (req, res) => {
           sampleQueryArgs.push(row.sample)
         })
 
-        db.all(`SELECT samples.id, name, profiles_samples.volume
+        db.all(`SELECT samples.id, name, profiles_samples.volume,
+          fade_in as fadeIn, loop_points_enabled as loopPointsEnabled,
+          loop_start as loopStart, loop_end as loopEnd
           FROM samples
           INNER JOIN profiles_samples
           ON profiles_samples.sample = samples.id
@@ -371,6 +373,10 @@ router.get('/profiles/:profileId', (req, res) => {
             sample.id = row.id
             sample.name = row.name
             sample.volume = row.volume
+            sample.fadeIn = row.fadeIn
+            sample.loopPointsEnabled = row.loopPointsEnabled === 1
+            sample.loopStart = row.loopStart
+            sample.loopEnd = row.loopEnd
 
             samples.push(sample)
           })

server/routes/samples.js

@@ -158,16 +158,13 @@ router.put('/samples/:sampleId', (req, res) => {
     })
 
     db.run(`UPDATE samples SET
-      name = ?,
       fade_in = ?,
-      fade_out = ?,
       loop_points_enabled = ?,
       loop_start = ?,
-      loop_end = ?,
+      loop_end = ?
       WHERE id = ?`, [
-      req.body.name,
       req.body.fadeIn,
-      req.body.loopPointsEnabled,
+      req.body.loopPointsEnabled ? 1 : 0,
       req.body.loopStart,
       req.body.loopEnd,
       req.params.sampleId

src/components/Noise.vue

@@ -19,6 +19,7 @@
             fab
             large
             color="primary"
+            :loading="mainPlayLoading"
             @click="play"
           >
             <v-icon>mdi-play</v-icon>
@@ -699,6 +700,7 @@
           <v-form
             ref="editSampleForm"
             v-model="isEditSampleValid"
+            lazy-validation
           >
             <v-card>
               <v-card-title>
@@ -719,12 +721,12 @@
                   </v-row>
 
                   <v-row>
-                    <p>Sample Length (Seconds): {{ previewSampleLength }} </p>
+                    <p>Sample Length: {{ Math.round(previewSampleLength * 100) / 100 }} Seconds </p>
                   </v-row>
 
                   <v-row>
                     <v-checkbox
-                      v-model="useLoopPoints"
+                      v-model="loopPointsEnabled"
                       :disabled="samplePreviewPlaying"
                       label="Use Loop Points"
                       class="mx-3"
@@ -737,7 +739,7 @@
                       type="number"
                       label="Loop Start Time"
                       class="mx-3"
-                      :disabled="!useLoopPoints || samplePreviewPlaying"
+                      :disabled="!loopPointsEnabled || samplePreviewPlaying"
                       :rules="[rules.gt(-1)]"
                       @change="updatePreviewSamplePlayerLoopPoints"
                     />
@@ -747,7 +749,7 @@
                       type="number"
                       label="Loop End Time"
                       class="mx-3"
-                      :disabled="!useLoopPoints || samplePreviewPlaying"
+                      :disabled="!loopPointsEnabled || samplePreviewPlaying"
                       :rules="[rules.gt(-1), rules.lt(previewSampleLength)]"
                       @change="updatePreviewSamplePlayerLoopPoints"
                     />

src/components/noise.js

@@ -4,6 +4,7 @@ export default {
   name: 'Noise',
 
   data: () => ({
+    mainPlayLoading: true,
     isTimerValid: false,
     selectedProfile: {},
     profileItems: [],
@@ -47,8 +48,7 @@ export default {
     uploadSampleDialog: false,
     addSampleDialog: false,
     editSampleDialog: false,
-    editSampleName: '',
-    useLoopPoints: false,
+    loopPointsEnabled: false,
     loopStart: 0,
     loopEnd: 0,
     fadeIn: 0,
@@ -107,6 +107,10 @@ export default {
   },
   methods: {
     play () {
+      if (!this.players.loaded) {
+        return
+      }
+
       this.playDisabled = true
       Transport.cancel()
 
@@ -136,9 +140,10 @@ export default {
       this.loadedSamples.forEach(s => {
         this.players.player(s.id).loop = true
         this.players.player(s.id).fadeIn = s.fadeIn
-        if (s.loopPointEnabled) {
+        if (s.loopPointsEnabled) {
           this.players.player(s.id).setLoopPoints(s.loopStart, s.loopEnd)
         }
+        this.players.player(s.id).volume.value = s.volume
       })
 
       if (this.isTimerEnabled) {
@@ -380,6 +385,7 @@ export default {
                 this.players.add(s.id, '/samples/' + s.user + '_' + s.name).toDestination()
               }
             })
+            this.mainPlayLoading = false
           }
         })
     },
@@ -459,6 +465,11 @@ export default {
     closeEditSampleForm () {
       this.editSampleDialog = false
       this.previewSampleLoading = true
+      if (this.samplePreviewPlaying) {
+        this.samplePreviewPlaying = false
+        this.previewSampleButtonText = 'Preview Sample'
+        this.samplePreviewPlayer.stop()
+      }
     },
     openImportDialog () {
       this.profileMoreDialog = false
@@ -571,18 +582,22 @@ export default {
           if (response.status === 200) {
             const sample = response.data.sample
 
+            await this.samplePreviewPlayer.load('/samples/' + sample.user + '_' + sample.name)
+
             this.fadeIn = sample.fadeIn
+            this.loopPointsEnabled = sample.loopPointsEnabled
             if (sample.loopPointsEnabled) {
               this.loopStart = sample.loopStart
               this.loopEnd = sample.loopEnd
 
               this.samplePreviewPlayer.setLoopPoints(this.loopStart, this.loopEnd)
+            } else {
+              this.loopStart = 0
+              this.loopEnd = 0
             }
 
             this.samplePreviewPlayer.fadeIn = this.fadeIn
 
-            await this.samplePreviewPlayer.load('/samples/' + sample.user + '_' + sample.name)
-
             this.previewSampleLength = this.samplePreviewPlayer.buffer.duration
 
             this.previewSampleLoading = false
@@ -602,15 +617,18 @@ export default {
     },
     editSample () {
       this.$http.put('/samples/'.concat(this.selectedEditSample.id), {
-        name: this.editSampleName,
         fadeIn: this.fadeIn,
-        loopPointsEnabled: this.loopPointEnabled,
+        loopPointsEnabled: this.loopPointsEnabled,
         loopStart: this.loopStart,
         loopEnd: this.loopEnd
       }).then(response => {
         if (response.status === 200) {
           this.infoSnackbarText = 'Sample Saved'
           this.infoSnackbar = true
+
+          this.getSamples()
+          this.loadProfile()
+          this.closeEditSampleForm()
         }
       })
         .catch(() => {