loukai-app 0.3.0

package/src/web/adapters/WebBridge.js

@@ -0,0 +1,428 @@
+/**
+ * WebBridge - Web-specific implementation of BridgeInterface
+ *
+ * Uses fetch() for REST API calls and Socket.IO for real-time updates
+ * This replaces the scattered fetch() calls in web admin components
+ *
+ * Components use this bridge and never directly call fetch() or socket.emit()
+ */
+
+import { BridgeInterface } from '../../shared/adapters/BridgeInterface.js';
+import { io } from 'socket.io-client';
+import { WAVEFORM_DEFAULTS, AUTOTUNE_DEFAULTS } from '../../shared/defaults.js';
+
+export class WebBridge extends BridgeInterface {
+  constructor(baseUrl = '/admin') {
+    super();
+    this.baseUrl = baseUrl;
+    this.socket = null;
+    this.listeners = new Map(); // Track listeners for cleanup
+  }
+
+  // Helper: Make authenticated fetch request
+  async _fetch(endpoint, options = {}) {
+    const res = await fetch(`${this.baseUrl}${endpoint}`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      ...options,
+    });
+
+    if (!res.ok) {
+      throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+    }
+
+    return await res.json();
+  }
+
+  // ===== Player Controls =====
+
+  async play() {
+    return await this._fetch('/player/play', { method: 'POST' });
+  }
+
+  async pause() {
+    return await this._fetch('/player/pause', { method: 'POST' });
+  }
+
+  async restart() {
+    return await this._fetch('/player/restart', { method: 'POST' });
+  }
+
+  async seek(positionSec) {
+    return await this._fetch('/player/seek', {
+      method: 'POST',
+      body: JSON.stringify({ position: positionSec }),
+    });
+  }
+
+  async getPlaybackState() {
+    const state = await this._fetch('/state');
+    return state.playback;
+  }
+
+  // ===== Queue Management =====
+
+  async getQueue() {
+    return await this._fetch('/queue');
+  }
+
+  async addToQueue(song) {
+    return await this._fetch('/queue/add', {
+      method: 'POST',
+      body: JSON.stringify({ song }),
+    });
+  }
+
+  async removeFromQueue(id) {
+    return await this._fetch(`/queue/remove/${id}`, { method: 'POST' });
+  }
+
+  async clearQueue() {
+    return await this._fetch('/queue/clear', { method: 'POST' });
+  }
+
+  async reorderQueue(songId, newIndex) {
+    return await this._fetch('/queue/reorder', {
+      method: 'POST',
+      body: JSON.stringify({ songId, newIndex }),
+    });
+  }
+
+  async playNext() {
+    return await this._fetch('/player/next', { method: 'POST' });
+  }
+
+  async playFromQueue(songId) {
+    return await this._fetch('/queue/load', {
+      method: 'POST',
+      body: JSON.stringify({ songId }),
+    });
+  }
+
+  // ===== Mixer Controls =====
+
+  async getMixerState() {
+    const state = await this._fetch('/state');
+    return state.mixer;
+  }
+
+  async setMasterGain(bus, gainDb) {
+    return await this._fetch('/mixer/master-gain', {
+      method: 'POST',
+      body: JSON.stringify({ bus, gainDb }),
+    });
+  }
+
+  async toggleMasterMute(bus) {
+    return await this._fetch('/mixer/master-mute', {
+      method: 'POST',
+      body: JSON.stringify({ bus }),
+    });
+  }
+
+  async setMasterMute(bus, muted) {
+    return await this._fetch('/mixer/master-mute', {
+      method: 'POST',
+      body: JSON.stringify({ bus, muted }),
+    });
+  }
+
+  // ===== Effects Controls =====
+
+  async getEffects() {
+    return await this._fetch('/effects');
+  }
+
+  async selectEffect(effectName) {
+    return await this._fetch('/effects/select', {
+      method: 'POST',
+      body: JSON.stringify({ effectName }),
+    });
+  }
+
+  async toggleEffect(effectName, enabled) {
+    return await this._fetch('/effects/toggle', {
+      method: 'POST',
+      body: JSON.stringify({ effectName, enabled }),
+    });
+  }
+
+  async nextEffect() {
+    return await this._fetch('/effects/next', { method: 'POST' });
+  }
+
+  async previousEffect() {
+    return await this._fetch('/effects/previous', { method: 'POST' });
+  }
+
+  async randomEffect() {
+    return await this._fetch('/effects/random', { method: 'POST' });
+  }
+
+  async enableEffect(effectName) {
+    return await this._fetch('/effects/enable', {
+      method: 'POST',
+      body: JSON.stringify({ effectName }),
+    });
+  }
+
+  async disableEffect(effectName) {
+    return await this._fetch('/effects/disable', {
+      method: 'POST',
+      body: JSON.stringify({ effectName }),
+    });
+  }
+
+  // ===== Library Management =====
+
+  async getLibrary() {
+    return await this._fetch('/library');
+  }
+
+  async scanLibrary() {
+    return await this._fetch('/library/refresh', { method: 'POST' });
+  }
+
+  async searchSongs(query) {
+    return await this._fetch(`/library/search?q=${encodeURIComponent(query)}`);
+  }
+
+  async loadSongForEditing(path) {
+    return await this._fetch('/editor/load', {
+      method: 'POST',
+      body: JSON.stringify({ path }),
+    });
+  }
+
+  async saveSongEdits(updates) {
+    return await this._fetch('/editor/save', {
+      method: 'POST',
+      body: JSON.stringify(updates),
+    });
+  }
+
+  async getSongsFolder() {
+    const data = await this._fetch('/library/folder');
+    return data.folder;
+  }
+
+  async setSongsFolder() {
+    return await this._fetch('/library/folder', { method: 'POST' });
+  }
+
+  async getCachedLibrary() {
+    return await this._fetch('/library/songs');
+  }
+
+  async syncLibrary() {
+    return await this._fetch('/library/sync', { method: 'POST' });
+  }
+
+  async loadSong(path) {
+    return await this._fetch('/player/load', {
+      method: 'POST',
+      body: JSON.stringify({ path }),
+    });
+  }
+
+  // ===== Preferences =====
+
+  async getPreferences() {
+    return await this._fetch('/preferences');
+  }
+
+  async updateAutoTunePreferences(prefs) {
+    return await this._fetch('/preferences/autotune', {
+      method: 'POST',
+      body: JSON.stringify(prefs),
+    });
+  }
+
+  async updateMicrophonePreferences(prefs) {
+    return await this._fetch('/preferences/microphone', {
+      method: 'POST',
+      body: JSON.stringify(prefs),
+    });
+  }
+
+  async updateEffectsPreferences(prefs) {
+    return await this._fetch('/preferences/effects', {
+      method: 'POST',
+      body: JSON.stringify(prefs),
+    });
+  }
+
+  // Waveform/Visualization Settings (for VisualizationSettings component)
+  async getWaveformPreferences() {
+    try {
+      const response = await this._fetch('/settings/waveform');
+      return response.settings || { ...WAVEFORM_DEFAULTS };
+    } catch (error) {
+      console.error('Failed to fetch waveform preferences:', error);
+      return { ...WAVEFORM_DEFAULTS };
+    }
+  }
+
+  async saveWaveformPreferences(prefs) {
+    return await this._fetch('/settings/waveform', {
+      method: 'POST',
+      body: JSON.stringify(prefs),
+    });
+  }
+
+  async getAutotunePreferences() {
+    try {
+      const response = await this._fetch('/settings/autotune');
+      return response.settings || { ...AUTOTUNE_DEFAULTS };
+    } catch (error) {
+      console.error('Failed to fetch autotune preferences:', error);
+      return { ...AUTOTUNE_DEFAULTS };
+    }
+  }
+
+  async saveAutotunePreferences(prefs) {
+    return await this._fetch('/settings/autotune', {
+      method: 'POST',
+      body: JSON.stringify(prefs),
+    });
+  }
+
+  async setAutotuneEnabled(enabled) {
+    return await this.updateAutoTunePreferences({ enabled });
+  }
+
+  async setAutotuneSettings(settings) {
+    return await this.updateAutoTunePreferences(settings);
+  }
+
+  // ===== Song Requests =====
+
+  async getRequests() {
+    const data = await this._fetch('/requests');
+    return data.requests || [];
+  }
+
+  async approveRequest(requestId) {
+    return await this._fetch(`/requests/${requestId}/approve`, { method: 'POST' });
+  }
+
+  async rejectRequest(requestId) {
+    return await this._fetch(`/requests/${requestId}/reject`, { method: 'POST' });
+  }
+
+  // ===== State Subscriptions =====
+
+  onStateChange(domain, callback) {
+    if (!this.socket) {
+      console.warn('Socket not connected - call connect() first');
+      return () => {};
+    }
+
+    // Map domain to Socket.IO event
+    const eventMap = {
+      mixer: 'mixer-update',
+      queue: 'queue-update',
+      playback: 'playback-state-update',
+      effects: 'effects-update',
+      preferences: 'preferences-update',
+      requests: 'new-song-request',
+      currentSong: 'current-song-update',
+    };
+
+    const event = eventMap[domain];
+    if (!event) {
+      console.warn(`No socket event mapping for domain: ${domain}`);
+      return () => {};
+    }
+
+    // Subscribe
+    this.socket.on(event, callback);
+
+    // Track for cleanup
+    if (!this.listeners.has(domain)) {
+      this.listeners.set(domain, []);
+    }
+    this.listeners.get(domain).push(callback);
+
+    // Return unsubscribe function
+    return () => this.offStateChange(domain, callback);
+  }
+
+  offStateChange(domain, callback) {
+    if (!this.socket) return;
+
+    const eventMap = {
+      mixer: 'mixer-update',
+      queue: 'queue-update',
+      playback: 'playback-state-update',
+      effects: 'effects-update',
+      preferences: 'preferences-update',
+      requests: 'new-song-request',
+      currentSong: 'current-song-update',
+    };
+
+    const event = eventMap[domain];
+    if (event) {
+      this.socket.off(event, callback);
+    }
+
+    // Remove from tracking
+    const listeners = this.listeners.get(domain);
+    if (listeners) {
+      const index = listeners.indexOf(callback);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    }
+  }
+
+  // ===== Lifecycle =====
+
+  connect() {
+    if (this.socket) {
+      console.log('Socket already connected');
+      return;
+    }
+
+    return new Promise((resolve) => {
+      this.socket = io({
+        reconnection: true,
+        reconnectionDelay: 1000,
+        reconnectionAttempts: Infinity,
+      });
+
+      this.socket.on('connect', () => {
+        console.log('✅ WebBridge connected to Socket.IO');
+        // Identify as admin client
+        this.socket.emit('identify', { type: 'admin' });
+        resolve();
+      });
+
+      this.socket.on('disconnect', () => {
+        console.log('🔌 WebBridge disconnected from Socket.IO');
+      });
+
+      this.socket.on('connect_error', (err) => {
+        console.error('Socket connection error:', err);
+      });
+    });
+  }
+
+  disconnect() {
+    if (!this.socket) return;
+
+    // Clean up all listeners
+    for (const [domain, listeners] of this.listeners.entries()) {
+      listeners.forEach((listener) => this.offStateChange(domain, listener));
+    }
+    this.listeners.clear();
+
+    // Disconnect socket
+    this.socket.disconnect();
+    this.socket = null;
+    console.log('✅ WebBridge disconnected');
+  }
+}

package/src/web/components/PlayerSettingsPanel.jsx

@@ -0,0 +1,231 @@
+import { useState, useEffect } from 'react';
+import { WAVEFORM_DEFAULTS, AUTOTUNE_DEFAULTS } from '../../shared/defaults.js';
+
+export function PlayerSettingsPanel({ socket }) {
+  const [waveformSettings, setWaveformSettings] = useState({ ...WAVEFORM_DEFAULTS });
+
+  const [autoTuneSettings, setAutoTuneSettings] = useState({
+    ...AUTOTUNE_DEFAULTS,
+    preferVocals: true,
+  });
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Fetch current settings
+    Promise.all([
+      fetch('/admin/settings/waveform', { credentials: 'include' }).then((res) => res.json()),
+      fetch('/admin/settings/autotune', { credentials: 'include' }).then((res) => res.json()),
+    ])
+      .then(([waveform, autotune]) => {
+        if (waveform.settings) setWaveformSettings(waveform.settings);
+        if (autotune.settings) setAutoTuneSettings(autotune.settings);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error('Failed to fetch settings:', err);
+        setLoading(false);
+      });
+  }, []);
+
+  // Listen for settings changes from renderer
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleWaveformUpdate = (settings) => {
+      console.log('📥 Received waveform settings from renderer:', settings);
+      setWaveformSettings((prev) => ({ ...prev, ...settings }));
+    };
+
+    const handleAutoTuneUpdate = (settings) => {
+      console.log('📥 Received autotune settings from renderer:', settings);
+      setAutoTuneSettings((prev) => ({ ...prev, ...settings }));
+    };
+
+    socket.on('settings:waveform', handleWaveformUpdate);
+    socket.on('settings:autotune', handleAutoTuneUpdate);
+
+    return () => {
+      socket.off('settings:waveform', handleWaveformUpdate);
+      socket.off('settings:autotune', handleAutoTuneUpdate);
+    };
+  }, [socket]);
+
+  const handleWaveformChange = async (key, value) => {
+    const newSettings = { ...waveformSettings, [key]: value };
+    setWaveformSettings(newSettings);
+
+    try {
+      await fetch('/admin/settings/waveform', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ [key]: value }),
+      });
+    } catch (err) {
+      console.error('Failed to update waveform setting:', err);
+    }
+  };
+
+  const handleAutoTuneChange = async (key, value) => {
+    const newSettings = { ...autoTuneSettings, [key]: value };
+    setAutoTuneSettings(newSettings);
+
+    try {
+      await fetch('/admin/settings/autotune', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ [key]: value }),
+      });
+    } catch (err) {
+      console.error('Failed to update auto-tune setting:', err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-5 h-full overflow-y-auto flex items-center justify-center text-gray-600 dark:text-gray-400">
+        Loading settings...
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-5 h-full overflow-y-auto">
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-5 mb-5">
+        <h3 className="m-0 mb-5 text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3">
+          Waveform & Visual Options
+        </h3>
+
+        <label className="flex items-center py-3 gap-3 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={waveformSettings.enableWaveforms}
+            onChange={(e) => handleWaveformChange('enableWaveforms', e.target.checked)}
+            className="w-[18px] h-[18px] cursor-pointer"
+          />
+          <span className="flex-1 text-[15px] text-gray-900 dark:text-white">Enable Waveforms</span>
+        </label>
+
+        <label className="flex items-center py-3 gap-3 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={waveformSettings.enableEffects}
+            onChange={(e) => handleWaveformChange('enableEffects', e.target.checked)}
+            className="w-[18px] h-[18px] cursor-pointer"
+          />
+          <span className="flex-1 text-[15px] text-gray-900 dark:text-white">
+            Enable Visual Effects
+          </span>
+        </label>
+
+        <label className="flex items-center py-3 gap-3 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={waveformSettings.randomEffectOnSong}
+            onChange={(e) => handleWaveformChange('randomEffectOnSong', e.target.checked)}
+            className="w-[18px] h-[18px] cursor-pointer"
+          />
+          <span className="flex-1 text-[15px] text-gray-900 dark:text-white">
+            Random Effect on Each Song
+          </span>
+        </label>
+
+        <label className="flex items-center py-3 gap-3 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={waveformSettings.showUpcomingLyrics}
+            onChange={(e) => handleWaveformChange('showUpcomingLyrics', e.target.checked)}
+            className="w-[18px] h-[18px] cursor-pointer"
+          />
+          <span className="flex-1 text-[15px] text-gray-900 dark:text-white">
+            Show Upcoming Lyrics
+          </span>
+        </label>
+
+        <div className="flex flex-col items-stretch py-3 cursor-default">
+          <label className="flex flex-col gap-2 w-full">
+            <span className="text-sm text-gray-600 dark:text-gray-400 font-medium">
+              Overlay Opacity: {Math.round(waveformSettings.overlayOpacity * 100)}%
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              value={waveformSettings.overlayOpacity}
+              onChange={(e) => handleWaveformChange('overlayOpacity', parseFloat(e.target.value))}
+              className="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-sm outline-none appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-blue-600 dark:[&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-blue-600 dark:[&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0"
+            />
+          </label>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-5 mb-5">
+        <h3 className="m-0 mb-5 text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3">
+          Auto-Tune
+        </h3>
+
+        <label className="flex items-center py-3 gap-3 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={autoTuneSettings.enabled}
+            onChange={(e) => handleAutoTuneChange('enabled', e.target.checked)}
+            className="w-[18px] h-[18px] cursor-pointer"
+          />
+          <span className="flex-1 text-[15px] text-gray-900 dark:text-white">Enable Auto-Tune</span>
+        </label>
+
+        <label className="flex items-center py-3 gap-3 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={autoTuneSettings.preferVocals}
+            onChange={(e) => handleAutoTuneChange('preferVocals', e.target.checked)}
+            disabled={!autoTuneSettings.enabled}
+            className="w-[18px] h-[18px] cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+          />
+          <span className="flex-1 text-[15px] text-gray-900 dark:text-white">
+            Prefer Vocals for Pitch Reference
+          </span>
+        </label>
+
+        <div className="flex flex-col items-stretch py-3 cursor-default">
+          <label className="flex flex-col gap-2 w-full">
+            <span className="text-sm text-gray-600 dark:text-gray-400 font-medium">
+              Strength: {autoTuneSettings.strength}%
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="100"
+              step="1"
+              value={autoTuneSettings.strength}
+              onChange={(e) => handleAutoTuneChange('strength', parseInt(e.target.value))}
+              disabled={!autoTuneSettings.enabled}
+              className="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-sm outline-none appearance-none disabled:opacity-50 disabled:cursor-not-allowed [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-blue-600 dark:[&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:disabled:cursor-not-allowed [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-blue-600 dark:[&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:disabled:cursor-not-allowed"
+            />
+          </label>
+        </div>
+
+        <div className="flex flex-col items-stretch py-3 cursor-default">
+          <label className="flex flex-col gap-2 w-full">
+            <span className="text-sm text-gray-600 dark:text-gray-400 font-medium">
+              Speed: {autoTuneSettings.speed}ms
+            </span>
+            <input
+              type="range"
+              min="1"
+              max="100"
+              step="1"
+              value={autoTuneSettings.speed}
+              onChange={(e) => handleAutoTuneChange('speed', parseInt(e.target.value))}
+              disabled={!autoTuneSettings.enabled}
+              className="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-sm outline-none appearance-none disabled:opacity-50 disabled:cursor-not-allowed [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-blue-600 dark:[&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:disabled:cursor-not-allowed [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-blue-600 dark:[&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:disabled:cursor-not-allowed"
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}