Merge pull request #14 from kaythomas0/dev

v0.2.0

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github:  kaythomas0

Dockerfile

@@ -1,5 +1,5 @@
 FROM node:14
-LABEL maintainer="me@kevinthomas.dev"
+LABEL maintainer="kaythomas@pm.me"
 WORKDIR /var/noisedash
 COPY package*.json ./
 RUN npm install

README.md

@@ -4,7 +4,7 @@ Self-hostable web tool for generating ambient noises
 
 ![Noisedash](./.github/noisedash-screenshot-1.jpg)
 
-(More screenshots on the [wiki](https://github.com/KevinThomas0/noisedash/wiki/Screenshots))
+(More screenshots on the [wiki](https://github.com/kaythomas0/noisedash/wiki/Screenshots))
 
 # Features
 
@@ -21,8 +21,8 @@ Self-hostable web tool for generating ambient noises
 
 Requires docker and docker-compose
 
-* Download the provided [docker-compose.yml file](https://github.com/KevinThomas0/noisedash/blob/main/docker-compose.yml)
-* In the same directory as the docker-compose file, created a folder called `config`, and inside it, put the provided [config file](https://github.com/KevinThomas0/noisedash/blob/main/config/default.json)
+* Download the provided [docker-compose.yml file](https://github.com/kaythomas0/noisedash/blob/main/docker-compose.yml)
+* In the same directory as the docker-compose file, created a folder called `config`, and inside it, put the provided [config file](https://github.com/kaythomas0/noisedash/blob/main/config/default.json)
 * Edit the config file to your preference
 * Bring the container up:
 
@@ -32,6 +32,8 @@ docker-compose up -d
 
 * Proceed to the URL where it's deployed and register your first user
 
+(Raspberry Pi compatible images are available, see armv7 images on [Docker Hub](https://hub.docker.com/repository/docker/noisedash/noisedash))
+
 ## From Source
 
 Requires node 14 and npm
@@ -39,7 +41,7 @@ Requires node 14 and npm
 * Clone the repo:
 
 ``` bash
-git clone https://github.com/KevinThomas0/noisedash.git
+git clone https://github.com/kaythomas0/noisedash.git
 cd noisedash
 ```
 
@@ -62,4 +64,4 @@ npm run server-prod
 
 # Contributing
 
-See [CONTRIBUTING.md](https://github.com/KevinThomas0/noisedash/blob/main/CONTRIBUTING.md)
+See [CONTRIBUTING.md](https://github.com/kaythomas0/noisedash/blob/main/CONTRIBUTING.md)

config/default.json

@@ -4,7 +4,6 @@
     "sessionFileStorePath": "sessions",
     "sampleUploadPath": "samples",
     "maxSampleSize": 10737418240, // In bytes, 10GB by default
-    "sessionSecret": "CHANGE_THIS",
     "logFile": "log/noisedash.log",
     "tls": false, // Keep this as false if using an external web server like nginx
     "tlsKey": "certs/key.pem",

config/production.json

@@ -0,0 +1 @@
+{} // Left empty intentionally: https://github.com/node-config/node-config/wiki/Strict-Mode#node_env-value-of-node_env-did-not-match-any-deployment-config-file-names=

docker-compose.yml

@@ -2,14 +2,14 @@ version: "3"
 
 services:
   noisedash:
-    image: kevinthomas0/noisedash:latest
+    image: noisedash/noisedash:latest
     container_name: noisedash
     ports:
       - "1432:1432"
     volumes:
       - db:/var/noisedash/db
       - samples:/var/noisedash/samples
-      - ./config:/var/noisedash/config
+      - ./config/default.json:/var/noisedash/config/default.json
 
 volumes:
   db:

package.json

@@ -1,11 +1,11 @@
 {
   "name": "noisedash",
   "descriptions": "Self-hostable web tool for generating ambient noises",
-  "homepage": "https://github.com/KevinThomas0/noisedash",
-  "bugs": "https://github.com/KevinThomas0/noisedash/issues",
+  "homepage": "https://github.com/kaythomas0/noisedash",
+  "bugs": "https://github.com/kaythomas0/noisedash/issues",
   "license": "AGPL-3.0-or-later",
-  "author": "Kevin Thomas <me@kevinthomas.dev> (https://kevinthomas.dev)",
-  "version": "0.1.0",
+  "author": "Kay Thomas <kaythomas@pm.me> (https://kaythomas.dev)",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

server/app.js

@@ -6,6 +6,7 @@ const path = require('path')
 const cookieParser = require('cookie-parser')
 const config = require('config')
 const history = require('connect-history-api-fallback')
+const crypto = require('crypto')
 const authRouter = require('./routes/auth')
 const usersRouter = require('./routes/users')
 const profilesRouter = require('./routes/profiles')
@@ -30,9 +31,10 @@ app.use('/samples', express.static(path.join(__dirname, '../', config.get('Serve
 app.use(history())
 app.use('/samples', express.static(path.join(__dirname, '../', config.get('Server.sampleUploadPath'))))
 
+const sessionSecret = crypto.randomBytes(64).toString('hex')
 app.use(session({
   store: new FileStore(fileStoreOptions),
-  secret: config.get('Server.sessionSecret'),
+  secret: sessionSecret,
   resave: true,
   saveUninitialized: true
 }))

server/boot/db.js

@@ -1,4 +1,5 @@
 const db = require('../db')
+const logger = require('../logger')
 
 module.exports = function () {
   db.serialize(() => {
@@ -51,5 +52,22 @@ module.exports = function () {
       FOREIGN KEY(profile) REFERENCES profiles(id),
       FOREIGN KEY(sample) REFERENCES samples(id))`
     )
+
+    db.get('PRAGMA user_version', (err, row) => {
+      if (err) {
+        logger.error(err)
+      } else {
+        const userVersion = row.user_version
+
+        if (userVersion === 0) {
+          db.run('ALTER TABLE samples ADD COLUMN fade_in 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')
+
+          db.run('PRAGMA user_version = 1')
+        }
+      }
+    })
   })
 }

server/routes/profiles.js

@@ -49,7 +49,7 @@ router.post('/profiles', (req, res) => {
     function (err) {
       if (err) {
         logger.error(err)
-        if (err.code === 'SQLITE_CONSTRAINT') {
+        if (err.code === 'SQLITE_CONSTRAINT_UNIQUE') {
           return res.sendStatus(409)
         } else {
           return res.sendStatus(500)
@@ -77,6 +77,66 @@ router.post('/profiles', (req, res) => {
   })
 })
 
+router.post('/profiles/import', (req, res) => {
+  if (!req.user) {
+    return res.sendStatus(401)
+  }
+
+  let profileID = 0
+
+  db.serialize(() => {
+    db.run(`INSERT INTO profiles (
+      name,
+      user,
+      timer_enabled,
+      duration,
+      volume,
+      noise_color,
+      filter_enabled,
+      filter_type,
+      filter_cutoff,
+      lfo_filter_cutoff_enabled,
+      lfo_filter_cutoff_frequency,
+      lfo_filter_cutoff_low,
+      lfo_filter_cutoff_high,
+      tremolo_enabled,
+      tremolo_frequency,
+      tremolo_depth)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
+      req.body.name,
+      req.user.id,
+      req.body.isTimerEnabled ? 1 : 0,
+      req.body.duration,
+      req.body.volume,
+      req.body.noiseColor,
+      req.body.isFilterEnabled ? 1 : 0,
+      req.body.filterType,
+      req.body.filterCutoff,
+      req.body.isLFOFilterCutoffEnabled ? 1 : 0,
+      req.body.lfoFilterCutoffFrequency,
+      req.body.lfoFilterCutoffLow,
+      req.body.lfoFilterCutoffHigh,
+      req.body.isTremoloEnabled ? 1 : 0,
+      req.body.tremoloFrequency,
+      req.body.tremoloDepth
+    ],
+    function (err) {
+      if (err) {
+        logger.error(err)
+        if (err.code === 'SQLITE_CONSTRAINT_UNIQUE') {
+          return res.sendStatus(409)
+        } else {
+          return res.sendStatus(500)
+        }
+      }
+
+      profileID = this.lastID
+
+      return res.json({ id: profileID })
+    })
+  })
+})
+
 router.put('/profiles/:profileId', (req, res) => {
   if (!req.user) {
     return res.sendStatus(401)
@@ -291,7 +351,14 @@ 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
@@ -311,6 +378,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)
           })

server/routes/samples.js

@@ -49,7 +49,7 @@ router.post('/samples', upload.single('sample'), (req, res, next) => {
         if (err) {
           logger.error(err)
           deleteSample(req.user.id + '_' + req.body.name)
-          if (err.code === 'SQLITE_CONSTRAINT') {
+          if (err.code === 'SQLITE_CONSTRAINT_UNIQUE') {
             return res.sendStatus(409)
           } else {
             return res.sendStatus(500)
@@ -77,7 +77,14 @@ router.get('/samples', (req, res) => {
 
   const samples = []
 
-  db.all('SELECT id, name FROM samples WHERE user = ?', [req.user.id], (err, rows) => {
+  db.all(`SELECT
+    id,
+    name,
+    fade_in as fadeIn,
+    loop_points_enabled as loopPointsEnabled,
+    loop_start as loopStart,
+    loop_end as loopEnd
+    FROM samples WHERE user = ?`, [req.user.id], (err, rows) => {
     if (err) {
       logger.error(err)
       return res.sendStatus(500)
@@ -88,6 +95,10 @@ router.get('/samples', (req, res) => {
 
       sample.id = row.id
       sample.name = row.name
+      sample.fadeIn = row.fadeIn
+      sample.loopPointsEnabled = row.loopPointsEnabled === 1
+      sample.loopStart = row.loopStart
+      sample.loopEnd = row.loopEnd
       sample.user = req.user.id
 
       samples.push(sample)
@@ -97,4 +108,76 @@ router.get('/samples', (req, res) => {
   })
 })
 
+router.get('/samples/:sampleId', (req, res) => {
+  if (!req.user) {
+    return res.sendStatus(401)
+  }
+
+  db.get(`SELECT
+    id,
+    name,
+    fade_in as fadeIn,
+    loop_points_enabled as loopPointsEnabled,
+    loop_start as loopStart,
+    loop_end as loopEnd
+    FROM samples WHERE user = ? AND id = ?`, [req.user.id, req.params.sampleId], (err, row) => {
+    if (err) {
+      logger.error(err)
+      return res.sendStatus(500)
+    }
+
+    const sample = {}
+
+    sample.id = row.id
+    sample.name = row.name
+    sample.fadeIn = row.fadeIn
+    sample.loopPointsEnabled = row.loopPointsEnabled === 1
+    sample.loopStart = row.loopStart
+    sample.loopEnd = row.loopEnd
+    sample.user = req.user.id
+
+    res.json({ sample: sample })
+  })
+})
+
+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
+      fade_in = ?,
+      loop_points_enabled = ?,
+      loop_start = ?,
+      loop_end = ?
+      WHERE id = ?`, [
+      req.body.fadeIn,
+      req.body.loopPointsEnabled ? 1 : 0,
+      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

server/routes/users.js

@@ -101,7 +101,7 @@ router.post('/users', (req, res) => {
             ], (err) => {
               if (err) {
                 logger.error(err)
-                if (err.code === 'SQLITE_CONSTRAINT') {
+                if (err.code === 'SQLITE_CONSTRAINT_UNIQUE') {
                   return res.sendStatus(409)
                 } else {
                   return res.sendStatus(500)
@@ -132,7 +132,7 @@ router.post('/users', (req, res) => {
           ], function (err) {
             if (err) {
               logger.error(err)
-              if (err.code === 'SQLITE_CONSTRAINT') {
+              if (err.code === 'SQLITE_CONSTRAINT_UNIQUE') {
                 return res.sendStatus(409)
               } else {
                 return res.sendStatus(500)

src/components/Account.vue

@@ -77,6 +77,12 @@
       </v-form>
     </v-dialog>
 
+    <v-switch
+      v-model="$vuetify.theme.dark"
+      label="Dark Mode"
+      @change="toggleDarkMode"
+    />
+
     <v-snackbar
       v-model="snackbar"
       timeout="3000"

src/components/AppBar.vue

@@ -61,20 +61,12 @@
               Logout
             </v-list-item-title>
           </v-list-item>
-          <v-list-item>
-            <v-switch
-              v-model="$vuetify.theme.dark"
-              label="Dark Mode"
-              :disabled="!loggedIn"
-              @change="toggleDarkMode"
-            />
-          </v-list-item>
         </v-list-item-group>
       </v-list>
       <template v-slot:append>
         <v-btn
           block
-          href="https://github.com/KevinThomas0/noisedash"
+          href="https://github.com/kaythomas0/noisedash"
           target="_blank"
         >
           Source Code

src/components/Noise.vue

@@ -19,6 +19,7 @@
             fab
             large
             color="primary"
+            :loading="mainPlayLoading"
             @click="play"
           >
             <v-icon>mdi-play</v-icon>
@@ -123,6 +124,156 @@
             </v-card>
           </v-form>
         </v-dialog>
+
+        <v-dialog
+          v-model="profileMoreDialog"
+          max-width="600px"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              class="mx-3 my-3"
+              :disabled="playDisabled"
+              v-on="on"
+            >
+              More...
+            </v-btn>
+          </template>
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">More Profile Options</span>
+            </v-card-title>
+            <v-card-text>
+              <v-container>
+                <v-row>
+                  <v-col cols="12">
+                    <v-list-item-group>
+                      <v-list-item
+                        @click="openImportDialog"
+                      >
+                        <v-list-item-icon>
+                          <v-icon>mdi-file-import</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-title>
+                          Import Profile
+                        </v-list-item-title>
+                      </v-list-item>
+                      <v-list-item
+                        @click="openExportDialog"
+                      >
+                        <v-list-item-icon>
+                          <v-icon>mdi-file-export</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-title>
+                          Export Profile
+                        </v-list-item-title>
+                      </v-list-item>
+                    </v-list-item-group>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                text
+                @click="profileMoreDialog = false"
+              >
+                Close
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+
+        <v-dialog
+          v-model="importDialog"
+          max-width="600px"
+        >
+          <v-form
+            ref="importForm"
+            v-model="isImportValid"
+          >
+            <v-card>
+              <v-card-title>
+                <span class="text-h5">Import Profile</span>
+              </v-card-title>
+              <v-card-text>
+                <v-container>
+                  <v-row>
+                    <v-file-input
+                      v-model="importedProfile"
+                      accept=".json"
+                      label="Upload a profile file!"
+                      :rules="[rules.required()]"
+                    />
+                  </v-row>
+                  <v-row>
+                    <v-text-field
+                      v-model="importedProfileName"
+                      label="Profile Name"
+                      :rules="[rules.required()]"
+                    />
+                  </v-row>
+                </v-container>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  text
+                  @click="importDialog = false"
+                >
+                  Close
+                </v-btn>
+                <v-btn
+                  text
+                  :disabled="!isImportValid"
+                  @click="importProfile"
+                >
+                  Import
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-form>
+        </v-dialog>
+
+        <v-dialog
+          v-model="exportDialog"
+          max-width="600px"
+        >
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">Export Profile</span>
+            </v-card-title>
+            <v-card-text>
+              <v-container>
+                <v-row>
+                  <v-select
+                    v-model="exportedProfile"
+                    :items="profileItems"
+                    return-object
+                    label="Profiles"
+                    class="mx-3 mb-5"
+                  />
+                </v-row>
+              </v-container>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                text
+                @click="exportDialog = false"
+              >
+                Close
+              </v-btn>
+              <v-btn
+                text
+                @click="exportProfile"
+              >
+                Export
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
       </v-col>
 
       <v-col cols="12">
@@ -278,7 +429,7 @@
             thumb-label
             label="Rate"
             max="10"
-            min="0.01"
+            min="0"
             step="0.01"
             class="mx-3"
             @input="updateLFOFilterCutoffFrequency"
@@ -331,9 +482,7 @@
             thumb-label
             max="1"
             min="0"
-            step="0.1"
-            ticks
-            tick-size="4"
+            step="0.01"
             class="mx-3"
             @input="updateTremoloFrequency"
           />
@@ -539,6 +688,122 @@
             </v-card>
           </v-form>
         </v-dialog>
+
+        <v-dialog
+          v-model="editSampleDialog"
+          max-width="600px"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              v-bind="attrs"
+              class="mx-3 my-3 mb-5"
+              :disabled="playDisabled || allSamples.length === 0"
+              v-on="on"
+              @click="openEditSampleForm"
+            >
+              Edit Samples
+            </v-btn>
+          </template>
+          <v-form
+            ref="editSampleForm"
+            v-model="isEditSampleValid"
+            lazy-validation
+          >
+            <v-card>
+              <v-card-title>
+                <span class="text-h5">Edit Sample</span>
+              </v-card-title>
+              <v-card-text>
+                <v-container>
+                  <v-row justify="center">
+                    <v-select
+                      v-model="selectedPreviewSample"
+                      :items="previewSampleItems"
+                      item-text="name"
+                      return-object
+                      label="Samples"
+                      class="mx-3"
+                      @change="loadPreviewSample"
+                    />
+                  </v-row>
+
+                  <v-row>
+                    <p>Sample Length: {{ Math.round(previewSampleLength * 100) / 100 }} Seconds </p>
+                  </v-row>
+
+                  <v-row>
+                    <v-checkbox
+                      v-model="previewSampleLoopPointsEnabled"
+                      :disabled="previewSamplePlaying"
+                      label="Use Loop Points"
+                      class="mx-3"
+                    />
+                  </v-row>
+
+                  <v-row>
+                    <v-text-field
+                      v-model="previewSampleLoopStart"
+                      type="number"
+                      label="Loop Start Time"
+                      class="mx-3"
+                      :disabled="!previewSampleLoopPointsEnabled || previewSamplePlaying"
+                      :rules="[rules.gt(-1)]"
+                      @change="updatePreviewSamplePlayerLoopPoints"
+                    />
+
+                    <v-text-field
+                      v-model="previewSampleLoopEnd"
+                      type="number"
+                      label="Loop End Time"
+                      class="mx-3"
+                      :disabled="!previewSampleLoopPointsEnabled || previewSamplePlaying"
+                      :rules="[rules.gt(-1), rules.lt(previewSampleLength)]"
+                      @change="updatePreviewSamplePlayerLoopPoints"
+                    />
+                  </v-row>
+
+                  <v-row>
+                    <v-text-field
+                      v-model="previewSampleFadeIn"
+                      type="number"
+                      label="Fade In Time"
+                      class="mx-3"
+                      :disabled="previewSamplePlaying"
+                      :rules="[rules.gt(-1)]"
+                      @change="updatePreviewSamplePlayerFadeIn"
+                    />
+                  </v-row>
+
+                  <v-row justify="center">
+                    <v-btn
+                      class="mx-3 mt-3"
+                      :loading="previewSampleLoading"
+                      @click="previewSample"
+                    >
+                      {{ previewSampleButtonText }}
+                    </v-btn>
+                  </v-row>
+                </v-container>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  text
+                  @click="closeEditSampleForm"
+                >
+                  Cancel
+                </v-btn>
+                <v-btn
+                  text
+                  :disabled="!isEditSampleValid"
+                  @click="editSample"
+                >
+                  Edit
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-form>
+        </v-dialog>
       </v-col>
 
       <v-snackbar

src/components/account.js

@@ -40,6 +40,11 @@ export default {
       if (this.$refs.changePasswordForm) {
         this.$refs.changePasswordForm.reset()
       }
+    },
+    toggleDarkMode () {
+      this.$http.patch('/users/dark-mode', {
+        darkMode: this.$vuetify.theme.dark
+      })
     }
   }
 }

src/components/appbar.js

@@ -38,11 +38,6 @@ export default {
         .catch(() => {
           this.isAdmin = false
         })
-    },
-    toggleDarkMode () {
-      this.$http.patch('/users/dark-mode', {
-        darkMode: this.$vuetify.theme.dark
-      })
     }
   }
 }

src/components/noise.js

@@ -1,15 +1,23 @@
-import { Filter, LFO, Noise, Players, Transport, Tremolo } from 'tone'
+import * as Tone from 'tone'
 
 export default {
   name: 'Noise',
 
   data: () => ({
+    mainPlayLoading: true,
     isTimerValid: false,
     selectedProfile: {},
     profileItems: [],
     profileDialog: false,
     profileName: '',
     isProfileValid: false,
+    profileMoreDialog: false,
+    importDialog: false,
+    isImportValid: false,
+    exportDialog: false,
+    importedProfile: null,
+    importedProfileName: '',
+    exportedProfile: {},
     infoSnackbar: false,
     infoSnackbarText: '',
     playDisabled: false,
@@ -44,6 +52,18 @@ export default {
     sampleName: '',
     isSampleUploadValid: false,
     canUpload: false,
+    editSampleDialog: false,
+    previewSampleLoopPointsEnabled: false,
+    previewSampleLoopStart: 0,
+    previewSampleLoopEnd: 0,
+    previewSampleFadeIn: 0,
+    previewSamplePlaying: false,
+    selectedPreviewSample: {},
+    previewSampleItems: [],
+    isEditSampleValid: false,
+    previewSampleButtonText: 'Preview Sample',
+    previewSampleLoading: true,
+    previewSampleLength: 0,
     errorSnackbar: false,
     errorSnackbarText: '',
     rules: {
@@ -71,12 +91,16 @@ export default {
     }
   },
   created () {
-    this.noise = new Noise()
-    this.filter = new Filter()
-    this.tremolo = new Tremolo()
-    this.lfo = new LFO()
-    this.players = new Players()
+    this.noise = new Tone.Noise()
+    this.filter = new Tone.Filter()
+    this.tremolo = new Tone.Tremolo()
+    this.lfo = new Tone.LFO()
+    this.players = new Tone.Players()
+    this.samplePreviewPlayer = new Tone.Player().toDestination()
+    this.samplePreviewPlayer.loop = true
+
     this.populateProfileItems(0)
+    this.populatePreviewSampleItems()
     this.getSamples()
     this.getCurrentUser()
   },
@@ -85,58 +109,69 @@ export default {
   },
   methods: {
     play () {
+      if (!this.players.loaded) {
+        return
+      }
+
       this.playDisabled = true
-      Transport.cancel()
+      Tone.Transport.cancel()
 
       if (!this.isFilterEnabled && !this.isTremoloEnabled) {
-        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).toDestination()
+        this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).toDestination()
       } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
-        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
-        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).connect(this.tremolo)
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).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 Filter(this.filterCutoff, this.filterType).toDestination()
-        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
+        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).toDestination()
+        this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
       } else if (this.isFilterEnabled && this.isTremoloEnabled) {
-        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
-        this.filter = new Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
-        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).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 Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
-        this.filter = new Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
-        this.noise = new Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter)
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).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 LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
+        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
+      })
+
       if (this.isTimerEnabled) {
         this.duration = parseInt((this.hours * 3600)) + parseInt((this.minutes * 60)) + parseInt(this.seconds)
         this.noise.sync().start(0).stop(this.duration)
-        Transport.loopEnd = 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 => {
-          this.players.player(s.id).loop = true
           this.players.player(s.id).unsync().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).unsync().sync().start(0)
         })
       }
 
-      Transport.start()
+      Tone.Transport.start()
     },
     stop () {
       clearInterval(this.transportInterval)
-      Transport.stop()
+      Tone.Transport.stop()
       this.playDisabled = false
 
       clearInterval(this.timeRemainingInterval)
@@ -176,27 +211,27 @@ export default {
       if (!this.isFilterEnabled && !this.isTremoloEnabled) {
         this.noise.toDestination()
       } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
-        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
         this.noise.connect(this.tremolo)
       } else if (this.isFilterEnabled && !this.isLFOFilterCutoffEnabled && !this.isTremoloEnabled) {
-        this.filter = new Filter(this.filterCutoff, this.filterType).toDestination()
+        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).toDestination()
         this.noise.connect(this.filter)
         this.lfo.disconnect()
         this.lfo.stop()
       } else if (this.isFilterEnabled && this.isLFOFilterCutoffEnabled && !this.isTremoloEnabled) {
-        this.filter = new Filter(this.filterCutoff, this.filterType).toDestination()
+        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).toDestination()
         this.noise.connect(this.filter)
-        this.lfo = new LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
+        this.lfo = new Tone.LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
         this.lfo.connect(this.filter.frequency).start()
       } else if (this.isFilterEnabled && this.isLFOFilterCutoffEnabled && this.isTremoloEnabled) {
-        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
-        this.filter = new Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
+        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
         this.noise.connect(this.filter)
-        this.lfo = new LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
+        this.lfo = new Tone.LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] })
         this.lfo.connect(this.filter.frequency).start()
       } else {
-        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
-        this.filter = new Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
+        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.tremolo)
         this.noise.connect(this.filter)
       }
     },
@@ -213,6 +248,7 @@ export default {
               } else {
                 this.selectedProfile = this.profileItems.find(p => p.id === profileId)
               }
+              this.exportedProfile = this.profileItems[0]
               this.loadProfile()
             }
           }
@@ -311,6 +347,10 @@ export default {
             this.loadedSamples = profile.samples
           }
         })
+        .catch(() => {
+          this.errorSnackbarText = 'Error Loading Profile'
+          this.errorSnackbar = true
+        })
     },
     deleteProfile () {
       this.$http.delete('/profiles/'.concat(this.selectedProfile.id))
@@ -336,6 +376,7 @@ export default {
                 this.players.add(s.id, '/samples/' + s.user + '_' + s.name).toDestination()
               }
             })
+            this.mainPlayLoading = false
           }
         })
     },
@@ -353,6 +394,7 @@ export default {
         .then(response => {
           if (response.status === 200) {
             this.getSamples()
+            this.populatePreviewSampleItems()
             this.infoSnackbarText = 'Sample Uploaded'
             this.infoSnackbar = true
           }
@@ -403,6 +445,192 @@ export default {
       if (this.$refs.uploadSampleForm) {
         this.$refs.uploadSampleForm.reset()
       }
+    },
+    openImportDialog () {
+      this.profileMoreDialog = false
+      this.importDialog = true
+    },
+    openExportDialog () {
+      this.profileMoreDialog = false
+      this.exportDialog = true
+    },
+    async importProfile () {
+      const fileContents = await this.readFile(this.importedProfile)
+      const profileJSON = JSON.parse(fileContents)
+
+      this.$http.post('/profiles/import', {
+        name: this.importedProfileName,
+        isTimerEnabled: profileJSON.isTimerEnabled,
+        duration: profileJSON.duration,
+        volume: profileJSON.volume,
+        noiseColor: profileJSON.noiseColor,
+        isFilterEnabled: profileJSON.isFilterEnabled,
+        filterType: profileJSON.filterType,
+        filterCutoff: profileJSON.filterCutoff,
+        isLFOFilterCutoffEnabled: profileJSON.isLFOFilterCutoffEnabled,
+        lfoFilterCutoffFrequency: profileJSON.lfoFilterCutoffFrequency,
+        lfoFilterCutoffLow: profileJSON.lfoFilterCutoffLow,
+        lfoFilterCutoffHigh: profileJSON.lfoFilterCutoffHigh,
+        isTremoloEnabled: profileJSON.isTremoloEnabled,
+        tremoloFrequency: profileJSON.tremoloFrequency,
+        tremoloDepth: profileJSON.tremoloDepth
+      }).then(response => {
+        if (response.status === 200) {
+          this.importDialog = false
+          this.populateProfileItems(response.data.id)
+          this.infoSnackbarText = 'Profile Imported and Saved'
+          this.infoSnackbar = true
+        }
+      })
+        .catch(() => {
+          this.errorSnackbarText = 'Error Saving Profile'
+          this.errorSnackbar = true
+        })
+
+      if (this.$refs.importForm) {
+        this.$refs.importForm.reset()
+      }
+    },
+    readFile (file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+
+        reader.onload = res => {
+          resolve(res.target.result)
+        }
+        reader.onerror = err => reject(err)
+
+        reader.readAsText(file)
+      })
+    },
+    exportProfile () {
+      this.$http.get('/profiles/'.concat(this.exportedProfile.id))
+        .then(response => {
+          if (response.status === 200) {
+            const profile = response.data.profile
+
+            const profileJSON = {}
+            profileJSON.name = this.exportedProfile.text
+            profileJSON.isTimerEnabled = profile.isTimerEnabled
+            profileJSON.duration = profile.duration
+            profileJSON.volume = profile.volume
+            profileJSON.noiseColor = profile.noiseColor
+            profileJSON.isFilterEnabled = profile.isFilterEnabled
+            profileJSON.filterType = profile.filterType
+            profileJSON.filterCutoff = profile.filterCutoff
+            profileJSON.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled
+            profileJSON.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency
+            profileJSON.lfoFilterCutoffLow = profile.lfoFilterCutoffLow
+            profileJSON.lfoFilterCutoffHigh = profile.lfoFilterCutoffHigh
+            profileJSON.isTremoloEnabled = profile.isTremoloEnabled
+            profileJSON.tremoloFrequency = profile.tremoloFrequency
+            profileJSON.tremoloDepth = profile.tremoloDepth
+
+            const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(profileJSON))
+            const downloadAnchorNode = document.createElement('a')
+            downloadAnchorNode.setAttribute('href', dataStr)
+            downloadAnchorNode.setAttribute('download', profileJSON.name + '.json')
+            document.body.appendChild(downloadAnchorNode) // required for firefox
+            downloadAnchorNode.click()
+            downloadAnchorNode.remove()
+          }
+        })
+        .catch(() => {
+          this.errorSnackbarText = 'Error Loading Profile'
+          this.errorSnackbar = true
+        })
+
+      this.exportDialog = false
+    },
+    populatePreviewSampleItems () {
+      this.$http.get('/samples')
+        .then(response => {
+          if (response.status === 200) {
+            this.previewSampleItems = response.data.samples
+            if (this.previewSampleItems.length > 0) {
+              this.selectedPreviewSample = this.previewSampleItems[0]
+            }
+          }
+        })
+    },
+    openEditSampleForm () {
+      if (this.previewSampleItems.length > 0) {
+        this.selectedPreviewSample = this.previewSampleItems[0]
+      }
+      this.loadPreviewSample()
+    },
+    closeEditSampleForm () {
+      this.editSampleDialog = false
+      this.previewSampleLoading = true
+      if (this.previewSamplePlaying) {
+        this.previewSamplePlaying = false
+        this.previewSampleButtonText = 'Preview Sample'
+        this.samplePreviewPlayer.stop()
+      }
+    },
+    loadPreviewSample () {
+      this.previewSampleLoading = true
+      this.$http.get('/samples/'.concat(this.selectedPreviewSample.id))
+        .then(async response => {
+          if (response.status === 200) {
+            const sample = response.data.sample
+
+            await this.samplePreviewPlayer.load('/samples/' + sample.user + '_' + sample.name)
+
+            this.previewSampleFadeIn = sample.fadeIn
+            this.previewSampleLoopPointsEnabled = sample.loopPointsEnabled
+            if (sample.loopPointsEnabled) {
+              this.previewSampleLoopStart = sample.loopStart
+              this.previewSampleLoopEnd = sample.loopEnd
+              this.samplePreviewPlayer.setLoopPoints(this.previewSampleLoopStart, this.previewSampleLoopEnd)
+            } else {
+              this.previewSampleLoopStart = 0
+              this.previewSampleLoopEnd = 0
+            }
+            this.samplePreviewPlayer.fadeIn = this.previewSampleFadeIn
+            this.previewSampleLength = this.samplePreviewPlayer.buffer.duration
+            this.previewSampleLoading = false
+          }
+        })
+    },
+    previewSample () {
+      if (this.previewSamplePlaying) {
+        this.previewSamplePlaying = false
+        this.previewSampleButtonText = 'Preview Sample'
+        this.samplePreviewPlayer.stop()
+      } else {
+        this.previewSamplePlaying = true
+        this.previewSampleButtonText = 'Stop'
+        this.samplePreviewPlayer.start()
+      }
+    },
+    editSample () {
+      this.$http.put('/samples/'.concat(this.selectedPreviewSample.id), {
+        fadeIn: this.previewSampleFadeIn,
+        loopPointsEnabled: this.previewSampleLoopPointsEnabled,
+        loopStart: this.previewSampleLoopStart,
+        loopEnd: this.previewSampleLoopEnd
+      }).then(response => {
+        if (response.status === 200) {
+          this.getSamples()
+          this.loadProfile()
+          this.closeEditSampleForm()
+          this.infoSnackbarText = 'Sample Saved'
+          this.infoSnackbar = true
+        }
+      })
+        .catch(() => {
+          this.errorSnackbarText = 'Error Saving Sample'
+          this.errorSnackbar = true
+        })
+    },
+    updatePreviewSamplePlayerFadeIn () {
+      this.samplePreviewPlayer.fadeIn = this.previewSampleFadeIn
+    },
+    updatePreviewSamplePlayerLoopPoints () {
+      if (this.previewSampleLoopStart >= 0 && this.previewSampleLoopEnd <= this.previewSampleLength) {
+        this.samplePreviewPlayer.setLoopPoints(this.previewSampleLoopStart, this.previewSampleLoopEnd)
+      }
     }
   }
 }