Merge pull request #40 from kaythomas0/v0.6.6

v0.6.6

.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    target-branch: "dev"
+    labels:
+      - "dependencies"

README.md

@@ -11,7 +11,7 @@ Self-hostable web tool for generating ambient noises
 * Generate and customize ambient noises and user-uploadable samples (leveraging [Tone.js](https://github.com/Tonejs/Tone.js/))
 * Save "noise profiles" so you can easily switch between your created soundscapes. Import and export them for easy sharing, record them for use elsewhere
 * Fine-tune your noises with audio processing tools like filters, LFOs, and effects
-* Upload and edit audio samples (e.g rain, wind, thunder) to combine with your generated noises
+* Upload and edit audio samples (e.g rain, wind, thunder) to combine with your generated noises. Add effects to them and set playback modes
 * Use admin tools to manage multiple users
 * Mobile friendly
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "noisedash",
-  "version": "0.6.0",
+  "version": "0.6.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3972,9 +3972,9 @@
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
+          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
           "dev": true,
           "requires": {
             "big.js": "^5.2.2",
@@ -8142,9 +8142,9 @@
       "dev": true
     },
     "loader-utils": {
-      "version": "2.0.2",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
       "dev": true,
       "requires": {
         "big.js": "^5.2.2",
@@ -11279,9 +11279,9 @@
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
+          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
           "dev": true,
           "requires": {
             "big.js": "^5.2.2",
@@ -11308,9 +11308,9 @@
       "dev": true
     },
     "vuetify": {
-      "version": "2.6.6",
+      "version": "2.6.10",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.6.tgz",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.10.tgz",
-      "integrity": "sha512-H4KtxDFmDN8QiTRiGfBySyjMhVaHAJTKB0llGGKZT5jKxtnx9gvEtMWXKtVuRP0NJJP0H6xBPJHNOH7nT18qiQ=="
+      "integrity": "sha512-fgUeRDDCwYkwu6WGEEKGe7IdfzOsXJCZGrqkn1pcS2ycuoDL8mR2/dejH5iFNnBY6MnsT365PAGn0J+9otjfQg=="
     },
     "vuetify-loader": {
       "version": "1.7.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "noisedash",
-  "version": "0.6.0",
+  "version": "0.6.6",
   "private": true,
   "author": "Kay Thomas <kaythomas@pm.me> (https://kaythomas.dev)",
   "scripts": {
@@ -27,7 +27,7 @@
     "tone": "^14.7.77",
     "vue": "^2.6.11",
     "vue-router": "^3.5.4",
-    "vuetify": "^2.6.6",
+    "vuetify": "^2.6.10",
     "winston": "^3.3.3"
   },
   "devDependencies": {

server/app.js

@@ -36,7 +36,8 @@ app.use(session({
   store: new FileStore(fileStoreOptions),
   secret: sessionSecret,
   resave: true,
-  saveUninitialized: true
+  saveUninitialized: true,
+  cookie: { sameSite: 'strict' }
 }))
 app.use((req, res, next) => {
   const msgs = req.session.messages || []

server/boot/db.js

@@ -59,32 +59,46 @@ module.exports = function () {
       } else {
         const userVersion = row.user_version
 
-        if (userVersion < 1) {
+        db.serialize(() => {
-          db.run('ALTER TABLE samples ADD COLUMN fade_in REAL DEFAULT 0')
+          if (userVersion < 1) {
-          db.run('ALTER TABLE samples ADD COLUMN loop_points_enabled INTEGER DEFAULT 0')
+            db.run('ALTER TABLE samples ADD COLUMN fade_in REAL DEFAULT 0')
-          db.run('ALTER TABLE samples ADD COLUMN loop_start REAL DEFAULT 0')
+            db.run('ALTER TABLE samples ADD COLUMN loop_points_enabled INTEGER DEFAULT 0')
-          db.run('ALTER TABLE samples ADD COLUMN loop_end REAL 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')
+            db.run('PRAGMA user_version = 1')
-        }
+          }
 
-        if (userVersion < 2) {
+          if (userVersion < 2) {
-          db.run('ALTER TABLE users ADD COLUMN preferences TEXT DEFAULT "{}"')
+            db.run('ALTER TABLE users ADD COLUMN preferences TEXT DEFAULT "{}"')
 
-          db.run('PRAGMA user_version = 2')
+            db.run('PRAGMA user_version = 2')
-        }
+          }
 
-        if (userVersion < 3) {
+          if (userVersion < 3) {
-          db.run('ALTER TABLE profiles_samples ADD COLUMN reverb_enabled INTEGER DEFAULT 0')
+            db.run('ALTER TABLE profiles_samples ADD COLUMN reverb_enabled INTEGER DEFAULT 0')
-          db.run('ALTER TABLE profiles_samples ADD COLUMN reverb_pre_delay REAL DEFAULT 0')
+            db.run('ALTER TABLE profiles_samples ADD COLUMN reverb_pre_delay REAL DEFAULT 0')
-          db.run('ALTER TABLE profiles_samples ADD COLUMN reverb_decay REAL DEFAULT 0')
+            db.run('ALTER TABLE profiles_samples ADD COLUMN reverb_decay REAL DEFAULT 0')
-          db.run('ALTER TABLE profiles_samples ADD COLUMN reverb_wet INTEGER DEFAULT 0')
+            db.run('ALTER TABLE profiles_samples ADD COLUMN reverb_wet INTEGER DEFAULT 0')
-          db.run('ALTER TABLE profiles_samples ADD COLUMN playback_mode TEXT DEFAULT "continuous"')
+            db.run('ALTER TABLE profiles_samples ADD COLUMN playback_mode TEXT DEFAULT "continuous"')
-          db.run('ALTER TABLE profiles_samples ADD COLUMN sporadic_min INTEGER DEFAULT 30')
+            db.run('ALTER TABLE profiles_samples ADD COLUMN sporadic_min INTEGER DEFAULT 30')
-          db.run('ALTER TABLE profiles_samples ADD COLUMN sporadic_max INTEGER DEFAULT 300')
+            db.run('ALTER TABLE profiles_samples ADD COLUMN sporadic_max INTEGER DEFAULT 300')
 
-          db.run('PRAGMA user_version = 3')
+            db.run('PRAGMA user_version = 3')
-        }
+          }
+
+          if (userVersion < 4) {
+            db.run('UPDATE users SET preferences = ? WHERE preferences = ?',
+              ['{"accentColor":{"alpha":1,"hex":"#607D8B","hexa":"#607D8BFF","hsla":{"h":200,"s":18,"l":46,"a":1},"hsva":{"h":200,"s":31,"v":55,"a":1},"hue":200,"rgba":{"r":96,"g":125,"b":139,"a":1}}}', '{}'],
+              (err) => {
+                if (err) {
+                  logger.error(err)
+                } else {
+                  db.run('PRAGMA user_version = 4')
+                }
+              })
+          }
+        })
       }
     })
   })

server/routes/users.js

@@ -72,6 +72,8 @@ router.post('/users', (req, res) => {
         return res.sendStatus(500)
       }
 
+      const defaultPreferences = '{"accentColor":{"alpha":1,"hex":"#607D8B","hexa":"#607D8BFF","hsla":{"h":200,"s":18,"l":46,"a":1},"hsva":{"h":200,"s":31,"v":55,"a":1},"hue":200,"rgba":{"r":96,"g":125,"b":139,"a":1}}}'
+
       if (row.count !== 0) {
         if (!req.user) {
           return res.sendStatus(401)
@@ -94,15 +96,16 @@ router.post('/users', (req, res) => {
               return res.sendStatus(500)
             }
 
-            db.run(`INSERT INTO users (username, hashed_password, salt, name, is_admin, dark_mode, can_upload)
+            db.run(`INSERT INTO users (username, hashed_password, salt, name, is_admin, dark_mode, can_upload, preferences)
-              VALUES (?, ?, ?, ?, ?, ?, ?)`, [
+              VALUES (?, ?, ?, ?, ?, ?, ?, ?)`, [
               req.body.username,
               hashedPassword,
               salt,
               req.body.name,
               req.body.isAdmin,
               req.body.darkMode,
-              req.body.canUpload
+              req.body.canUpload,
+              defaultPreferences
             ], (err) => {
               if (err) {
                 logger.error(err)
@@ -125,15 +128,16 @@ router.post('/users', (req, res) => {
             return res.sendStatus(500)
           }
 
-          db.run(`INSERT INTO users (username, hashed_password, salt, name, is_admin, dark_mode, can_upload)
+          db.run(`INSERT INTO users (username, hashed_password, salt, name, is_admin, dark_mode, can_upload, preferences)
-            VALUES (?, ?, ?, ?, ?, ?, ?)`, [
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?)`, [
             req.body.username,
             hashedPassword,
             salt,
             req.body.name,
             req.body.isAdmin,
             req.body.darkMode,
-            req.body.canUpload
+            req.body.canUpload,
+            defaultPreferences
           ], function (err) {
             if (err) {
               logger.error(err)

src/components/NoisePage.vue

@@ -14,7 +14,7 @@
 
         <v-row justify="center">
           <v-btn
-            :disabled="playDisabled || !isTimerValid || !isSporadicValid"
+            :disabled="playDisabled || !isTimerValid || (loadedSamples.length != 0 && !isSporadicValid)"
             class="mx-3 mb-5"
             fab
             large
@@ -50,7 +50,7 @@
             label="Profiles"
             class="mx-3 mb-5"
             :disabled="playDisabled"
-            @change="loadProfile"
+            @change="loadProfile(true)"
           />
         </v-row>
 
@@ -297,7 +297,7 @@
               <v-card-text>
                 <v-container>
                   <v-row>
-                    <p>Select profile to record audio for. This is only supported on Chrome and Firefox.</p>
+                    <p>Select profile to record audio for. This is only supported on Chrome and Firefox. Current profile will be saved before recording.</p>
                   </v-row>
                   <v-row>
                     <v-select
@@ -640,7 +640,7 @@
         v-if="canUpload"
         cols="12"
       >
-        <h2 class="display-1 font-weight-bold mb-7">
+        <h2 class="display-1 font-weight-bold mb-5">
           Samples
         </h2>
 
@@ -776,7 +776,6 @@
             </v-row>
 
             <v-row
-              justify="center"
               class="mb-5"
             >
               <v-radio-group
@@ -785,11 +784,11 @@
                 mandatory
               >
                 <v-radio
-                  label="Continuous"
+                  label="Continuous (Looped)"
                   value="continuous"
                 />
                 <v-radio
-                  label="Sporadic"
+                  label="Sporadic (Not Looped, Plays Randomly Within Interval)"
                   value="sporadic"
                 />
               </v-radio-group>
@@ -807,7 +806,7 @@
                   label="Sporadic Min"
                   class="mx-3"
                   :disabled="sample.playbackMode != 'sporadic' || playDisabled"
-                  :rules="[validateSporadicRange(sample)]"
+                  :rules="[rules.gt(-1)]"
                 />
 
                 <v-text-field
@@ -816,30 +815,13 @@
                   label="Sporadic Max"
                   class="mx-3"
                   :disabled="sample.playbackMode != 'sporadic' || playDisabled"
-                  :rules="[validateSporadicRange(sample)]"
+                  :rules="[rules.gt(0)]"
                 />
               </v-row>
             </v-form>
 
-            <v-row
-              justify="center"
-              class="my-7"
-            >
-              <p
-                v-if="sample.playbackMode != 'sporadic'"
-                class="text--disabled"
-              >
-                (Sample will play randomly, every {{ sample.sporadicMin }} to {{ sample.sporadicMax }} seconds)
-              </p>
-              <p
-                v-else
-              >
-                (Sample will play randomly, every {{ sample.sporadicMin }} to {{ sample.sporadicMax }} seconds)
-              </p>
-            </v-row>
-
             <v-divider
-              class="mb-7"
+              class="mt-7"
             />
           </v-container>
         </v-row>
@@ -1044,7 +1026,7 @@
                     <v-text-field
                       v-model="previewSampleFadeIn"
                       type="number"
-                      label="Fade In Time"
+                      label="Fade In Time (In continuous mode, this only effects first playback)"
                       :disabled="previewSamplePlaying"
                       :rules="[rules.gt(-1)]"
                       @change="updatePreviewSamplePlayerFadeIn"

src/components/noise.js

@@ -155,11 +155,13 @@ export default {
     this.stop()
   },
   methods: {
-    play () {
+    async play () {
       if (!this.players.loaded) {
         return
       }
 
+      await Tone.start()
+
       this.playDisabled = true
       Tone.Transport.cancel()
 
@@ -186,6 +188,18 @@ export default {
         this.lfo.connect(this.filter.frequency).start()
       }
 
+      if (this.isTimerEnabled) {
+        this.duration = parseInt((this.hours * 3600)) + parseInt((this.minutes * 60)) + parseInt(this.seconds)
+        this.timeRemaining = this.duration
+        this.transportInterval = setInterval(() => this.stop(), this.duration * 1000 + 100)
+        this.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
+        Tone.Transport.loopEnd = this.duration
+
+        this.noise.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).fadeIn = s.fadeIn
@@ -204,37 +218,27 @@ export default {
         } else {
           this.players.player(s.id).toDestination()
         }
-      })
 
-      if (this.isTimerEnabled) {
+        if (s.playbackMode === 'sporadic') {
-        this.duration = parseInt((this.hours * 3600)) + parseInt((this.minutes * 60)) + parseInt(this.seconds)
+          this.players.player(s.id).loop = false
-        this.noise.sync().start(0).stop(this.duration)
-        Tone.Transport.loopEnd = this.duration
-        this.timeRemaining = this.duration
-        this.transportInterval = setInterval(() => this.stop(), this.duration * 1000 + 100)
-        this.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
 
-        this.loadedSamples.forEach(s => {
+          const maxInt = parseInt(s.sporadicMax, 10)
-          this.players.player(s.id).unsync().sync().start(0).stop(this.duration)
+          const minInt = parseInt(s.sporadicMin, 10)
-        })
-      } else {
-        this.noise.sync().start(0)
 
-        this.loadedSamples.forEach(s => {
+          if (minInt <= maxInt) {
-          if (s.playbackMode === 'sporadic') {
-            this.players.player(s.id).loop = false
-
-            const maxInt = parseInt(s.sporadicMax, 10)
-            const minInt = parseInt(s.sporadicMin, 10)
             const rand = Math.floor(Math.random() * (maxInt - minInt + 1) + minInt)
-
             s.initialSporadicPlayInterval = setInterval(() => this.playSporadicSample(s.id), rand * 1000)
+          }
+        } else {
+          this.players.player(s.id).loop = true
+
+          if (this.isTimerEnabled) {
+            this.players.player(s.id).unsync().sync().start(0).stop(this.duration)
           } else {
-            this.players.player(s.id).loop = true
             this.players.player(s.id).unsync().sync().start(0)
           }
-        })
+        }
-      }
+      })
 
       Tone.Transport.start('+0.1')
     },
@@ -340,7 +344,7 @@ export default {
               }
               this.exportedProfile = this.profileItems[0]
               this.recordedProfile = this.profileItems[0]
-              this.loadProfile()
+              this.loadProfile(true)
             }
           }
         })
@@ -416,8 +420,8 @@ export default {
           this.errorSnackbar = true
         })
     },
-    loadProfile () {
+    loadProfile (checkForUnsavedWork) {
-      if (this.unsavedWork) {
+      if (checkForUnsavedWork && this.unsavedWork) {
         this.confirmSwitchProfileDialog = true
       } else {
         this.$http.get('/profiles/'.concat(this.selectedProfile.id))
@@ -732,7 +736,16 @@ export default {
       }).then(response => {
         if (response.status === 200) {
           this.getSamples()
-          this.loadProfile()
+
+          //  Update sample if it's already loaded in current profile
+          const sample = this.loadedSamples.find(s => s.id === this.selectedPreviewSample.id)
+          if (sample) {
+            sample.fadeIn = this.previewSampleFadeIn
+            sample.loopPointsEnabled = this.previewSampleLoopPointsEnabled
+            sample.loopStart = this.previewSampleLoopStart
+            sample.loopEnd = this.previewSampleLoopEnd
+          }
+
           this.closeEditSampleForm()
           this.infoSnackbarText = 'Sample Saved'
           this.infoSnackbar = true
@@ -756,6 +769,9 @@ export default {
       this.profileMoreDialog = false
     },
     startRecording () {
+      // Save current profile before recording
+      this.updateProfile()
+
       this.$http.get('/profiles/'.concat(this.recordedProfile.id))
         .then(async response => {
           if (response.status === 200) {
@@ -862,7 +878,7 @@ export default {
       const recording = await this.recorder.stop()
 
       // Set active profile back to the selected one
-      this.loadProfile()
+      this.loadProfile(false)
 
       const url = URL.createObjectURL(recording)
       const anchor = document.createElement('a')
@@ -886,7 +902,7 @@ export default {
       await this.recorder.stop()
 
       // Set active profile back to the selected one
-      this.loadProfile()
+      this.loadProfile(false)
 
       clearInterval(this.recordingInterval)
       this.recordingDialog = false
@@ -894,7 +910,7 @@ export default {
     },
     discardChanges () {
       this.unsavedWork = false
-      this.loadProfile()
+      this.loadProfile(true)
       this.confirmSwitchProfileDialog = false
     },
     saveChanges () {
@@ -902,15 +918,6 @@ export default {
       this.selectedProfile = this.profileItems.find(p => p.text === this.activeProfile.name)
       this.updateProfile()
       this.confirmSwitchProfileDialog = false
-    },
-    validateSporadicRange (sample) {
-      const min = parseInt(sample.sporadicMin, 10)
-      const max = parseInt(sample.sporadicMax, 10)
-      if (isNaN(min) || isNaN(max) || max <= min || min <= 0 || max <= 0) {
-        return 'Invalid'
-      } else {
-        return true
-      }
     }
   }
 }