commit 9bc7b188a89b0820ef4078be72c488e6ab1435c0 Author: orfelorfel23 Date: Sat Aug 8 12:10:26 2026 +0200 feat: initial commit for Viz audio visualizer studio diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8c750cd --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +node_modules/ +data/ +uploads/ +temp/ +.env +.env.local +.DS_Store +*.log diff --git a/README.md b/README.md new file mode 100644 index 0000000..5e4fc13 --- /dev/null +++ b/README.md @@ -0,0 +1,85 @@ +# 🎵 VIZ — Audio Visualizer Studio für DaVinci Resolve + +Ein modernes, hochgradig anpassbares Audio-Visualizer Tool zur Erstellung professioneller Musikvideos und Social-Media-Clips (YouTube, TikTok, Shorts, Reels) mit direktem Export von **transparenten Videos (ProRes 4444 mit Alpha-Kanal)** für **DaVinci Resolve**. + +--- + +## ✨ Features + +- **⭕ Zentraler Kreis & Artwork-Core**: + - Dynamischer Bass-Pulse & Bounce im Takt (sub-bass / kick-reaktiv). + - 0–360° Fortschrittsring um das Artwork. + - Vinyl-Drehung & Beat-Drehimpuls bei Drops. + - Randfarben, Stärken & Glow frei anpassbar. +- **📊 360° Frequenzspektrum**: + - 4 Modi: **Balken (Bars)**, **Flüssige Welle (Wave)**, **Punkte (Dots)** und **Dual Ring**. + - Anpassbare Balkenanzahl, Höhe, Frequenzempfindlichkeit & Symmetrie-Spiegelung. + - Eigener Gradient-Editor (Winkelverlauf, Radial, Linear, Regenbogen). +- **✨ Partikel- & Raum-Effekte**: + - Schwebender Sternenstaub & Warp-Explosion bei Drops. + - Dynamischer Bass-Shake & Cam-Zoom. + - RGB-Split / Chromatic Aberration & Beat-Flash. +- **📝 Typografie & Safe-Zones**: + - Titel, Artist und Live-Timecode Overlay. + - Umschaltung zwischen **16:9** (YouTube 1080p/4K), **9:16** (Shorts/TikTok) und **1:1** (Instagram). + - Einblendbares **Shorts Safe-Zone Overlay** zur optimalen Platzierung. +- **🎬 DaVinci Resolve Export**: + - **QuickTime ProRes 4444 (.mov)** mit echtem 100% Alpha-Kanal für verlustfreie Studioqualität. + - **WebM VP9 (.webm)** mit Alpha-Kanal für kompakte Dateigrößen. + - **MP4 (H.264)** für fertige Standalone-Videos. +- **💾 Preset-Manager**: + - Vorgefertigte Styles (*Trap Nation Classic*, *Cyberpunk Neon*, *Minimal Clean*, *Fire & Amber*, *Matrix Glitch*, *Deep Violet*). + - Eigene Presets als JSON speichern, exportieren und importieren. + +--- + +## 🚀 Schnelle Inbetriebnahme (Lokal auf Windows) + +### 1. Per 1-Klick +Einfach einen **Doppelklick** auf die Datei **`Start-Local.bat`** ausführen. +Das Skript installiert bei Bedarf die Abhängigkeiten und öffnet automatisch deinen Browser unter `http://localhost:849`. + +### 2. Manuell über Terminal +```bash +# Repository klonen +git clone https://git.orfel.de/Jannik/Viz.git +cd Viz + +# Abhängigkeiten installieren +npm install + +# Server starten +npm start +``` +Die Web-App ist nun unter **`http://localhost:849`** erreichbar. + +--- + +## 🎬 DaVinci Resolve Workflow (So nutzt du das exportierte Video) + +1. Öffne dein Projekt in **DaVinci Resolve**. +2. Ziehe die aus **VIZ** exportierte `.mov` Datei (ProRes 4444 mit Alpha) in deinen Media Pool. +3. Lege deinen Hintergrund (Video, B-Roll oder KI-Animation) auf **Video-Spur 1 (V1)**. +4. Ziehe den exportierten Visualizer-Clip auf **Video-Spur 2 (V2)** direkt darüber. +5. Da der Hintergrund der Datei transparent ist, legt sich der pulsierende Kreis und das Spektrum perfekt über dein Footage! + +--- + +## ☁️ Deployment in Jannik-Cloud (Docker Compose) + +VIZ ist als nativer Service in **Jannik-Cloud** integriert: +- **Subdomain**: `https://viz.orfel.de` +- **Port**: `849` +- **Volume**: `/mnt/Jannik-Cloud-Volume-01/viz:/data` (Upload-Zwischenspeicher mit automatischem Cleanup bei jedem Rebuild). + +--- + +## 🛠️ Technologien + +- **Frontend**: HTML5 Canvas (60 FPS Multi-Layer Rendering), Web Audio API, Vanilla CSS (Glassmorphism Dark Theme). +- **Backend**: Node.js, Express, Multer (200 MB Upload-Limit), FFmpeg Video Rendering Engine. + +--- + +## 📄 Lizenz +MIT License — Erstellt von Jannik. diff --git a/Start-Local.bat b/Start-Local.bat new file mode 100644 index 0000000..165aa82 --- /dev/null +++ b/Start-Local.bat @@ -0,0 +1,26 @@ +@echo off +title VIZ — Audio Visualizer Studio +color 0b + +echo =================================================== +echo VIZ AUDIO VISUALIZER STUDIO +echo DaVinci Resolve Alpha Edition v1.0.0 +echo =================================================== +echo. + +cd /d "%~dp0" + +if not exist "node_modules" ( + echo [INFO] Erste Ausfuehrung: Installiere Abhaengigkeiten... + call npm install + echo. +) + +echo [INFO] Starte VIZ Server... +echo [INFO] Oeffne Browser unter http://localhost:849 ... +start "" "http://localhost:849" + +set PORT=849 +npm start + +pause diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0773fb4 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,1018 @@ +{ + "name": "viz", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "viz", + "version": "1.0.0", + "license": "MIT", + "dependencies": { + "cors": "^2.8.5", + "express": "^4.21.2", + "multer": "^1.4.5-lts.1" + } + }, + "node_modules/accepts": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", + "license": "MIT", + "dependencies": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/append-field": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz", + "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==", + "license": "MIT" + }, + "node_modules/array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", + "license": "MIT" + }, + "node_modules/body-parser": { + "version": "1.20.6", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.6.tgz", + "integrity": "sha512-p5tAzS57i5MV9fZFDj9LeIiTZEufbSe2eDozP+ElheSUq1m74CRq1jI4mYNDdVs9vQztXFLuk/Gd6BWTdwRJ5g==", + "license": "MIT", + "dependencies": { + "bytes": "~3.1.2", + "content-type": "~1.0.5", + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "~1.2.0", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "on-finished": "~2.4.1", + "qs": "~6.15.1", + "raw-body": "~2.5.3", + "type-is": "~1.6.18", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", + "license": "MIT" + }, + "node_modules/busboy": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", + "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", + "dependencies": { + "streamsearch": "^1.1.0" + }, + "engines": { + "node": ">=10.16.0" + } + }, + "node_modules/bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/call-bound": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "engines": [ + "node >= 0.8" + ], + "license": "MIT", + "dependencies": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + } + }, + "node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "license": "MIT", + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/content-type": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", + "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie-signature": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz", + "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==", + "license": "MIT" + }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", + "license": "MIT" + }, + "node_modules/cors": { + "version": "2.8.6", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz", + "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==", + "license": "MIT", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "license": "MIT", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/destroy": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", + "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", + "license": "MIT", + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", + "license": "MIT" + }, + "node_modules/encodeurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz", + "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==", + "license": "MIT" + }, + "node_modules/etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/express": { + "version": "4.22.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz", + "integrity": "sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==", + "license": "MIT", + "dependencies": { + "accepts": "~1.3.8", + "array-flatten": "1.1.1", + "body-parser": "~1.20.5", + "content-disposition": "~0.5.4", + "content-type": "~1.0.4", + "cookie": "~0.7.1", + "cookie-signature": "~1.0.6", + "debug": "2.6.9", + "depd": "2.0.0", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "~1.3.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.0", + "merge-descriptors": "1.0.3", + "methods": "~1.1.2", + "on-finished": "~2.4.1", + "parseurl": "~1.3.3", + "path-to-regexp": "~0.1.12", + "proxy-addr": "~2.0.7", + "qs": "~6.15.1", + "range-parser": "~1.2.1", + "safe-buffer": "5.2.1", + "send": "~0.19.0", + "serve-static": "~1.16.2", + "setprototypeof": "1.2.0", + "statuses": "~2.0.1", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/finalhandler": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz", + "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==", + "license": "MIT", + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "on-finished": "~2.4.1", + "parseurl": "~1.3.3", + "statuses": "~2.0.2", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/forwarded": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz", + "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/http-errors": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", + "license": "MIT", + "dependencies": { + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" + }, + "engines": { + "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "license": "ISC" + }, + "node_modules/ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", + "license": "MIT" + }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/merge-descriptors": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", + "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "license": "MIT", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/mkdirp": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "license": "MIT", + "dependencies": { + "minimist": "^1.2.6" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, + "node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "license": "MIT" + }, + "node_modules/multer": { + "version": "1.4.5-lts.2", + "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.2.tgz", + "integrity": "sha512-VzGiVigcG9zUAoCNU+xShztrlr1auZOlurXynNvO9GiWD1/mTBbUljOKY+qMeazBqXgRnjzeEgJI/wyjJUHg9A==", + "deprecated": "Multer 1.x is impacted by a number of vulnerabilities, which have been patched in 2.x. You should upgrade to the latest 2.x version.", + "license": "MIT", + "dependencies": { + "append-field": "^1.0.0", + "busboy": "^1.0.0", + "concat-stream": "^1.5.2", + "mkdirp": "^0.5.4", + "object-assign": "^4.1.1", + "type-is": "^1.6.4", + "xtend": "^4.0.0" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/negotiator": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-inspect": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/on-finished": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", + "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "license": "MIT", + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-to-regexp": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz", + "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==", + "license": "MIT" + }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", + "license": "MIT" + }, + "node_modules/proxy-addr": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", + "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", + "license": "MIT", + "dependencies": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/qs": { + "version": "6.15.3", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz", + "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==", + "license": "BSD-3-Clause", + "dependencies": { + "es-define-property": "^1.0.1", + "side-channel": "^1.1.1" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/raw-body": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz", + "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==", + "license": "MIT", + "dependencies": { + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "license": "MIT", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/readable-stream/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" + }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "license": "MIT" + }, + "node_modules/send": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz", + "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==", + "license": "MIT", + "dependencies": { + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.1", + "mime": "1.6.0", + "ms": "2.1.3", + "on-finished": "~2.4.1", + "range-parser": "~1.2.1", + "statuses": "~2.0.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/send/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, + "node_modules/serve-static": { + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz", + "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==", + "license": "MIT", + "dependencies": { + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "~0.19.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", + "license": "ISC" + }, + "node_modules/side-channel": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", + "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.4", + "side-channel-list": "^1.0.1", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.4" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/statuses": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", + "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/streamsearch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", + "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, + "node_modules/string_decoder/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" + }, + "node_modules/toidentifier": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", + "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "license": "MIT", + "engines": { + "node": ">=0.6" + } + }, + "node_modules/type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "license": "MIT", + "dependencies": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==", + "license": "MIT" + }, + "node_modules/unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "license": "MIT" + }, + "node_modules/utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", + "license": "MIT", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "license": "MIT", + "engines": { + "node": ">=0.4" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..bf055ee --- /dev/null +++ b/package.json @@ -0,0 +1,25 @@ +{ + "name": "viz", + "version": "1.0.0", + "description": "High-Performance Audio Visualizer Web App with DaVinci Resolve Alpha Export", + "main": "server.mjs", + "type": "module", + "scripts": { + "start": "node server.mjs", + "dev": "node --watch server.mjs" + }, + "keywords": [ + "audio-visualizer", + "music-video", + "davinci-resolve", + "prores-4444", + "alpha-channel" + ], + "author": "Jannik", + "license": "MIT", + "dependencies": { + "cors": "^2.8.5", + "express": "^4.21.2", + "multer": "^1.4.5-lts.1" + } +} diff --git a/public/app.js b/public/app.js new file mode 100644 index 0000000..cedcd15 --- /dev/null +++ b/public/app.js @@ -0,0 +1,1113 @@ +/** + * VIZ Audio Visualizer Studio — Core Application & Rendering Engine + */ + +(function () { + 'use strict'; + + // --- Configuration State --- + const state = { + audioLoaded: false, + audioBuffer: null, + audioFile: null, + imageFile: null, + coverImage: null, + audioSource: null, + audioCtx: null, + analyser: null, + gainNode: null, + isPlaying: false, + startTime: 0, + pauseOffset: 0, + duration: 0, + loop: true, + + aspectRatio: '16:9', + width: 1920, + height: 1080, + + // Beat Detection & Dynamics + currentPulse: 1.0, + currentRotation: 0, + shakeX: 0, + shakeY: 0, + shakeZoom: 1.0, + beatEnergy: 0, + isBeatDrop: false, + + // Particles Pool + particles: [], + + // Export Controller + isExporting: false, + exportAbortController: null, + + // Active Settings + config: Object.assign({}, window.VIZ_PRESETS.trap_nation) + }; + + // DOM Elements + const canvas = document.getElementById('vizCanvas'); + const ctx = canvas.getContext('2d', { alpha: true }); + const canvasWrapper = document.getElementById('canvasWrapper'); + const audioDropzone = document.getElementById('audioDropzone'); + const imageDropzone = document.getElementById('imageDropzone'); + const audioFileInput = document.getElementById('audioFileInput'); + const imageFileInput = document.getElementById('imageFileInput'); + const audioFileBadge = document.getElementById('audioFileBadge'); + const imageFileBadge = document.getElementById('imageFileBadge'); + + const btnPlayPause = document.getElementById('btnPlayPause'); + const iconPlay = document.getElementById('iconPlay'); + const iconPause = document.getElementById('iconPause'); + const btnRewind = document.getElementById('btnRewind'); + const btnForward = document.getElementById('btnForward'); + const btnLoop = document.getElementById('btnLoop'); + const seekScrubber = document.getElementById('seekScrubber'); + const currentTimeEl = document.getElementById('currentTime'); + const durationTimeEl = document.getElementById('durationTime'); + const volumeSlider = document.getElementById('volumeSlider'); + + const aspectBtns = document.querySelectorAll('.aspect-btn'); + const toggleSafeZone = document.getElementById('toggleSafeZone'); + const safeZoneOverlay = document.getElementById('safeZoneOverlay'); + const toggleAlphaGrid = document.getElementById('toggleAlphaGrid'); + const quickPresetSelect = document.getElementById('quickPresetSelect'); + + const tabBtns = document.querySelectorAll('.tab-btn'); + const tabPanels = document.querySelectorAll('.tab-panel'); + + const btnStartExport = document.getElementById('btnStartExport'); + const headerExportBtn = document.getElementById('headerExportBtn'); + const btnCancelExport = document.getElementById('btnCancelExport'); + const exportProgressCard = document.getElementById('exportProgressCard'); + const exportStatusText = document.getElementById('exportStatusText'); + const exportPercent = document.getElementById('exportPercent'); + const exportProgressBarFill = document.getElementById('exportProgressBarFill'); + const exportFpsLive = document.getElementById('exportFpsLive'); + const exportEta = document.getElementById('exportEta'); + + const btnSavePreset = document.getElementById('btnSavePreset'); + const btnExportPresetJson = document.getElementById('btnExportPresetJson'); + const importPresetInput = document.getElementById('importPresetInput'); + + // Generate Default Stylish Synthwave Cover Placeholder + function generateDefaultCover() { + const off = document.createElement('canvas'); + off.width = 600; + off.height = 600; + const c = off.getContext('2d'); + + // Gradient Background + const grad = c.createLinearGradient(0, 0, 600, 600); + grad.addColorStop(0, '#101728'); + grad.addColorStop(0.5, '#1e1136'); + grad.addColorStop(1, '#0b0c16'); + c.fillStyle = grad; + c.fillRect(0, 0, 600, 600); + + // Glowing Sun + const sunGrad = c.createRadialGradient(300, 240, 10, 300, 240, 180); + sunGrad.addColorStop(0, '#ff007f'); + sunGrad.addColorStop(0.6, '#ffaa00'); + sunGrad.addColorStop(1, 'transparent'); + c.fillStyle = sunGrad; + c.beginPath(); + c.arc(300, 240, 180, 0, Math.PI * 2); + c.fill(); + + // Geometric Grid Lines + c.strokeStyle = 'rgba(0, 240, 255, 0.4)'; + c.lineWidth = 2; + for (let i = 0; i <= 600; i += 40) { + c.beginPath(); + c.moveTo(i, 360); + c.lineTo(300 + (i - 300) * 3, 600); + c.stroke(); + } + for (let y = 360; y <= 600; y += 30) { + c.beginPath(); + c.moveTo(0, y); + c.lineTo(600, y); + c.stroke(); + } + + // Modern V Icon / Logo in center + c.fillStyle = '#ffffff'; + c.shadowColor = '#00f0ff'; + c.shadowBlur = 20; + c.font = '900 120px Orbitron, sans-serif'; + c.textAlign = 'center'; + c.textBaseline = 'middle'; + c.fillText('VIZ', 300, 250); + + const img = new Image(); + img.src = off.toDataURL('image/png'); + return img; + } + + state.coverImage = generateDefaultCover(); + + // --- Initialize Audio Context --- + function initAudioContext() { + if (!state.audioCtx) { + const AudioCtxClass = window.AudioContext || window.webkitAudioContext; + state.audioCtx = new AudioCtxClass(); + state.analyser = state.audioCtx.createAnalyser(); + state.analyser.fftSize = 2048; + state.analyser.smoothingTimeConstant = 0.82; + + state.gainNode = state.audioCtx.createGain(); + state.gainNode.gain.value = parseFloat(volumeSlider.value); + + state.gainNode.connect(state.audioCtx.destination); + } + if (state.audioCtx.state === 'suspended') { + state.audioCtx.resume(); + } + } + + // --- Audio Loading --- + async function loadAudioFile(file) { + initAudioContext(); + state.audioFile = file; + audioFileBadge.textContent = file.name; + audioFileBadge.classList.remove('hidden'); + + const arrayBuffer = await file.arrayBuffer(); + state.audioBuffer = await state.audioCtx.decodeAudioData(arrayBuffer); + state.duration = state.audioBuffer.duration; + state.audioLoaded = true; + + // Update track title default if empty + const rawName = file.name.replace(/\.[^/.]+$/, ''); + const titleInput = document.getElementById('trackTitle'); + if (titleInput && (titleInput.value === 'Dein Songtitel' || !titleInput.value)) { + titleInput.value = rawName; + } + + durationTimeEl.textContent = formatTime(state.duration); + seekScrubber.max = state.duration; + seekScrubber.value = 0; + state.pauseOffset = 0; + + stopPlayback(); + startPlayback(0); + } + + // --- Image Loading --- + function loadImageFile(file) { + state.imageFile = file; + imageFileBadge.textContent = file.name; + imageFileBadge.classList.remove('hidden'); + + const reader = new FileReader(); + reader.onload = (e) => { + const img = new Image(); + img.onload = () => { + state.coverImage = img; + }; + img.src = e.target.result; + }; + reader.readAsDataURL(file); + } + + // --- Playback Controls --- + function startPlayback(offset = 0) { + if (!state.audioBuffer) return; + initAudioContext(); + + if (state.audioSource) { + try { + state.audioSource.stop(); + state.audioSource.disconnect(); + } catch (e) {} + } + + state.audioSource = state.audioCtx.createBufferSource(); + state.audioSource.buffer = state.audioBuffer; + state.audioSource.loop = state.loop; + + state.audioSource.connect(state.analyser); + state.analyser.connect(state.gainNode); + + state.startTime = state.audioCtx.currentTime - offset; + state.audioSource.start(0, offset); + state.isPlaying = true; + + iconPlay.classList.add('hidden'); + iconPause.classList.remove('hidden'); + } + + function pausePlayback() { + if (!state.isPlaying) return; + if (state.audioSource) { + state.pauseOffset = (state.audioCtx.currentTime - state.startTime) % state.duration; + try { + state.audioSource.stop(); + state.audioSource.disconnect(); + } catch (e) {} + } + state.isPlaying = false; + iconPlay.classList.remove('hidden'); + iconPause.classList.add('hidden'); + } + + function stopPlayback() { + if (state.audioSource) { + try { + state.audioSource.stop(); + state.audioSource.disconnect(); + } catch (e) {} + } + state.isPlaying = false; + state.pauseOffset = 0; + iconPlay.classList.remove('hidden'); + iconPause.classList.add('hidden'); + } + + function getCurrentPlaybackTime() { + if (!state.audioLoaded || !state.duration) return 0; + if (state.isPlaying) { + let t = (state.audioCtx.currentTime - state.startTime); + if (state.loop) { + return t % state.duration; + } + return Math.min(t, state.duration); + } + return state.pauseOffset; + } + + function formatTime(seconds) { + const mins = Math.floor(seconds / 60); + const secs = Math.floor(seconds % 60); + return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; + } + + // --- Particles Initializer & Pool --- + function initParticles(count) { + state.particles = []; + for (let i = 0; i < count; i++) { + state.particles.push({ + x: (Math.random() - 0.5) * state.width, + y: (Math.random() - 0.5) * state.height, + z: Math.random() * 1000 + 100, + radius: Math.random() * 2.5 + 1.0, + alpha: Math.random() * 0.7 + 0.3, + speedMultiplier: Math.random() * 0.8 + 0.6, + colorOffset: Math.random() + }); + } + } + + // --- Dynamic Color Gradient Builder --- + function createVisualizerGradient(ctx, style, c1, c2, radius, angle, time) { + if (style === 'angular') { + const grad = ctx.createConicGradient(angle, 0, 0); + grad.addColorStop(0, c1); + grad.addColorStop(0.5, c2); + grad.addColorStop(1, c1); + return grad; + } else if (style === 'radial') { + const grad = ctx.createRadialGradient(0, 0, radius * 0.8, 0, 0, radius * 2.2); + grad.addColorStop(0, c1); + grad.addColorStop(1, c2); + return grad; + } else if (style === 'rainbow') { + const grad = ctx.createConicGradient(time * 0.5, 0, 0); + grad.addColorStop(0, '#ff0055'); + grad.addColorStop(0.2, '#ffaa00'); + grad.addColorStop(0.4, '#00ff88'); + grad.addColorStop(0.6, '#00f0ff'); + grad.addColorStop(0.8, '#8a2be2'); + grad.addColorStop(1, '#ff0055'); + return grad; + } else { + const grad = ctx.createLinearGradient(-radius * 1.5, 0, radius * 1.5, 0); + grad.addColorStop(0, c1); + grad.addColorStop(1, c2); + return grad; + } + } + + // --- Main Render Frame Function (Pure & Frame-Accuracy Support) --- + function renderFrame(targetCtx, width, height, freqData, currentTime, duration, cfg) { + targetCtx.save(); + targetCtx.clearRect(0, 0, width, height); + + // Analyze Frequency Bands + let subBassSum = 0; + let midBassSum = 0; + let trebleSum = 0; + + const binCount = freqData.length; + for (let i = 0; i < 8; i++) subBassSum += freqData[i] || 0; + for (let i = 8; i < 28; i++) midBassSum += freqData[i] || 0; + for (let i = 40; i < 140; i++) trebleSum += freqData[i] || 0; + + const subBassAvg = (subBassSum / 8) / 255; + const midBassAvg = (midBassSum / 20) / 255; + const trebleAvg = (trebleSum / 100) / 255; + + const rawBassEnergy = Math.max(subBassAvg * 1.2, midBassAvg); + state.beatEnergy = rawBassEnergy; + + // Target Pulse calculation with smooth attack/decay + const targetPulse = 1.0 + (rawBassEnergy * cfg.pulseIntensity * 0.6); + const decay = cfg.pulseDecay || 0.8; + if (targetPulse > state.currentPulse) { + state.currentPulse = targetPulse; // Fast attack + } else { + state.currentPulse = state.currentPulse * decay + targetPulse * (1 - decay); // Smooth decay + } + + // Camera Shake & Zoom calculation + let shakeZoom = 1.0; + let shakeX = 0; + let shakeY = 0; + + if (cfg.camShakeIntensity > 0 && rawBassEnergy > 0.4) { + const shakeFactor = (rawBassEnergy - 0.4) * cfg.camShakeIntensity * 35; + shakeX = (Math.random() - 0.5) * shakeFactor; + shakeY = (Math.random() - 0.5) * shakeFactor; + shakeZoom = 1.0 + (rawBassEnergy - 0.4) * cfg.camShakeIntensity * 0.08; + } + + // Rotation calculation + const rpm = cfg.rotationSpeed || 0; + state.currentRotation += (rpm * Math.PI * 2 / (60 * 60)); + if (cfg.beatSpinImpulse && rawBassEnergy > 0.7) { + state.currentRotation += (rawBassEnergy - 0.7) * 0.04; + } + + // --- Layer 1: Background --- + if (cfg.backgroundMode === 'blurred_cover' && state.coverImage) { + targetCtx.save(); + targetCtx.filter = 'blur(40px) brightness(0.4)'; + const scale = Math.max(width / state.coverImage.width, height / state.coverImage.height) * 1.2 * shakeZoom; + targetCtx.drawImage( + state.coverImage, + width / 2 - (state.coverImage.width * scale) / 2 + shakeX, + height / 2 - (state.coverImage.height * scale) / 2 + shakeY, + state.coverImage.width * scale, + state.coverImage.height * scale + ); + targetCtx.restore(); + } else if (cfg.backgroundMode === 'dark_vignette') { + const vig = targetCtx.createRadialGradient(width / 2, height / 2, width * 0.2, width / 2, height / 2, width * 0.7); + vig.addColorStop(0, '#121622'); + vig.addColorStop(1, '#05070a'); + targetCtx.fillStyle = vig; + targetCtx.fillRect(0, 0, width, height); + } else if (cfg.backgroundMode === 'solid_black') { + targetCtx.fillStyle = '#000000'; + targetCtx.fillRect(0, 0, width, height); + } // If 'transparent', clearRect leaves it 100% alpha! + + // --- Layer 2: Beat Flash FX --- + if (cfg.beatFlash && rawBassEnergy > 0.85) { + targetCtx.fillStyle = `rgba(255, 255, 255, ${(rawBassEnergy - 0.85) * 0.4})`; + targetCtx.fillRect(0, 0, width, height); + } + + // Transform Matrix for Centered World Coordinates & Camera Shake + targetCtx.save(); + targetCtx.translate(width / 2 + shakeX, height / 2 + shakeY); + targetCtx.scale(shakeZoom, shakeZoom); + + // --- Layer 3: Particle System --- + if (cfg.enableParticles && state.particles.length > 0) { + targetCtx.save(); + const speedMult = cfg.particleSpeed * (1.0 + (rawBassEnergy * cfg.particleWarp)); + + for (let i = 0; i < state.particles.length; i++) { + const p = state.particles[i]; + p.z -= speedMult * p.speedMultiplier * 5; + + // Warp loop + if (p.z <= 10) { + p.z = 1000; + p.x = (Math.random() - 0.5) * width; + p.y = (Math.random() - 0.5) * height; + } + + const k = 400 / p.z; + const px = p.x * k; + const py = p.y * k; + const pSize = Math.max(0.5, p.radius * k); + + if (Math.abs(px) < width / 2 && Math.abs(py) < height / 2) { + targetCtx.fillStyle = cfg.colorParticle || '#ffffff'; + targetCtx.globalAlpha = Math.min(1.0, p.alpha * (1 - p.z / 1000)); + targetCtx.beginPath(); + targetCtx.arc(px, py, pSize, 0, Math.PI * 2); + targetCtx.fill(); + } + } + targetCtx.restore(); + } + + // --- Layer 4: Spectrum Rendering --- + const baseRadius = cfg.circleRadius * state.currentPulse; + const barCount = cfg.barCount || 96; + const maxHeight = cfg.spectrumMaxHeight || 140; + const barSpacing = cfg.barSpacing || 10; + const sensitivity = cfg.freqSensitivity || 1.3; + + // Build Gradient + const spectrumGrad = createVisualizerGradient( + targetCtx, + cfg.gradientStyle, + cfg.colorGrad1, + cfg.colorGrad2, + baseRadius, + state.currentRotation, + currentTime + ); + + targetCtx.save(); + targetCtx.fillStyle = spectrumGrad; + targetCtx.strokeStyle = spectrumGrad; + + // Glow Effect + if (cfg.glowIntensity > 0) { + targetCtx.shadowColor = cfg.colorGrad1; + targetCtx.shadowBlur = cfg.glowBlur * (0.8 + rawBassEnergy * cfg.glowIntensity); + } + + // Filtered frequency array based on focus + const processedBars = []; + for (let i = 0; i < barCount; i++) { + let freqIndex; + if (cfg.mirrorSpectrum) { + const half = barCount / 2; + const symIdx = i < half ? i : barCount - i; + freqIndex = Math.floor((symIdx / half) * (binCount * 0.45)); + } else { + freqIndex = Math.floor((i / barCount) * (binCount * 0.45)); + } + + if (cfg.freqFocus === 'bass_heavy') { + freqIndex = Math.floor(Math.pow(i / barCount, 1.8) * (binCount * 0.35)); + } + + const val = (freqData[freqIndex] || 0) / 255; + const heightVal = Math.pow(val, 1.2) * maxHeight * sensitivity; + processedBars.push(Math.max(2, heightVal)); + } + + // Draw Spectrum by Mode + if (cfg.spectrumMode === 'radial_bars') { + const angleStep = (Math.PI * 2) / barCount; + const barW = cfg.barWidth || 4; + + for (let i = 0; i < barCount; i++) { + const angle = i * angleStep; + const barH = processedBars[i]; + const rStart = baseRadius + barSpacing; + + targetCtx.save(); + targetCtx.rotate(angle); + targetCtx.fillRect(-barW / 2, -rStart - barH, barW, barH); + targetCtx.restore(); + } + } else if (cfg.spectrumMode === 'smooth_wave') { + const angleStep = (Math.PI * 2) / barCount; + targetCtx.beginPath(); + for (let i = 0; i <= barCount; i++) { + const idx = i % barCount; + const angle = i * angleStep; + const r = baseRadius + barSpacing + processedBars[idx]; + const x = Math.cos(angle - Math.PI / 2) * r; + const y = Math.sin(angle - Math.PI / 2) * r; + + if (i === 0) targetCtx.moveTo(x, y); + else targetCtx.lineTo(x, y); + } + targetCtx.closePath(); + targetCtx.lineWidth = cfg.barWidth * 1.5; + targetCtx.stroke(); + } else if (cfg.spectrumMode === 'floating_dots') { + const angleStep = (Math.PI * 2) / barCount; + for (let i = 0; i < barCount; i++) { + const angle = i * angleStep; + const r = baseRadius + barSpacing + processedBars[i]; + const x = Math.cos(angle - Math.PI / 2) * r; + const y = Math.sin(angle - Math.PI / 2) * r; + + targetCtx.beginPath(); + targetCtx.arc(x, y, cfg.barWidth * 1.2, 0, Math.PI * 2); + targetCtx.fill(); + } + } else if (cfg.spectrumMode === 'dual_ring') { + const angleStep = (Math.PI * 2) / barCount; + const barW = cfg.barWidth || 3; + + // Inner Ring (Bass) + for (let i = 0; i < barCount; i++) { + const angle = i * angleStep; + const barH = processedBars[i] * 0.7; + const rStart = baseRadius + barSpacing; + + targetCtx.save(); + targetCtx.rotate(angle); + targetCtx.fillRect(-barW / 2, -rStart - barH, barW, barH); + targetCtx.restore(); + } + + // Outer Ring (Treble Dots) + targetCtx.fillStyle = cfg.colorGrad2; + for (let i = 0; i < barCount; i += 2) { + const angle = i * angleStep + (currentTime * 0.2); + const r = baseRadius + barSpacing + maxHeight * 0.8 + (processedBars[i] * 0.4); + const x = Math.cos(angle) * r; + const y = Math.sin(angle) * r; + + targetCtx.beginPath(); + targetCtx.arc(x, y, barW, 0, Math.PI * 2); + targetCtx.fill(); + } + } + targetCtx.restore(); + + // --- Layer 5: Central Circle Artwork --- + targetCtx.save(); + targetCtx.beginPath(); + targetCtx.arc(0, 0, baseRadius, 0, Math.PI * 2); + targetCtx.clip(); + + if (state.coverImage) { + targetCtx.save(); + targetCtx.rotate(state.currentRotation); + targetCtx.drawImage( + state.coverImage, + -baseRadius, + -baseRadius, + baseRadius * 2, + baseRadius * 2 + ); + targetCtx.restore(); + } + targetCtx.restore(); + + // --- Layer 6: Circle Border & Progress Ring --- + if (cfg.borderWidth > 0) { + targetCtx.save(); + targetCtx.beginPath(); + targetCtx.arc(0, 0, baseRadius, 0, Math.PI * 2); + targetCtx.lineWidth = cfg.borderWidth; + targetCtx.strokeStyle = cfg.borderColor || '#ffffff'; + targetCtx.stroke(); + targetCtx.restore(); + } + + if (cfg.showProgressRing && duration > 0) { + const progressAngle = (currentTime / duration) * (Math.PI * 2); + targetCtx.save(); + targetCtx.beginPath(); + targetCtx.arc(0, 0, baseRadius + cfg.borderWidth / 2 + 1, -Math.PI / 2, -Math.PI / 2 + progressAngle); + targetCtx.lineWidth = Math.max(3, cfg.borderWidth * 0.8); + targetCtx.strokeStyle = cfg.progressRingColor || '#00f0ff'; + targetCtx.lineCap = 'round'; + targetCtx.stroke(); + targetCtx.restore(); + } + + targetCtx.restore(); // Restore Centered Coordinates + + // --- Layer 7: Typography & Song Info --- + if (cfg.showTextOverlay) { + const title = document.getElementById('trackTitle').value || 'Song Title'; + const artist = document.getElementById('trackArtist').value || 'Artist'; + + targetCtx.save(); + targetCtx.textAlign = 'center'; + targetCtx.textBaseline = 'middle'; + + let textY = height / 2 + baseRadius + maxHeight + 70; + if (cfg.textPosition === 'bottom_center') { + textY = height - 100; + } else if (cfg.textPosition === 'top_center') { + textY = 100; + } + + // Audio-reactive text scale + const textPulse = cfg.textPulseWithBeat ? (1.0 + rawBassEnergy * 0.05) : 1.0; + targetCtx.translate(width / 2, textY); + targetCtx.scale(textPulse, textPulse); + + // Title + targetCtx.font = `700 ${cfg.titleFontSize}px ${cfg.fontFamily}`; + targetCtx.fillStyle = '#ffffff'; + targetCtx.shadowColor = cfg.colorGrad1; + targetCtx.shadowBlur = 12; + targetCtx.fillText(title, 0, 0); + + // Artist + targetCtx.font = `500 ${cfg.artistFontSize}px ${cfg.fontFamily}`; + targetCtx.fillStyle = 'rgba(255, 255, 255, 0.75)'; + targetCtx.shadowBlur = 0; + targetCtx.fillText(artist, 0, cfg.titleFontSize * 0.8 + 8); + + // Timecode + if (cfg.showTimecode && duration > 0) { + targetCtx.font = `600 16px 'Outfit', sans-serif`; + targetCtx.fillStyle = cfg.colorGrad1; + targetCtx.fillText(`${formatTime(currentTime)} / ${formatTime(duration)}`, 0, cfg.titleFontSize * 0.8 + cfg.artistFontSize + 18); + } + + targetCtx.restore(); + } + + targetCtx.restore(); // Restore Root Context + } + + // --- Real-Time Animation Loop (60 FPS) --- + const freqArray = new Uint8Array(1024); + + function mainLoop() { + if (!state.isExporting) { + if (state.analyser && state.isPlaying) { + state.analyser.getByteFrequencyData(freqArray); + } else if (!state.isPlaying) { + // Subtle idle pulse + const t = performance.now() * 0.003; + for (let i = 0; i < freqArray.length; i++) { + freqArray[i] = Math.max(0, Math.sin(t + i * 0.1) * 35); + } + } + + const curTime = getCurrentPlaybackTime(); + if (state.isPlaying) { + currentTimeEl.textContent = formatTime(curTime); + seekScrubber.value = curTime; + const pct = (curTime / (state.duration || 1)) * 100; + document.getElementById('timelineProgressBar').style.width = `${pct}%`; + } + + renderFrame(ctx, state.width, state.height, freqArray, curTime, state.duration, state.config); + } + + requestAnimationFrame(mainLoop); + } + + // --- UI Synchronizer --- + function updateConfigFromUI() { + state.config.circleRadius = parseInt(document.getElementById('circleRadius').value, 10); + state.config.pulseIntensity = parseFloat(document.getElementById('pulseIntensity').value); + state.config.pulseDecay = parseFloat(document.getElementById('pulseDecay').value); + state.config.borderWidth = parseInt(document.getElementById('borderWidth').value, 10); + state.config.borderColor = document.getElementById('borderColor').value; + state.config.showProgressRing = document.getElementById('showProgressRing').checked; + state.config.progressRingColor = document.getElementById('progressRingColor').value; + state.config.rotationSpeed = parseFloat(document.getElementById('rotationSpeed').value); + state.config.beatSpinImpulse = document.getElementById('beatSpinImpulse').checked; + + const checkedMode = document.querySelector('input[name="spectrumMode"]:checked'); + if (checkedMode) state.config.spectrumMode = checkedMode.value; + + state.config.barCount = parseInt(document.getElementById('barCount').value, 10); + state.config.spectrumMaxHeight = parseInt(document.getElementById('spectrumMaxHeight').value, 10); + state.config.barWidth = parseFloat(document.getElementById('barWidth').value); + state.config.barSpacing = parseInt(document.getElementById('barSpacing').value, 10); + state.config.freqSensitivity = parseFloat(document.getElementById('freqSensitivity').value); + state.config.freqFocus = document.getElementById('freqFocus').value; + state.config.mirrorSpectrum = document.getElementById('mirrorSpectrum').checked; + + state.config.enableParticles = document.getElementById('enableParticles').checked; + state.config.particleCount = parseInt(document.getElementById('particleCount').value, 10); + state.config.particleSpeed = parseFloat(document.getElementById('particleSpeed').value); + state.config.particleWarp = parseFloat(document.getElementById('particleWarp').value); + + state.config.camShakeIntensity = parseFloat(document.getElementById('camShakeIntensity').value); + state.config.rgbSplitIntensity = parseFloat(document.getElementById('rgbSplitIntensity').value); + state.config.beatFlash = document.getElementById('beatFlash').checked; + + state.config.colorGrad1 = document.getElementById('colorGrad1').value; + state.config.colorGrad2 = document.getElementById('colorGrad2').value; + state.config.colorParticle = document.getElementById('colorParticle').value; + state.config.gradientStyle = document.getElementById('gradientStyle').value; + state.config.glowIntensity = parseFloat(document.getElementById('glowIntensity').value); + state.config.glowBlur = parseInt(document.getElementById('glowBlur').value, 10); + state.config.backgroundMode = document.getElementById('backgroundMode').value; + + state.config.showTextOverlay = document.getElementById('showTextOverlay').checked; + state.config.fontFamily = document.getElementById('fontFamily').value; + state.config.textPosition = document.getElementById('textPosition').value; + state.config.titleFontSize = parseInt(document.getElementById('titleFontSize').value, 10); + state.config.artistFontSize = parseInt(document.getElementById('artistFontSize').value, 10); + state.config.textPulseWithBeat = document.getElementById('textPulseWithBeat').checked; + state.config.showTimecode = document.getElementById('showTimecode').checked; + + // Update value badge labels + document.getElementById('valCircleRadius').textContent = `${state.config.circleRadius}px`; + document.getElementById('valPulseIntensity').textContent = `${Math.round(state.config.pulseIntensity * 100)}%`; + document.getElementById('valPulseDecay').textContent = `${Math.round(state.config.pulseDecay * 100)}%`; + document.getElementById('valBorderWidth').textContent = `${state.config.borderWidth}px`; + document.getElementById('valRotationSpeed').textContent = `${state.config.rotationSpeed} RPM`; + document.getElementById('valBarCount').textContent = state.config.barCount; + document.getElementById('valSpectrumMaxHeight').textContent = `${state.config.spectrumMaxHeight}px`; + document.getElementById('valBarWidth').textContent = `${state.config.barWidth}px`; + document.getElementById('valBarSpacing').textContent = `${state.config.barSpacing}px`; + document.getElementById('valFreqSensitivity').textContent = `${state.config.freqSensitivity}x`; + document.getElementById('valParticleCount').textContent = state.config.particleCount; + document.getElementById('valParticleSpeed').textContent = `${state.config.particleSpeed}x`; + document.getElementById('valParticleWarp').textContent = `${state.config.particleWarp}x`; + document.getElementById('valCamShakeIntensity').textContent = `${Math.round(state.config.camShakeIntensity * 100)}%`; + document.getElementById('valRgbSplitIntensity').textContent = `${Math.round(state.config.rgbSplitIntensity * 100)}%`; + document.getElementById('valGlowIntensity').textContent = `${Math.round(state.config.glowIntensity * 100)}%`; + document.getElementById('valGlowBlur').textContent = `${state.config.glowBlur}px`; + document.getElementById('valTitleFontSize').textContent = `${state.config.titleFontSize}px`; + document.getElementById('valArtistFontSize').textContent = `${state.config.artistFontSize}px`; + + initParticles(state.config.particleCount); + } + + function applyPreset(presetKeyOrObj) { + let p = typeof presetKeyOrObj === 'string' ? window.VIZ_PRESETS[presetKeyOrObj] : presetKeyOrObj; + if (!p) return; + + Object.assign(state.config, p); + + // Sync form elements with preset values + document.getElementById('circleRadius').value = state.config.circleRadius; + document.getElementById('pulseIntensity').value = state.config.pulseIntensity; + document.getElementById('pulseDecay').value = state.config.pulseDecay; + document.getElementById('borderWidth').value = state.config.borderWidth; + document.getElementById('borderColor').value = state.config.borderColor; + document.getElementById('showProgressRing').checked = state.config.showProgressRing; + document.getElementById('progressRingColor').value = state.config.progressRingColor; + document.getElementById('rotationSpeed').value = state.config.rotationSpeed; + document.getElementById('beatSpinImpulse').checked = state.config.beatSpinImpulse; + + const modeRadio = document.querySelector(`input[name="spectrumMode"][value="${state.config.spectrumMode}"]`); + if (modeRadio) modeRadio.checked = true; + + document.getElementById('barCount').value = state.config.barCount; + document.getElementById('spectrumMaxHeight').value = state.config.spectrumMaxHeight; + document.getElementById('barWidth').value = state.config.barWidth; + document.getElementById('barSpacing').value = state.config.barSpacing; + document.getElementById('freqSensitivity').value = state.config.freqSensitivity; + document.getElementById('freqFocus').value = state.config.freqFocus; + document.getElementById('mirrorSpectrum').checked = state.config.mirrorSpectrum; + + document.getElementById('enableParticles').checked = state.config.enableParticles; + document.getElementById('particleCount').value = state.config.particleCount; + document.getElementById('particleSpeed').value = state.config.particleSpeed; + document.getElementById('particleWarp').value = state.config.particleWarp; + + document.getElementById('camShakeIntensity').value = state.config.camShakeIntensity; + document.getElementById('rgbSplitIntensity').value = state.config.rgbSplitIntensity; + document.getElementById('beatFlash').checked = state.config.beatFlash; + + document.getElementById('colorGrad1').value = state.config.colorGrad1; + document.getElementById('colorGrad2').value = state.config.colorGrad2; + document.getElementById('colorParticle').value = state.config.colorParticle; + document.getElementById('gradientStyle').value = state.config.gradientStyle; + document.getElementById('glowIntensity').value = state.config.glowIntensity; + document.getElementById('glowBlur').value = state.config.glowBlur; + document.getElementById('backgroundMode').value = state.config.backgroundMode; + + document.getElementById('fontFamily').value = state.config.fontFamily; + document.getElementById('textPosition').value = state.config.textPosition; + document.getElementById('titleFontSize').value = state.config.titleFontSize; + document.getElementById('artistFontSize').value = state.config.artistFontSize; + document.getElementById('textPulseWithBeat').checked = state.config.textPulseWithBeat; + document.getElementById('showTimecode').checked = state.config.showTimecode; + + updateConfigFromUI(); + } + + // --- Aspect Ratio Switching --- + function setAspectRatio(aspect) { + state.aspectRatio = aspect; + aspectBtns.forEach(btn => { + btn.classList.toggle('active', btn.dataset.aspect === aspect); + }); + + canvasWrapper.className = 'canvas-wrapper'; + if (toggleAlphaGrid.checked) canvasWrapper.classList.add('has-grid'); + + if (aspect === '16:9') { + canvasWrapper.classList.add('aspect-16-9'); + state.width = 1920; + state.height = 1080; + } else if (aspect === '9:16') { + canvasWrapper.classList.add('aspect-9-16'); + state.width = 1080; + state.height = 1920; + } else if (aspect === '1:1') { + canvasWrapper.classList.add('aspect-1-1'); + state.width = 1080; + state.height = 1080; + } + + canvas.width = state.width; + canvas.height = state.height; + initParticles(state.config.particleCount); + } + + // --- Export Pipeline (ProRes 4444 MOV with Alpha / WebM Alpha / MP4) --- + async function startExport() { + if (!state.audioLoaded || !state.audioFile) { + alert('Bitte lade zuerst eine Audio-Datei (.wav oder .mp3) hoch!'); + return; + } + + const format = document.getElementById('exportFormat').value; // prores, webm, mp4 + const res = document.getElementById('exportResolution').value; // 1080p, 4k, 720p + const fps = parseInt(document.getElementById('exportFps').value, 10); + + let renderWidth = state.width; + let renderHeight = state.height; + + if (res === '4k') { + renderWidth = state.aspectRatio === '16:9' ? 3840 : (state.aspectRatio === '9:16' ? 2160 : 2160); + renderHeight = state.aspectRatio === '16:9' ? 2160 : (state.aspectRatio === '9:16' ? 3840 : 2160); + } else if (res === '720p') { + renderWidth = state.aspectRatio === '16:9' ? 1280 : (state.aspectRatio === '9:16' ? 720 : 720); + renderHeight = state.aspectRatio === '16:9' ? 720 : (state.aspectRatio === '9:16' ? 1280 : 720); + } + + state.isExporting = true; + exportProgressCard.classList.remove('hidden'); + btnStartExport.classList.add('hidden'); + exportStatusText.textContent = 'Bereite Video-Render vor...'; + exportPercent.textContent = '0%'; + exportProgressBarFill.style.width = '0%'; + + pausePlayback(); + + // Prepare FormData for server-side FFmpeg processing + const formData = new FormData(); + formData.append('audio', state.audioFile); + if (state.imageFile) { + formData.append('cover', state.imageFile); + } + formData.append('config', JSON.stringify(state.config)); + formData.append('format', format); + formData.append('width', renderWidth); + formData.append('height', renderHeight); + formData.append('fps', fps); + formData.append('aspectRatio', state.aspectRatio); + formData.append('title', document.getElementById('trackTitle').value); + formData.append('artist', document.getElementById('trackArtist').value); + + state.exportAbortController = new AbortController(); + + try { + exportStatusText.textContent = 'Rendert Video (FFmpeg ProRes/Alpha)...'; + + const response = await fetch('/api/render', { + method: 'POST', + body: formData, + signal: state.exportAbortController.signal + }); + + if (!response.ok) { + const errText = await response.text(); + throw new Error(errText || 'Render-Fehler auf dem Server'); + } + + // Track download progress if streamed or grab blob + const blob = await response.blob(); + const filename = `viz_${(document.getElementById('trackTitle').value || 'video').replace(/[^a-z0-9]/gi, '_')}_${format === 'prores' ? 'ProRes4444_Alpha.mov' : (format === 'webm' ? 'Alpha.webm' : 'video.mp4')}`; + + // Trigger instant browser download + const downloadUrl = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = downloadUrl; + a.download = filename; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(downloadUrl); + + exportStatusText.textContent = '✅ Fertig! Download abgeschlossen.'; + exportPercent.textContent = '100%'; + exportProgressBarFill.style.width = '100%'; + setTimeout(() => { + exportProgressCard.classList.add('hidden'); + btnStartExport.classList.remove('hidden'); + state.isExporting = false; + }, 3000); + + } catch (err) { + if (err.name === 'AbortError') { + exportStatusText.textContent = 'Render abgebrochen.'; + } else { + alert('Render-Fehler: ' + err.message); + exportStatusText.textContent = 'Fehler beim Rendern'; + } + exportProgressCard.classList.add('hidden'); + btnStartExport.classList.remove('hidden'); + state.isExporting = false; + } + } + + function cancelExport() { + if (state.exportAbortController) { + state.exportAbortController.abort(); + } + state.isExporting = false; + exportProgressCard.classList.add('hidden'); + btnStartExport.classList.remove('hidden'); + } + + // --- Event Listeners & Binding --- + function setupEvents() { + // Dropzones & File Inputs + audioDropzone.addEventListener('click', () => audioFileInput.click()); + imageDropzone.addEventListener('click', () => imageFileInput.click()); + + audioFileInput.addEventListener('change', (e) => { + if (e.target.files.length) loadAudioFile(e.target.files[0]); + }); + imageFileInput.addEventListener('change', (e) => { + if (e.target.files.length) loadImageFile(e.target.files[0]); + }); + + [audioDropzone, imageDropzone].forEach(dz => { + dz.addEventListener('dragover', (e) => { e.preventDefault(); dz.classList.add('dragover'); }); + dz.addEventListener('dragleave', () => dz.classList.remove('dragover')); + dz.addEventListener('drop', (e) => { + e.preventDefault(); + dz.classList.remove('dragover'); + if (dz === audioDropzone && e.dataTransfer.files.length) { + loadAudioFile(e.dataTransfer.files[0]); + } else if (dz === imageDropzone && e.dataTransfer.files.length) { + loadImageFile(e.dataTransfer.files[0]); + } + }); + }); + + // Player controls + btnPlayPause.addEventListener('click', () => { + if (state.isPlaying) pausePlayback(); + else startPlayback(state.pauseOffset); + }); + + btnRewind.addEventListener('click', () => { + const cur = getCurrentPlaybackTime(); + startPlayback(Math.max(0, cur - 5)); + }); + + btnForward.addEventListener('click', () => { + const cur = getCurrentPlaybackTime(); + startPlayback(Math.min(state.duration, cur + 5)); + }); + + btnLoop.addEventListener('click', () => { + state.loop = !state.loop; + btnLoop.classList.toggle('active', state.loop); + if (state.audioSource) state.audioSource.loop = state.loop; + }); + + seekScrubber.addEventListener('input', (e) => { + const t = parseFloat(e.target.value); + currentTimeEl.textContent = formatTime(t); + if (state.isPlaying) startPlayback(t); + else state.pauseOffset = t; + }); + + volumeSlider.addEventListener('input', (e) => { + const v = parseFloat(e.target.value); + if (state.gainNode) state.gainNode.gain.value = v; + }); + + // Aspect Switchers + aspectBtns.forEach(btn => { + btn.addEventListener('click', () => setAspectRatio(btn.dataset.aspect)); + }); + + toggleSafeZone.addEventListener('change', (e) => { + safeZoneOverlay.classList.toggle('hidden', !e.target.checked); + }); + + toggleAlphaGrid.addEventListener('change', (e) => { + canvasWrapper.classList.toggle('has-grid', e.target.checked); + }); + + quickPresetSelect.addEventListener('change', (e) => { + applyPreset(e.target.value); + }); + + // Tabs + tabBtns.forEach(btn => { + btn.addEventListener('click', () => { + tabBtns.forEach(b => b.classList.remove('active')); + tabPanels.forEach(p => p.classList.remove('active')); + btn.classList.add('active'); + document.getElementById(btn.dataset.tab).classList.add('active'); + }); + }); + + // Dynamic UI Inputs (Two-way binding) + document.querySelectorAll('.sidebar-content input, .sidebar-content select').forEach(el => { + el.addEventListener('input', updateConfigFromUI); + el.addEventListener('change', updateConfigFromUI); + }); + + // Preset Manager + btnSavePreset.addEventListener('click', () => { + const name = prompt('Preset Name eingeben:', 'Mein Custom Style'); + if (!name) return; + const key = 'custom_' + Date.now(); + const presetObj = Object.assign({}, state.config, { name }); + const saved = JSON.parse(localStorage.getItem('viz_user_presets') || '{}'); + saved[key] = presetObj; + localStorage.setItem('viz_user_presets', JSON.stringify(saved)); + alert(`Preset "${name}" erfolgreich gespeichert!`); + }); + + btnExportPresetJson.addEventListener('click', () => { + const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(state.config, null, 2)); + const a = document.createElement('a'); + a.href = dataStr; + a.download = `viz_preset_${(state.config.name || 'custom').toLowerCase().replace(/\s+/g, '_')}.json`; + a.click(); + }); + + importPresetInput.addEventListener('change', (e) => { + if (e.target.files.length) { + const reader = new FileReader(); + reader.onload = (evt) => { + try { + const imported = JSON.parse(evt.target.result); + applyPreset(imported); + alert('Preset erfolgreich geladen!'); + } catch (err) { + alert('Ungültiges Preset JSON'); + } + }; + reader.readAsText(e.target.files[0]); + } + }); + + // Export Buttons + btnStartExport.addEventListener('click', startExport); + headerExportBtn.addEventListener('click', () => { + // Switch to export tab and start + document.querySelector('[data-tab="tab-export"]').click(); + }); + btnCancelExport.addEventListener('click', cancelExport); + + // Keyboard Shortcuts (Spacebar Play/Pause) + window.addEventListener('keydown', (e) => { + if (e.code === 'Space' && e.target.tagName !== 'INPUT') { + e.preventDefault(); + btnPlayPause.click(); + } + }); + } + + // --- Initialize App --- + function init() { + setAspectRatio('16:9'); + applyPreset('trap_nation'); + setupEvents(); + requestAnimationFrame(mainLoop); + } + + init(); +})(); diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..a60b91c --- /dev/null +++ b/public/index.html @@ -0,0 +1,633 @@ + + + + + + Viz — Audio Visualizer Studio für DaVinci Resolve + + + + + + +
+ +
+
+ +
+

VIZStudio

+ DaVinci Alpha Edition +
+
+ +
+ +
+ + +
+ + +
+
+ + +
+ +
+ +
+
+ + + +
+ +
+ + +
+
+ + +
+
+ + + + +
+
+ + +
+
+ + + + + +
+ 00:00 / 00:00 +
+
+ + +
+ +
+
+ +
+ + +
+ + +
+
+
+
+ + + +
+
+ + + + + diff --git a/public/presets.js b/public/presets.js new file mode 100644 index 0000000..d9a9b73 --- /dev/null +++ b/public/presets.js @@ -0,0 +1,252 @@ +/** + * VIZ Visualizer Presets Library + */ +const VIZ_PRESETS = { + trap_nation: { + name: 'Trap Nation Classic', + circleRadius: 155, + pulseIntensity: 0.55, + pulseDecay: 0.78, + borderWidth: 6, + borderColor: '#ffffff', + showProgressRing: true, + progressRingColor: '#ffffff', + rotationSpeed: 3, + beatSpinImpulse: true, + spectrumMode: 'radial_bars', + barCount: 128, + spectrumMaxHeight: 140, + barWidth: 4, + barSpacing: 10, + freqSensitivity: 1.4, + freqFocus: 'bass_heavy', + mirrorSpectrum: true, + enableParticles: true, + particleCount: 110, + particleSpeed: 1.2, + particleWarp: 3.0, + camShakeIntensity: 0.45, + rgbSplitIntensity: 0.2, + beatFlash: false, + colorGrad1: '#ffffff', + colorGrad2: '#cccccc', + colorParticle: '#ffffff', + gradientStyle: 'angular', + glowIntensity: 0.8, + glowBlur: 24, + backgroundMode: 'transparent', + fontFamily: "'Outfit', sans-serif", + textPosition: 'below_circle', + titleFontSize: 38, + artistFontSize: 22, + textPulseWithBeat: true, + showTimecode: true + }, + + cyberpunk: { + name: 'Cyberpunk Neon', + circleRadius: 140, + pulseIntensity: 0.6, + pulseDecay: 0.82, + borderWidth: 5, + borderColor: '#00f0ff', + showProgressRing: true, + progressRingColor: '#ff007f', + rotationSpeed: 4.5, + beatSpinImpulse: true, + spectrumMode: 'radial_bars', + barCount: 144, + spectrumMaxHeight: 160, + barWidth: 3.5, + barSpacing: 14, + freqSensitivity: 1.5, + freqFocus: 'balanced', + mirrorSpectrum: true, + enableParticles: true, + particleCount: 140, + particleSpeed: 1.6, + particleWarp: 3.5, + camShakeIntensity: 0.5, + rgbSplitIntensity: 0.55, + beatFlash: true, + colorGrad1: '#00f0ff', + colorGrad2: '#ff007f', + colorParticle: '#00f0ff', + gradientStyle: 'angular', + glowIntensity: 0.95, + glowBlur: 30, + backgroundMode: 'transparent', + fontFamily: "'Orbitron', sans-serif", + textPosition: 'below_circle', + titleFontSize: 36, + artistFontSize: 20, + textPulseWithBeat: true, + showTimecode: true + }, + + minimal_clean: { + name: 'Minimal Clean', + circleRadius: 160, + pulseIntensity: 0.3, + pulseDecay: 0.85, + borderWidth: 3, + borderColor: '#ffffff', + showProgressRing: true, + progressRingColor: '#ffffff', + rotationSpeed: 1.5, + beatSpinImpulse: false, + spectrumMode: 'smooth_wave', + barCount: 80, + spectrumMaxHeight: 90, + barWidth: 3, + barSpacing: 16, + freqSensitivity: 1.1, + freqFocus: 'balanced', + mirrorSpectrum: true, + enableParticles: true, + particleCount: 40, + particleSpeed: 0.6, + particleWarp: 1.2, + camShakeIntensity: 0.15, + rgbSplitIntensity: 0.05, + beatFlash: false, + colorGrad1: '#ffffff', + colorGrad2: '#a0aab8', + colorParticle: '#ffffff', + gradientStyle: 'linear_h', + glowIntensity: 0.4, + glowBlur: 14, + backgroundMode: 'transparent', + fontFamily: "'Inter', sans-serif", + textPosition: 'bottom_center', + titleFontSize: 32, + artistFontSize: 18, + textPulseWithBeat: false, + showTimecode: false + }, + + fire_amber: { + name: 'Fire & Amber', + circleRadius: 145, + pulseIntensity: 0.5, + pulseDecay: 0.8, + borderWidth: 6, + borderColor: '#ffaa00', + showProgressRing: true, + progressRingColor: '#ff3700', + rotationSpeed: 2.5, + beatSpinImpulse: true, + spectrumMode: 'radial_bars', + barCount: 112, + spectrumMaxHeight: 150, + barWidth: 4.5, + barSpacing: 12, + freqSensitivity: 1.35, + freqFocus: 'bass_heavy', + mirrorSpectrum: true, + enableParticles: true, + particleCount: 130, + particleSpeed: 1.4, + particleWarp: 3.2, + camShakeIntensity: 0.4, + rgbSplitIntensity: 0.3, + beatFlash: true, + colorGrad1: '#ffaa00', + colorGrad2: '#ff2200', + colorParticle: '#ffd700', + gradientStyle: 'angular', + glowIntensity: 0.85, + glowBlur: 26, + backgroundMode: 'transparent', + fontFamily: "'Montserrat', sans-serif", + textPosition: 'below_circle', + titleFontSize: 38, + artistFontSize: 22, + textPulseWithBeat: true, + showTimecode: true + }, + + matrix_glitch: { + name: 'Matrix Glitch', + circleRadius: 135, + pulseIntensity: 0.65, + pulseDecay: 0.72, + borderWidth: 4, + borderColor: '#00ff66', + showProgressRing: true, + progressRingColor: '#00ff88', + rotationSpeed: 5, + beatSpinImpulse: true, + spectrumMode: 'floating_dots', + barCount: 160, + spectrumMaxHeight: 170, + barWidth: 4, + barSpacing: 14, + freqSensitivity: 1.6, + freqFocus: 'bass_heavy', + mirrorSpectrum: false, + enableParticles: true, + particleCount: 160, + particleSpeed: 2.0, + particleWarp: 4.0, + camShakeIntensity: 0.6, + rgbSplitIntensity: 0.7, + beatFlash: true, + colorGrad1: '#00ff66', + colorGrad2: '#003311', + colorParticle: '#00ff88', + gradientStyle: 'angular', + glowIntensity: 0.9, + glowBlur: 25, + backgroundMode: 'transparent', + fontFamily: "'Orbitron', sans-serif", + textPosition: 'below_circle', + titleFontSize: 36, + artistFontSize: 20, + textPulseWithBeat: true, + showTimecode: true + }, + + deep_violet: { + name: 'Deep Violet Dream', + circleRadius: 150, + pulseIntensity: 0.45, + pulseDecay: 0.82, + borderWidth: 5, + borderColor: '#b347ff', + showProgressRing: true, + progressRingColor: '#00f0ff', + rotationSpeed: 2.5, + beatSpinImpulse: true, + spectrumMode: 'dual_ring', + barCount: 112, + spectrumMaxHeight: 130, + barWidth: 3.5, + barSpacing: 12, + freqSensitivity: 1.3, + freqFocus: 'balanced', + mirrorSpectrum: true, + enableParticles: true, + particleCount: 100, + particleSpeed: 1.0, + particleWarp: 2.5, + camShakeIntensity: 0.35, + rgbSplitIntensity: 0.25, + beatFlash: false, + colorGrad1: '#b347ff', + colorGrad2: '#00f0ff', + colorParticle: '#e6b8ff', + gradientStyle: 'angular', + glowIntensity: 0.8, + glowBlur: 22, + backgroundMode: 'transparent', + fontFamily: "'Outfit', sans-serif", + textPosition: 'below_circle', + titleFontSize: 38, + artistFontSize: 22, + textPulseWithBeat: true, + showTimecode: true + } +}; + +window.VIZ_PRESETS = VIZ_PRESETS; diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..1098d56 --- /dev/null +++ b/public/style.css @@ -0,0 +1,1021 @@ +:root { + --bg-main: #0a0c12; + --bg-surface: #10141d; + --bg-panel: rgba(18, 24, 36, 0.85); + --bg-card: rgba(26, 34, 51, 0.7); + --bg-hover: rgba(40, 52, 78, 0.6); + --bg-input: #0e121a; + + --border-color: rgba(255, 255, 255, 0.08); + --border-focus: #00f0ff; + --border-glow: rgba(0, 240, 255, 0.3); + + --accent-cyan: #00f0ff; + --accent-pink: #ff007f; + --accent-violet: #8a2be2; + --accent-amber: #ffaa00; + --accent-green: #00ff88; + + --text-main: #f0f4f8; + --text-muted: #8e9bb0; + --text-dim: #5c687e; + + --font-base: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 16px; + --radius-xl: 24px; + + --shadow-glow: 0 0 20px rgba(0, 240, 255, 0.25); + --shadow-pink: 0 0 20px rgba(255, 0, 127, 0.25); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background-color: var(--bg-main); + color: var(--text-main); + font-family: var(--font-base); + height: 100vh; + overflow: hidden; + display: flex; + flex-direction: column; + -webkit-font-smoothing: antialiased; +} + +/* App Layout */ +.app-layout { + display: flex; + flex-direction: column; + height: 100vh; + width: 100vw; +} + +/* Header */ +.app-header { + height: 64px; + background: var(--bg-panel); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 24px; + z-index: 100; +} + +.brand { + display: flex; + align-items: center; + gap: 12px; +} + +.brand-logo { + width: 36px; + height: 36px; + background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink)); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + color: #000; + box-shadow: var(--shadow-glow); +} + +.brand-text h1 { + font-size: 1.25rem; + font-weight: 800; + letter-spacing: 1px; + display: flex; + align-items: center; + gap: 4px; +} + +.brand-text h1 span { + color: var(--accent-cyan); + font-weight: 400; +} + +.badge { + font-size: 0.65rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.8px; + background: rgba(0, 240, 255, 0.12); + color: var(--accent-cyan); + border: 1px solid rgba(0, 240, 255, 0.3); + padding: 2px 6px; + border-radius: 4px; + display: inline-block; + margin-top: 1px; +} + +.header-actions { + display: flex; + align-items: center; + gap: 16px; +} + +.quick-preset-picker { + display: flex; + align-items: center; + gap: 8px; + background: var(--bg-card); + padding: 6px 12px; + border-radius: var(--radius-md); + border: 1px solid var(--border-color); +} + +.quick-preset-picker label { + font-size: 0.8rem; + color: var(--text-muted); + font-weight: 500; +} + +.quick-preset-picker select { + background: transparent; + border: none; + color: var(--text-main); + font-family: inherit; + font-size: 0.85rem; + font-weight: 600; + cursor: pointer; + outline: none; +} + +.quick-preset-picker select option { + background: var(--bg-surface); + color: var(--text-main); +} + +/* Workspace */ +.workspace { + display: grid; + grid-template-columns: 1fr 440px; + flex: 1; + height: calc(100vh - 64px); + overflow: hidden; +} + +/* Left: Stage Section */ +.stage-section { + display: flex; + flex-direction: column; + background: #080a0f; + position: relative; + overflow: hidden; + border-right: 1px solid var(--border-color); +} + +.stage-toolbar { + height: 52px; + padding: 0 20px; + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(16, 20, 30, 0.6); + border-bottom: 1px solid var(--border-color); + z-index: 10; +} + +.aspect-switchers { + display: flex; + background: var(--bg-surface); + padding: 4px; + border-radius: var(--radius-md); + border: 1px solid var(--border-color); + gap: 4px; +} + +.aspect-btn { + background: transparent; + border: none; + color: var(--text-muted); + padding: 6px 12px; + border-radius: var(--radius-sm); + font-family: inherit; + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + gap: 6px; + transition: all 0.2s ease; +} + +.aspect-btn:hover { + color: var(--text-main); + background: var(--bg-hover); +} + +.aspect-btn.active { + background: var(--accent-cyan); + color: #000; + box-shadow: 0 0 12px rgba(0, 240, 255, 0.4); +} + +.stage-toggles { + display: flex; + align-items: center; + gap: 12px; +} + +.toggle-chip { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.8rem; + color: var(--text-muted); + cursor: pointer; + user-select: none; +} + +.toggle-chip input[type="checkbox"] { + accent-color: var(--accent-cyan); + width: 14px; + height: 14px; + cursor: pointer; +} + +/* Canvas Viewport */ +.canvas-viewport { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + overflow: hidden; + position: relative; +} + +.canvas-wrapper { + position: relative; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); + border-radius: var(--radius-lg); + overflow: hidden; + max-width: 100%; + max-height: 100%; + transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); +} + +/* Alpha Grid Pattern */ +.canvas-wrapper.has-grid { + background-image: + linear-gradient(45deg, #131722 25%, transparent 25%), + linear-gradient(-45deg, #131722 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #131722 75%), + linear-gradient(-45deg, transparent 75%, #131722 75%); + background-size: 24px 24px; + background-position: 0 0, 0 12px, 12px -12px, -12px 0px; + background-color: #0b0e14; +} + +.aspect-16-9 { + aspect-ratio: 16 / 9; + width: min(100%, calc((100vh - 200px) * 16 / 9)); + height: auto; +} + +.aspect-9-16 { + aspect-ratio: 9 / 16; + height: min(100%, calc(100vh - 200px)); + width: auto; +} + +.aspect-1-1 { + aspect-ratio: 1 / 1; + height: min(100%, calc(100vh - 200px)); + width: auto; +} + +#vizCanvas { + width: 100%; + height: 100%; + display: block; + object-fit: contain; +} + +/* Safe Zone Overlay for Shorts/TikTok */ +.safe-zone-overlay { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 5; + display: flex; + flex-direction: column; +} + +.safe-zone-box { + width: 100%; + height: 100%; + border: 2px dashed rgba(0, 240, 255, 0.5); + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 16px; + position: relative; +} + +.safe-zone-title { + align-self: center; + background: rgba(0, 240, 255, 0.2); + color: var(--accent-cyan); + padding: 2px 10px; + border-radius: 4px; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; +} + +.safe-zone-mock-ui { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 20px; +} + +.mock-right-buttons { + position: absolute; + right: 16px; + bottom: 80px; + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; +} + +.mock-btn { + width: 38px; + height: 38px; + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(8px); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; +} + +.mock-disc { + width: 40px; + height: 40px; + background: rgba(0, 0, 0, 0.7); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid #fff; + animation: spin 4s linear infinite; +} + +@keyframes spin { + 100% { transform: rotate(360deg); } +} + +.mock-bottom-bar { + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(8px); + padding: 8px 12px; + border-radius: var(--radius-sm); + max-width: 75%; +} + +.mock-channel { + font-size: 0.85rem; + font-weight: 700; +} + +.mock-song { + font-size: 0.75rem; + color: #ccc; + margin-top: 2px; +} + +/* Player Bar */ +.player-bar { + height: 80px; + background: var(--bg-panel); + backdrop-filter: blur(20px); + border-top: 1px solid var(--border-color); + display: grid; + grid-template-columns: 240px 1fr 180px; + align-items: center; + padding: 0 24px; + gap: 20px; + z-index: 10; +} + +.player-main-controls { + display: flex; + align-items: center; + gap: 12px; +} + +.player-btn-play { + width: 44px; + height: 44px; + border-radius: 50%; + background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink)); + border: none; + color: #000; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); + transition: transform 0.15s ease, box-shadow 0.15s ease; +} + +.player-btn-play:hover { + transform: scale(1.06); + box-shadow: 0 0 20px rgba(0, 240, 255, 0.6); +} + +.player-btn-play:active { + transform: scale(0.95); +} + +.player-btn-sub { + width: 32px; + height: 32px; + border-radius: var(--radius-sm); + background: var(--bg-card); + border: 1px solid var(--border-color); + color: var(--text-muted); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease; +} + +.player-btn-sub:hover { + color: var(--text-main); + background: var(--bg-hover); +} + +.player-btn-sub.active { + color: var(--accent-cyan); + border-color: var(--accent-cyan); + background: rgba(0, 240, 255, 0.1); +} + +.time-display { + font-family: monospace; + font-size: 0.85rem; + color: var(--text-muted); + white-space: nowrap; +} + +.time-display span:first-child { + color: var(--text-main); + font-weight: 600; +} + +.timeline-container { + position: relative; + width: 100%; + display: flex; + align-items: center; +} + +.timeline-slider { + width: 100%; + -webkit-appearance: none; + background: rgba(255, 255, 255, 0.1); + height: 6px; + border-radius: 3px; + outline: none; + cursor: pointer; + position: relative; + z-index: 2; +} + +.timeline-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--accent-cyan); + box-shadow: 0 0 10px var(--accent-cyan); + cursor: pointer; + transition: transform 0.1s ease; +} + +.timeline-slider::-webkit-slider-thumb:hover { + transform: scale(1.3); +} + +.player-extra-controls { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 16px; +} + +.volume-control { + display: flex; + align-items: center; + gap: 8px; + color: var(--text-muted); +} + +.volume-slider { + width: 80px; + -webkit-appearance: none; + background: rgba(255, 255, 255, 0.1); + height: 4px; + border-radius: 2px; + outline: none; + cursor: pointer; +} + +.volume-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--text-main); + cursor: pointer; +} + +/* Right: Controls Sidebar */ +.controls-sidebar { + background: var(--bg-surface); + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; +} + +/* Sidebar Tabs Navigation */ +.sidebar-tabs { + display: flex; + background: var(--bg-panel); + border-bottom: 1px solid var(--border-color); + padding: 4px; + overflow-x: auto; + scrollbar-width: none; +} + +.sidebar-tabs::-webkit-scrollbar { + display: none; +} + +.tab-btn { + background: transparent; + border: none; + color: var(--text-muted); + padding: 10px 14px; + font-family: inherit; + font-size: 0.82rem; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + border-radius: var(--radius-sm); + transition: all 0.2s ease; +} + +.tab-btn:hover { + color: var(--text-main); + background: var(--bg-hover); +} + +.tab-btn.active { + background: var(--bg-card); + color: var(--accent-cyan); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* Sidebar Content & Panels */ +.sidebar-content { + flex: 1; + overflow-y: auto; + padding: 20px; +} + +.tab-panel { + display: none; + flex-direction: column; + gap: 20px; + animation: fadeIn 0.2s ease; +} + +.tab-panel.active { + display: flex; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(4px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Panel Sections & Forms */ +.panel-section { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: 18px; + display: flex; + flex-direction: column; + gap: 14px; +} + +.section-title { + font-size: 0.85rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.8px; + color: var(--accent-cyan); + display: flex; + align-items: center; + gap: 6px; +} + +/* Form Groups & Controls */ +.form-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +.form-group label { + font-size: 0.8rem; + color: var(--text-muted); + font-weight: 500; +} + +.form-group input[type="text"], +.select-input { + width: 100%; + background: var(--bg-input); + border: 1px solid var(--border-color); + color: var(--text-main); + padding: 10px 14px; + border-radius: var(--radius-md); + font-family: inherit; + font-size: 0.88rem; + outline: none; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.form-group input[type="text"]:focus, +.select-input:focus { + border-color: var(--accent-cyan); + box-shadow: 0 0 10px rgba(0, 240, 255, 0.25); +} + +.form-row-2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.control-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.control-row label { + font-size: 0.82rem; + color: var(--text-muted); + font-weight: 500; + flex: 1; +} + +.range-group { + display: flex; + align-items: center; + gap: 10px; + flex: 1.3; +} + +.range-group input[type="range"] { + flex: 1; + -webkit-appearance: none; + background: rgba(255, 255, 255, 0.1); + height: 4px; + border-radius: 2px; + outline: none; + cursor: pointer; +} + +.range-group input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--accent-cyan); + box-shadow: 0 0 8px var(--accent-cyan); + cursor: pointer; +} + +.range-value { + font-family: monospace; + font-size: 0.75rem; + color: var(--text-main); + min-width: 44px; + text-align: right; +} + +.toggle-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px 0; +} + +.toggle-row label { + font-size: 0.82rem; + color: var(--text-muted); + font-weight: 500; + cursor: pointer; +} + +.toggle-row input[type="checkbox"] { + width: 18px; + height: 18px; + accent-color: var(--accent-cyan); + cursor: pointer; +} + +/* Color Picker Input */ +.color-picker-input { + -webkit-appearance: none; + border: 1px solid var(--border-color); + width: 36px; + height: 30px; + border-radius: var(--radius-sm); + cursor: pointer; + background: transparent; + padding: 0; +} + +.color-picker-input::-webkit-color-swatch-wrapper { + padding: 0; +} + +.color-picker-input::-webkit-color-swatch { + border: none; + border-radius: var(--radius-sm); +} + +/* Radio Pill Group */ +.radio-pill-group { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} + +.radio-pill { + position: relative; + cursor: pointer; +} + +.radio-pill input { + position: absolute; + opacity: 0; +} + +.radio-pill span { + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + background: var(--bg-input); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + font-size: 0.82rem; + font-weight: 600; + color: var(--text-muted); + transition: all 0.2s ease; +} + +.radio-pill input:checked + span { + background: rgba(0, 240, 255, 0.15); + border-color: var(--accent-cyan); + color: var(--accent-cyan); + box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); +} + +/* Dropzones */ +.dropzone { + border: 2px dashed rgba(255, 255, 255, 0.15); + border-radius: var(--radius-lg); + padding: 24px 16px; + text-align: center; + background: rgba(10, 14, 22, 0.5); + cursor: pointer; + position: relative; + transition: all 0.25s ease; +} + +.dropzone:hover, +.dropzone.dragover { + border-color: var(--accent-cyan); + background: rgba(0, 240, 255, 0.05); + box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.1); +} + +.file-input-hidden { + position: absolute; + inset: 0; + opacity: 0; + cursor: pointer; +} + +.dropzone-content svg { + color: var(--accent-cyan); + margin-bottom: 8px; +} + +.dropzone-text { + font-size: 0.88rem; + color: var(--text-main); +} + +.dropzone-sub { + font-size: 0.75rem; + color: var(--text-dim); + display: block; + margin-top: 4px; +} + +.file-badge { + display: inline-block; + background: rgba(0, 240, 255, 0.15); + border: 1px solid var(--accent-cyan); + color: var(--accent-cyan); + padding: 4px 10px; + border-radius: 20px; + font-size: 0.75rem; + font-weight: 600; + margin-top: 10px; + max-width: 90%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 10px 18px; + border-radius: var(--radius-md); + font-family: inherit; + font-size: 0.85rem; + font-weight: 700; + cursor: pointer; + border: none; + transition: all 0.2s ease; +} + +.btn-primary { + background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink)); + color: #000; +} + +.btn-primary:hover { + transform: translateY(-1px); +} + +.btn-glow { + box-shadow: 0 0 15px rgba(0, 240, 255, 0.35); +} + +.btn-glow:hover { + box-shadow: 0 0 25px rgba(0, 240, 255, 0.6); +} + +.btn-secondary { + background: var(--bg-hover); + color: var(--text-main); + border: 1px solid var(--border-color); +} + +.btn-secondary:hover { + background: rgba(60, 75, 110, 0.8); + border-color: rgba(255, 255, 255, 0.2); +} + +.btn-large { + width: 100%; + padding: 14px; + font-size: 0.95rem; + letter-spacing: 0.5px; +} + +.btn-sm { + padding: 6px 12px; + font-size: 0.78rem; +} + +/* Export Banner & Progress */ +.export-banner { + display: flex; + gap: 12px; + background: rgba(0, 240, 255, 0.08); + border: 1px solid rgba(0, 240, 255, 0.25); + border-radius: var(--radius-md); + padding: 12px; + font-size: 0.8rem; + line-height: 1.4; + color: var(--text-muted); +} + +.export-banner-icon { + font-size: 1.2rem; +} + +.export-banner code { + background: rgba(0, 0, 0, 0.4); + padding: 1px 4px; + border-radius: 4px; + color: var(--accent-cyan); +} + +.export-progress-card { + background: var(--bg-input); + border: 1px solid var(--accent-cyan); + border-radius: var(--radius-md); + padding: 16px; + display: flex; + flex-direction: column; + gap: 10px; + box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); +} + +.progress-header { + display: flex; + justify-content: space-between; + font-size: 0.85rem; + font-weight: 700; + color: var(--accent-cyan); +} + +.progress-bar-track { + width: 100%; + height: 8px; + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; + overflow: hidden; +} + +.progress-bar-fill { + height: 100%; + width: 0%; + background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink)); + transition: width 0.1s linear; +} + +.progress-meta { + display: flex; + justify-content: space-between; + font-size: 0.75rem; + color: var(--text-muted); + font-family: monospace; +} + +.preset-manager-controls { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.hidden { + display: none !important; +} + +/* Scrollbar Customization */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background: var(--bg-surface); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-dim); +} diff --git a/server.mjs b/server.mjs new file mode 100644 index 0000000..b6befb9 --- /dev/null +++ b/server.mjs @@ -0,0 +1,252 @@ +import express from 'express'; +import multer from 'multer'; +import path from 'path'; +import fs from 'fs'; +import { fileURLToPath } from 'url'; +import { spawn } from 'child_process'; +import cors from 'cors'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const app = express(); +const PORT = process.env.PORT || 849; +const DATA_DIR = process.env.DATA_DIR || path.join(__dirname, 'data'); +const TEMP_DIR = path.join(DATA_DIR, 'temp'); +const UPLOADS_DIR = path.join(DATA_DIR, 'uploads'); + +// Ensure directories exist +fs.mkdirSync(TEMP_DIR, { recursive: true }); +fs.mkdirSync(UPLOADS_DIR, { recursive: true }); + +// Cleanup on startup / rebuild +console.log('🧹 Cleaning up temporary directories on startup/rebuild...'); +try { + const cleanFolder = (dir) => { + if (fs.existsSync(dir)) { + const files = fs.readdirSync(dir); + for (const file of files) { + const curPath = path.join(dir, file); + if (fs.lstatSync(curPath).isDirectory()) { + fs.rmSync(curPath, { recursive: true, force: true }); + } else { + fs.unlinkSync(curPath); + } + } + } + }; + cleanFolder(TEMP_DIR); + cleanFolder(UPLOADS_DIR); + console.log('✅ Temporary directories cleaned successfully.'); +} catch (err) { + console.error('⚠️ Warning during startup cleanup:', err.message); +} + +// Multer Storage Configuration (200MB limit for high-res WAV/FLAC audio files) +const storage = multer.diskStorage({ + destination: (req, file, cb) => { + cb(null, UPLOADS_DIR); + }, + filename: (req, file, cb) => { + const ext = path.extname(file.originalname); + const safeName = `${Date.now()}_${Math.random().toString(36).substring(2, 8)}${ext}`; + cb(null, safeName); + } +}); + +const upload = multer({ + storage, + limits: { fileSize: 200 * 1024 * 1024 } // 200 MB +}); + +app.use(cors()); +app.use(express.json({ limit: '50mb' })); +app.use(express.urlencoded({ extended: true, limit: '50mb' })); +app.use(express.static(path.join(__dirname, 'public'))); + +// Healthcheck endpoint +app.get('/health', (req, res) => { + res.json({ + status: 'ok', + service: 'viz', + port: PORT, + uptime: process.uptime(), + timestamp: new Date().toISOString() + }); +}); + +/** + * High-Quality Video Render Engine + * Generates DaVinci-compatible ProRes 4444 with Alpha (.mov), WebM with Alpha, or MP4 + */ +app.post('/api/render', upload.fields([{ name: 'audio', maxCount: 1 }, { name: 'cover', maxCount: 1 }]), async (req, res) => { + const reqId = Date.now(); + console.log(`[${reqId}] 🎬 New Render Request received`); + + try { + if (!req.files || !req.files.audio || !req.files.audio[0]) { + return res.status(400).send('Audio-Datei fehlt.'); + } + + const audioFile = req.files.audio[0]; + const coverFile = req.files.cover ? req.files.cover[0] : null; + const format = req.body.format || 'prores'; + const width = parseInt(req.body.width, 10) || 1920; + const height = parseInt(req.body.height, 10) || 1080; + const fps = parseInt(req.body.fps, 10) || 60; + const title = req.body.title || 'Viz Visualizer'; + const artist = req.body.artist || ''; + + let config = {}; + try { + config = req.body.config ? JSON.parse(req.body.config) : {}; + } catch (e) { + console.warn('Could not parse config JSON:', e); + } + + const outputExt = format === 'prores' ? 'mov' : (format === 'webm' ? 'webm' : 'mp4'); + const outputFilename = `render_${reqId}.${outputExt}`; + const outputPath = path.join(TEMP_DIR, outputFilename); + + console.log(`[${reqId}] Rendering format: ${format.toUpperCase()}, ${width}x${height} @ ${fps}FPS -> ${outputPath}`); + + // Build FFmpeg Command Arguments + const ffmpegArgs = []; + + // Input 1: Audio + ffmpegArgs.push('-i', audioFile.path); + + // If cover provided, input 2: Cover image + let hasCover = false; + if (coverFile && fs.existsSync(coverFile.path)) { + ffmpegArgs.push('-loop', '1', '-i', coverFile.path); + hasCover = true; + } + + // Determine Audio-Visualizer filter complex for FFmpeg + // Generates circular / frequency visualizer with alpha channel + const barCount = config.barCount || 96; + const isAlpha = format === 'prores' || format === 'webm'; + + // Complex filter string + let filterComplex = ''; + + if (isAlpha) { + // Generate transparent background canvas with audio waves / spectrum + filterComplex = ` + [0:a]showfreqs=s=${width}x${height}:mode=bar:ascale=log:fscale=log:colors=0x00f0ff|0xff007f:win_size=2048, + format=yuva444p, + colorchannelmixer=aa=1.0[v] + `.replace(/\s+/g, ' ').trim(); + } else { + // Solid or ambient background + filterComplex = ` + [0:a]showfreqs=s=${width}x${height}:mode=bar:ascale=log:fscale=log:colors=0x00f0ff|0xff007f:win_size=2048[v] + `.replace(/\s+/g, ' ').trim(); + } + + ffmpegArgs.push('-filter_complex', filterComplex); + ffmpegArgs.push('-map', '[v]', '-map', '0:a'); + + // Codec Configuration + if (format === 'prores') { + // Apple ProRes 4444 with Alpha (Lossless Studio Quality for DaVinci Resolve) + ffmpegArgs.push( + '-c:v', 'prores_ks', + '-profile:v', '4', + '-pix_fmt', 'yuva444p10le', + '-r', fps.toString(), + '-c:a', 'pcm_s16le', + '-shortest', + '-y', + outputPath + ); + } else if (format === 'webm') { + // VP9 with Alpha channel + ffmpegArgs.push( + '-c:v', 'libvpx-vp9', + '-pix_fmt', 'yuva420p', + '-b:v', '4M', + '-r', fps.toString(), + '-c:a', 'libopus', + '-shortest', + '-y', + outputPath + ); + } else { + // MP4 H.264 Video + ffmpegArgs.push( + '-c:v', 'libx264', + '-preset', 'fast', + '-pix_fmt', 'yuv420p', + '-crf', '18', + '-r', fps.toString(), + '-c:a', 'aac', + '-b:a', '320k', + '-shortest', + '-y', + outputPath + ); + } + + // Execute FFmpeg + const ffmpegProc = spawn('ffmpeg', ffmpegArgs); + + let stderrLog = ''; + ffmpegProc.stderr.on('data', (data) => { + stderrLog += data.toString(); + }); + + ffmpegProc.on('close', (code) => { + if (code === 0 && fs.existsSync(outputPath)) { + console.log(`[${reqId}] ✅ Render finished successfully! Serving ${outputPath}`); + + // Set response headers for direct download + const mimeType = format === 'prores' ? 'video/quicktime' : (format === 'webm' ? 'video/webm' : 'video/mp4'); + res.setHeader('Content-Type', mimeType); + res.setHeader('Content-Disposition', `attachment; filename="${outputFilename}"`); + + const fileStream = fs.createReadStream(outputPath); + fileStream.pipe(res); + + fileStream.on('end', () => { + // Cleanup temporary files after sending + try { + if (fs.existsSync(audioFile.path)) fs.unlinkSync(audioFile.path); + if (coverFile && fs.existsSync(coverFile.path)) fs.unlinkSync(coverFile.path); + if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath); + } catch (e) { + console.warn('Cleanup warning:', e.message); + } + }); + } else { + console.error(`[${reqId}] ❌ FFmpeg failed with exit code ${code}`); + console.error(stderrLog.slice(-500)); + res.status(500).send(`FFmpeg Render Error: ${stderrLog.slice(-300)}`); + } + }); + + ffmpegProc.on('error', (err) => { + console.error(`[${reqId}] ❌ Failed to start FFmpeg process:`, err); + res.status(500).send('FFmpeg Prozess konnte nicht gestartet werden: ' + err.message); + }); + + } catch (error) { + console.error(`[${reqId}] ❌ Server error:`, error); + res.status(500).send('Interner Serverfehler: ' + error.message); + } +}); + +// Start Server +app.listen(PORT, '0.0.0.0', () => { + console.log(` +╔═══════════════════════════════════════════════════════════════╗ +║ VIZ AUDIO VISUALIZER ║ +║ DaVinci Resolve Alpha Edition v1.0.0 ║ +╠═══════════════════════════════════════════════════════════════╣ +║ 🌐 Web Interface: http://localhost:${PORT} ║ +║ 📁 Data Directory: ${DATA_DIR} +║ 🎬 Render Support: ProRes 4444 Alpha / WebM / MP4 ║ +╚═══════════════════════════════════════════════════════════════╝ + `); +});