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"
+}

.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 }}

Dockerfile

@@ -1,8 +1,8 @@
-FROM node:14
+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

@@ -23,6 +23,9 @@ Requires docker and docker-compose
 
 * 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:
 
@@ -34,9 +37,26 @@ docker-compose up -d
 
 (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:
 

config/default.json

@@ -3,9 +3,9 @@
     "listeningPort": 1432,
     "sessionFileStorePath": "sessions",
     "sampleUploadPath": "samples",
-    "maxSampleSize": 10737418240, // In bytes, 10GB by default
+    "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

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

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,6 +1,6 @@
 {
   "name": "noisedash",
-  "version": "0.6.10",
+  "version": "0.7.0",
   "private": true,
   "author": "Kay Thomas <kaythomas@pm.me> (https://kaythomas.dev)",
   "scripts": {
@@ -12,11 +12,11 @@
   },
   "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.22.7",
+    "core-js": "^3.23.5",
     "express": "^4.18.1",
     "express-session": "^1.17.3",
     "multer": "^1.4.5-lts.1",
@@ -25,7 +25,7 @@
     "path": "^0.12.7",
     "session-file-store": "^1.5.0",
     "tone": "^14.7.77",
-    "vue": "^2.6.11",
+    "vue": "^2.7.16",
     "vue-router": "^3.5.4",
     "vuetify": "^2.6.10",
     "winston": "^3.3.3"
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@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",
@@ -44,11 +45,11 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vue": "^7.20.0",
     "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
     "vue-cli-plugin-vuetify": "^2.5.8",
-    "vue-template-compiler": "^2.6.11",
+    "vue-template-compiler": "^2.7.16",
     "vuetify-loader": "^1.7.3"
   },
   "bugs": "https://github.com/kaythomas0/noisedash/issues",

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"
+    }
+  ]
+}

src/components/noise.js

@@ -1,4 +1,5 @@
 import * as Tone from 'tone'
+import { setMediaSessionMetadata } from '@/registerServiceWorker'
 
 export default {
   name: 'Noise',
@@ -241,6 +242,17 @@ export default {
       })
 
       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)
@@ -271,6 +283,11 @@ export default {
           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

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/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
+  }
+}

vue.config.js

@@ -3,6 +3,48 @@ module.exports = {
     'vuetify'
   ],
   devServer: {
-    proxy: 'http://localhost:1432'
+  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] }
+          }
+        }
+      ]
+    }
   }
 }