Continue edit sample implementation

server/routes/samples.js

@@ -81,7 +81,6 @@ router.get('/samples', (req, res) => {
     id,
     name,
     fade_in as fadeIn,
-    fade_out as fadeOut,
     loop_points_enabled as loopPointsEnabled,
     loop_start as loopStart,
     loop_end as loopEnd
@@ -97,7 +96,6 @@ 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
@@ -119,7 +117,6 @@ router.get('/samples/:sampleId', (req, res) => {
     id,
     name,
     fade_in as fadeIn,
-    fade_out as fadeOut,
     loop_points_enabled as loopPointsEnabled,
     loop_start as loopStart,
     loop_end as loopEnd
@@ -134,7 +131,6 @@ router.get('/samples/:sampleId', (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
@@ -144,4 +140,47 @@ router.get('/samples/:sampleId', (req, res) => {
   })
 })
 
+router.put('/samples/:sampleId', (req, res) => {
+  if (!req.user) {
+    return res.sendStatus(401)
+  }
+
+  db.serialize(() => {
+    db.get('SELECT user FROM samples WHERE id = ?', [req.params.sampleId], (err, row) => {
+      if (err) {
+        logger.error(err)
+        return res.sendStatus(500)
+      }
+
+      if (row.user.toString() !== req.user.id) {
+        return res.sendStatus(401)
+      }
+    })
+
+    db.run(`UPDATE samples SET
+      name = ?,
+      fade_in = ?,
+      fade_out = ?,
+      loop_points_enabled = ?,
+      loop_start = ?,
+      loop_end = ?,
+      WHERE id = ?`, [
+      req.body.name,
+      req.body.fadeIn,
+      req.body.loopPointsEnabled,
+      req.body.loopStart,
+      req.body.loopEnd,
+      req.params.sampleId
+    ],
+    (err) => {
+      if (err) {
+        logger.error(err)
+        return res.sendStatus(500)
+      }
+
+      return res.sendStatus(200)
+    })
+  })
+})
+
 module.exports = router

src/components/Noise.vue

@@ -691,7 +691,7 @@
               class="mx-3 my-3 mb-5"
               :disabled="playDisabled || allSamples.length === 0"
               v-on="on"
-              @click="resetEditSampleForm"
+              @click="openEditSampleForm"
             >
               Edit Samples
             </v-btn>
@@ -714,13 +714,18 @@
                       return-object
                       label="Samples"
                       class="mx-3"
+                      @change="loadEditSample"
                     />
                   </v-row>
 
+                  <v-row>
+                    <p>Sample Length (Seconds): {{ previewSampleLength }} </p>
+                  </v-row>
+
                   <v-row>
                     <v-checkbox
                       v-model="useLoopPoints"
-                      :disabled="playDisabled"
+                      :disabled="samplePreviewPlaying"
                       label="Use Loop Points"
                       class="mx-3"
                     />
@@ -730,28 +735,43 @@
                     <v-text-field
                       v-model="loopStart"
                       type="number"
-                      label="Loop Start"
+                      label="Loop Start Time"
                       class="mx-3"
-                      :disabled="!useLoopPoints"
+                      :disabled="!useLoopPoints || samplePreviewPlaying"
                       :rules="[rules.gt(-1)]"
+                      @change="updatePreviewSamplePlayerLoopPoints"
                     />
 
                     <v-text-field
                       v-model="loopEnd"
                       type="number"
-                      label="Loop End"
+                      label="Loop End Time"
                       class="mx-3"
-                      :disabled="!useLoopPoints"
+                      :disabled="!useLoopPoints || samplePreviewPlaying"
+                      :rules="[rules.gt(-1), rules.lt(previewSampleLength)]"
+                      @change="updatePreviewSamplePlayerLoopPoints"
+                    />
+                  </v-row>
+
+                  <v-row>
+                    <v-text-field
+                      v-model="fadeIn"
+                      type="number"
+                      label="Fade In Time"
+                      class="mx-3"
+                      :disabled="samplePreviewPlaying"
                       :rules="[rules.gt(-1)]"
+                      @change="updatePreviewSamplePlayerFadeIn"
                     />
                   </v-row>
 
                   <v-row justify="center">
                     <v-btn
                       class="mx-3 mt-3"
+                      :loading="previewSampleLoading"
                       @click="previewSample"
                     >
-                      Preview Sample
+                      {{ previewSampleButtonText }}
                     </v-btn>
                   </v-row>
                 </v-container>
@@ -760,7 +780,7 @@
                 <v-spacer />
                 <v-btn
                   text
-                  @click="editSampleDialog = false"
+                  @click="closeEditSampleForm"
                 >
                   Cancel
                 </v-btn>

src/components/noise.js

@@ -47,13 +47,18 @@ export default {
     uploadSampleDialog: false,
     addSampleDialog: false,
     editSampleDialog: false,
+    editSampleName: '',
     useLoopPoints: false,
     loopStart: 0,
     loopEnd: 0,
+    fadeIn: 0,
     samplePreviewPlaying: false,
     selectedEditSample: {},
     sampleItems: [],
     isEditSampleValid: false,
+    previewSampleButtonText: 'Preview Sample',
+    previewSampleLoading: true,
+    previewSampleLength: 0,
     checkedSamples: [],
     sampleName: '',
     isSampleUploadValid: false,
@@ -89,7 +94,8 @@ export default {
     this.filter = new Filter()
     this.tremolo = new Tremolo()
     this.lfo = new LFO()
-    this.samplePreviewPlayer = new Player()
+    this.samplePreviewPlayer = new Player().toDestination()
+    this.samplePreviewPlayer.loop = true
     this.players = new Players()
     this.populateProfileItems(0)
     this.populateSampleItems()
@@ -130,7 +136,6 @@ export default {
       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)
         }
@@ -444,10 +449,16 @@ export default {
         this.$refs.uploadSampleForm.reset()
       }
     },
-    resetEditSampleForm () {
+    openEditSampleForm () {
-      if (this.$refs.editSampleForm) {
+      if (this.sampleItems.length > 0) {
-        this.$refs.editSampleForm.reset()
+        this.selectedEditSample = this.sampleItems[0]
       }
+
+      this.loadEditSample()
+    },
+    closeEditSampleForm () {
+      this.editSampleDialog = false
+      this.previewSampleLoading = true
     },
     openImportDialog () {
       this.profileMoreDialog = false
@@ -545,28 +556,67 @@ export default {
 
       this.exportDialog = false
     },
-    previewSample () {
+    updatePreviewSamplePlayerFadeIn () {
-      this.samplePreviewPlayer.toDestination()
+      this.samplePreviewPlayer.fadeIn = this.fadeIn
+    },
+    updatePreviewSamplePlayerLoopPoints () {
+      if (this.loopStart >= 0 && this.loopEnd <= this.previewSampleLength) {
+        this.samplePreviewPlayer.setLoopPoints(this.loopStart, this.loopEnd)
+      }
+    },
+    loadEditSample () {
+      this.previewSampleLoading = true
+      this.$http.get('/samples/'.concat(this.selectedEditSample.id))
+        .then(async response => {
+          if (response.status === 200) {
+            const sample = response.data.sample
 
-      if (this.samplePreviewPlaying) {
+            this.fadeIn = sample.fadeIn
-        this.samplePreviewPlayer.stop()
+            if (sample.loopPointsEnabled) {
-        this.samplePreviewPlaying = false
+              this.loopStart = sample.loopStart
-      } else {
+              this.loopEnd = sample.loopEnd
-        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.setLoopPoints(this.loopStart, this.loopEnd)
-              this.samplePreviewPlayer.loop = true
-              this.samplePreviewPlayer.start()
-
-              this.samplePreviewPlaying = true
             }
-          })
+
+            this.samplePreviewPlayer.fadeIn = this.fadeIn
+
+            await this.samplePreviewPlayer.load('/samples/' + sample.user + '_' + sample.name)
+
+            this.previewSampleLength = this.samplePreviewPlayer.buffer.duration
+
+            this.previewSampleLoading = false
+          }
+        })
+    },
+    previewSample () {
+      if (this.samplePreviewPlaying) {
+        this.samplePreviewPlaying = false
+        this.previewSampleButtonText = 'Preview Sample'
+        this.samplePreviewPlayer.stop()
+      } else {
+        this.samplePreviewPlaying = true
+        this.previewSampleButtonText = 'Stop'
+        this.samplePreviewPlayer.start()
       }
     },
     editSample () {
+      this.$http.put('/samples/'.concat(this.selectedEditSample.id), {
+        name: this.editSampleName,
+        fadeIn: this.fadeIn,
+        loopPointsEnabled: this.loopPointEnabled,
+        loopStart: this.loopStart,
+        loopEnd: this.loopEnd
+      }).then(response => {
+        if (response.status === 200) {
+          this.infoSnackbarText = 'Sample Saved'
+          this.infoSnackbar = true
+        }
+      })
+        .catch(() => {
+          this.errorSnackbarText = 'Error Saving Sample'
+          this.errorSnackbar = true
+        })
     }
   }
 }