From 0916ff314e189689703c5b76d4d57f8f915ee6f8 Mon Sep 17 00:00:00 2001 From: Kevin Thomas Date: Wed, 13 Apr 2022 22:50:15 -0700 Subject: [PATCH] Add sample edit feature --- server/boot/db.js | 1 - server/routes/profiles.js | 8 +++++++- server/routes/samples.js | 7 ++----- src/components/Noise.vue | 10 ++++++---- src/components/noise.js | 32 +++++++++++++++++++++++++------- 5 files changed, 40 insertions(+), 18 deletions(-) diff --git a/server/boot/db.js b/server/boot/db.js index 9a2b186..9683a0e 100644 --- a/server/boot/db.js +++ b/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') diff --git a/server/routes/profiles.js b/server/routes/profiles.js index cb81e97..871834b 100644 --- a/server/routes/profiles.js +++ b/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) }) diff --git a/server/routes/samples.js b/server/routes/samples.js index dc6b6e6..053cd1b 100644 --- a/server/routes/samples.js +++ b/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 diff --git a/src/components/Noise.vue b/src/components/Noise.vue index 291c0fa..35199d4 100644 --- a/src/components/Noise.vue +++ b/src/components/Noise.vue @@ -19,6 +19,7 @@ fab large color="primary" + :loading="mainPlayLoading" @click="play" > mdi-play @@ -699,6 +700,7 @@ @@ -719,12 +721,12 @@ -

Sample Length (Seconds): {{ previewSampleLength }}

+

Sample Length: {{ Math.round(previewSampleLength * 100) / 100 }} Seconds

@@ -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" /> diff --git a/src/components/noise.js b/src/components/noise.js index 71a6689..fa6923b 100644 --- a/src/components/noise.js +++ b/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(() => {