loukai-app 0.3.0

package/src/renderer/components/EffectsPanelWrapper.jsx

@@ -0,0 +1,267 @@
+/**
+ * EffectsPanelWrapper - State management wrapper for shared EffectsPanel
+ * Loads effects directly from butterchurnPresets (like vanilla effects.js did)
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { EffectsPanel } from '../../shared/components/EffectsPanel.jsx';
+
+export function EffectsPanelWrapper({ bridge }) {
+  const [effects, setEffects] = useState([]);
+  const [currentEffect, setCurrentEffect] = useState([]);
+  const [disabledEffects, setDisabledEffects] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentCategory, setCurrentCategory] = useState('all');
+
+  // Wrap functions in useCallback to prevent recreating them on every render
+  const loadEffects = useCallback(() => {
+    try {
+      if (
+        !window.butterchurnPresets ||
+        typeof window.butterchurnPresets.getPresets !== 'function'
+      ) {
+        console.error('Butterchurn presets not available');
+        return;
+      }
+
+      const presets = window.butterchurnPresets.getPresets();
+      const parseMetadata = (name) => {
+        let author = 'Unknown';
+        let displayName = name;
+        let category = 'other';
+
+        if (name.includes(' - ')) {
+          const parts = name.split(' - ');
+          if (parts.length >= 2) {
+            author = parts[0].trim();
+            displayName = parts.slice(1).join(' - ').trim();
+          }
+        }
+
+        const nameLower = name.toLowerCase();
+        if (nameLower.includes('geiss') || author.toLowerCase().includes('geiss')) {
+          category = 'geiss';
+        } else if (nameLower.includes('martin') || author.toLowerCase().includes('martin')) {
+          category = 'martin';
+        } else if (nameLower.includes('flexi') || author.toLowerCase().includes('flexi')) {
+          category = 'flexi';
+        } else if (nameLower.includes('shifter') || author.toLowerCase().includes('shifter')) {
+          category = 'shifter';
+        }
+
+        return { author, displayName, category };
+      };
+
+      const effectsList = Object.keys(presets).map((name) => {
+        const metadata = parseMetadata(name);
+        return {
+          name,
+          displayName: metadata.displayName,
+          author: metadata.author,
+          category: metadata.category,
+          preset: presets[name],
+        };
+      });
+
+      console.log('🎨 Loaded', effectsList.length, 'Butterchurn presets');
+      setEffects(effectsList);
+    } catch (error) {
+      console.error('Failed to load effects:', error);
+    }
+  }, []);
+
+  const loadDisabledEffects = useCallback(async () => {
+    try {
+      const waveformPrefs = await bridge.getWaveformPreferences();
+      if (waveformPrefs?.disabledEffects) {
+        setDisabledEffects(waveformPrefs.disabledEffects);
+      }
+    } catch (error) {
+      console.error('Failed to load disabled effects:', error);
+    }
+  }, [bridge]);
+
+  const selectEffect = useCallback(
+    async (effectName) => {
+      const preset = effects.find((e) => e.name === effectName);
+      if (!preset) return;
+
+      setCurrentEffect(effectName);
+
+      // Apply effect to Butterchurn directly
+      try {
+        if (window.app?.player?.karaokeRenderer) {
+          window.app.player.karaokeRenderer.switchToPreset(effectName, 2.0);
+        }
+      } catch (error) {
+        console.error('Failed to apply effect to Butterchurn:', error);
+      }
+
+      // Notify main process for state management via bridge
+      try {
+        await bridge.selectEffect(effectName);
+      } catch (error) {
+        console.error('Failed to notify main process:', error);
+      }
+    },
+    [effects, bridge]
+  );
+
+  const randomEffect = useCallback(() => {
+    const enabledEffects = effects.filter((e) => !disabledEffects.includes(e.name));
+    if (enabledEffects.length === 0) return;
+
+    const randomIndex = Math.floor(Math.random() * enabledEffects.length);
+    const randomEffect = enabledEffects[randomIndex];
+    selectEffect(randomEffect.name);
+  }, [effects, disabledEffects, selectEffect]);
+
+  const enableEffect = useCallback(
+    async (effectName) => {
+      const updated = disabledEffects.filter((e) => e !== effectName);
+      setDisabledEffects(updated);
+
+      // Save to settings via bridge
+      try {
+        await bridge.enableEffect(effectName);
+      } catch (error) {
+        console.error('Failed to enable effect:', error);
+      }
+    },
+    [disabledEffects, bridge]
+  );
+
+  const disableEffect = useCallback(
+    async (effectName) => {
+      const updated = [...disabledEffects, effectName];
+      setDisabledEffects(updated);
+
+      // Save to settings via bridge
+      try {
+        await bridge.disableEffect(effectName);
+      } catch (error) {
+        console.error('Failed to disable effect:', error);
+      }
+    },
+    [disabledEffects, bridge]
+  );
+
+  useEffect(() => {
+    loadEffects();
+    loadDisabledEffects();
+  }, [loadEffects, loadDisabledEffects]);
+
+  // Respond to IPC requests for effects list (for web admin API)
+  useEffect(() => {
+    if (!window.kaiAPI?.events) return;
+
+    const handleGetEffectsList = () => {
+      // Strip out preset data (not serializable) - only send metadata
+      const serializableEffects = effects.map((e) => ({
+        name: e.name,
+        displayName: e.displayName,
+        author: e.author,
+        category: e.category,
+      }));
+
+      window.kaiAPI.renderer.sendEffectsList(serializableEffects);
+    };
+
+    const handleGetCurrentEffect = () => {
+      window.kaiAPI.renderer.sendCurrentEffect(currentEffect);
+    };
+
+    const handleGetDisabledEffects = () => {
+      window.kaiAPI.renderer.sendDisabledEffects(disabledEffects);
+    };
+
+    window.kaiAPI.events.on('effects:getList', handleGetEffectsList);
+    window.kaiAPI.events.on('effects:getCurrent', handleGetCurrentEffect);
+    window.kaiAPI.events.on('effects:getDisabled', handleGetDisabledEffects);
+
+    return () => {
+      window.kaiAPI.events.removeListener('effects:getList', handleGetEffectsList);
+      window.kaiAPI.events.removeListener('effects:getCurrent', handleGetCurrentEffect);
+      window.kaiAPI.events.removeListener('effects:getDisabled', handleGetDisabledEffects);
+    };
+  }, [effects, currentEffect, disabledEffects]);
+
+  // Listen for effects commands from web admin
+  useEffect(() => {
+    if (!window.kaiAPI?.events || effects.length === 0) return;
+
+    const onSelectFromAdmin = (event, effectName) => {
+      selectEffect(effectName);
+    };
+
+    const onNextFromAdmin = () => {
+      const enabledEffects = effects.filter((e) => !disabledEffects.includes(e.name));
+      if (enabledEffects.length === 0) return;
+
+      const currentIndex = enabledEffects.findIndex((e) => e.name === currentEffect);
+      const nextIndex = (currentIndex + 1) % enabledEffects.length;
+      selectEffect(enabledEffects[nextIndex].name);
+    };
+
+    const onPreviousFromAdmin = () => {
+      const enabledEffects = effects.filter((e) => !disabledEffects.includes(e.name));
+      if (enabledEffects.length === 0) return;
+
+      const currentIndex = enabledEffects.findIndex((e) => e.name === currentEffect);
+      const prevIndex = currentIndex <= 0 ? enabledEffects.length - 1 : currentIndex - 1;
+      selectEffect(enabledEffects[prevIndex].name);
+    };
+
+    const onRandomFromAdmin = () => {
+      randomEffect();
+    };
+
+    const onDisableFromAdmin = (event, effectName) => {
+      disableEffect(effectName);
+    };
+
+    const onEnableFromAdmin = (event, effectName) => {
+      enableEffect(effectName);
+    };
+
+    window.kaiAPI.events.on('effects:select', onSelectFromAdmin);
+    window.kaiAPI.events.on('effects:next', onNextFromAdmin);
+    window.kaiAPI.events.on('effects:previous', onPreviousFromAdmin);
+    window.kaiAPI.events.on('effects:random', onRandomFromAdmin);
+    window.kaiAPI.events.on('effects:disable', onDisableFromAdmin);
+    window.kaiAPI.events.on('effects:enable', onEnableFromAdmin);
+
+    return () => {
+      window.kaiAPI.events.removeListener('effects:select', onSelectFromAdmin);
+      window.kaiAPI.events.removeListener('effects:next', onNextFromAdmin);
+      window.kaiAPI.events.removeListener('effects:previous', onPreviousFromAdmin);
+      window.kaiAPI.events.removeListener('effects:random', onRandomFromAdmin);
+      window.kaiAPI.events.removeListener('effects:disable', onDisableFromAdmin);
+      window.kaiAPI.events.removeListener('effects:enable', onEnableFromAdmin);
+    };
+  }, [
+    effects,
+    currentEffect,
+    disabledEffects,
+    selectEffect,
+    randomEffect,
+    disableEffect,
+    enableEffect,
+  ]);
+
+  return (
+    <EffectsPanel
+      effects={effects}
+      currentEffect={currentEffect}
+      disabledEffects={disabledEffects}
+      searchTerm={searchTerm}
+      currentCategory={currentCategory}
+      onSearch={setSearchTerm}
+      onCategoryChange={setCurrentCategory}
+      onSelectEffect={selectEffect}
+      onRandomEffect={randomEffect}
+      onEnableEffect={enableEffect}
+      onDisableEffect={disableEffect}
+    />
+  );
+}

package/src/renderer/components/MixerTab.jsx

@@ -0,0 +1,233 @@
+/**
+ * MixerTab - Complete audio settings tab for renderer
+ *
+ * Combines:
+ * - MixerPanel (shared gain controls)
+ * - AudioDeviceSettings (renderer-only device selection)
+ */
+
+import React, { useState, useEffect } from 'react';
+import { MixerPanel } from '../../shared/components/MixerPanel.jsx';
+import { AudioDeviceSettings } from './AudioDeviceSettings.jsx';
+
+export function MixerTab({ bridge }) {
+  const [mixerState, setMixerState] = useState({
+    PA: { gain: 0, muted: false },
+    IEM: { gain: 0, muted: false },
+    mic: { gain: 0, muted: false },
+  });
+  const [audioDevices, setAudioDevices] = useState({ pa: [], iem: [], input: [] });
+  const [selectedDevices, setSelectedDevices] = useState({ pa: '', iem: '', input: '' });
+  const [audioSettings, setAudioSettings] = useState({
+    iemMonoVocals: true,
+    micToSpeakers: true,
+    enableMic: true,
+  });
+
+  // Subscribe to mixer state updates
+  useEffect(() => {
+    if (!bridge) return;
+
+    const unsubscribe = bridge.onMixerChanged?.((mixer) => {
+      // Extract only bus-level mixer (PA, IEM, mic) - ignore stem mixer properties
+      const busLevelMixer = {
+        PA: mixer.PA || { gain: 0, muted: false },
+        IEM: mixer.IEM || { gain: 0, muted: false },
+        mic: mixer.mic || { gain: 0, muted: false },
+      };
+
+      setMixerState(busLevelMixer);
+    });
+
+    // Fetch initial state
+    bridge
+      .getMixerState?.()
+      .then((state) => {
+        // Extract only bus-level mixer (PA, IEM, mic)
+        const busLevelMixer = {
+          PA: state.PA || { gain: 0, muted: false },
+          IEM: state.IEM || { gain: 0, muted: false },
+          mic: state.mic || { gain: 0, muted: false },
+        };
+
+        setMixerState(busLevelMixer);
+      })
+      .catch(console.error);
+
+    return () => unsubscribe && unsubscribe();
+  }, [bridge]);
+
+  // Fetch audio devices on mount
+  useEffect(() => {
+    if (!bridge) return;
+
+    const loadDevicesAndPreferences = async () => {
+      try {
+        // Load audio settings
+        const settings = await bridge.getAudioSettings?.();
+        if (settings) {
+          setAudioSettings(settings);
+        }
+
+        // Enumerate devices
+        const devices = await bridge.getAudioDevices?.();
+        const outputDevices = devices.filter((d) => d.maxOutputChannels > 0);
+        const inputDevices = devices.filter((d) => d.maxInputChannels > 0);
+
+        setAudioDevices({
+          pa: outputDevices,
+          iem: outputDevices,
+          input: inputDevices,
+        });
+
+        // Load saved device preferences
+        const preferences = await bridge.getDevicePreferences?.();
+
+        // Restore device selections
+        const restored = {};
+        for (const [type, savedDevice] of Object.entries(preferences || {})) {
+          if (!savedDevice) continue;
+
+          const deviceList = type === 'input' ? inputDevices : outputDevices;
+
+          // Try to match by ID first
+          let matchedDevice = deviceList.find((d) => d.deviceId === savedDevice.id);
+
+          // If no ID match, try matching by name
+          if (!matchedDevice && savedDevice.name) {
+            matchedDevice = deviceList.find(
+              (d) => d.label === savedDevice.name || d.name === savedDevice.name
+            );
+          }
+
+          if (matchedDevice) {
+            const lowerType = type.toLowerCase();
+            restored[lowerType] = matchedDevice.deviceId;
+
+            // Set the device via bridge - sequential initialization to ensure proper device setup
+            // eslint-disable-next-line no-await-in-loop
+            await bridge.setAudioDevice?.(type, matchedDevice.deviceId);
+          }
+        }
+
+        if (Object.keys(restored).length > 0) {
+          setSelectedDevices((prev) => ({ ...prev, ...restored }));
+        }
+      } catch (error) {
+        console.error('Failed to load devices and preferences:', error);
+      }
+    };
+
+    loadDevicesAndPreferences();
+  }, [bridge]);
+
+  // Mixer gain/mute controls
+  const handleSetMasterGain = (bus, gain) => {
+    bridge?.setMasterGain?.(bus, gain);
+  };
+
+  const handleToggleMasterMute = (bus) => {
+    bridge?.toggleMasterMute?.(bus);
+  };
+
+  // Device selection
+  const handleDeviceChange = async (type, deviceId) => {
+    // Map type to uppercase for bridge (pa -> PA, iem -> IEM, input -> input)
+    const deviceType = type === 'pa' ? 'PA' : type === 'iem' ? 'IEM' : type;
+
+    try {
+      await bridge?.setAudioDevice?.(deviceType, deviceId);
+      setSelectedDevices((prev) => ({ ...prev, [type]: deviceId }));
+
+      // Save device preference
+      const preferences = (await bridge.getDevicePreferences?.()) || {};
+
+      if (!deviceId || deviceId === '') {
+        // User selected "Default" - save empty preference
+        preferences[deviceType] = {
+          id: '',
+          name: 'Default',
+          deviceKind: 'default',
+        };
+        console.log(`💾 Saving default device preference for ${deviceType}`);
+      } else {
+        // Look up the specific device
+        const deviceList =
+          type === 'input'
+            ? audioDevices.input
+            : type === 'iem'
+              ? audioDevices.iem
+              : audioDevices.pa;
+        const device = deviceList.find((d) => d.deviceId === deviceId);
+
+        if (device) {
+          preferences[deviceType] = {
+            id: deviceId,
+            name: device.label || device.name,
+            deviceKind: device.deviceKind,
+          };
+          console.log(`💾 Saving device preference for ${deviceType}:`, preferences[deviceType]);
+        } else {
+          console.warn(`⚠️ Device not found in list for ${type}:`, deviceId);
+          return; // Don't save if device not found
+        }
+      }
+
+      await bridge.saveDevicePreferences?.(preferences);
+      console.log(`✅ Device preferences saved successfully`);
+    } catch (error) {
+      console.error('Failed to change device:', error);
+    }
+  };
+
+  // Audio settings
+  const handleSettingChange = async (setting, value) => {
+    setAudioSettings((prev) => ({ ...prev, [setting]: value }));
+
+    // Save audio setting
+    try {
+      await bridge.saveAudioSettings?.({ [setting]: value });
+    } catch (error) {
+      console.error('Failed to save audio setting:', error);
+    }
+  };
+
+  // Refresh devices
+  const handleRefreshDevices = () => {
+    bridge
+      ?.getAudioDevices?.()
+      .then((devices) => {
+        const outputDevices = devices.filter((d) => d.maxOutputChannels > 0);
+        const inputDevices = devices.filter((d) => d.maxInputChannels > 0);
+
+        setAudioDevices({
+          pa: outputDevices,
+          iem: outputDevices,
+          input: inputDevices,
+        });
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <div className="p-5 h-full overflow-y-auto">
+      <div className="mb-8">
+        <h2 className="m-0 mb-5 text-2xl text-gray-900 dark:text-gray-100">Audio Mixer</h2>
+        <MixerPanel
+          mixerState={mixerState}
+          onSetMasterGain={handleSetMasterGain}
+          onToggleMasterMute={handleToggleMasterMute}
+        />
+      </div>
+
+      <AudioDeviceSettings
+        devices={audioDevices}
+        selected={selectedDevices}
+        settings={audioSettings}
+        onDeviceChange={handleDeviceChange}
+        onSettingChange={handleSettingChange}
+        onRefreshDevices={handleRefreshDevices}
+      />
+    </div>
+  );
+}

package/src/renderer/components/MixerTabWrapper.jsx

@@ -0,0 +1,31 @@
+/**
+ * MixerTabWrapper - Mounts MixerTab into the renderer's mixer tab
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BridgeProvider } from '../../shared/context/BridgeContext.jsx';
+import { ElectronBridge } from '../adapters/ElectronBridge.js';
+import { MixerTab } from './MixerTab.jsx';
+
+const bridge = new ElectronBridge();
+
+export function mountMixerTab() {
+  const mixerTabElement = document.getElementById('mixer-tab');
+  if (!mixerTabElement) {
+    console.error('Mixer tab element not found');
+    return;
+  }
+
+  // Clear existing vanilla content
+  mixerTabElement.innerHTML = '<div id="react-mixer-root"></div>';
+
+  const root = ReactDOM.createRoot(document.getElementById('react-mixer-root'));
+  root.render(
+    <BridgeProvider bridge={bridge}>
+      <MixerTab bridge={bridge} />
+    </BridgeProvider>
+  );
+
+  console.log('✅ MixerTab mounted');
+}