loukai-app 0.3.0

package/src/shared/hooks/useAudioEngine.js

@@ -0,0 +1,264 @@
+/**
+ * useAudioEngine - Audio engine initialization hook
+ *
+ * Initializes KAIPlayer and PlayerController
+ * Handles song loading events from main process
+ */
+
+import { useEffect } from 'react';
+import { useAudio } from '../contexts/AudioContext.jsx';
+
+export function useAudioEngine() {
+  const { kaiPlayer, player, setKaiPlayer, setPlayer } = useAudio();
+
+  // Initialize audio engine
+  useEffect(() => {
+    let mounted = true;
+
+    async function initializeAudio() {
+      try {
+        // Dynamically import to avoid circular deps
+        const { KAIPlayer } = await import('../../renderer/js/kaiPlayer.js');
+        const { PlayerController } = await import('../../renderer/js/player.js');
+
+        const audioEngine = new KAIPlayer();
+        await audioEngine.initialize();
+
+        if (!mounted) return;
+
+        const playerController = new PlayerController(audioEngine);
+
+        setKaiPlayer(audioEngine);
+        setPlayer(playerController);
+
+        // Expose player globally for legacy code that needs direct access
+        window.app = window.app || {};
+        window.app.player = playerController;
+
+        console.log('✅ Audio engine initialized');
+      } catch (error) {
+        console.error('❌ Failed to initialize audio engine:', error);
+      }
+    }
+
+    if (!kaiPlayer) {
+      initializeAudio();
+    }
+
+    return () => {
+      mounted = false;
+    };
+  }, [kaiPlayer, setKaiPlayer, setPlayer]);
+
+  // Handle mixer changes from main process (web admin or other sources)
+  useEffect(() => {
+    if (!kaiPlayer || !window.kaiAPI?.mixer) return;
+
+    const handleSetMasterGain = (event, { bus, gainDb }) => {
+      console.log(`🎚️ Received mixer:setMasterGain from main: ${bus} = ${gainDb}dB`);
+      kaiPlayer.setMasterGain(bus, gainDb);
+    };
+
+    const handleToggleMasterMute = (event, { bus, muted }) => {
+      // IMPORTANT: Despite the event name being "toggle", the event includes the explicit muted value
+      // Don't call toggleMasterMute() as that would toggle again - use setMasterMute()
+      console.log(`🎚️ Received mixer:toggleMasterMute from main: ${bus} = ${muted}`);
+      kaiPlayer.setMasterMute(bus, muted);
+    };
+
+    const handleSetMasterMute = (event, { bus, muted }) => {
+      console.log(`🎚️ Received mixer:setMasterMute from main: ${bus} = ${muted}`);
+      kaiPlayer.setMasterMute(bus, muted);
+    };
+
+    window.kaiAPI.mixer.onSetMasterGain(handleSetMasterGain);
+    window.kaiAPI.mixer.onToggleMasterMute(handleToggleMasterMute);
+    window.kaiAPI.mixer.onSetMasterMute(handleSetMasterMute);
+
+    console.log('✅ Mixer IPC listeners registered');
+
+    // Note: Cleanup would require preload.js to expose removeListener methods
+    // These are long-lived listeners so cleanup is not critical
+    return () => {
+      console.log('🧹 Mixer IPC listeners cleanup');
+    };
+  }, [kaiPlayer]);
+
+  // Handle song loading events
+  useEffect(() => {
+    if (!player || !kaiPlayer || !window.kaiAPI?.song) return;
+
+    // Create mutable app state object (needed by songLoaders)
+    const appState = {
+      player,
+      kaiPlayer,
+      currentSong: null,
+      _pendingMetadata: null,
+      randomEffectTimeout: null,
+      handleSongEnded: async () => {
+        // Song ended - reset position to 0 and pause to show title screen
+        if (player && player.currentPlayer) {
+          await player.currentPlayer.seek(0);
+          await player.pause();
+        }
+
+        // Trigger next song via IPC
+        if (window.kaiAPI?.player) {
+          await window.kaiAPI.player.next();
+        }
+      },
+      updateStatus: (msg) => console.log('📊', msg),
+      updateEffectDisplay: () => {}, // TODO: implement if needed
+    };
+
+    const handleSongLoaded = async (event, metadata) => {
+      console.log('🎵 Song loading:', metadata?.title || 'Unknown');
+      appState._pendingMetadata = metadata;
+
+      // Stop current playback
+      if (kaiPlayer) {
+        await kaiPlayer.pause();
+      }
+      if (player) {
+        await player.pause();
+        // Also stop CDG renderer if it's playing
+        if (player.cdgPlayer && player.cdgPlayer.isPlaying) {
+          player.cdgPlayer.pause();
+        }
+      }
+
+      // Notify PlayerController to load song metadata (lyrics, etc.)
+      if (player && player.onSongLoaded) {
+        player.onSongLoaded(metadata);
+      }
+    };
+
+    const handleSongData = async (event, songData) => {
+      console.log('🎵 Song data received:', songData.format, songData.originalFilePath);
+
+      // Check if this is the same song
+      const isSameSong =
+        appState.currentSong && appState.currentSong.originalFilePath === songData.originalFilePath;
+
+      appState.currentSong = songData;
+
+      // Reset play state when loading a new song
+      if (!isSameSong) {
+        if (kaiPlayer) {
+          await kaiPlayer.pause();
+        }
+        if (player?.cdgPlayer?.isPlaying) {
+          player.cdgPlayer.pause();
+        }
+        if (player?.currentPlayer?.isPlaying) {
+          await player.currentPlayer.pause();
+        }
+      }
+
+      // Use pending metadata if available
+      const metadata = appState._pendingMetadata || songData.metadata || {};
+
+      // Detect format: CDG or KAI
+      const isCDG = songData.format === 'cdg';
+
+      try {
+        // Load song using songLoaders
+        const { loadCDGSong, loadKAISong } = await import('../../renderer/js/songLoaders.js');
+
+        if (isCDG) {
+          await loadCDGSong(appState, songData, metadata);
+        } else {
+          await loadKAISong(appState, songData, metadata);
+        }
+
+        console.log('✅ Song loaded successfully');
+      } catch (error) {
+        console.error('❌ Failed to load song:', error);
+      }
+
+      // Clear pending metadata
+      appState._pendingMetadata = null;
+    };
+
+    window.kaiAPI.song.onLoaded(handleSongLoaded);
+    window.kaiAPI.song.onData(handleSongData);
+
+    // Handle playback control events from main process (web admin commands)
+    const handleTogglePlayback = async () => {
+      console.log('🌐 Remote play/pause command');
+      if (!player) return;
+
+      if (player.isPlaying) {
+        await player.pause();
+      } else {
+        await player.play();
+      }
+    };
+
+    const handleRestart = async () => {
+      console.log('🌐 Remote restart command');
+      if (!player || !player.currentPlayer) return;
+
+      // Seek to 0 based on format
+      if (player.currentFormat === 'kai' && kaiPlayer) {
+        await kaiPlayer.seek(0);
+      } else if (player.currentFormat === 'cdg' && player.cdgPlayer) {
+        await player.cdgPlayer.seek(0);
+      }
+
+      if (!player.isPlaying) {
+        await player.play();
+      }
+    };
+
+    const handleSetPosition = async (event, positionSec) => {
+      console.log('🌐 Remote seek command:', positionSec);
+      if (!player || !player.currentPlayer) return;
+
+      // Seek based on format
+      if (player.currentFormat === 'kai' && kaiPlayer) {
+        await kaiPlayer.seek(positionSec);
+      } else if (player.currentFormat === 'cdg' && player.cdgPlayer) {
+        await player.cdgPlayer.seek(positionSec);
+      }
+
+      if (player.currentPlayer.reportStateChange) {
+        player.currentPlayer.reportStateChange();
+      }
+    };
+
+    window.kaiAPI.player.onTogglePlayback(handleTogglePlayback);
+    window.kaiAPI.player.onRestart(handleRestart);
+    window.kaiAPI.player.onSetPosition(handleSetPosition);
+
+    // Handle settings changes (from local UI or remote web admin)
+    const handleWaveformSettings = (event, settings) => {
+      console.log('🎨 Waveform settings changed:', settings);
+      if (player && player.applyWaveformSettings) {
+        player.applyWaveformSettings(settings);
+      }
+    };
+
+    if (window.kaiAPI.events) {
+      window.kaiAPI.events.on('waveform:settingsChanged', handleWaveformSettings);
+    }
+
+    return () => {
+      window.kaiAPI.song.removeSongListener(handleSongLoaded);
+      window.kaiAPI.song.removeDataListener?.(handleSongData);
+      window.kaiAPI.player.removeTogglePlaybackListener(handleTogglePlayback);
+      window.kaiAPI.player.removeRestartListener(handleRestart);
+      window.kaiAPI.player.removeSetPositionListener(handleSetPosition);
+
+      if (window.kaiAPI.events) {
+        window.kaiAPI.events.off?.('waveform:settingsChanged', handleWaveformSettings);
+      }
+
+      if (appState.randomEffectTimeout) {
+        clearTimeout(appState.randomEffectTimeout);
+      }
+    };
+  }, [player, kaiPlayer]);
+
+  return { kaiPlayer, player };
+}

package/src/shared/hooks/usePlayer.js

@@ -0,0 +1,89 @@
+/**
+ * usePlayer - Playback control hook
+ *
+ * Directly controls audio engine in renderer process
+ * Only uses IPC for next song (queue management in main process)
+ */
+
+import { usePlayerState } from '../contexts/PlayerContext.jsx';
+import { useAudio } from '../contexts/AudioContext.jsx';
+
+export function usePlayer() {
+  const { currentSong, isPlaying } = usePlayerState();
+  const { kaiPlayer, player } = useAudio();
+
+  const togglePlayback = async () => {
+    if (!currentSong || !player || !player.currentPlayer) return;
+
+    if (isPlaying) {
+      await player.pause();
+    } else {
+      await player.play();
+    }
+  };
+
+  const play = async () => {
+    if (!player || !player.currentPlayer || isPlaying) return;
+    await player.play();
+  };
+
+  const pause = async () => {
+    if (!player || !player.currentPlayer || !isPlaying) return;
+    await player.pause();
+  };
+
+  const seek = async (positionSec) => {
+    if (!player || !player.currentPlayer) return;
+
+    // For KAI format, use kaiPlayer.seek()
+    if (player.currentFormat === 'kai' && kaiPlayer) {
+      await kaiPlayer.seek(positionSec);
+    }
+    // For CDG format, seek is handled differently
+    else if (player.currentFormat === 'cdg' && player.cdgPlayer) {
+      await player.cdgPlayer.seek(positionSec);
+    }
+
+    // Report state change
+    if (player.currentPlayer.reportStateChange) {
+      player.currentPlayer.reportStateChange();
+    }
+  };
+
+  const restart = async () => {
+    if (!player || !player.currentPlayer) return;
+
+    // Seek to 0
+    if (player.currentFormat === 'kai' && kaiPlayer) {
+      await kaiPlayer.seek(0);
+    } else if (player.currentFormat === 'cdg' && player.cdgPlayer) {
+      await player.cdgPlayer.seek(0);
+    }
+
+    // Start playing if not already
+    if (!isPlaying) {
+      await player.currentPlayer.play();
+      player.isPlaying = true;
+    }
+
+    // Report state change
+    if (player.currentPlayer.reportStateChange) {
+      player.currentPlayer.reportStateChange();
+    }
+  };
+
+  const next = async () => {
+    // Next song requires queue management in main process
+    if (!window.kaiAPI?.player) return;
+    await window.kaiAPI.player.next();
+  };
+
+  return {
+    togglePlayback,
+    play,
+    pause,
+    seek,
+    restart,
+    next,
+  };
+}

package/src/shared/hooks/useSettingsPersistence.js

@@ -0,0 +1,74 @@
+/**
+ * useSettingsPersistence - Settings load/save via IPC
+ *
+ * Loads settings from storage and saves changes
+ */
+
+import { useEffect, useRef } from 'react';
+import { useSettings } from '../contexts/SettingsContext.jsx';
+
+export function useSettingsPersistence() {
+  const {
+    devicePreferences,
+    waveformPreferences,
+    autoTunePreferences,
+    setDevicePreferences,
+    setWaveformPreferences,
+    setAutoTunePreferences,
+  } = useSettings();
+
+  // Track whether initial load has completed to prevent saving hardcoded defaults
+  const isLoadedRef = useRef(false);
+
+  // Load settings on mount
+  useEffect(() => {
+    async function loadSettings() {
+      if (!window.kaiAPI?.settings) return;
+
+      try {
+        const devices = await window.kaiAPI.settings.get('devicePreferences', null);
+        if (devices) setDevicePreferences(devices);
+
+        const waveform = await window.kaiAPI.settings.get('waveformPreferences', null);
+        if (waveform) setWaveformPreferences(waveform);
+
+        const autotune = await window.kaiAPI.settings.get('autoTunePreferences', null);
+        if (autotune) setAutoTunePreferences(autotune);
+
+        isLoadedRef.current = true; // Mark as loaded to enable saving
+      } catch (error) {
+        console.error('Failed to load settings:', error);
+        isLoadedRef.current = true; // Enable saving even on error
+      }
+    }
+
+    loadSettings();
+  }, [setDevicePreferences, setWaveformPreferences, setAutoTunePreferences]);
+
+  // Save device preferences when changed (only after initial load)
+  useEffect(() => {
+    if (!window.kaiAPI?.settings || !isLoadedRef.current) return;
+    window.kaiAPI.settings.set('devicePreferences', devicePreferences);
+  }, [devicePreferences]);
+
+  // Save waveform preferences when changed (only after initial load)
+  useEffect(() => {
+    if (!window.kaiAPI?.settings || !isLoadedRef.current) return;
+    window.kaiAPI.settings.set('waveformPreferences', waveformPreferences);
+  }, [waveformPreferences]);
+
+  // Save autotune preferences when changed (only after initial load)
+  useEffect(() => {
+    if (!window.kaiAPI?.settings || !isLoadedRef.current) return;
+    window.kaiAPI.settings.set('autoTunePreferences', autoTunePreferences);
+  }, [autoTunePreferences]);
+
+  return {
+    devicePreferences,
+    waveformPreferences,
+    autoTunePreferences,
+    setDevicePreferences,
+    setWaveformPreferences,
+    setAutoTunePreferences,
+  };
+}

package/src/shared/hooks/useWebRTC.js

@@ -0,0 +1,118 @@
+/**
+ * useWebRTC - WebRTC manager wrapper
+ *
+ * Wraps webrtcManager for streaming functionality
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function useWebRTC() {
+  const webrtcManagerRef = useRef(null);
+
+  useEffect(() => {
+    async function loadWebRTC() {
+      try {
+        const module = await import('../../renderer/js/webrtcManager.js');
+        webrtcManagerRef.current = module.default;
+        console.log('✅ WebRTC manager loaded');
+
+        // Setup IPC handlers for WebRTC commands from main process
+        if (window.kaiAPI?.events) {
+          setupIPCHandlers(webrtcManagerRef.current);
+        }
+      } catch (error) {
+        console.error('❌ Failed to load WebRTC manager:', error);
+      }
+    }
+
+    loadWebRTC();
+  }, []);
+
+  // Setup IPC handlers for WebRTC commands
+  function setupIPCHandlers(manager) {
+    if (!window.kaiAPI?.events) return;
+
+    // Setup sender
+    window.kaiAPI.events.on('webrtc:setupSender', async () => {
+      const result = await manager.setupSender();
+      if (window.kaiAPI?.renderer) {
+        window.kaiAPI.renderer.sendWebRTCResponse('setupSender', result);
+      }
+    });
+
+    // Create offer
+    window.kaiAPI.events.on('webrtc:createOffer', async () => {
+      const result = await manager.createOffer();
+      if (window.kaiAPI?.renderer) {
+        window.kaiAPI.renderer.sendWebRTCResponse('createOffer', result);
+      }
+    });
+
+    // Set answer
+    window.kaiAPI.events.on('webrtc:setAnswer', async (event, answer) => {
+      const result = await manager.setAnswer(answer);
+      if (window.kaiAPI?.renderer) {
+        window.kaiAPI.renderer.sendWebRTCResponse('setAnswer', result);
+      }
+    });
+
+    // Get sender status
+    window.kaiAPI.events.on('webrtc:getSenderStatus', () => {
+      const result = manager.getSenderStatus();
+      if (window.kaiAPI?.renderer) {
+        window.kaiAPI.renderer.sendWebRTCResponse('getSenderStatus', result);
+      }
+    });
+
+    // Add ICE candidate
+    window.kaiAPI.events.on('webrtc:addICECandidate', async (event, candidate) => {
+      await manager.addICECandidate(candidate);
+    });
+
+    // Cleanup sender
+    window.kaiAPI.events.on('webrtc:cleanupSender', async () => {
+      await manager.cleanupSender();
+    });
+
+    console.log('✅ Main window WebRTC IPC handlers registered');
+  }
+
+  const setupSender = async () => {
+    if (!webrtcManagerRef.current) return null;
+    return await webrtcManagerRef.current.setupSender();
+  };
+
+  const createOffer = async () => {
+    if (!webrtcManagerRef.current) return null;
+    return await webrtcManagerRef.current.createOffer();
+  };
+
+  const setAnswer = async (answer) => {
+    if (!webrtcManagerRef.current) return null;
+    return await webrtcManagerRef.current.setAnswer(answer);
+  };
+
+  const getSenderStatus = () => {
+    if (!webrtcManagerRef.current) return null;
+    return webrtcManagerRef.current.getSenderStatus();
+  };
+
+  const addICECandidate = async (candidate) => {
+    if (!webrtcManagerRef.current) return;
+    await webrtcManagerRef.current.addICECandidate(candidate);
+  };
+
+  const cleanupSender = async () => {
+    if (!webrtcManagerRef.current) return;
+    await webrtcManagerRef.current.cleanupSender();
+  };
+
+  return {
+    setupSender,
+    createOffer,
+    setAnswer,
+    getSenderStatus,
+    addICECandidate,
+    cleanupSender,
+  };
+}