openvoiceui 1.0.0

package/src/ui/themes/ThemeManager.js

@@ -0,0 +1,213 @@
+/**
+ * ThemeManager - Handles dynamic color theming
+ * Allows users to pick custom primary/accent colors
+ */
+
+window.ThemeManager = {
+    // Current theme colors
+    colors: {
+        primary: '#0088ff',      // Main blue
+        primaryDim: '#0055aa',   // Darker blue
+        primaryBright: '#00aaff', // Brighter blue
+        accent: '#00ffff',        // Cyan
+        accentDim: '#008888',     // Darker cyan
+    },
+
+    // Preserved colors (don't change with theme)
+    fixedColors: {
+        green: '#00ff66',
+        yellow: '#ffdd00',
+        orange: '#ff6600',
+        red: '#ff2244',
+        purple: '#aa00ff',
+    },
+
+    // Default theme
+    defaultTheme: {
+        primary: '#0088ff',
+        accent: '#00ffff'
+    },
+
+    // Preset themes
+    presets: {
+        'Classic Blue': { primary: '#0088ff', accent: '#00ffff' },
+        'Neon Pink': { primary: '#ff0088', accent: '#ff66cc' },
+        'Cyber Green': { primary: '#00ff88', accent: '#88ffcc' },
+        'Purple Haze': { primary: '#8800ff', accent: '#cc66ff' },
+        'Sunset Orange': { primary: '#ff6600', accent: '#ffaa00' },
+        'Blood Red': { primary: '#cc0033', accent: '#ff6666' },
+        'Matrix': { primary: '#00ff00', accent: '#88ff88' },
+    },
+
+    init() {
+        // Load saved theme from localStorage (immediate, no flash)
+        const saved = localStorage.getItem('ai-theme');
+        if (saved) {
+            try {
+                const theme = JSON.parse(saved);
+                this.colors.primary = theme.primary || this.defaultTheme.primary;
+                this.colors.accent = theme.accent || this.defaultTheme.accent;
+            } catch (e) {
+                console.warn('Failed to load saved theme:', e);
+            }
+        }
+
+        // Generate derived colors
+        this.updateDerivedColors();
+
+        // Apply theme immediately (avoid flash of default colors)
+        this.applyTheme();
+
+        // Sync with server in background (server is authoritative across devices)
+        this.loadFromServer();
+    },
+
+    loadFromServer() {
+        fetch('/api/theme')
+            .then(r => r.ok ? r.json() : null)
+            .then(theme => {
+                if (theme && theme.primary && theme.accent) {
+                    this.colors.primary = theme.primary;
+                    this.colors.accent = theme.accent;
+                    this.updateDerivedColors();
+                    this.applyTheme();
+                    // Keep localStorage in sync
+                    localStorage.setItem('ai-theme', JSON.stringify({
+                        primary: theme.primary,
+                        accent: theme.accent
+                    }));
+                }
+            })
+            .catch(() => {
+                // Server unavailable — localStorage fallback already applied
+            });
+    },
+
+    updateDerivedColors() {
+        const p = this.colors.primary;
+        const a = this.colors.accent;
+
+        // Create dimmer versions (darker)
+        this.colors.primaryDim = this.darkenColor(p, 0.4);
+        this.colors.primaryBright = this.lightenColor(p, 0.3);
+        this.colors.accentDim = this.darkenColor(a, 0.4);
+    },
+
+    darkenColor(hex, factor) {
+        const rgb = this.hexToRgb(hex);
+        if (!rgb) return hex;
+        return this.rgbToHex(
+            Math.floor(rgb.r * (1 - factor)),
+            Math.floor(rgb.g * (1 - factor)),
+            Math.floor(rgb.b * (1 - factor))
+        );
+    },
+
+    lightenColor(hex, factor) {
+        const rgb = this.hexToRgb(hex);
+        if (!rgb) return hex;
+        return this.rgbToHex(
+            Math.min(255, Math.floor(rgb.r + (255 - rgb.r) * factor)),
+            Math.min(255, Math.floor(rgb.g + (255 - rgb.g) * factor)),
+            Math.min(255, Math.floor(rgb.b + (255 - rgb.b) * factor))
+        );
+    },
+
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    },
+
+    rgbToHex(r, g, b) {
+        return '#' + [r, g, b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+    },
+
+    setPrimaryColor(hex) {
+        this.colors.primary = hex;
+        this.updateDerivedColors();
+        this.applyTheme();
+        this.saveTheme();
+    },
+
+    setAccentColor(hex) {
+        this.colors.accent = hex;
+        this.updateDerivedColors();
+        this.applyTheme();
+        this.saveTheme();
+    },
+
+    applyPreset(presetName) {
+        const preset = this.presets[presetName];
+        if (preset) {
+            this.colors.primary = preset.primary;
+            this.colors.accent = preset.accent;
+            this.updateDerivedColors();
+            this.applyTheme();
+            this.saveTheme();
+        }
+    },
+
+    applyTheme() {
+        const root = document.documentElement;
+
+        // Update CSS variables
+        root.style.setProperty('--blue', this.colors.primary);
+        root.style.setProperty('--blue-dim', this.colors.primaryDim);
+        root.style.setProperty('--blue-bright', this.colors.primaryBright);
+        root.style.setProperty('--cyan', this.colors.accent);
+
+        // Also set as RGB values for rgba() usage
+        const primaryRgb = this.hexToRgb(this.colors.primary);
+        const accentRgb = this.hexToRgb(this.colors.accent);
+
+        if (primaryRgb) {
+            root.style.setProperty('--blue-rgb', `${primaryRgb.r}, ${primaryRgb.g}, ${primaryRgb.b}`);
+        }
+        if (accentRgb) {
+            root.style.setProperty('--cyan-rgb', `${accentRgb.r}, ${accentRgb.g}, ${accentRgb.b}`);
+        }
+
+        // Dispatch event for other modules to react
+        window.dispatchEvent(new CustomEvent('themeChanged', { detail: this.colors }));
+    },
+
+    saveTheme() {
+        const theme = { primary: this.colors.primary, accent: this.colors.accent };
+        localStorage.setItem('ai-theme', JSON.stringify(theme));
+        // Persist to server (best-effort)
+        fetch('/api/theme', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(theme),
+        }).catch(() => {});
+    },
+
+    resetTheme() {
+        this.colors.primary = this.defaultTheme.primary;
+        this.colors.accent = this.defaultTheme.accent;
+        this.updateDerivedColors();
+        this.applyTheme();
+        localStorage.setItem('ai-theme', JSON.stringify({
+            primary: this.colors.primary,
+            accent: this.colors.accent
+        }));
+        // Reset on server too
+        fetch('/api/theme/reset', { method: 'POST' }).catch(() => {});
+    },
+
+    getCurrentTheme() {
+        return {
+            primary: this.colors.primary,
+            accent: this.colors.accent,
+            primaryDim: this.colors.primaryDim,
+            primaryBright: this.colors.primaryBright,
+        };
+    }
+};

package/src/ui/visualizers/BaseVisualizer.js

@@ -0,0 +1,29 @@
+/**
+ * BaseVisualizer - Interface contract for swappable visualizer plugins
+ *
+ * Any visualizer that assigns to window.VisualizerModule must implement
+ * all methods listed here. MusicModule and the app init code call these.
+ *
+ * To create a new visualizer:
+ * 1. Copy this template
+ * 2. Implement all methods
+ * 3. Assign to window.VisualizerModule
+ * 4. Load via <script src="..."> before the main app script
+ */
+
+window.BaseVisualizer = {
+    name: 'Base',
+    description: 'Template visualizer — does nothing. Override all methods.',
+
+    enabled: true,
+    autoplayEnabled: false,
+
+    async init() {},
+    async setupAnalyser() {},
+    startAnimation() {},
+    stopAnimation() {},
+    setEnabled(enabled) { this.enabled = enabled; },
+    setAutoplay(enabled) { this.autoplayEnabled = enabled; },
+    onTrackEnded() {},
+    updateToggleUI() {},
+};

package/src/ui/visualizers/PartyFXVisualizer.css

@@ -0,0 +1,291 @@
+/* ===== PartyFXVisualizer CSS ===== */
+/* Extracted from index.html - all styles for the Party FX music visualizer */
+
+/* Autoplay toggle */
+.autoplay-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: 10px;
+}
+.autoplay-toggle label {
+    color: #888;
+    font-size: 0.7rem;
+    cursor: pointer;
+}
+.autoplay-toggle input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    accent-color: var(--cyan);
+}
+.autoplay-toggle.enabled label {
+    color: var(--cyan);
+}
+
+/* Visualizer toggle */
+.visualizer-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: 10px;
+}
+.visualizer-toggle label {
+    color: #888;
+    font-size: 0.7rem;
+    cursor: pointer;
+}
+.visualizer-toggle input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    accent-color: #aa00ff;
+}
+.visualizer-toggle.enabled label {
+    color: #aa00ff;
+}
+
+/* ===== PARTY EFFECTS ===== */
+.party-effects-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.party-effects-container.active { opacity: 1; }
+
+/* Center Glow - pulses behind face with audio */
+.center-glow {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    height: 600px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(0, 136, 255, 0.15) 0%, rgba(0, 255, 255, 0.05) 40%, transparent 70%);
+    filter: blur(60px);
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* Beat Flash - screen flash on bass hits */
+.beat-flash {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, rgba(0, 255, 255, 0.3), transparent 70%);
+    pointer-events: none;
+    opacity: 0;
+    z-index: 1;
+}
+
+/* Screen shake on bass */
+.shake {
+    animation: screenShake 0.1s ease-out;
+}
+@keyframes screenShake {
+    0%, 100% { transform: translate(0, 0); }
+    25% { transform: translate(calc(var(--shake-amount, 5px) * -1), var(--shake-amount, 5px)); }
+    50% { transform: translate(var(--shake-amount, 5px), calc(var(--shake-amount, 5px) * -1)); }
+    75% { transform: translate(calc(var(--shake-amount, 5px) * -1), calc(var(--shake-amount, 5px) * -1)); }
+}
+
+/* Ripple container */
+.ripple-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+.sound-ripple {
+    position: absolute;
+    border: 2px solid var(--cyan);
+    border-radius: 50%;
+    opacity: 0;
+    animation: ripple-expand 1s ease-out forwards;
+}
+@keyframes ripple-expand {
+    0% { width: 0; height: 0; opacity: 0.6; }
+    100% { width: 300px; height: 300px; opacity: 0; }
+}
+
+/* Explosion container */
+.explosion-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+.explosion-particle {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--orange);
+    border-radius: 50%;
+    pointer-events: none;
+}
+
+/* Fireworks container */
+.fireworks-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+.firework-particle {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    pointer-events: none;
+}
+
+/* Particles - orbit around center */
+.party-particle-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+.party-particle {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: var(--cyan);
+    border-radius: 50%;
+    opacity: 0;
+    will-change: transform, opacity;
+}
+
+/* Disco Dots - orbit and react */
+.disco-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+.disco-dot {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background: white;
+    border-radius: 50%;
+    filter: blur(3px);
+    opacity: 0;
+    will-change: transform, opacity;
+}
+
+/* Waveform oscilloscope - FULL SCREEN background effect */
+.oscilloscope-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 0;
+    transition: opacity 0.3s;
+}
+.oscilloscope-container.active { opacity: 1; }
+#oscilloscope-canvas {
+    width: 100%;
+    height: 100%;
+    filter: drop-shadow(0 0 30px var(--cyan)) drop-shadow(0 0 60px var(--blue));
+}
+
+/* ===== VISUALIZER BARS - Equalizer bars around face box ===== */
+
+/* Top/Bottom visualizers - attached to face box */
+.visualizer-container {
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 3px;
+    pointer-events: none;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.visualizer-container.active { opacity: 1; }
+.visualizer-container.top {
+    top: -8px;
+    transform: translateY(-100%);
+    align-items: flex-end;
+}
+.visualizer-container.bottom {
+    bottom: -8px;
+    transform: translateY(100%);
+    align-items: flex-start;
+}
+
+.visualizer-bar {
+    flex: 1;
+    max-width: 8px;
+    border-radius: 3px;
+    transition: height 0.05s ease;
+    box-shadow: 0 0 8px var(--cyan);
+}
+.visualizer-container.top .visualizer-bar {
+    background: linear-gradient(to top,
+        var(--cyan) 0%,
+        var(--blue) 40%,
+        #aa00ff 70%,
+        var(--red) 100%);
+    background-size: 100% 55px;
+    background-position: bottom;
+    background-repeat: no-repeat;
+}
+.visualizer-container.bottom .visualizer-bar {
+    background: linear-gradient(to bottom,
+        var(--cyan) 0%,
+        var(--blue) 40%,
+        #aa00ff 70%,
+        var(--red) 100%);
+    background-size: 100% 55px;
+    background-position: top;
+    background-repeat: no-repeat;
+}
+
+/* Side visualizers - attached to face box, full height */
+.side-visualizer {
+    position: absolute;
+    top: 10px;
+    bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+.side-visualizer.active { opacity: 1; }
+.side-visualizer.left { right: 100%; margin-right: 8px; align-items: flex-end; }
+.side-visualizer.right { left: 100%; margin-left: 8px; align-items: flex-start; }
+
+.side-bar {
+    width: 80px;
+    height: 6px;
+    border-radius: 3px;
+    box-shadow: 0 0 8px var(--cyan);
+    transition: width 0.05s ease;
+}
+.side-visualizer.left .side-bar {
+    background: linear-gradient(to left,
+        var(--cyan) 0%,
+        var(--blue) 40%,
+        #aa00ff 70%,
+        var(--red) 100%);
+    background-size: 85px 100%;
+    background-position: right;
+    background-repeat: no-repeat;
+}
+.side-visualizer.right .side-bar {
+    background: linear-gradient(to right,
+        var(--cyan) 0%,
+        var(--blue) 40%,
+        #aa00ff 70%,
+        var(--red) 100%);
+    background-size: 85px 100%;
+    background-position: left;
+    background-repeat: no-repeat;
+}