0.17.0

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "chat.tools.terminal.autoApprove": {
+        "npm install": true
+    }
+}

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [0.17.0] - 2026-05-13
+
+### Added
+- Music Assistant player visibility: Sendspin player is now automatically unhidden in Music Assistant after connecting, so it is visible in the UI.
+- Moss Ball visualizer.
+- Razor 1911 visualizer.
+
+### Changed
+- Updated Sendspin correction mode from `sync` to `quality-local`.
+- Dependency bumps
+
 ## [0.16.0] - 2026-05-05
 
 ### Added

README.md

@@ -8,7 +8,7 @@
 
 ## 🎨 Features
 
-![VoltViz](https://img.shields.io/badge/React-19.2-blue?style=flat-square) ![VoltViz](https://img.shields.io/badge/Three.js-0.184-green?style=flat-square) ![VoltViz](https://img.shields.io/badge/Vite-8.0-purple?style=flat-square) ![VoltViz](https://img.shields.io/badge/License-MIT-orange?style=flat-square)
+![VoltViz](https://img.shields.io/badge/React-19.2.6-blue?style=flat-square) ![VoltViz](https://img.shields.io/badge/Three.js-0.184-green?style=flat-square) ![VoltViz](https://img.shields.io/badge/Vite-8.0.12-purple?style=flat-square) ![VoltViz](https://img.shields.io/badge/License-MIT-orange?style=flat-square)
 
 [![Voltviz](images/voltviz.png)](https://voltviz.com)
 ---
@@ -86,14 +86,14 @@ http://localhost:8080
 ## 🛠 Technology Stack
 
 **Frontend:**
-- **React** 19.2 - UI framework
+- **React** 19.2.6 - UI framework
 - **TypeScript** 6.0 - Type-safe development
-- **Vite** 8.0 - Next-gen build tool
-- **Three.js** 0.183 - 3D graphics
-- **D3.js** 3.1 - Data visualization
-- **Tailwind CSS** 4.2 - Utility-first styling
-- **Lucide React** 1.8 - Icon library
-- **[@sendspin/sendspin-js](https://www.sendspin-audio.com)** 3.0 - Synchronized audio streaming client
+- **Vite** 8.0.12 - Next-gen build tool
+- **Three.js** 0.184 - 3D graphics
+- **D3.js** 3.1.1 - Data visualization
+- **Tailwind CSS** 4.3 - Utility-first styling
+- **Lucide React** 1.9 - Icon library
+- **[@sendspin/sendspin-js](https://www.sendspin-audio.com)** 3.1 - Synchronized audio streaming client
 
 **Infrastructure:**
 - **Docker** - Containerization
@@ -107,7 +107,7 @@ http://localhost:8080
 ```
 src/
 ├── components/
-│   └── visualizers/        # 30+ visualization components
+│   └── visualizers/        # 40+ visualization components
 ├── data/                   # Static data (geographic, etc.)
 ├── images/                 # Asset images
 ├── App.tsx                 # Main app component

package.json

@@ -1,7 +1,7 @@
 {
   "name": "voltviz",
   "private": true,
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port=3000 --host=0.0.0.0",
@@ -14,21 +14,21 @@
     "@sendspin/sendspin-js": "^3.1.0",
     "d3-geo": "^3.1.1",
     "lucide-react": "^1.9.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "three": "^0.184.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.59.1",
-    "@tailwindcss/vite": "^4.2.4",
+    "@playwright/test": "^1.60.0",
+    "@tailwindcss/vite": "^4.3.0",
     "@types/d3-geo": "^3.1.0",
-    "@types/node": "^25.6.0",
+    "@types/node": "^25.7.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/three": "^0.184.0",
+    "@types/three": "^0.184.1",
     "@vitejs/plugin-react": "^6.0.1",
-    "tailwindcss": "^4.2.4",
+    "tailwindcss": "^4.3.0",
     "typescript": "~6.0.3",
-    "vite": "^8.0.10"
+    "vite": "^8.0.12"
   }
 }

src/App.tsx

@@ -46,7 +46,9 @@ type VisualizerType =
   | 'milkdropwarp'
   | 'aurorawaves'
   | 'msdefrag'
-  | 'fractalorb';
+  | 'fractalorb'
+  | 'mossball'
+  | 'razor1911';
 
 type VisualizerProps = {
   stream: MediaStream;
@@ -114,6 +116,8 @@ const visualizerComponents: Record<VisualizerType, React.LazyExoticComponent<Rea
   aurorawaves: lazy(() => import('./components/visualizers/AuroraWaves')),
   msdefrag: lazy(() => import('./components/visualizers/MsDefrag')),
   fractalorb: lazy(() => import('./components/visualizers/FractalOrb')),
+  mossball: lazy(() => import('./components/visualizers/MossBall')),
+  razor1911: lazy(() => import('./components/visualizers/Razor1911')),
 };
 
 export default function App() {
@@ -251,6 +255,35 @@ export default function App() {
     }
   };
 
+  const unhidePlayerInMA = async (playerId: string) => {
+    try {
+      const configResp = await fetch(new URL('ma-config.json', window.location.href).href);
+      if (!configResp.ok) return;
+      const { ingress_entry } = await configResp.json();
+      if (!ingress_entry) return;
+
+      const wsProto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const ingressPath = ingress_entry.endsWith('/') ? ingress_entry : ingress_entry + '/';
+      const ws = new WebSocket(`${wsProto}//${window.location.host}${ingressPath}ws`);
+      let commandSent = false;
+
+      ws.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        if (!commandSent && msg.server_version) {
+          commandSent = true;
+          const msgId = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+          ws.send(JSON.stringify({
+            message_id: msgId,
+            command: 'config/players/save',
+            args: { player_id: playerId, values: { hide_in_ui: false } }
+          }));
+          setTimeout(() => ws.close(), 2000);
+        }
+      };
+      ws.onerror = () => ws.close();
+    } catch { /* not running in HA add-on context */ }
+  };
+
   const startSendspin = async (url?: string) => {
     const serverUrl = url || sendspinUrl;
     try {
@@ -270,7 +303,7 @@ export default function App() {
         baseUrl: serverUrl,
         audioElement: audioEl,
         clientName: 'VoltViz',
-        correctionMode: 'sync',
+        correctionMode: 'quality-local',
         onStateChange: (state) => {
           const patch: Partial<SendspinState> = { playing: state.isPlaying };
           if (state.serverState?.metadata) {
@@ -301,6 +334,8 @@ export default function App() {
       // Kick-start playback on mobile where autoplay may be blocked
       audioEl.play().catch(() => {});
 
+      unhidePlayerInMA(sendspinClientIdRef.current);
+
       setError(null);
       updateSendspin({ active: true });
       setShowSendspinDialog(false);
@@ -410,6 +445,8 @@ export default function App() {
                     <option value="aurorawaves" className="bg-gray-900">Aurora Waves</option>
                     <option value="msdefrag" className="bg-gray-900">MS Defrag</option>
                     <option value="fractalorb" className="bg-gray-900">Fractal Orb</option>
+                    <option value="mossball" className="bg-gray-900">Moss Ball</option>
+                    <option value="razor1911" className="bg-gray-900">Razor 1911</option>
                     <option value="vinylsendspin" className="bg-gray-900">Vinyl (Sendspin)</option>
                     <option value="glitchbackgroundsendspin" className="bg-gray-900">Glitch Background (Sendspin)</option>
                     <option value="backgroundimagesendspin" className="bg-gray-900">Background Image (Sendspin)</option>