Update Gitea Container Registry URL in workflow configuration

- Create .devcontainer/devcontainer.env and .devcontainer/devcontainer.json for development environment configuration
- Add Gitea Actions README and Docker workflow for building and pushing images
- Update package.json to include @vue/cli-plugin-pwa
- Enhance index.html with manifest link and theme color
- Create public/manifest.webmanifest for PWA configuration
- Implement service worker registration and media session management in registerServiceWorker.js
- Update main.js to register the service worker
- Configure vue.config.js for PWA settings and caching strategies

.devcontainer/devcontainer.env

@@ -0,0 +1,2 @@
+CHOKIDAR_USEPOLLING=true
+WDS_SOCKET_PORT=0

.devcontainer/devcontainer.json

@@ -0,0 +1,39 @@
+{
+  "name": "Noisedash Dev",
+  "image": "node:18",
+  "forwardPorts": [8080, 1432],
+  "portsAttributes": {
+    "8080": { "label": "Vue dev server" },
+    "1432": { "label": "Noisedash API" }
+  },
+  "postCreateCommand": "npm install",
+  "remoteEnv": {
+    "HOST": "0.0.0.0"
+  },
+  "containerEnv": {
+    "HOST": "0.0.0.0"
+  },
+  "runArgs": ["--env-file", ".devcontainer/devcontainer.env"],
+  "remoteUser": "node",
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "eslint.format.enable": true,
+        "eslint.validate": ["javascript", "vue"],
+        "terminal.integrated.defaultProfile.linux": "bash",
+        "vetur.validation.template": true,
+        "vetur.validation.script": true,
+        "vetur.validation.style": true
+      },
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "octref.vetur"
+      ]
+    }
+  },
+  "updateContentCommand": "",
+  "onCreateCommand": "mkdir -p samples sessions log",
+  "postStartCommand": "npm run server & npm run serve"
+}

.eslintrc.js

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

.gitattributes

@@ -0,0 +1,3 @@
+* text=auto eol=lf
+*.{cmd,[cC][mM][dD]} text eol=crlf
+*.{bat,[bB][aA][tT]} text eol=crlf

.gitea/README.md

@@ -0,0 +1,17 @@
+Gitea Actions for Docker builds
+
+This folder contains workflows for building and pushing Docker images to the Gitea Container Registry.
+
+Setup
+- Ensure Gitea Actions is enabled in your instance and for this repo.
+- Create the following repository secrets:
+  - REGISTRY_HOST: your Gitea host (e.g., gitea.example.com)
+  - REGISTRY_OWNER: your namespace/user/org (e.g., ryan)
+  - REGISTRY_REPO: repository name (e.g., noisedash)
+  - REGISTRY_USERNAME: registry username
+  - REGISTRY_PASSWORD: registry password or a scoped token
+
+Notes
+- The workflow builds on pushes to main/master/dev and on tags v*.*.*.
+- It produces multi-arch images (amd64, arm64). Adjust platforms if not needed.
+- Image name resolves to: ${REGISTRY_HOST}/${REGISTRY_OWNER}/${REGISTRY_REPO} with tags derived from branch/tag/sha.

.gitea/workflows/docker-image.yml

@@ -0,0 +1,61 @@
+name: build-and-push-docker
+
+on:
+  push:
+    branches: [ main, master, dev ]
+    tags:
+      - 'v*.*.*'
+  pull_request:
+    branches: [ main, master, dev ]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install system Dependencies
+        run: |
+          apt-get update && apt-get install -y curl jq docker.io
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: gitea.purpleraft.com
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Extract metadata (tags, labels)
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY_HOST }}/${{ env.REGISTRY_OWNER }}/${{ env.REGISTRY_REPO }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+            type=sha
+
+      - name: Build (PR only)
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          push: false
+          platforms: linux/amd64
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Build and push (branches/tags)
+        if: ${{ github.event_name != 'pull_request' }}
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/FUNDING.yml

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

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    # Disable version updates for npm dependencies
+    open-pull-requests-limit: 0

.github/workflows/docker-image.yml

@@ -0,0 +1,38 @@
+name: Docker Image CI
+
+on:
+  pull_request:
+    types:
+      - labeled
+    branches:    
+      - 'main'
+
+jobs:
+  buildx:
+    if: ${{ github.event.label.name == 'run-workflow' }}
+    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.head_ref }}

CONTRIBUTING.md

@@ -1,4 +1,6 @@
 ## Project setup
+Requires [Node](https://nodejs.org/en/download/) and [Vue CLI](https://cli.vuejs.org/guide/installation.html)
+
 ```
 npm install
 ```
@@ -23,5 +25,22 @@ 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/).

Dockerfile

@@ -1,8 +1,8 @@
-FROM node:14
-LABEL maintainer="me@kevinthomas.dev"
+FROM node:20
+LABEL maintainer="kaythomas@pm.me"
 WORKDIR /var/noisedash
 COPY package*.json ./
-RUN npm install
+RUN npm install --force
 COPY . .
 ENV NODE_ENV production
 RUN npm run build

README.md

@@ -2,16 +2,16 @@
 
 Self-hostable web tool for generating ambient noises
 
-![Noisedash](./.github/noisedash-screenshot-1.jpg)
+![Noisedash](https://raw.githubusercontent.com/kaythomas0/noisedash/dev/.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
 
 * 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
+* 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 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
 
@@ -21,8 +21,11 @@ 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)
+  * `maxSampleSize` is in bytes - 10GB by default
+  * Keep `tls` as `false` if using an external web server like nginx
+  * `production.json` exists in the source code and is left empty intentionally for the reason outlined here: https://github.com/node-config/node-config/wiki/Strict-Mode#node_env-value-of-node_env-did-not-match-any-deployment-config-file-names=
 * Edit the config file to your preference
 * Bring the container up:
 
@@ -32,14 +35,33 @@ 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))
+
+## Kubernetes
+
+You can apply the manifest.yaml in the kubernetes folder to install Noisedash into your Kubernetes cluster.
+
+Optionally, uncomment the last lines in the file to also create an ingress.  The ingress, commented out by default, needs to have the clusterIssuser annotation set to your cluster issuer (default: letsencrypt-prod) and the ingress class set to your Ingress class (default: Nginx)
+
+
+``` bash
+$ kubectl apply -f ./kubernetes/manifest.yaml
+persistentvolumeclaim/db-pvc created
+persistentvolumeclaim/samples-pvc created
+deployment.apps/noisedash created
+service/noisedash created
+configmap/noisedashcfg created
+ingress.networking.k8s.io/noisedashingress created
+```
+
 ## From Source
 
-Requires node 14 and npm
+Requires node 20 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 +84,22 @@ 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)
+
+# License
+
+    Noisedash, a self-hostable web tool for generating ambient noises 
+    Copyright (C) 2021  Kay Thomas <kaythomas@pm.me>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.

config/default.json

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

config/production.json

@@ -0,0 +1 @@
+{}

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:

kubernetes/manifest.yaml

@@ -0,0 +1,240 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: db-pvc
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 10Gi
+---
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: samples-pvc
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 10Gi
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: noisedash
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: noisedash
+  template:
+    metadata:
+      labels:
+        app: noisedash
+    spec:
+      containers:
+      - name: noisedash
+        image: noisedash/noisedash:latest
+        ports:
+        - containerPort: 1432
+        volumeMounts:
+        - name: db
+          mountPath: /var/noisedash/db
+        - name: samples
+          mountPath: /var/noisedash/samples
+        - name: config
+          mountPath: /var/noisedash/config/default.json
+          subPath: config.json
+      volumes:
+      - name: db
+        persistentVolumeClaim:
+          claimName: db-pvc
+      - name: samples
+        persistentVolumeClaim:
+          claimName: samples-pvc
+      - name: config
+        configMap:
+          name: noisedashcfg
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: noisedash
+spec:
+  selector:
+    app: noisedash
+  ports:
+    - protocol: TCP
+      port: 80
+      targetPort: 1432
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: noisedashcfg
+data:
+  config.json: |
+    {
+      "Server": {
+        "listeningPort": 1432,
+        "sessionFileStorePath": "sessions",
+        "sampleUploadPath": "samples",
+        "maxSampleSize": 10737418240,
+        "logFile": "log/noisedash.log",
+        "tls": false,
+        "tlsKey": "certs/key.pem",
+        "tlsCert": "certs/cert.pem"
+      }
+    }
+---
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  annotations:
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+    kubernetes.io/ingress.class: nginx
+    kubernetes.io/tls-acme: "true"
+    nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
+    nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
+  labels:
+    app.kubernetes.io/instance: noisedash
+  name: noisedashingress
+spec:
+  rules:
+  - host: noisedash.freshbrewed.science
+    http:
+      paths:
+      - backend:
+          service:
+            name: noisedash
+            port:
+              number: 80
+        path: /
+        pathType: ImplementationSpecific
+  tls:
+  - hosts:
+    - noisedash.freshbrewed.science
+    secretName: noisedash-tls
+builder@DESKTOP-QADGF36:~/Workspaces/pyplanereport$
+builder@DESKTOP-QADGF36:~/Workspaces/pyplanereport$ cat noiseall.yaml
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: db-pvc
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 10Gi
+---
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: samples-pvc
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 10Gi
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: noisedash
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: noisedash
+  template:
+    metadata:
+      labels:
+        app: noisedash
+    spec:
+      containers:
+      - name: noisedash
+        image: noisedash/noisedash:latest
+        ports:
+        - containerPort: 1432
+        volumeMounts:
+        - name: db
+          mountPath: /var/noisedash/db
+        - name: samples
+          mountPath: /var/noisedash/samples
+        - name: config
+          mountPath: /var/noisedash/config/default.json
+          subPath: config.json
+      volumes:
+      - name: db
+        persistentVolumeClaim:
+          claimName: db-pvc
+      - name: samples
+        persistentVolumeClaim:
+          claimName: samples-pvc
+      - name: config
+        configMap:
+          name: noisedashcfg
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: noisedash
+spec:
+  selector:
+    app: noisedash
+  ports:
+    - protocol: TCP
+      port: 80
+      targetPort: 1432
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: noisedashcfg
+data:
+  config.json: |
+    {
+      "Server": {
+        "listeningPort": 1432,
+        "sessionFileStorePath": "sessions",
+        "sampleUploadPath": "samples",
+        "maxSampleSize": 10737418240,
+        "logFile": "log/noisedash.log",
+        "tls": false,
+        "tlsKey": "certs/key.pem",
+        "tlsCert": "certs/cert.pem"
+      }
+    }
+# ---
+# apiVersion: networking.k8s.io/v1
+# kind: Ingress
+# metadata:
+#   annotations:
+#     cert-manager.io/cluster-issuer: letsencrypt-prod
+#     kubernetes.io/ingress.class: nginx
+#     kubernetes.io/tls-acme: "true"
+#     nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
+#     nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
+#   labels:
+#     app.kubernetes.io/instance: noisedash
+#   name: noisedashingress
+# spec:
+#   rules:
+#   - host: noisedash.freshbrewed.science
+#     http:
+#       paths:
+#       - backend:
+#           service:
+#             name: noisedash
+#             port:
+#               number: 80
+#         path: /
+#         pathType: ImplementationSpecific
+#   tls:
+#   - hosts:
+#     - noisedash.freshbrewed.science
+#     secretName: noisedash-tls

package.json

@@ -1,57 +1,59 @@
 {
   "name": "noisedash",
-  "descriptions": "Self-hostable web tool for generating ambient noises",
-  "homepage": "https://github.com/KevinThomas0/noisedash",
-  "bugs": "https://github.com/KevinThomas0/noisedash/issues",
-  "license": "AGPL-3.0-or-later",
-  "author": "Kevin Thomas <me@kevinthomas.dev> (https://kevinthomas.dev)",
-  "version": "0.1.0",
+  "version": "0.7.0",
   "private": true,
+  "author": "Kay Thomas <kaythomas@pm.me> (https://kaythomas.dev)",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "server": "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"
+    "lint": "vue-cli-service lint",
+    "server": "node server/bin/www.js",
+    "server-prod": "NODE_ENV=production node server/bin/www.js"
   },
   "dependencies": {
     "@vscode/sqlite3": "^5.0.8",
-    "axios": "^0.21.4",
+    "axios": "^1.6.0",
     "config": "^3.3.6",
     "connect-history-api-fallback": "^1.6.0",
     "cookie-parser": "^1.4.5",
-    "core-js": "^3.19.1",
-    "express": "^4.17.1",
-    "express-session": "^1.17.2",
-    "multer": "^1.4.3",
-    "passport": "^0.4.1",
+    "core-js": "^3.23.5",
+    "express": "^4.18.1",
+    "express-session": "^1.17.3",
+    "multer": "^1.4.5-lts.1",
+    "passport": "^0.6.0",
     "passport-local": "^1.0.0",
     "path": "^0.12.7",
     "session-file-store": "^1.5.0",
     "tone": "^14.7.77",
-    "vue": "^2.6.11",
-    "vue-router": "^3.5.3",
-    "vuetify": "^2.5.12",
+    "vue": "^2.7.16",
+    "vue-router": "^3.5.4",
+    "vuetify": "^2.6.10",
     "winston": "^3.3.3"
   },
   "devDependencies": {
-    "@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",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+  "@vue/cli-plugin-pwa": "^5.0.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.20.0",
     "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
-    "vue-cli-plugin-vuetify": "^2.4.3",
-    "vue-template-compiler": "^2.6.11",
+    "vue-cli-plugin-vuetify": "^2.5.8",
+    "vue-template-compiler": "^2.7.16",
     "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"
 }

public/index.html

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <meta name="theme-color" content="#121212">
+  <link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

public/manifest.webmanifest

@@ -0,0 +1,16 @@
+{
+  "name": "Noisedash",
+  "short_name": "Noisedash",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#121212",
+  "theme_color": "#121212",
+  "description": "Ambient noise generator",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ]
+}

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,11 +31,13 @@ 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
+  saveUninitialized: true,
+  cookie: { sameSite: 'strict' }
 }))
 app.use((req, res, next) => {
   const msgs = req.session.messages || []

server/boot/db.js

@@ -1,4 +1,5 @@
 const db = require('../db')
+const logger = require('../logger')
 
 module.exports = function () {
   db.serialize(() => {
@@ -51,5 +52,54 @@ 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
+
+        db.serialize(() => {
+          if (userVersion < 1) {
+            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')
+          }
+
+          if (userVersion < 2) {
+            db.run('ALTER TABLE users ADD COLUMN preferences TEXT DEFAULT "{}"')
+
+            db.run('PRAGMA user_version = 2')
+          }
+
+          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_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_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 sporadic_min INTEGER DEFAULT 30')
+            db.run('ALTER TABLE profiles_samples ADD COLUMN sporadic_max INTEGER DEFAULT 300')
+
+            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/auth.js

@@ -36,8 +36,14 @@ router.get('/admin', (req, res) => {
 })
 
 router.get('/logout', (req, res) => {
-  req.logout()
+  req.logout((err) => {
+    if (err) {
+      logger.error(err)
+      res.sendStatus(500)
+    } else {
       res.sendStatus(200)
+    }
+  })
 })
 
 router.get('/setup', (req, res) => {

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)
@@ -59,10 +59,28 @@ router.post('/profiles', (req, res) => {
       profileID = this.lastID
 
       req.body.samples.forEach(s => {
-        db.run('INSERT INTO profiles_samples (profile, sample, volume) VALUES (?, ?, ?)', [
+        db.run(`INSERT INTO profiles_samples(
+          profile,
+          sample,
+          volume,
+          reverb_enabled,
+          reverb_pre_delay,
+          reverb_decay,
+          reverb_wet,
+          playback_mode,
+          sporadic_min,
+          sporadic_max)
+          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
           profileID,
           s.id,
-          s.volume
+          s.volume,
+          s.reverbEnabled,
+          s.reverbPreDelay,
+          s.reverbDecay,
+          s.reverbWet,
+          s.playbackMode,
+          s.sporadicMin,
+          s.sporadicMax
         ],
         (err) => {
           if (err) {
@@ -77,6 +95,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)
@@ -144,10 +222,28 @@ router.put('/profiles/:profileId', (req, res) => {
         })
 
         req.body.samples.forEach(s => {
-          db.run('INSERT INTO profiles_samples (profile, sample, volume) VALUES (?, ?, ?)', [
+          db.run(`INSERT INTO profiles_samples(
+            profile,
+            sample,
+            volume,
+            reverb_enabled,
+            reverb_pre_delay,
+            reverb_decay,
+            reverb_wet,
+            playback_mode,
+            sporadic_min,
+            sporadic_max)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
             req.params.profileId,
             s.id,
-            s.volume
+            s.volume,
+            s.reverbEnabled,
+            s.reverbPreDelay,
+            s.reverbDecay,
+            s.reverbWet,
+            s.playbackMode,
+            s.sporadicMin,
+            s.sporadicMax
           ],
           (err) => {
             if (err) {
@@ -291,7 +387,21 @@ 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,
+          profiles_samples.reverb_enabled as reverbEnabled,
+          profiles_samples.reverb_pre_delay as reverbPreDelay,
+          profiles_samples.reverb_decay as reverbDecay,
+          profiles_samples.reverb_wet as reverbWet,
+          profiles_samples.playback_mode as playbackMode,
+          profiles_samples.sporadic_min as sporadicMin,
+          profiles_samples.sporadic_max as sporadicMax,
+          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 +421,17 @@ 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
+            sample.reverbEnabled = row.reverbEnabled === 1
+            sample.reverbPreDelay = row.reverbPreDelay
+            sample.reverbDecay = row.reverbDecay
+            sample.reverbWet = row.reverbWet
+            sample.playbackMode = row.playbackMode
+            sample.sporadicMin = row.sporadicMin
+            sample.sporadicMax = row.sporadicMax
 
             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

@@ -9,7 +9,11 @@ router.get('/users/current', (req, res) => {
     return res.sendStatus(401)
   }
 
-  db.get('SELECT is_admin as isAdmin, dark_mode as darkMode, can_upload as canUpload, * FROM users WHERE id = ?', [req.user.id], (err, row) => {
+  db.get(`SELECT
+    is_admin as isAdmin,
+    dark_mode as darkMode,
+    can_upload as canUpload,
+    * FROM users WHERE id = ?`, [req.user.id], (err, row) => {
     if (err) {
       logger.error(err)
       return res.sendStatus(500)
@@ -24,6 +28,7 @@ router.get('/users/current', (req, res) => {
       user.isAdmin = row.isAdmin === 1
       user.darkMode = row.darkMode === 1
       user.canUpload = row.canUpload === 1
+      user.preferences = JSON.parse(row.preferences)
     }
 
     res.json({ user: user })
@@ -67,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)
@@ -89,19 +96,20 @@ 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)
-              VALUES (?, ?, ?, ?, ?, ?, ?)`, [
+            db.run(`INSERT INTO users (username, hashed_password, salt, name, is_admin, dark_mode, can_upload, preferences)
+              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)
-                if (err.code === 'SQLITE_CONSTRAINT') {
+                if (err.code === 'SQLITE_CONSTRAINT_UNIQUE') {
                   return res.sendStatus(409)
                 } else {
                   return res.sendStatus(500)
@@ -120,19 +128,20 @@ 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)
-            VALUES (?, ?, ?, ?, ?, ?, ?)`, [
+          db.run(`INSERT INTO users (username, hashed_password, salt, name, is_admin, dark_mode, can_upload, preferences)
+            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)
-              if (err.code === 'SQLITE_CONSTRAINT') {
+              if (err.code === 'SQLITE_CONSTRAINT_UNIQUE') {
                 return res.sendStatus(409)
               } else {
                 return res.sendStatus(500)
@@ -287,4 +296,23 @@ router.delete('/users/:userId', (req, res) => {
   })
 })
 
+router.patch('/users/preferences', (req, res) => {
+  if (!req.user) {
+    return res.sendStatus(401)
+  }
+
+  const preferences = JSON.stringify(req.body.preferences)
+
+  db.serialize(() => {
+    db.run('UPDATE users SET preferences = ? WHERE id = ?', [preferences, req.user.id], (err) => {
+      if (err) {
+        logger.error(err)
+        return res.sendStatus(500)
+      } else {
+        return res.sendStatus(200)
+      }
+    })
+  })
+})
+
 module.exports = router

src/components/AccountPage.vue

@@ -8,6 +8,10 @@
       </v-col>
     </v-row>
 
+    <h2 class="headline font-weight-bold mb-3">
+      User Management
+    </h2>
+
     <v-col cols="12">
       <v-row>
         ID: {{ currentUser.id }}
@@ -24,9 +28,9 @@
       v-model="changePasswordDialog"
       max-width="600px"
     >
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-btn
-          class="my-3"
+          class="mt-5 mb-10"
           v-bind="attrs"
           v-on="on"
           @click="resetChangePasswordForm"
@@ -77,13 +81,42 @@
       </v-form>
     </v-dialog>
 
+    <h2 class="headline font-weight-bold mb-3">
+      Preferences
+    </h2>
+
+    <h3 class="font-weight-bold">
+      Dark Mode
+    </h3>
+
+    <v-switch
+      v-model="$vuetify.theme.dark"
+      :label="`${$vuetify.theme.dark ? 'On' : 'Off'}`"
+      @change="toggleDarkMode"
+    />
+
+    <h3 class="mb-5 font-weight-bold">
+      Accent Color
+    </h3>
+
+    <v-color-picker
+      v-model="accentColor"
+    />
+
+    <v-btn
+      class="mt-5"
+      @click="updateAccentColor"
+    >
+      Apply
+    </v-btn>
+
     <v-snackbar
       v-model="snackbar"
       timeout="3000"
     >
       {{ snackbarText }}
 
-      <template v-slot:action="{ attrs }">
+      <template #action="{ attrs }">
         <v-btn
           text
           v-bind="attrs"

src/components/AdminPage.vue

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

src/components/AppBar.vue

@@ -7,7 +7,7 @@
       dense
     >
       <v-app-bar-nav-icon
-        @click="getCurrentUser"
+        @click="checkForAdmin"
       />
     </v-app-bar>
     <v-navigation-drawer
@@ -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>
+      <template #append>
         <v-btn
           block
-          href="https://github.com/KevinThomas0/noisedash"
+          href="https://github.com/kaythomas0/noisedash"
           target="_blank"
         >
           Source Code

src/components/LoginPage.vue

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

src/components/Noise.vue

@@ -1,582 +0,0 @@
-<template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col>
-        <h1 class="display-2 font-weight-bold mb-5">
-          Noisedash
-        </h1>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="display-1 font-weight-bold mb-10">
-          Playback
-        </h2>
-
-        <v-row justify="center">
-          <v-btn
-            :disabled="playDisabled || !isTimerValid"
-            class="mx-3 mb-5"
-            fab
-            large
-            color="primary"
-            @click="play"
-          >
-            <v-icon>mdi-play</v-icon>
-          </v-btn>
-
-          <v-btn
-            class="mx-3 mb-5"
-            fab
-            large
-            color="primary"
-            @click="stop"
-          >
-            <v-icon>mdi-stop</v-icon>
-          </v-btn>
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
-          Profiles
-        </h2>
-
-        <v-row justify="center">
-          <v-select
-            v-model="selectedProfile"
-            :items="profileItems"
-            return-object
-            label="Profiles"
-            class="mx-3 mb-5"
-            :disabled="playDisabled"
-            @change="loadProfile"
-          />
-        </v-row>
-
-        <v-btn
-          class="mx-3 my-3"
-          :disabled="profileItems.length < 2 || playDisabled"
-          @click="deleteProfile"
-        >
-          Delete Profile
-        </v-btn>
-
-        <v-btn
-          class="mx-3 my-3"
-          @click="updateProfile"
-        >
-          Save Profile
-        </v-btn>
-
-        <v-dialog
-          v-model="profileDialog"
-          max-width="600px"
-        >
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              class="mx-3 my-3"
-              :disabled="playDisabled"
-              v-on="on"
-              @click="resetProfileForm"
-            >
-              Save Profile As...
-            </v-btn>
-          </template>
-          <v-form
-            ref="profileForm"
-            v-model="isProfileValid"
-          >
-            <v-card>
-              <v-card-title>
-                <span class="text-h5">Profile Name</span>
-              </v-card-title>
-              <v-card-text>
-                <v-container>
-                  <v-row>
-                    <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>
-              <v-card-actions>
-                <v-spacer />
-                <v-btn
-                  text
-                  @click="profileDialog = false"
-                >
-                  Close
-                </v-btn>
-                <v-btn
-                  text
-                  :disabled="!isProfileValid"
-                  @click="saveProfile"
-                >
-                  Save
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-form>
-        </v-dialog>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
-          Timer
-        </h2>
-
-        <v-row justify="center">
-          <v-checkbox
-            v-model="isTimerEnabled"
-            :disabled="playDisabled"
-            label="Timer"
-            class="mx-3"
-          />
-        </v-row>
-
-        <v-form
-          v-model="isTimerValid"
-        >
-          <v-row justify="center">
-            <v-text-field
-              v-model="hours"
-              type="number"
-              label="Hours"
-              class="mx-3"
-              :disabled="playDisabled || !isTimerEnabled"
-              :rules="[rules.gt(-1)]"
-            />
-
-            <v-text-field
-              v-model="minutes"
-              type="number"
-              label="Minutes"
-              class="mx-3"
-              :disabled="playDisabled || !isTimerEnabled"
-              :rules="[rules.lt(60), rules.gt(-1)]"
-            />
-
-            <v-text-field
-              v-model="seconds"
-              type="number"
-              label="Seconds"
-              class="mx-3"
-              :disabled="playDisabled || !isTimerEnabled"
-              :rules="[rules.lt(60), rules.gt(-1)]"
-            />
-
-            <v-text-field
-              v-model="timeRemaining"
-              class="mx-3"
-              :value="timeRemaining"
-              label="Seconds Remaining"
-              filled
-              readonly
-              :disabled="!isTimerEnabled"
-            />
-          </v-row>
-        </v-form>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="display-1 font-weight-bold mb-5">
-          Noise Settings
-        </h2>
-
-        <v-row justify="center">
-          <v-slider
-            v-model="volume"
-            label="Volume"
-            thumb-label
-            max="0"
-            min="-30"
-            class="mx-3"
-            @input="updateVolume"
-          />
-          <div
-            class="mx-3"
-          >
-            <p>{{ volume }}</p>
-          </div>
-        </v-row>
-
-        <v-row justify="center">
-          <v-select
-            v-model="noiseColor"
-            :items="noiseColorItems"
-            label="Noise Color"
-            class="mx-3"
-            @change="updateNoiseColor"
-          />
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
-          Filter
-        </h2>
-
-        <v-row justify="center">
-          <v-checkbox
-            v-model="isFilterEnabled"
-            label="Filter"
-            class="mx-3"
-            @change="updateAudioChain"
-          />
-        </v-row>
-
-        <v-row justify="center">
-          <v-slider
-            v-model="filterCutoff"
-            :disabled="!isFilterEnabled || isLFOFilterCutoffEnabled"
-            label="Cutoff"
-            thumb-label
-            max="20000"
-            min="0"
-            class="mx-3"
-            @input="updateFilterCutoff"
-          />
-          <div
-            class="mx-3"
-          >
-            <p>{{ filterCutoff }}</p>
-          </div>
-        </v-row>
-
-        <v-row justify="center">
-          <v-select
-            v-model="filterType"
-            :disabled="!isFilterEnabled"
-            :items="filterTypeItems"
-            label="Filter Type"
-            class="mx-3"
-            @change="updateFilterType"
-          />
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <v-row justify="center">
-          <v-checkbox
-            v-model="isLFOFilterCutoffEnabled"
-            :disabled="!isFilterEnabled"
-            label="Filter Cutoff LFO"
-            class="mx-3"
-            @change="updateAudioChain"
-          />
-        </v-row>
-
-        <v-row justify="center">
-          <v-slider
-            v-model="lfoFilterCutoffFrequency"
-            :disabled="!isLFOFilterCutoffEnabled || !isFilterEnabled"
-            thumb-label
-            label="Rate"
-            max="10"
-            min="0.01"
-            step="0.01"
-            class="mx-3"
-            @input="updateLFOFilterCutoffFrequency"
-          />
-          <div
-            class="mx-3"
-          >
-            <p>{{ lfoFilterCutoffFrequency }}</p>
-          </div>
-        </v-row>
-
-        <v-row justify="center">
-          <v-range-slider
-            v-model="lfoFilterCutoffRange"
-            :disabled="!isLFOFilterCutoffEnabled || !isFilterEnabled"
-            label="Range"
-            thumb-label
-            :min="lfoFilterCutoffMin"
-            :max="lfoFilterCutoffMax"
-            class="mx-3"
-            @input="updateLFOFilterCutoffRange"
-          />
-          <div
-            class="mx-3"
-          >
-            <p>{{ lfoFilterCutoffRange }}</p>
-          </div>
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <h2 class="headline font-weight-bold mb-5">
-          Tremolo
-        </h2>
-
-        <v-row justify="center">
-          <v-checkbox
-            v-model="isTremoloEnabled"
-            label="Enabled"
-            class="mx-3"
-            @change="updateAudioChain"
-          />
-        </v-row>
-
-        <v-row justify="center">
-          <v-slider
-            v-model="tremoloFrequency"
-            :disabled="!isTremoloEnabled"
-            label="Rate"
-            thumb-label
-            max="1"
-            min="0"
-            step="0.1"
-            ticks
-            tick-size="4"
-            class="mx-3"
-            @input="updateTremoloFrequency"
-          />
-          <div
-            class="mx-3"
-          >
-            <p>{{ tremoloFrequency }}</p>
-          </div>
-        </v-row>
-
-        <v-row justify="center">
-          <v-slider
-            v-model="tremoloDepth"
-            :disabled="!isTremoloEnabled"
-            label="Depth"
-            thumb-label
-            max="1"
-            min="0"
-            step="0.1"
-            ticks
-            tick-size="4"
-            class="mx-3"
-            @input="updateTremoloDepth"
-          />
-          <div
-            class="mx-3"
-          >
-            <p>{{ tremoloDepth }}</p>
-          </div>
-        </v-row>
-      </v-col>
-
-      <v-col
-        v-if="canUpload"
-        cols="12"
-      >
-        <h2 class="display-1 font-weight-bold mb-5">
-          Samples
-        </h2>
-
-        <v-row
-          v-for="(sample, index) in loadedSamples"
-          :key="sample.name"
-        >
-          <v-container>
-            <v-row
-              justify="center"
-            >
-              {{ sample.name }}
-            </v-row>
-
-            <v-row>
-              <v-btn
-                icon
-                :disabled="playDisabled"
-                @click="removeSample(index)"
-              >
-                <v-icon>mdi-delete</v-icon>
-              </v-btn>
-
-              <v-slider
-                v-model="sample.volume"
-                label="Volume"
-                thumb-label
-                max="0"
-                min="-30"
-                class="mx-3"
-                @input="updateSampleVolume(sample.id, index)"
-              />
-              <div
-                class="mx-3"
-              >
-                <p>{{ loadedSamples[index].volume }}</p>
-              </div>
-            </v-row>
-          </v-container>
-        </v-row>
-
-        <v-dialog
-          v-model="addSampleDialog"
-          max-width="600px"
-        >
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              class="mx-3 my-3 mb-5"
-              :disabled="playDisabled"
-              v-on="on"
-            >
-              Add Sample
-            </v-btn>
-          </template>
-          <v-card>
-            <v-card-title>
-              <span class="text-h5">Add Sample</span>
-            </v-card-title>
-            <v-card-text>
-              <v-container>
-                <v-row v-if="unloadedSamples.length != 0">
-                  <v-list-item
-                    v-for="(sample) in unloadedSamples"
-                    :key="sample.name"
-                  >
-                    <v-list-item-action>
-                      <v-checkbox
-                        v-model="checkedSamples"
-                        :value="sample.id"
-                      />
-                    </v-list-item-action>
-                    <v-list-item-content>
-                      <v-list-item-title>{{ sample.name }}</v-list-item-title>
-                    </v-list-item-content>
-                  </v-list-item>
-                </v-row>
-                <v-row v-else>
-                  No samples to add
-                </v-row>
-              </v-container>
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer />
-              <v-btn
-                text
-                @click="addSampleDialog = false"
-              >
-                Close
-              </v-btn>
-              <v-btn
-                text
-                :disabled="unloadedSamples.length === 0"
-                @click="addSample"
-              >
-                Add
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-
-        <v-dialog
-          v-model="uploadSampleDialog"
-          max-width="600px"
-        >
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              class="mx-3 my-3 mb-5"
-              v-on="on"
-              @click="resetUploadSampleForm"
-            >
-              Upload Sample
-            </v-btn>
-          </template>
-          <v-form
-            ref="uploadSampleForm"
-            v-model="isSampleUploadValid"
-          >
-            <v-card>
-              <v-card-title>
-                <span class="text-h5">Upload Sample</span>
-              </v-card-title>
-              <v-card-text>
-                <v-container>
-                  <v-row>
-                    <v-col cols="12">
-                      <p><strong>WARNING:</strong> Uploaded samples are publicly accessible.</p>
-                    </v-col>
-                  </v-row>
-                  <v-row>
-                    <v-file-input
-                      v-model="selectedSample"
-                      accept="audio/*"
-                      label="Upload a sample!"
-                      :rules="[rules.required()]"
-                    />
-                  </v-row>
-                  <v-row>
-                    <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>
-              <v-card-actions>
-                <v-spacer />
-                <v-btn
-                  text
-                  @click="uploadSampleDialog = false"
-                >
-                  Close
-                </v-btn>
-                <v-btn
-                  text
-                  :disabled="!isSampleUploadValid"
-                  @click="uploadSample"
-                >
-                  Upload
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-form>
-        </v-dialog>
-      </v-col>
-
-      <v-snackbar
-        v-model="infoSnackbar"
-        timeout="3000"
-      >
-        {{ infoSnackbarText }}
-
-        <template v-slot:action="{ attrs }">
-          <v-btn
-            text
-            v-bind="attrs"
-            @click="infoSnackbar = false"
-          >
-            Close
-          </v-btn>
-        </template>
-      </v-snackbar>
-
-      <v-snackbar
-        v-model="errorSnackbar"
-        color="error"
-        timeout="3000"
-      >
-        {{ errorSnackbarText }}
-
-        <template v-slot:action="{ attrs }">
-          <v-btn
-            text
-            v-bind="attrs"
-            @click="errorSnackbar = false"
-          >
-            Close
-          </v-btn>
-        </template>
-      </v-snackbar>
-    </v-row>
-  </v-container>
-</template>
-
-<script src="./noise.js"></script>

src/components/account.js

@@ -1,11 +1,12 @@
 export default {
-  name: 'Admin',
+  name: 'Account',
 
   data: () => ({
     currentUser: {},
     changePasswordDialog: false,
     isPasswordValid: false,
     password: '',
+    accentColor: {},
     snackbar: false,
     snackbarText: '',
     rules: {
@@ -21,6 +22,7 @@ export default {
         .then(response => {
           if (response.status === 200) {
             this.currentUser = response.data.user
+            this.accentColor = this.currentUser.preferences.accentColor
           }
         })
     },
@@ -40,6 +42,19 @@ export default {
       if (this.$refs.changePasswordForm) {
         this.$refs.changePasswordForm.reset()
       }
+    },
+    toggleDarkMode () {
+      this.$http.patch('/users/dark-mode', {
+        darkMode: this.$vuetify.theme.dark
+      })
+    },
+    updateAccentColor () {
+      const preferences = { accentColor: this.accentColor }
+      this.$http.patch('/users/preferences', {
+        preferences: preferences
+      })
+      this.$vuetify.theme.themes.dark.primary = this.accentColor.hex
+      this.$vuetify.theme.themes.light.primary = this.accentColor.hex
     }
   }
 }

src/components/appbar.js

@@ -6,6 +6,9 @@ export default {
     isAdmin: false,
     loggedIn: false
   }),
+  created () {
+    this.getUserPreferences()
+  },
   methods: {
     home () {
       this.$router.push('/')
@@ -24,7 +27,7 @@ export default {
           }
         })
     },
-    getCurrentUser () {
+    checkForAdmin () {
       this.loggedIn = false
       this.drawyer = true
       this.$http.get('/users/current')
@@ -32,16 +35,20 @@ export default {
           if (response.status === 200) {
             this.loggedIn = true
             this.isAdmin = response.data.user.isAdmin
-            this.$vuetify.theme.dark = response.data.user.darkMode
           }
         })
         .catch(() => {
           this.isAdmin = false
         })
     },
-    toggleDarkMode () {
-      this.$http.patch('/users/dark-mode', {
-        darkMode: this.$vuetify.theme.dark
+    getUserPreferences () {
+      this.$http.get('/users/current')
+        .then(response => {
+          if (response.status === 200) {
+            const preferences = response.data.user.preferences
+            this.$vuetify.theme.themes.dark.primary = preferences.accentColor.hex
+            this.$vuetify.theme.themes.light.primary = preferences.accentColor.hex
+          }
         })
     }
   }

src/components/login.js

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

src/components/noise.js

@@ -1,15 +1,24 @@
-import { Filter, LFO, Noise, Players, Transport, Tremolo } from 'tone'
+import * as Tone from 'tone'
+import { setMediaSessionMetadata } from '@/registerServiceWorker'
 
 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 +53,30 @@ 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,
+    startRecordingDialog: false,
+    recordingDialog: false,
+    recordingTimeElapsed: 0,
+    recordedProfile: {},
+    recordingFileName: '',
+    isRecordingValid: false,
+    unsavedWork: false,
+    saveProfileText: 'Save Profile',
+    unwatch: null,
+    confirmSwitchProfileDialog: false,
+    activeProfile: {},
+    isSporadicValid: false,
     errorSnackbar: false,
     errorSnackbarText: '',
     rules: {
@@ -68,15 +101,54 @@ 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)
+        settings.push(s.reverbEnabled)
+        settings.push(s.reverbPreDelay)
+        settings.push(s.reverbDecay)
+        settings.push(s.reverbWet)
+        settings.push(s.playbackMode)
+        settings.push(s.sporadicMin)
+        settings.push(s.sporadicMax)
+      })
+
+      return settings
     }
   },
   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.recorder = new Tone.Recorder()
+
     this.populateProfileItems(0)
+    this.populatePreviewSampleItems()
     this.getSamples()
     this.getCurrentUser()
   },
@@ -84,64 +156,138 @@ export default {
     this.stop()
   },
   methods: {
-    play () {
+    async play () {
+      if (!this.players.loaded) {
+        return
+      }
+
+      await Tone.start()
+
       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()
       }
 
       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
         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.loadedSamples.forEach(s => {
-          this.players.player(s.id).loop = true
-          this.players.player(s.id).unsync().sync().start(0).stop(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).unsync().sync().start(0)
-        })
+        this.players.player(s.id).fadeIn = s.fadeIn
+        if (s.loopPointsEnabled) {
+          this.players.player(s.id).setLoopPoints(s.loopStart, s.loopEnd)
+        } else {
+          this.players.player(s.id).setLoopPoints(0, this.players.player(s.id).buffer.duration)
+        }
+        this.players.player(s.id).volume.value = s.volume
+
+        this.players.player(s.id).disconnect()
+        if (s.reverbEnabled) {
+          const reverb = new Tone.Reverb(s.reverbDecay).toDestination()
+          reverb.set({ preDelay: s.reverbPreDelay, wet: s.reverbWet })
+          this.players.player(s.id).connect(reverb)
+        } else {
+          this.players.player(s.id).toDestination()
         }
 
-      Transport.start()
+        if (s.playbackMode === 'sporadic') {
+          this.players.player(s.id).loop = false
+
+          const maxInt = parseInt(s.sporadicMax, 10)
+          const minInt = parseInt(s.sporadicMin, 10)
+
+          if (minInt <= maxInt) {
+            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).unsync().sync().start(0)
+          }
+        }
+      })
+
+      Tone.Transport.start('+0.1')
+
+      // Update Media Session so playback can continue in background with proper metadata
+      try {
+        setMediaSessionMetadata({ title: (this.selectedProfile && this.selectedProfile.text) ? this.selectedProfile.text : 'Noisedash' })
+        if ('mediaSession' in navigator) {
+          navigator.mediaSession.playbackState = 'playing'
+          navigator.mediaSession.setActionHandler('play', () => this.play())
+          navigator.mediaSession.setActionHandler('pause', () => this.stop())
+          navigator.mediaSession.setActionHandler('stop', () => this.stop())
+        }
+      } catch (e) { /* no-op */ }
+    },
+    playSporadicSample (id) {
+      const sample = this.loadedSamples.find(s => s.id === id)
+
+      clearInterval(sample.initialSporadicPlayInterval)
+      clearInterval(sample.sporadicInterval)
+
+      this.players.player(id).unsync().sync().start()
+
+      const maxInt = parseInt(sample.sporadicMax, 10)
+      const minInt = parseInt(sample.sporadicMin, 10)
+      sample.playNextTime = Math.floor(Math.random() * (maxInt - minInt + 1) + minInt)
+
+      sample.sporadicInterval = setInterval(() => this.playSporadicSample(id), sample.playNextTime * 1000)
     },
     stop () {
       clearInterval(this.transportInterval)
-      Transport.stop()
+      Tone.Transport.stop()
       this.playDisabled = false
 
       clearInterval(this.timeRemainingInterval)
       this.timeRemaining = 0
       this.duration = 0
+
+      this.loadedSamples.forEach(s => {
+        if (s.playbackMode === 'sporadic') {
+          clearInterval(s.initialSporadicPlayInterval)
+          clearInterval(s.sporadicInterval)
+        }
+      })
+
+      // Reflect playback state for OS controls
+      if ('mediaSession' in navigator) {
+        try { navigator.mediaSession.playbackState = 'paused' } catch (e) { /* no-op */ }
+      }
     },
     startTimer () {
       this.timeRemaining -= 1
@@ -176,27 +322,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,7 +359,9 @@ export default {
               } else {
                 this.selectedProfile = this.profileItems.find(p => p.id === profileId)
               }
-              this.loadProfile()
+              this.exportedProfile = this.profileItems[0]
+              this.recordedProfile = this.profileItems[0]
+              this.loadProfile(true)
             }
           }
         })
@@ -250,6 +398,7 @@ export default {
         if (response.status === 200) {
           this.profileDialog = false
           this.populateProfileItems(response.data.id)
+          this.unsavedWork = false
           this.infoSnackbarText = 'Profile Saved'
           this.infoSnackbar = true
         }
@@ -278,6 +427,7 @@ export default {
         samples: this.loadedSamples
       }).then(response => {
         if (response.status === 200) {
+          this.unsavedWork = false
           this.infoSnackbarText = 'Profile Saved'
           this.infoSnackbar = true
         }
@@ -287,7 +437,10 @@ export default {
           this.errorSnackbar = true
         })
     },
-    loadProfile () {
+    loadProfile (checkForUnsavedWork) {
+      if (checkForUnsavedWork && this.unsavedWork) {
+        this.confirmSwitchProfileDialog = true
+      } else {
         this.$http.get('/profiles/'.concat(this.selectedProfile.id))
           .then(response => {
             if (response.status === 200) {
@@ -309,8 +462,23 @@ export default {
               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
+          })
+      }
     },
     deleteProfile () {
       this.$http.delete('/profiles/'.concat(this.selectedProfile.id))
@@ -336,6 +504,7 @@ export default {
                 this.players.add(s.id, '/samples/' + s.user + '_' + s.name).toDestination()
               }
             })
+            this.mainPlayLoading = false
           }
         })
     },
@@ -353,6 +522,7 @@ export default {
         .then(response => {
           if (response.status === 200) {
             this.getSamples()
+            this.populatePreviewSampleItems()
             this.infoSnackbarText = 'Sample Uploaded'
             this.infoSnackbar = true
           }
@@ -372,6 +542,8 @@ export default {
       this.checkedSamples.forEach(i => {
         const load = this.allSamples.find(e => e.id === i)
         load.volume = -10
+        load.sporadicMin = 30
+        load.sporadicMax = 300
         this.loadedSamples.push(load)
       })
 
@@ -391,6 +563,9 @@ export default {
           if (response.status === 200) {
             this.canUpload = response.data.user.canUpload
             this.$vuetify.theme.dark = response.data.user.darkMode
+            const preferences = response.data.user.preferences
+            this.$vuetify.theme.themes.dark.primary = preferences.accentColor.hex
+            this.$vuetify.theme.themes.light.primary = preferences.accentColor.hex
           }
         })
     },
@@ -403,6 +578,363 @@ 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 Importing 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 Exporting 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
+          }
+        })
+    },
+    updatePreviewSampleLoopPoints () {
+      if (this.previewSampleLoopPointsEnabled) {
+        this.samplePreviewPlayer.setLoopPoints(this.previewSampleLoopStart, this.previewSampleLoopEnd)
+      } else {
+        this.samplePreviewPlayer.setLoopPoints(0, this.samplePreviewPlayer.buffer.duration)
+      }
+    },
+    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()
+
+          //  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
+        }
+      })
+        .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)
+      }
+    },
+    openStartRecordingDialog () {
+      this.startRecordingDialog = true
+      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) {
+            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)
+        } else {
+          this.players.player(s.id).setLoopPoints(0, this.players.player(s.id).buffer.duration)
+        }
+        this.players.player(s.id).volume.value = s.volume
+
+        this.players.player(s.id).disconnect()
+        if (s.reverbEnabled) {
+          const reverb = new Tone.Reverb(s.reverbDecay).connect(this.recorder).toDestination()
+          reverb.set({ preDelay: s.reverbPreDelay, wet: s.reverbWet })
+          this.players.player(s.id).connect(reverb)
+        } else {
+          this.players.player(s.id).connect(this.recorder).toDestination()
+        }
+      })
+
+      this.noise.sync().start(0)
+
+      this.loadedSamples.forEach(s => {
+        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
+          this.players.player(s.id).unsync().sync().start(0)
+        }
+      })
+
+      Tone.Transport.start('+0.1')
+    },
+    async stopRecording () {
+      const recording = await this.recorder.stop()
+
+      // Set active profile back to the selected one
+      this.loadProfile(false)
+
+      const url = URL.createObjectURL(recording)
+      const anchor = document.createElement('a')
+      anchor.download = this.recordingFileName + '.webm'
+      anchor.href = url
+      anchor.click()
+
+      clearInterval(this.recordingInterval)
+
+      this.loadedSamples.forEach(s => {
+        if (s.playbackMode === 'sporadic') {
+          clearInterval(s.initialSporadicPlayInterval)
+          clearInterval(s.sporadicInterval)
+        }
+      })
+
+      this.recordingDialog = false
+      this.stop()
+    },
+    async cancelRecording () {
+      await this.recorder.stop()
+
+      // Set active profile back to the selected one
+      this.loadProfile(false)
+
+      clearInterval(this.recordingInterval)
+      this.recordingDialog = false
+      this.stop()
+    },
+    discardChanges () {
+      this.unsavedWork = false
+      this.loadProfile(true)
+      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,4 +1,6 @@
 export default {
+  name: 'Register',
+
   data: () => ({
     valid: false,
     name: '',

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import vuetify from './plugins/vuetify'
 import instance from './axios'
+import './registerServiceWorker'
 
 Vue.prototype.$http = instance
 

src/plugins/vuetify.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Vuetify from 'vuetify/lib/framework'
+import Vuetify from 'vuetify/lib'
 
 import colors from 'vuetify/lib/util/colors'
 

src/registerServiceWorker.js

@@ -0,0 +1,46 @@
+/* global workbox */
+// Registers the service worker generated by @vue/cli-plugin-pwa
+// This enables installability and offline caching for static assets.
+
+if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  const register = async () => {
+    try {
+      const reg = await navigator.serviceWorker.register(`${process.env.BASE_URL}service-worker.js`)
+      // Listen for updates and activate immediately
+      reg.addEventListener('updatefound', () => {
+        const newWorker = reg.installing
+        if (!newWorker) return
+        newWorker.addEventListener('statechange', () => {
+          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+            // New content is available; refresh clients
+            reg.waiting && reg.waiting.postMessage({ type: 'SKIP_WAITING' })
+          }
+        })
+      })
+
+      // Claim clients after activation
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        // optional: location.reload()
+      })
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('SW registration failed', e)
+    }
+  }
+  register()
+}
+
+// Minimal Media Session API wiring so playback can continue in background on supported browsers
+export function setMediaSessionMetadata (opts = {}) {
+  if ('mediaSession' in navigator) {
+    const md = new window.MediaMetadata({
+      title: opts.title || 'Noisedash',
+      artist: opts.artist || 'Ambient Generator',
+      album: opts.album || 'Noisedash',
+      artwork: opts.artwork || [
+        { src: '/favicon.ico', sizes: '64x64', type: 'image/x-icon' }
+      ]
+    })
+    navigator.mediaSession.metadata = md
+  }
+}

src/views/AccountView.vue

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

src/views/AdminView.vue

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

src/views/HomeView.vue

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

src/views/LoginView.vue

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

src/views/RegisterView.vue

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

vue.config.js

@@ -3,6 +3,48 @@ module.exports = {
     'vuetify'
   ],
   devServer: {
+  host: '0.0.0.0',
+  port: 8080,
+  allowedHosts: 'all',
   proxy: 'http://localhost:1432'
+  },
+  pwa: {
+    name: 'Noisedash',
+    themeColor: '#121212',
+    backgroundColor: '#121212',
+    display: 'standalone',
+    startUrl: '/',
+    manifestOptions: {
+      short_name: 'Noisedash',
+      description: 'Ambient noise generator',
+      categories: ['music', 'audio', 'productivity'],
+      display_override: ['standalone', 'browser'],
+      orientation: 'any'
+    },
+    iconPaths: {
+      favicon32: 'favicon.ico',
+      favicon16: 'favicon.ico',
+      appleTouchIcon: 'favicon.ico',
+      maskIcon: 'favicon.ico',
+      msTileImage: 'favicon.ico'
+    },
+    workboxPluginMode: 'GenerateSW',
+    workboxOptions: {
+      cleanupOutdatedCaches: true,
+      skipWaiting: true,
+      clientsClaim: true,
+      offlineGoogleAnalytics: false,
+      runtimeCaching: [
+        {
+          urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|mp3|wav|ogg)$/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'assets-cache',
+            expiration: { maxEntries: 60, maxAgeSeconds: 7 * 24 * 60 * 60 },
+            cacheableResponse: { statuses: [0, 200] }
+          }
+        }
+      ]
+    }
   }
 }