openvoiceui 1.0.0

package/src/ui/face/FaceRenderer.js

@@ -0,0 +1,309 @@
+/**
+ * FaceRenderer - Modular face/avatar rendering system
+ * Supports multiple face modes: eyes, orb, future options
+ */
+
+window.FaceRenderer = {
+    // Available face modes
+    modes: {
+        'eyes': {
+            name: 'AI Eyes',
+            description: 'Classic animated eyes'
+        },
+        'halo-smoke': {
+            name: 'Halo Smoke Orb',
+            description: 'Halo ring + wispy smoke core, reacts to TTS audio'
+        }
+    },
+
+    currentMode: 'eyes',
+    container: null,
+    audioContext: null,
+    analyser: null,
+    animationFrame: null,
+
+    // Orb-specific state
+    orb: {
+        canvas: null,
+        ctx: null,
+        particles: [],
+        baseRadius: 80,
+        pulsePhase: 0
+    },
+
+    init() {
+        this.container = document.querySelector('.face-box');
+        if (!this.container) {
+            console.warn('FaceRenderer: .face-box container not found');
+            return;
+        }
+
+        // Load saved mode from server profile (shared across devices)
+        const savedMode = window._serverProfile?.ui?.face_mode;
+        if (savedMode && this.modes[savedMode]) {
+            this.currentMode = savedMode;
+        }
+
+        // Listen for theme changes
+        window.addEventListener('themeChanged', (e) => {
+            if (this.currentMode === 'orb') {
+                this.updateOrbColors(e.detail);
+            }
+        });
+
+        // Initial render
+        this.render();
+    },
+
+    setMode(modeName) {
+        if (!this.modes[modeName]) {
+            console.warn('Unknown face mode:', modeName);
+            return;
+        }
+
+        // Clean up current mode
+        this.cleanup();
+
+        this.currentMode = modeName;
+        // Persist to server profile
+        const profileId = window.providerManager?._activeProfileId || 'default';
+        fetch('/api/profiles/' + profileId, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ui: { face_mode: modeName } })
+        }).catch(e => console.warn('Failed to save face mode:', e));
+        if (window._serverProfile) {
+            if (!window._serverProfile.ui) window._serverProfile.ui = {};
+            window._serverProfile.ui.face_mode = modeName;
+        }
+
+        // Re-render
+        this.render();
+
+        // Dispatch event
+        window.dispatchEvent(new CustomEvent('faceModeChanged', { detail: modeName }));
+    },
+
+    cleanup() {
+        if (this.animationFrame) {
+            cancelAnimationFrame(this.animationFrame);
+            this.animationFrame = null;
+        }
+
+        // Remove orb canvas if exists
+        if (this.orb.canvas && this.orb.canvas.parentNode) {
+            this.orb.canvas.parentNode.removeChild(this.orb.canvas);
+            this.orb.canvas = null;
+            this.orb.ctx = null;
+        }
+
+        // Stop halo-smoke face if running
+        if (window.HaloSmokeFace) {
+            window.HaloSmokeFace.stop();
+        }
+    },
+
+    render() {
+        switch (this.currentMode) {
+            case 'eyes':
+                this.renderEyes();
+                break;
+            case 'orb':
+                this.renderOrb();
+                break;
+            case 'halo-smoke':
+                this.renderHaloSmoke();
+                break;
+        }
+    },
+
+    renderEyes() {
+        // Show existing eyes, hide orb
+        const eyesContainer = this.container.querySelector('.eyes-container');
+        if (eyesContainer) {
+            eyesContainer.style.display = 'flex';
+        }
+
+        // Remove orb canvas if present
+        this.cleanup();
+    },
+
+    renderOrb() {
+        // Hide existing eyes
+        const eyesContainer = this.container.querySelector('.eyes-container');
+        if (eyesContainer) {
+            eyesContainer.style.display = 'none';
+        }
+
+        // Create orb canvas
+        if (!this.orb.canvas) {
+            this.orb.canvas = document.createElement('canvas');
+            this.orb.canvas.id = 'orb-canvas';
+            this.orb.canvas.style.cssText = `
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                pointer-events: none;
+            `;
+            this.container.appendChild(this.orb.canvas);
+            this.orb.ctx = this.orb.canvas.getContext('2d');
+        }
+
+        // Set canvas size
+        const size = Math.min(this.container.offsetWidth, this.container.offsetHeight) * 0.6;
+        this.orb.canvas.width = size;
+        this.orb.canvas.height = size;
+
+        // Initialize particles
+        this.initOrbParticles();
+
+        // Start animation
+        this.animateOrb();
+    },
+
+    initOrbParticles() {
+        this.orb.particles = [];
+        const count = 30;
+
+        for (let i = 0; i < count; i++) {
+            this.orb.particles.push({
+                angle: (Math.PI * 2 / count) * i,
+                radius: this.orb.baseRadius + Math.random() * 20,
+                speed: 0.01 + Math.random() * 0.02,
+                size: 2 + Math.random() * 4,
+                alpha: 0.3 + Math.random() * 0.7
+            });
+        }
+    },
+
+    animateOrb() {
+        if (this.currentMode !== 'orb') return;
+
+        const ctx = this.orb.ctx;
+        const canvas = this.orb.canvas;
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Get audio data if available
+        let audioLevel = 0;
+        if (window.audioAnalyser) {
+            const dataArray = new Uint8Array(window.audioAnalyser.frequencyBinCount);
+            window.audioAnalyser.getByteFrequencyData(dataArray);
+            // Average of bass frequencies
+            audioLevel = dataArray.slice(0, 10).reduce((a, b) => a + b, 0) / 10 / 255;
+        }
+
+        // Get theme colors
+        const theme = window.ThemeManager?.getCurrentTheme() || {};
+        const primaryColor = theme.primary || '#0088ff';
+        const accentColor = theme.accent || '#00ffff';
+
+        // Pulsing effect
+        this.orb.pulsePhase += 0.02;
+        const pulse = Math.sin(this.orb.pulsePhase) * 0.1 + 1;
+        const audioPulse = 1 + audioLevel * 0.5;
+        const baseRadius = this.orb.baseRadius * pulse * audioPulse;
+
+        // Draw outer glow
+        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, baseRadius * 1.5);
+        gradient.addColorStop(0, this.hexToRgba(primaryColor, 0.3));
+        gradient.addColorStop(0.5, this.hexToRgba(accentColor, 0.1));
+        gradient.addColorStop(1, 'transparent');
+
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, baseRadius * 1.5, 0, Math.PI * 2);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+
+        // Draw core orb
+        const coreGradient = ctx.createRadialGradient(
+            centerX - baseRadius * 0.3,
+            centerY - baseRadius * 0.3,
+            0,
+            centerX,
+            centerY,
+            baseRadius
+        );
+        coreGradient.addColorStop(0, this.hexToRgba(accentColor, 0.8));
+        coreGradient.addColorStop(0.5, this.hexToRgba(primaryColor, 0.5));
+        coreGradient.addColorStop(1, this.hexToRgba(primaryColor, 0.2));
+
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, baseRadius, 0, Math.PI * 2);
+        ctx.fillStyle = coreGradient;
+        ctx.fill();
+
+        // Draw border
+        ctx.strokeStyle = this.hexToRgba(accentColor, 0.6);
+        ctx.lineWidth = 2;
+        ctx.stroke();
+
+        // Animate particles
+        this.orb.particles.forEach(p => {
+            p.angle += p.speed * (1 + audioLevel * 2);
+
+            const wobble = Math.sin(this.orb.pulsePhase * 2 + p.angle) * 10 * audioLevel;
+            const x = centerX + Math.cos(p.angle) * (p.radius + wobble);
+            const y = centerY + Math.sin(p.angle) * (p.radius + wobble);
+
+            ctx.beginPath();
+            ctx.arc(x, y, p.size * audioPulse, 0, Math.PI * 2);
+            ctx.fillStyle = this.hexToRgba(accentColor, p.alpha);
+            ctx.fill();
+        });
+
+        // Draw inner highlight
+        const highlightGradient = ctx.createRadialGradient(
+            centerX - baseRadius * 0.4,
+            centerY - baseRadius * 0.4,
+            0,
+            centerX - baseRadius * 0.4,
+            centerY - baseRadius * 0.4,
+            baseRadius * 0.5
+        );
+        highlightGradient.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
+        highlightGradient.addColorStop(1, 'transparent');
+
+        ctx.beginPath();
+        ctx.arc(centerX - baseRadius * 0.3, centerY - baseRadius * 0.3, baseRadius * 0.4, 0, Math.PI * 2);
+        ctx.fillStyle = highlightGradient;
+        ctx.fill();
+
+        // Continue animation
+        this.animationFrame = requestAnimationFrame(() => this.animateOrb());
+    },
+
+    renderHaloSmoke() {
+        if (!window.HaloSmokeFace) {
+            console.warn('[FaceRenderer] HaloSmokeFace not loaded — add src/face/HaloSmokeFace.js to index.html');
+            return;
+        }
+        // HaloSmokeFace.start() handles hiding eyes, removing old canvases, etc.
+        window.HaloSmokeFace.start(this.container);
+    },
+
+    hexToRgba(hex, alpha) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (!result) return `rgba(0, 136, 255, ${alpha})`;
+        return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
+    },
+
+    updateOrbColors(colors) {
+        // Colors will be picked up in next animation frame
+    },
+
+    getCurrentMode() {
+        return this.currentMode;
+    },
+
+    getAvailableModes() {
+        return Object.keys(this.modes).map(key => ({
+            id: key,
+            ...this.modes[key]
+        }));
+    }
+};

package/src/ui/settings/PlaylistEditor.js

@@ -0,0 +1,366 @@
+/**
+ * PlaylistEditor — Upload, reorder, and manage music tracks (P4-T2)
+ *
+ * Features:
+ *   - Playlist tabs (library / generated)
+ *   - Track list with drag-and-drop reordering
+ *   - Upload new tracks (file picker + drag-and-drop zone)
+ *   - Delete tracks with confirmation
+ *   - Inline title edit + save
+ *   - Save order button (persists via POST /api/music/playlist/<playlist>/order)
+ *
+ * Usage (standalone):
+ *   import { PlaylistEditor } from './PlaylistEditor.js';
+ *   const editor = new PlaylistEditor();
+ *   editor.mount(document.getElementById('my-container'));
+ *
+ * Usage (via SettingsPanel):
+ *   SettingsPanel.open('playlist');
+ *
+ * Backend endpoints used:
+ *   GET  /api/music?action=list&playlist=X
+ *   POST /api/music/upload
+ *   DELETE /api/music/track/<playlist>/<filename>
+ *   PUT  /api/music/track/<playlist>/<filename>/metadata
+ *   GET  /api/music/playlist/<playlist>/order
+ *   POST /api/music/playlist/<playlist>/order
+ */
+
+export class PlaylistEditor {
+    constructor() {
+        this._root = null;
+        this._playlist = 'library';
+        this._tracks = [];
+        this._uploading = false;
+    }
+
+    // -------------------------------------------------------------------------
+    // Public API
+    // -------------------------------------------------------------------------
+
+    async mount(container) {
+        this._root = container;
+        this._render();
+        await this._loadTracks();
+    }
+
+    destroy() {
+        if (this._root) {
+            this._root.innerHTML = '';
+            this._root = null;
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+
+    _render() {
+        this._root.innerHTML = `
+            <div class="pe-tabs">
+                <button class="pe-tab active" data-playlist="library">Library</button>
+                <button class="pe-tab" data-playlist="generated">Generated</button>
+            </div>
+            <div class="pe-upload-zone" id="pe-upload-zone">
+                <span>&#x1F3B5; Drop audio files here or
+                    <label for="pe-file-input" class="pe-upload-link">browse</label>
+                </span>
+                <input type="file" id="pe-file-input"
+                    accept=".mp3,.wav,.ogg,.m4a,.webm" multiple style="display:none">
+                <div class="pe-upload-status" id="pe-upload-status"></div>
+            </div>
+            <div class="pe-track-list" id="pe-track-list">
+                <div class="pe-loading">Loading tracks&#x2026;</div>
+            </div>
+            <div class="pe-footer">
+                <button class="pe-save-order-btn" id="pe-save-order">&#x1F4BE; Save Order</button>
+                <span class="pe-track-count" id="pe-track-count"></span>
+            </div>
+        `;
+        this._attachListeners();
+    }
+
+    _attachListeners() {
+        // Tab switching
+        this._root.querySelectorAll('.pe-tab').forEach(tab => {
+            tab.addEventListener('click', async () => {
+                this._root.querySelectorAll('.pe-tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                this._playlist = tab.dataset.playlist;
+                await this._loadTracks();
+            });
+        });
+
+        // File input
+        const fileInput = this._root.querySelector('#pe-file-input');
+        fileInput.addEventListener('change', async (e) => {
+            if (e.target.files.length > 0) {
+                await this._uploadFiles(Array.from(e.target.files));
+                fileInput.value = '';
+            }
+        });
+
+        // Upload drop zone
+        const zone = this._root.querySelector('#pe-upload-zone');
+        zone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            zone.classList.add('drag-over');
+        });
+        zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
+        zone.addEventListener('drop', async (e) => {
+            e.preventDefault();
+            zone.classList.remove('drag-over');
+            const files = Array.from(e.dataTransfer.files)
+                .filter(f => /\.(mp3|wav|ogg|m4a|webm)$/i.test(f.name));
+            if (files.length > 0) await this._uploadFiles(files);
+        });
+
+        // Save order button
+        this._root.querySelector('#pe-save-order').addEventListener('click', () => this._saveOrder());
+    }
+
+    // -------------------------------------------------------------------------
+    // Track list
+    // -------------------------------------------------------------------------
+
+    async _loadTracks() {
+        const list = this._root.querySelector('#pe-track-list');
+        const count = this._root.querySelector('#pe-track-count');
+        list.innerHTML = '<div class="pe-loading">Loading&#x2026;</div>';
+
+        try {
+            const resp = await fetch(`/api/music?action=list&playlist=${this._playlist}`);
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = await resp.json();
+            this._tracks = data.tracks || [];
+
+            if (count) {
+                count.textContent = `${this._tracks.length} track${this._tracks.length !== 1 ? 's' : ''}`;
+            }
+
+            if (this._tracks.length === 0) {
+                list.innerHTML = '<div class="pe-empty">No tracks yet. Upload some audio files above!</div>';
+                return;
+            }
+
+            list.innerHTML = '';
+            this._tracks.forEach((track, i) => {
+                list.appendChild(this._buildTrackRow(track, i));
+            });
+            this._initDragSort(list);
+        } catch (err) {
+            list.innerHTML = `<div class="pe-error">Failed to load tracks: ${err.message}</div>`;
+        }
+    }
+
+    _buildTrackRow(track) {
+        const row = document.createElement('div');
+        row.className = 'pe-track-row';
+        row.dataset.filename = track.filename;
+        row.draggable = true;
+
+        const title = track.title || track.name;
+        const artist = track.artist || '';
+        const fmt = track.format ? track.format.toUpperCase() : '';
+        const size = this._formatSize(track.size_bytes || 0);
+
+        row.innerHTML = `
+            <span class="pe-drag-handle" title="Drag to reorder">&#x2630;</span>
+            <div class="pe-track-info">
+                <input class="pe-track-title" value="${this._esc(title)}" placeholder="Track title">
+                <span class="pe-track-meta">${this._esc(artist)}${artist && fmt ? ' &bull; ' : ''}${fmt}${fmt || artist ? ' &bull; ' : ''}${size}</span>
+            </div>
+            <div class="pe-track-actions">
+                <button class="pe-btn-save" title="Save title">&#x2714;</button>
+                <button class="pe-btn-delete" title="Delete track">&#x1F5D1;</button>
+            </div>
+        `;
+
+        row.querySelector('.pe-btn-save').addEventListener('click', async () => {
+            const input = row.querySelector('.pe-track-title');
+            await this._saveMeta(track.filename, { title: input.value.trim() });
+        });
+
+        row.querySelector('.pe-btn-delete').addEventListener('click', async () => {
+            const displayTitle = row.querySelector('.pe-track-title').value || title;
+            if (!confirm(`Delete "${displayTitle}"?\nThis cannot be undone.`)) return;
+            await this._deleteTrack(track.filename);
+        });
+
+        // Save on Enter key in title input
+        row.querySelector('.pe-track-title').addEventListener('keydown', async (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                await this._saveMeta(track.filename, { title: e.target.value.trim() });
+            }
+        });
+
+        return row;
+    }
+
+    // -------------------------------------------------------------------------
+    // Drag-and-drop reorder
+    // -------------------------------------------------------------------------
+
+    _initDragSort(list) {
+        let dragSrc = null;
+
+        list.addEventListener('dragstart', (e) => {
+            const row = e.target.closest('.pe-track-row');
+            if (!row) return;
+            dragSrc = row;
+            row.classList.add('pe-dragging');
+            e.dataTransfer.effectAllowed = 'move';
+        });
+
+        list.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            const row = e.target.closest('.pe-track-row');
+            if (!row || row === dragSrc) return;
+            list.querySelectorAll('.pe-track-row').forEach(r =>
+                r.classList.remove('pe-drag-above', 'pe-drag-below'));
+            const rect = row.getBoundingClientRect();
+            row.classList.add(e.clientY > rect.top + rect.height / 2 ? 'pe-drag-below' : 'pe-drag-above');
+        });
+
+        list.addEventListener('dragleave', (e) => {
+            if (!list.contains(e.relatedTarget)) {
+                list.querySelectorAll('.pe-track-row').forEach(r =>
+                    r.classList.remove('pe-drag-above', 'pe-drag-below'));
+            }
+        });
+
+        list.addEventListener('drop', (e) => {
+            e.preventDefault();
+            const target = e.target.closest('.pe-track-row');
+            list.querySelectorAll('.pe-track-row').forEach(r =>
+                r.classList.remove('pe-drag-above', 'pe-drag-below', 'pe-dragging'));
+            if (!target || !dragSrc || target === dragSrc) { dragSrc = null; return; }
+            const rect = target.getBoundingClientRect();
+            const after = e.clientY > rect.top + rect.height / 2;
+            list.insertBefore(dragSrc, after ? target.nextSibling : target);
+            dragSrc = null;
+        });
+
+        list.addEventListener('dragend', () => {
+            list.querySelectorAll('.pe-track-row').forEach(r =>
+                r.classList.remove('pe-dragging', 'pe-drag-above', 'pe-drag-below'));
+            dragSrc = null;
+        });
+    }
+
+    // -------------------------------------------------------------------------
+    // API calls
+    // -------------------------------------------------------------------------
+
+    async _uploadFiles(files) {
+        if (this._uploading) return;
+        this._uploading = true;
+        const status = this._root.querySelector('#pe-upload-status');
+
+        status.textContent = `Uploading ${files.length} file${files.length !== 1 ? 's' : ''}…`;
+        status.style.color = '';
+
+        let uploaded = 0;
+        for (const file of files) {
+            const fd = new FormData();
+            fd.append('file', file);
+            try {
+                const resp = await fetch('/api/music/upload', { method: 'POST', body: fd });
+                const data = await resp.json();
+                if (!resp.ok) {
+                    this._showStatus(`Error: ${data.error || 'Upload failed'}`, true);
+                    continue;
+                }
+                uploaded++;
+                this._showStatus(`Uploading… (${uploaded}/${files.length})`);
+            } catch (err) {
+                this._showStatus(`Upload error: ${err.message}`, true);
+            }
+        }
+
+        this._uploading = false;
+        if (uploaded > 0) {
+            this._showStatus(`${uploaded} track${uploaded !== 1 ? 's' : ''} uploaded!`);
+            await this._loadTracks();
+            setTimeout(() => this._showStatus(''), 3000);
+        }
+    }
+
+    async _saveMeta(filename, fields) {
+        try {
+            const resp = await fetch(
+                `/api/music/track/${this._playlist}/${encodeURIComponent(filename)}/metadata`,
+                {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(fields),
+                }
+            );
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            this._showStatus('Saved!');
+            setTimeout(() => this._showStatus(''), 2000);
+        } catch (err) {
+            this._showStatus(`Save failed: ${err.message}`, true);
+        }
+    }
+
+    async _deleteTrack(filename) {
+        try {
+            const resp = await fetch(
+                `/api/music/track/${this._playlist}/${encodeURIComponent(filename)}`,
+                { method: 'DELETE' }
+            );
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            await this._loadTracks();
+            this._showStatus('Track deleted.');
+            setTimeout(() => this._showStatus(''), 2000);
+        } catch (err) {
+            this._showStatus(`Delete failed: ${err.message}`, true);
+        }
+    }
+
+    async _saveOrder() {
+        const list = this._root.querySelector('#pe-track-list');
+        const rows = list.querySelectorAll('.pe-track-row');
+        const order = Array.from(rows).map(r => r.dataset.filename);
+
+        try {
+            const resp = await fetch(`/api/music/playlist/${this._playlist}/order`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ order }),
+            });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            this._showStatus('Order saved!');
+            setTimeout(() => this._showStatus(''), 2000);
+        } catch (err) {
+            this._showStatus(`Order save failed: ${err.message}`, true);
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Helpers
+    // -------------------------------------------------------------------------
+
+    _showStatus(msg, isError = false) {
+        const el = this._root ? this._root.querySelector('#pe-upload-status') : null;
+        if (!el) return;
+        el.textContent = msg;
+        el.style.color = isError ? '#ff6666' : '#88ffaa';
+    }
+
+    _formatSize(bytes) {
+        if (bytes < 1024) return `${bytes}B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+    }
+
+    _esc(str) {
+        return String(str)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+}