Add warning message

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
     '@vue/standard'
   ],
   parserOptions: {
-    parser: '@babel/eslint-parser'
+    parser: 'babel-eslint'
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

.github/FUNDING.yml

@@ -1,4 +1,3 @@
 # These are supported funding model platforms
 
 github:  kaythomas0
-custom:  "https://kaythomas.dev/cryptocurrency.html"

.github/workflows/docker-image.yml

@@ -1,34 +0,0 @@
-name: Docker Image CI
-
-on:
-  push:
-    branches: [ main ]
-
-jobs:
-  buildx:
-    runs-on: ubuntu-latest
-    steps:
-      -
-        name: Checkout
-        uses: actions/checkout@v3
-      -
-        name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
-      -
-        name: Set up Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v1
-      -
-        name: Login to DockerHub
-        uses: docker/login-action@v1 
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      -
-        name: Build and push
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          platforms: linux/amd64,linux/arm/v7,linux/arm64
-          push: true
-          tags: noisedash/noisedash:latest,noisedash/noisedash:${{ github.ref_name }}

CONTRIBUTING.md

@@ -1,6 +1,4 @@
 ## Project setup
-Requires [Node](https://nodejs.org/en/download/) and [Vue CLI](https://cli.vuejs.org/guide/installation.html)
-
 ```
 npm install
 ```
@@ -25,22 +23,5 @@ npm run build
 npm run lint
 ```
 
-### Directory Summary
-
-Here are some of the more important files and directories:
-
-* `config/default.json`: Contains the default configuration file
-* `server/*`: Where all of the node server related code is
-* `server/app.js`: The main server file where server settings are set
-* `server/db.js`: Where the database is created
-* `server/logger.js`: Where the logger is created and configured
-* `server/bin/www.js`: The entry point of the server application (what you run to start the server)
-* `server/boot/*`: These are run on server startup
-* `server/routes/*`: Where all of the server routes and logic are defined
-* `src/*`: Contains all the frontend code
-* `src/components/*`: Where all of the Vue components are defined, split into vue and js files for each component
-* `src/router/index.js`: Where all the routing and route-protection logic is defined
-* `src/views/*`: Contains all the views
-
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).

README.md

@@ -9,9 +9,9 @@ Self-hostable web tool for generating ambient noises
 # Features
 
 * 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
+* Save "noise profiles" so you can easily switch between your created soundscapes
 * 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 audio samples (e.g rain, wind, thunder) to combine with your generated noises
 * Use admin tools to manage multiple users
 * Mobile friendly
 

package.json

@@ -1,14 +1,18 @@
 {
   "name": "noisedash",
-  "version": "0.4.0",
-  "private": true,
+  "descriptions": "Self-hostable web tool for generating ambient noises",
+  "homepage": "https://github.com/kaythomas0/noisedash",
+  "bugs": "https://github.com/kaythomas0/noisedash/issues",
+  "license": "AGPL-3.0-or-later",
   "author": "Kay Thomas <kaythomas@pm.me> (https://kaythomas.dev)",
+  "version": "0.2.0",
+  "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
     "server": "node server/bin/www.js",
-    "server-prod": "NODE_ENV=production node server/bin/www.js"
+    "server-prod": "NODE_ENV=production node server/bin/www.js",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@vscode/sqlite3": "^5.0.8",
@@ -16,9 +20,9 @@
     "config": "^3.3.6",
     "connect-history-api-fallback": "^1.6.0",
     "cookie-parser": "^1.4.5",
-    "core-js": "^3.22.7",
-    "express": "^4.18.1",
-    "express-session": "^1.17.3",
+    "core-js": "^3.19.1",
+    "express": "^4.17.1",
+    "express-session": "^1.17.2",
     "multer": "^1.4.3",
     "passport": "^0.4.1",
     "passport-local": "^1.0.0",
@@ -26,33 +30,28 @@
     "session-file-store": "^1.5.0",
     "tone": "^14.7.77",
     "vue": "^2.6.11",
-    "vue-router": "^3.5.4",
-    "vuetify": "^2.6.6",
+    "vue-router": "^3.5.3",
+    "vuetify": "^2.5.12",
     "winston": "^3.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-router": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
-    "@vue/eslint-config-standard": "^6.1.0",
-    "eslint": "^7.32.0",
+    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-plugin-eslint": "^4.5.15",
+    "@vue/cli-plugin-router": "^4.5.15",
+    "@vue/cli-service": "^4.5.15",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
     "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vue": "^6.2.2",
     "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
-    "vue-cli-plugin-vuetify": "^2.5.0",
+    "vue-cli-plugin-vuetify": "^2.4.3",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.7.3"
-  },
-  "bugs": "https://github.com/kaythomas0/noisedash/issues",
-  "descriptions": "Self-hostable web tool for generating ambient noises",
-  "homepage": "https://github.com/kaythomas0/noisedash",
-  "license": "AGPL-3.0-or-later"
+  }
 }

server/bin/www.js

@@ -68,4 +68,5 @@ function onListening () {
     ? 'pipe ' + addr
     : 'port ' + addr.port
   logger.log('info', 'Listening on %s', bind)
+  logger.log('info', 'WARNING, IMPORTANT: It looks like you are using the kevinthomas0/noisedash docker image. Please update your image to noisedash/noisedash. The kevinthomas0/noisedash image will no longer receive updates.')
 }

src/components/Account.vue

@@ -24,7 +24,7 @@
       v-model="changePasswordDialog"
       max-width="600px"
     >
-      <template #activator="{ on, attrs }">
+      <template v-slot:activator="{ on, attrs }">
         <v-btn
           class="my-3"
           v-bind="attrs"
@@ -89,7 +89,7 @@
     >
       {{ snackbarText }}
 
-      <template #action="{ attrs }">
+      <template v-slot:action="{ attrs }">
         <v-btn
           text
           v-bind="attrs"

src/components/Admin.vue

@@ -12,7 +12,7 @@
       v-model="registerUserDialog"
       max-width="600px"
     >
-      <template #activator="{ on, attrs }">
+      <template v-slot:activator="{ on, attrs }">
         <v-btn
           v-bind="attrs"
           v-on="on"
@@ -139,7 +139,7 @@
       >
         {{ snackbarText }}
 
-        <template #action="{ attrs }">
+        <template v-slot:action="{ attrs }">
           <v-btn
             text
             v-bind="attrs"

src/components/AppBar.vue

@@ -63,7 +63,7 @@
           </v-list-item>
         </v-list-item-group>
       </v-list>
-      <template #append>
+      <template v-slot:append>
         <v-btn
           block
           href="https://github.com/kaythomas0/noisedash"

src/components/Login.vue

@@ -50,7 +50,7 @@
       >
         {{ snackbarText }}
 
-        <template #action="{ attrs }">
+        <template v-slot:action="{ attrs }">
           <v-btn
             text
             v-bind="attrs"

src/components/Noise.vue

@@ -66,14 +66,14 @@
           class="mx-3 my-3"
           @click="updateProfile"
         >
-          {{ unsavedWork ? 'Save Profile*' : 'Save Profile' }}
+          Save Profile
         </v-btn>
 
         <v-dialog
           v-model="profileDialog"
           max-width="600px"
         >
-          <template #activator="{ on, attrs }">
+          <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3"
@@ -90,16 +90,18 @@
           >
             <v-card>
               <v-card-title>
-                <span class="text-h5">Save Profile As...</span>
+                <span class="text-h5">Profile Name</span>
               </v-card-title>
               <v-card-text>
                 <v-container>
                   <v-row>
-                    <v-text-field
-                      v-model="profileName"
-                      label="Profile Name"
-                      :rules="[rules.required()]"
-                    />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="profileName"
+                        label="Profile Name"
+                        :rules="[rules.required()]"
+                      />
+                    </v-col>
                   </v-row>
                 </v-container>
               </v-card-text>
@@ -127,7 +129,7 @@
           v-model="profileMoreDialog"
           max-width="600px"
         >
-          <template #activator="{ on, attrs }">
+          <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3"
@@ -166,16 +168,6 @@
                           Export Profile
                         </v-list-item-title>
                       </v-list-item>
-                      <v-list-item
-                        @click="openStartRecordingDialog"
-                      >
-                        <v-list-item-icon>
-                          <v-icon>mdi-record</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>
-                          Record Profile Audio
-                        </v-list-item-title>
-                      </v-list-item>
                     </v-list-item-group>
                   </v-col>
                 </v-row>
@@ -260,6 +252,7 @@
                     :items="profileItems"
                     return-object
                     label="Profiles"
+                    class="mx-3 mb-5"
                   />
                 </v-row>
               </v-container>
@@ -281,120 +274,6 @@
             </v-card-actions>
           </v-card>
         </v-dialog>
-
-        <v-dialog
-          v-model="startRecordingDialog"
-          max-width="600px"
-        >
-          <v-form
-            ref="startRecordingForm"
-            v-model="isRecordingValid"
-          >
-            <v-card>
-              <v-card-title>
-                <span class="text-h5">Start Recording</span>
-              </v-card-title>
-              <v-card-text>
-                <v-container>
-                  <v-row>
-                    <p>Select profile to record audio for. This is only supported on Chrome and Firefox.</p>
-                  </v-row>
-                  <v-row>
-                    <v-select
-                      v-model="recordedProfile"
-                      :items="profileItems"
-                      return-object
-                      label="Profiles"
-                    />
-                  </v-row>
-                  <v-row>
-                    <v-text-field
-                      v-model="recordingFileName"
-                      label="File Name"
-                      :rules="[rules.required()]"
-                    />
-                  </v-row>
-                </v-container>
-              </v-card-text>
-              <v-card-actions>
-                <v-spacer />
-                <v-btn
-                  text
-                  @click="startRecordingDialog = false"
-                >
-                  Close
-                </v-btn>
-                <v-btn
-                  text
-                  :disabled="!isRecordingValid"
-                  @click="startRecording"
-                >
-                  Record
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-form>
-        </v-dialog>
-
-        <v-dialog
-          v-model="recordingDialog"
-          max-width="600px"
-          persistent
-        >
-          <v-card>
-            <v-card-title>
-              <span class="text-h5">Recording</span>
-            </v-card-title>
-            <v-card-text>
-              Time Elapsed: {{ recordingTimeElapsed }} Seconds
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer />
-              <v-btn
-                text
-                @click="cancelRecording"
-              >
-                Cancel
-              </v-btn>
-              <v-btn
-                text
-                @click="stopRecording"
-              >
-                Stop and Save
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-
-        <v-dialog
-          v-model="confirmSwitchProfileDialog"
-          max-width="600px"
-          persistent
-        >
-          <v-card>
-            <v-card-title>
-              <span class="text-h5">Save Profile?</span>
-            </v-card-title>
-            <v-card-text>
-              You have unsaved work on your current profile. Would you like to save it before switching?
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer />
-              <v-btn
-                text
-                @click="discardChanges"
-              >
-                Discard Changes
-              </v-btn>
-              <v-btn
-                text
-                @click="saveChanges"
-              >
-                Save Profile
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
       </v-col>
 
       <v-col cols="12">
@@ -466,7 +345,7 @@
             label="Volume"
             thumb-label
             max="0"
-            min="-60"
+            min="-30"
             class="mx-3"
             @input="updateVolume"
           />
@@ -669,7 +548,7 @@
                 label="Volume"
                 thumb-label
                 max="0"
-                min="-60"
+                min="-30"
                 class="mx-3"
                 @input="updateSampleVolume(sample.id, index)"
               />
@@ -686,7 +565,7 @@
           v-model="addSampleDialog"
           max-width="600px"
         >
-          <template #activator="{ on, attrs }">
+          <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3 mb-5"
@@ -746,7 +625,7 @@
           v-model="uploadSampleDialog"
           max-width="600px"
         >
-          <template #activator="{ on, attrs }">
+          <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3 mb-5"
@@ -767,7 +646,9 @@
               <v-card-text>
                 <v-container>
                   <v-row>
-                    <p><strong>WARNING:</strong> Uploaded samples are publicly accessible.</p>
+                    <v-col cols="12">
+                      <p><strong>WARNING:</strong> Uploaded samples are publicly accessible.</p>
+                    </v-col>
                   </v-row>
                   <v-row>
                     <v-file-input
@@ -778,11 +659,13 @@
                     />
                   </v-row>
                   <v-row>
-                    <v-text-field
-                      v-model="sampleName"
-                      label="Sample Name"
-                      :rules="[rules.required()]"
-                    />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="sampleName"
+                        label="Sample Name"
+                        :rules="[rules.required()]"
+                      />
+                    </v-col>
                   </v-row>
                 </v-container>
               </v-card-text>
@@ -810,7 +693,7 @@
           v-model="editSampleDialog"
           max-width="600px"
         >
-          <template #activator="{ on, attrs }">
+          <template v-slot:activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               class="mx-3 my-3 mb-5"
@@ -828,7 +711,7 @@
           >
             <v-card>
               <v-card-title>
-                <span class="text-h5">Edit Samples</span>
+                <span class="text-h5">Edit Sample</span>
               </v-card-title>
               <v-card-text>
                 <v-container>
@@ -839,6 +722,7 @@
                       item-text="name"
                       return-object
                       label="Samples"
+                      class="mx-3"
                       @change="loadPreviewSample"
                     />
                   </v-row>
@@ -852,6 +736,7 @@
                       v-model="previewSampleLoopPointsEnabled"
                       :disabled="previewSamplePlaying"
                       label="Use Loop Points"
+                      class="mx-3"
                     />
                   </v-row>
 
@@ -860,7 +745,7 @@
                       v-model="previewSampleLoopStart"
                       type="number"
                       label="Loop Start Time"
-                      class="mr-3"
+                      class="mx-3"
                       :disabled="!previewSampleLoopPointsEnabled || previewSamplePlaying"
                       :rules="[rules.gt(-1)]"
                       @change="updatePreviewSamplePlayerLoopPoints"
@@ -870,7 +755,7 @@
                       v-model="previewSampleLoopEnd"
                       type="number"
                       label="Loop End Time"
-                      class="ml-3"
+                      class="mx-3"
                       :disabled="!previewSampleLoopPointsEnabled || previewSamplePlaying"
                       :rules="[rules.gt(-1), rules.lt(previewSampleLength)]"
                       @change="updatePreviewSamplePlayerLoopPoints"
@@ -882,6 +767,7 @@
                       v-model="previewSampleFadeIn"
                       type="number"
                       label="Fade In Time"
+                      class="mx-3"
                       :disabled="previewSamplePlaying"
                       :rules="[rules.gt(-1)]"
                       @change="updatePreviewSamplePlayerFadeIn"
@@ -926,7 +812,7 @@
       >
         {{ infoSnackbarText }}
 
-        <template #action="{ attrs }">
+        <template v-slot:action="{ attrs }">
           <v-btn
             text
             v-bind="attrs"
@@ -944,7 +830,7 @@
       >
         {{ errorSnackbarText }}
 
-        <template #action="{ attrs }">
+        <template v-slot:action="{ attrs }">
           <v-btn
             text
             v-bind="attrs"

src/components/account.js

@@ -1,5 +1,5 @@
 export default {
-  name: 'Account',
+  name: 'Admin',
 
   data: () => ({
     currentUser: {},

src/components/login.js

@@ -1,6 +1,4 @@
 export default {
-  name: 'Login',
-
   data: () => ({
     valid: false,
     username: '',

src/components/noise.js

@@ -64,17 +64,6 @@ export default {
     previewSampleButtonText: 'Preview Sample',
     previewSampleLoading: true,
     previewSampleLength: 0,
-    startRecordingDialog: false,
-    recordingDialog: false,
-    recordingTimeElapsed: 0,
-    recordedProfile: {},
-    recordingFileName: '',
-    isRecordingValid: false,
-    unsavedWork: false,
-    saveProfileText: 'Save Profile',
-    unwatch: null,
-    confirmSwitchProfileDialog: false,
-    activeProfile: {},
     errorSnackbar: false,
     errorSnackbarText: '',
     rules: {
@@ -99,33 +88,6 @@ export default {
         }
       })
       return samples
-    },
-    changeableSettings: function () {
-      const settings = [
-        this.isTimerEnabled,
-        this.hours,
-        this.minutes,
-        this.seconds,
-        this.volume,
-        this.noiseColor,
-        this.isFilterEnabled,
-        this.filterType,
-        this.filterCutoff,
-        this.isLFOFilterCutoffEnabled,
-        this.lfoFilterCutoffFrequency,
-        this.lfoFilterCutoffRange,
-        this.isTremoloEnabled,
-        this.tremoloDepth,
-        this.tremoloFrequency,
-        this.isTimerEnabled,
-        this.loadedSamples
-      ]
-
-      this.loadedSamples.forEach(s => {
-        settings.push(s.volume)
-      })
-
-      return settings
     }
   },
   created () {
@@ -136,7 +98,6 @@ export default {
     this.players = new Tone.Players()
     this.samplePreviewPlayer = new Tone.Player().toDestination()
     this.samplePreviewPlayer.loop = true
-    this.recorder = new Tone.Recorder()
 
     this.populateProfileItems(0)
     this.populatePreviewSampleItems()
@@ -288,7 +249,6 @@ export default {
                 this.selectedProfile = this.profileItems.find(p => p.id === profileId)
               }
               this.exportedProfile = this.profileItems[0]
-              this.recordedProfile = this.profileItems[0]
               this.loadProfile()
             }
           }
@@ -326,7 +286,6 @@ export default {
         if (response.status === 200) {
           this.profileDialog = false
           this.populateProfileItems(response.data.id)
-          this.unsavedWork = false
           this.infoSnackbarText = 'Profile Saved'
           this.infoSnackbar = true
         }
@@ -355,7 +314,6 @@ export default {
         samples: this.loadedSamples
       }).then(response => {
         if (response.status === 200) {
-          this.unsavedWork = false
           this.infoSnackbarText = 'Profile Saved'
           this.infoSnackbar = true
         }
@@ -366,47 +324,33 @@ export default {
         })
     },
     loadProfile () {
-      if (this.unsavedWork) {
-        this.confirmSwitchProfileDialog = true
-      } else {
-        this.$http.get('/profiles/'.concat(this.selectedProfile.id))
-          .then(response => {
-            if (response.status === 200) {
-              const profile = response.data.profile
+      this.$http.get('/profiles/'.concat(this.selectedProfile.id))
+        .then(response => {
+          if (response.status === 200) {
+            const profile = response.data.profile
 
-              this.isTimerEnabled = profile.isTimerEnabled
-              this.duration = profile.duration
-              this.volume = profile.volume
-              this.noiseColor = profile.noiseColor
-              this.isFilterEnabled = profile.isFilterEnabled
-              this.filterType = profile.filterType
-              this.filterCutoff = profile.filterCutoff
-              this.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled
-              this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
-              this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow
-              this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh
-              this.isTremoloEnabled = profile.isTremoloEnabled
-              this.tremoloFrequency = profile.tremoloFrequency
-              this.tremoloDepth = profile.tremoloDepth
+            this.isTimerEnabled = profile.isTimerEnabled
+            this.duration = profile.duration
+            this.volume = profile.volume
+            this.noiseColor = profile.noiseColor
+            this.isFilterEnabled = profile.isFilterEnabled
+            this.filterType = profile.filterType
+            this.filterCutoff = profile.filterCutoff
+            this.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled
+            this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
+            this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow
+            this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh
+            this.isTremoloEnabled = profile.isTremoloEnabled
+            this.tremoloFrequency = profile.tremoloFrequency
+            this.tremoloDepth = profile.tremoloDepth
 
-              this.loadedSamples = profile.samples
-
-              this.activeProfile = profile
-
-              if (this.unwatch) {
-                this.unwatch()
-              }
-
-              this.unwatch = this.$watch('changeableSettings', function () {
-                this.unsavedWork = true
-              })
-            }
-          })
-          .catch(() => {
-            this.errorSnackbarText = 'Error Loading Profile'
-            this.errorSnackbar = true
-          })
-      }
+            this.loadedSamples = profile.samples
+          }
+        })
+        .catch(() => {
+          this.errorSnackbarText = 'Error Loading Profile'
+          this.errorSnackbar = true
+        })
     },
     deleteProfile () {
       this.$http.delete('/profiles/'.concat(this.selectedProfile.id))
@@ -539,7 +483,7 @@ export default {
         }
       })
         .catch(() => {
-          this.errorSnackbarText = 'Error Importing Profile'
+          this.errorSnackbarText = 'Error Saving Profile'
           this.errorSnackbar = true
         })
 
@@ -592,7 +536,7 @@ export default {
           }
         })
         .catch(() => {
-          this.errorSnackbarText = 'Error Exporting Profile'
+          this.errorSnackbarText = 'Error Loading Profile'
           this.errorSnackbar = true
         })
 
@@ -687,127 +631,6 @@ export default {
       if (this.previewSampleLoopStart >= 0 && this.previewSampleLoopEnd <= this.previewSampleLength) {
         this.samplePreviewPlayer.setLoopPoints(this.previewSampleLoopStart, this.previewSampleLoopEnd)
       }
-    },
-    openStartRecordingDialog () {
-      this.startRecordingDialog = true
-      this.profileMoreDialog = false
-    },
-    startRecording () {
-      this.$http.get('/profiles/'.concat(this.recordedProfile.id))
-        .then(async response => {
-          if (response.status === 200) {
-            const profile = response.data.profile
-
-            this.isTimerEnabled = profile.isTimerEnabled
-            this.duration = profile.duration
-            this.volume = profile.volume
-            this.noiseColor = profile.noiseColor
-            this.isFilterEnabled = profile.isFilterEnabled
-            this.filterType = profile.filterType
-            this.filterCutoff = profile.filterCutoff
-            this.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled
-            this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
-            this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow
-            this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh
-            this.isTremoloEnabled = profile.isTremoloEnabled
-            this.tremoloFrequency = profile.tremoloFrequency
-            this.tremoloDepth = profile.tremoloDepth
-
-            this.loadedSamples = profile.samples
-
-            this.startRecordingDialog = false
-            this.recordingDialog = true
-            this.recordingTimeElapsed = 0
-
-            await this.recorder.start()
-            this.recordingInterval = setInterval(() => this.recordingTimeElapsed++, 1000)
-            this.playProfileForRecording()
-          }
-        })
-        .catch(() => {
-          this.errorSnackbarText = 'Error Recording Profile'
-          this.errorSnackbar = true
-        })
-    },
-    playProfileForRecording () {
-      this.playDisabled = true
-      Tone.Transport.cancel()
-
-      if (!this.isFilterEnabled && !this.isTremoloEnabled) {
-        this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.recorder).toDestination()
-      } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
-        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder).toDestination().start()
-        this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.tremolo)
-      } else if (this.isFilterEnabled && !this.isTremoloEnabled) {
-        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.recorder).toDestination()
-        this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
-      } else if (this.isFilterEnabled && this.isTremoloEnabled) {
-        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder).toDestination().start()
-        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
-        this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
-      } else {
-        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder).toDestination().start()
-        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
-        this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
-      }
-
-      if (this.isLFOFilterCutoffEnabled) {
-        this.lfo = new Tone.LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
-        this.lfo.connect(this.filter.frequency).start()
-      }
-
-      this.loadedSamples.forEach(s => {
-        this.players.player(s.id).loop = true
-        this.players.player(s.id).fadeIn = s.fadeIn
-        if (s.loopPointsEnabled) {
-          this.players.player(s.id).setLoopPoints(s.loopStart, s.loopEnd)
-        }
-        this.players.player(s.id).volume.value = s.volume
-
-        this.players.player(s.id).connect(this.recorder)
-        this.players.player(s.id).unsync().sync().start(0)
-      })
-
-      this.noise.sync().start(0)
-
-      Tone.Transport.start()
-    },
-    async stopRecording () {
-      const recording = await this.recorder.stop()
-
-      // Set active profile back to the selected one
-      this.loadProfile()
-
-      const url = URL.createObjectURL(recording)
-      const anchor = document.createElement('a')
-      anchor.download = this.recordingFileName + '.webm'
-      anchor.href = url
-      anchor.click()
-
-      clearInterval(this.recordingInterval)
-      this.recordingDialog = false
-      this.stop()
-    },
-    async cancelRecording () {
-      await this.recorder.stop()
-
-      // Set active profile back to the selected one
-      this.loadProfile()
-
-      clearInterval(this.recordingInterval)
-      this.recordingDialog = false
-      this.stop()
-    },
-    discardChanges () {
-      this.unsavedWork = false
-      this.loadProfile()
-      this.confirmSwitchProfileDialog = false
-    },
-    saveChanges () {
-      // Set active profile back to previously selected one before saving
-      this.selectedProfile = this.profileItems.find(p => p.text === this.activeProfile.name)
-      this.updateProfile()
-      this.confirmSwitchProfileDialog = false
     }
   }
 }

src/components/register.js

@@ -1,6 +1,4 @@
 export default {
-  name: 'Register',
-
   data: () => ({
     valid: false,
     name: '',

src/views/AccountView.vue

@@ -1,15 +1,15 @@
 <template>
-  <AccountPage />
+  <Account />
 </template>
 
 <script>
-import AccountPage from '../components/AccountPage'
+import Account from '../components/Account'
 
 export default {
   name: 'AccountView',
 
   components: {
-    AccountPage
+    Account
   }
 }
 </script>

src/views/AdminView.vue

@@ -1,15 +1,15 @@
 <template>
-  <AdminPage />
+  <Admin />
 </template>
 
 <script>
-import AdminPage from '../components/AdminPage'
+import Admin from '../components/Admin'
 
 export default {
   name: 'AdminView',
 
   components: {
-    AdminPage
+    Admin
   }
 }
 </script>

src/views/HomeView.vue

@@ -1,15 +1,15 @@
 <template>
-  <NoisePage />
+  <Noise />
 </template>
 
 <script>
-import NoisePage from '../components/NoisePage'
+import Noise from '../components/Noise'
 
 export default {
   name: 'HomeView',
 
   components: {
-    NoisePage
+    Noise
   }
 }
 </script>

src/views/LoginView.vue

@@ -1,15 +1,15 @@
 <template>
-  <LoginPage />
+  <Login />
 </template>
 
 <script>
-import LoginPage from '../components/LoginPage'
+import Login from '../components/Login'
 
 export default {
   name: 'LoginView',
 
   components: {
-    LoginPage
+    Login
   }
 }
 </script>

src/views/RegisterView.vue

@@ -1,15 +1,15 @@
 <template>
-  <RegisterPage />
+  <Register />
 </template>
 
 <script>
-import RegisterPage from '../components/RegisterPage'
+import Register from '../components/Register'
 
 export default {
   name: 'RegisterView',
 
   components: {
-    RegisterPage
+    Register
   }
 }
 </script>