From 37dc916dccefce6be2f1b9fdbb25255fb7d91351 Mon Sep 17 00:00:00 2001 From: Kevin Thomas Date: Mon, 11 Apr 2022 21:38:46 -0700 Subject: [PATCH] Continue edit sample implementation --- server/routes/samples.js | 47 ++++++++++++++++++-- src/components/Noise.vue | 36 ++++++++++++---- src/components/noise.js | 92 +++++++++++++++++++++++++++++++--------- 3 files changed, 142 insertions(+), 33 deletions(-) diff --git a/server/routes/samples.js b/server/routes/samples.js index c3a69cb..dc6b6e6 100644 --- a/server/routes/samples.js +++ b/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 diff --git a/src/components/Noise.vue b/src/components/Noise.vue index 497dbac..291c0fa 100644 --- a/src/components/Noise.vue +++ b/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 @@ -714,13 +714,18 @@ return-object label="Samples" class="mx-3" + @change="loadEditSample" /> + +

Sample Length (Seconds): {{ previewSampleLength }}

+ + @@ -730,28 +735,43 @@ + + + + - Preview Sample + {{ previewSampleButtonText }} @@ -760,7 +780,7 @@ Cancel diff --git a/src/components/noise.js b/src/components/noise.js index 0e2f44c..71a6689 100644 --- a/src/components/noise.js +++ b/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 () { - if (this.$refs.editSampleForm) { - this.$refs.editSampleForm.reset() + openEditSampleForm () { + if (this.sampleItems.length > 0) { + 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 () { - this.samplePreviewPlayer.toDestination() + updatePreviewSamplePlayerFadeIn () { + 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.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 + this.fadeIn = sample.fadeIn + if (sample.loopPointsEnabled) { + this.loopStart = sample.loopStart + this.loopEnd = sample.loopEnd - await this.samplePreviewPlayer.load('/samples/' + sample.user + '_' + sample.name) - this.samplePreviewPlayer.loop = true - this.samplePreviewPlayer.start() - - this.samplePreviewPlaying = true + this.samplePreviewPlayer.setLoopPoints(this.loopStart, this.loopEnd) } - }) + + 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 + }) } } }