loukai-app 0.3.0

package/src/renderer/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,154 @@
+/**
+ * useKeyboardShortcuts - React hook for keyboard shortcuts
+ *
+ * Provides global keyboard shortcuts for player controls, vocals toggle, fullscreen, etc.
+ * Follows the bridge pattern - does not use window globals.
+ */
+
+import { useEffect } from 'react';
+
+/**
+ * Hook for setting up keyboard shortcuts
+ *
+ * @param {Object} options - Configuration options
+ * @param {Function} options.onTogglePlayback - Called when spacebar is pressed
+ * @param {Function} options.onToggleVocalsGlobal - Called when V is pressed (no modifier)
+ * @param {Function} options.onToggleVocalsPA - Called when Ctrl/Cmd+V is pressed
+ * @param {Function} options.onToggleStemMute - Called when 1-9 is pressed (no modifier), receives stemIndex
+ * @param {Function} options.onToggleStemSolo - Called when Shift+1-9 is pressed, receives stemIndex
+ */
+export function useKeyboardShortcuts(options = {}) {
+  const {
+    onTogglePlayback,
+    onToggleVocalsGlobal,
+    onToggleVocalsPA,
+    onToggleStemMute,
+    onToggleStemSolo,
+  } = options;
+
+  useEffect(() => {
+    const handleKeyDown = async (e) => {
+      // Ignore keyboard shortcuts when typing in input fields
+      if (
+        e.target.tagName === 'INPUT' ||
+        e.target.tagName === 'SELECT' ||
+        e.target.tagName === 'TEXTAREA'
+      ) {
+        return;
+      }
+
+      switch (e.key) {
+        case 'Escape':
+          // Exit fullscreen if in fullscreen mode
+          if (document.fullscreenElement) {
+            e.preventDefault();
+            await toggleCanvasFullscreen();
+          }
+          break;
+
+        case ' ':
+          e.preventDefault();
+          if (onTogglePlayback) {
+            await onTogglePlayback();
+          }
+          break;
+
+        case 'v':
+        case 'V':
+          if (e.ctrlKey || e.metaKey) {
+            // Ctrl/Cmd+V: Toggle vocals PA only
+            if (onToggleVocalsPA) {
+              await onToggleVocalsPA();
+            }
+          } else {
+            // V: Toggle vocals global (PA + IEM)
+            if (onToggleVocalsGlobal) {
+              await onToggleVocalsGlobal();
+            }
+          }
+          break;
+
+        case 'a':
+        case 'A':
+          if (e.ctrlKey || e.metaKey) {
+            // Reserved for future use (select all, etc.)
+            e.preventDefault();
+          }
+          break;
+
+        case 'b':
+        case 'B':
+          // Reserved for future use
+          break;
+
+        case 's':
+        case 'S':
+          if (e.ctrlKey || e.metaKey) {
+            // Reserved for future use (save, etc.)
+            e.preventDefault();
+          }
+          break;
+
+        case 'f':
+        case 'F':
+          e.preventDefault();
+          await toggleCanvasFullscreen();
+          break;
+
+        default:
+          // Number keys 1-9 for stem mute/solo
+          if (e.key >= '1' && e.key <= '9') {
+            const stemIndex = parseInt(e.key) - 1;
+            if (e.shiftKey) {
+              if (onToggleStemSolo) {
+                await onToggleStemSolo(stemIndex);
+              }
+            } else {
+              if (onToggleStemMute) {
+                await onToggleStemMute(stemIndex);
+              }
+            }
+          }
+          break;
+      }
+    };
+
+    // Add event listener
+    document.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup on unmount
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [
+    onTogglePlayback,
+    onToggleVocalsGlobal,
+    onToggleVocalsPA,
+    onToggleStemMute,
+    onToggleStemSolo,
+  ]);
+}
+
+/**
+ * Toggle canvas fullscreen
+ * This is a utility function that directly manipulates the DOM
+ */
+export async function toggleCanvasFullscreen() {
+  try {
+    const karaokeCanvas = document.getElementById('karaokeCanvas');
+    if (!karaokeCanvas) {
+      console.warn('karaokeCanvas element not found');
+      return;
+    }
+
+    if (!document.fullscreenElement) {
+      // Enter fullscreen
+      await karaokeCanvas.requestFullscreen();
+    } else {
+      // Exit fullscreen
+      await document.exitFullscreen();
+    }
+  } catch (error) {
+    console.error('❌ Canvas fullscreen toggle failed:', error);
+  }
+}

package/src/renderer/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' ws: wss:; media-src 'self' blob:;">
+    <title>Loukai</title>
+    <link rel="stylesheet" href="dist/renderer.css">
+</head>
+<body>
+    <!-- Single React root - entire app rendered here -->
+    <div id="root"></div>
+
+    <!-- Visualization Libraries -->
+    <script src="lib/butterchurn.min.js"></script>
+    <script src="lib/butterchurnPresets.min.js"></script>
+
+    <!-- CDG Graphics Library -->
+    <script type="module" src="lib/cdgraphics-wrapper.js"></script>
+
+    <!-- Single Entry Point - Everything loaded via imports -->
+    <script type="module" src="dist/renderer.js"></script>
+</body>
+</html>

package/src/renderer/index.html.backup

@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KAI Player</title>
+    <link rel="stylesheet" href="styles/main.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Title Bar -->
+        <div class="title-bar">
+            <div class="title-bar-left">
+                <div class="app-title">KAI Player</div>
+            </div>
+            <div class="title-bar-center">
+                <div class="song-info">
+                    <span class="song-title">No song loaded</span>
+                    <span class="song-artist"></span>
+                </div>
+            </div>
+            <div class="title-bar-right">
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="main-content">
+            <!-- Sidebar -->
+            <div class="sidebar">
+                <div class="section">
+                    <h3>File</h3>
+                    <button id="loadKaiBtn" class="primary-btn">Load KAI File</button>
+                    <button id="songInfoBtn" class="preset-btn" disabled>Song Info</button>
+                </div>
+
+                <div class="section">
+                    <h3>Audio Devices</h3>
+                    <button id="refreshDevicesBtn" class="preset-btn">Refresh Devices</button>
+                    <div class="device-selector">
+                        <label>PA Output:</label>
+                        <select id="paDeviceSelect"></select>
+                    </div>
+                    <div class="device-selector">
+                        <label>IEM Output:</label>
+                        <select id="iemDeviceSelect"></select>
+                    </div>
+                    <div class="device-selector">
+                        <label>Mic Input:</label>
+                        <select id="inputDeviceSelect"></select>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <h3>Waveform Options</h3>
+                    <div class="waveform-controls">
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="enableWaveforms" checked>
+                            <span>Enable Waveforms</span>
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="micToSpeakers" checked>
+                            <span>Mic to Speakers</span>
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="enableMic" checked>
+                            <span>Enable Mic</span>
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="enableEffects" checked>
+                            <span>Enable Background Effects</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <h3>Auto-Tune</h3>
+                    <div class="autotune-controls">
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="autotuneEnabled">
+                            <span>Enable Auto-Tune</span>
+                        </label>
+                        <div class="slider-group">
+                            <label>Strength:</label>
+                            <input type="range" id="autotuneStrength" min="0" max="100" value="50">
+                            <span class="slider-value">50%</span>
+                        </div>
+                        <div class="slider-group">
+                            <label>Speed:</label>
+                            <input type="range" id="autotuneSpeed" min="1" max="100" value="20">
+                            <span class="slider-value">20</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Center Content -->
+            <div class="center-content">
+                <!-- Tab Navigation -->
+                <div class="tab-nav">
+                    <button class="tab-btn" data-tab="mixer">Mixer</button>
+                    <button class="tab-btn active" data-tab="player">Player</button>
+                    <button class="tab-btn" data-tab="coaching">Coaching</button>
+                    <button class="tab-btn" data-tab="editor">Lyrics Editor</button>
+                </div>
+
+                <!-- Tab Content -->
+                <div class="tab-content">
+                    <!-- Mixer Tab -->
+                    <div id="mixer-tab" class="tab-pane">
+                        <div class="mixer-container">
+                            <div class="mixer-header">
+                                <div class="mixer-label">Stem</div>
+                                <div class="mixer-label">Gain</div>
+                                <div class="mixer-label">PA</div>
+                                <div class="mixer-label">IEM</div>
+                                <div class="mixer-label">Solo</div>
+                                <div class="mixer-label">Meter</div>
+                            </div>
+                            <div id="mixerStrips" class="mixer-strips">
+                                <div class="no-song-message">
+                                    Load a KAI file to see mixer controls
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Player Tab -->
+                    <div id="player-tab" class="tab-pane active">
+                        <div class="player-container">
+                            <div class="karaoke-display">
+                                <canvas id="karaokeCanvas" width="1920" height="1080"></canvas>
+                                <div class="lyrics-container" id="lyricsContainer" style="display: none;">
+                                    <div class="no-lyrics">No lyrics available</div>
+                                </div>
+                            </div>
+
+                            <div class="transport-extended">
+                                <button id="seekBackBtn">⏪</button>
+                                <button id="playPauseBtn">▶</button>
+                                <button id="seekForwardBtn">⏩</button>
+                                
+                                <div class="progress-container">
+                                    <div class="progress-bar">
+                                        <div class="progress-fill" id="progressFill"></div>
+                                        <div class="progress-handle" id="progressHandle"></div>
+                                    </div>
+                                </div>
+                                
+                                <div class="effects-controls">
+                                    <button id="prevEffectBtn" title="Previous Effect">◀ FX</button>
+                                    <span id="currentEffectName">Effect</span>
+                                    <button id="nextEffectBtn" title="Next Effect">FX ▶</button>
+                                </div>
+                                
+                                <div class="time-display">
+                                    <span id="currentTime">0:00</span>
+                                    <span>/</span>
+                                    <span id="totalTime">0:00</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Coaching Tab -->
+                    <div id="coaching-tab" class="tab-pane">
+                        <div class="coaching-container">
+                            <div class="pitch-display">
+                                <canvas id="pitchCanvas" width="600" height="300"></canvas>
+                            </div>
+                            
+                            <div class="coaching-metrics">
+                                <div class="metric">
+                                    <label>Pitch Accuracy:</label>
+                                    <div class="metric-bar">
+                                        <div class="metric-fill" style="width: 0%"></div>
+                                    </div>
+                                    <span class="metric-value">0%</span>
+                                </div>
+                                
+                                <div class="metric">
+                                    <label>Timing:</label>
+                                    <div class="metric-bar">
+                                        <div class="metric-fill" style="width: 0%"></div>
+                                    </div>
+                                    <span class="metric-value">0%</span>
+                                </div>
+                                
+                                <div class="metric">
+                                    <label>Stability:</label>
+                                    <div class="metric-bar">
+                                        <div class="metric-fill" style="width: 0%"></div>
+                                    </div>
+                                    <span class="metric-value">0%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Lyrics Editor Tab -->
+                    <div id="editor-tab" class="tab-pane">
+                        <div class="editor-container">
+                            <div class="editor-header">
+                                <div class="editor-controls">
+                                    <button id="editorSaveBtn" class="editor-btn" disabled>
+                                        💾 Save Changes
+                                    </button>
+                                    <button id="exportLyricsBtn" class="editor-btn" disabled>
+                                        📄 Export Lyrics
+                                    </button>
+                                    <button id="addNewLine" class="editor-btn" disabled>
+                                        + Add Line
+                                    </button>
+                                    <button id="resetLyrics" class="editor-btn" disabled>
+                                        ↶ Reset
+                                    </button>
+                                </div>
+                                <div class="editor-position">
+                                    <span id="editorTime">0:00</span>
+                                </div>
+                            </div>
+
+                            <div class="editor-content">
+                                <div class="editor-column-full">
+                                    <div class="lyrics-editor">
+                                        <div id="lyricsLines" class="lyrics-lines">
+                                            <div class="no-lyrics-message">Load a KAI file to edit lyrics</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="editor-player">
+                                <span class="audio-label">IEM</span>
+                                <audio id="editorAudio" controls></audio>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Status Bar -->
+        <div class="status-bar">
+            <div class="status-left">
+                <span id="statusText">Ready</span>
+            </div>
+            <div class="status-right">
+                <span id="latencyDisplay">Latency: -- ms</span>
+                <span id="xrunDisplay">XRuns: 0</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Song Info Modal -->
+    <div id="songInfoModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Song Information</h2>
+                <button id="closeSongInfoBtn" class="close-btn">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div id="songInfoContent"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Visualization Libraries -->
+    <script>
+        console.log('Loading Butterchurn with dynamic require...');
+        
+        // Use dynamic require for Butterchurn libraries
+        let butterchurnLibs = null;
+        
+        try {
+            // Try to load butterchurn via require (works in Electron)
+            const { ipcRenderer } = require('electron');
+            const path = require('path');
+            
+            // Get the app's root directory from main process
+            const appPath = process.cwd();
+            console.log('App path:', appPath);
+            
+            // Load butterchurn directly from node_modules
+            try {
+                const butterchurnPath = path.join(appPath, 'node_modules', 'butterchurn', 'lib', 'butterchurn.js');
+                const presetsPath = path.join(appPath, 'node_modules', 'butterchurn-presets', 'lib', 'butterchurnPresets.min.js');
+                
+                console.log('Attempting to load from:', butterchurnPath);
+                console.log('Presets from:', presetsPath);
+                
+                // Use dynamic require
+                const butterchurn = require(butterchurnPath);
+                const butterchurnPresets = require(presetsPath);
+                
+                console.log('Direct require succeeded!');
+                console.log('Butterchurn:', typeof butterchurn, butterchurn);
+                console.log('Presets:', typeof butterchurnPresets, butterchurnPresets);
+                
+                // Make available globally
+                window.butterchurn = butterchurn.default || butterchurn;
+                window.butterchurnPresets = butterchurnPresets.default || butterchurnPresets;
+                
+                console.log('Global assignment:', {
+                    butterchurn: typeof window.butterchurn,
+                    presets: typeof window.butterchurnPresets
+                });
+                
+                if (window.butterchurnPresets && typeof window.butterchurnPresets.getPresets === 'function') {
+                    try {
+                        const presets = window.butterchurnPresets.getPresets();
+                        console.log('Available presets:', Object.keys(presets).length, 'total');
+                        console.log('First 10 presets:', Object.keys(presets).slice(0, 10));
+                    } catch(e) {
+                        console.error('Error accessing presets:', e);
+                    }
+                }
+                
+            } catch(requireError) {
+                console.error('Dynamic require failed:', requireError);
+                
+                // Fallback to script loading
+                console.log('Falling back to script loading...');
+                const script1 = document.createElement('script');
+                script1.src = path.join(appPath, 'node_modules', 'butterchurn', 'lib', 'butterchurn.min.js');
+                script1.onload = () => {
+                    console.log('Butterchurn script loaded');
+                    const script2 = document.createElement('script');
+                    script2.src = path.join(appPath, 'node_modules', 'butterchurn-presets', 'lib', 'butterchurnPresets.min.js');
+                    script2.onload = () => {
+                        console.log('Butterchurn presets script loaded');
+                        console.log('Final availability:', {
+                            butterchurn: typeof window.butterchurn,
+                            presets: typeof window.butterchurnPresets
+                        });
+                    };
+                    script2.onerror = (e) => console.error('Presets script load error:', e);
+                    document.head.appendChild(script2);
+                };
+                script1.onerror = (e) => console.error('Butterchurn script load error:', e);
+                document.head.appendChild(script1);
+            }
+            
+        } catch(e) {
+            console.error('Failed to load Butterchurn libraries:', e);
+        }
+        
+        // Force create a test WebGL context to check compatibility
+        try {
+            const testCanvas = document.createElement('canvas');
+            const testGL = testCanvas.getContext('webgl2') || testCanvas.getContext('webgl');
+            console.log('WebGL context test:', {
+                hasWebGL: !!testGL,
+                version: testGL ? testGL.getParameter(testGL.VERSION) : 'none',
+                renderer: testGL ? testGL.getParameter(testGL.RENDERER) : 'none'
+            });
+        } catch(e) {
+            console.error('WebGL test error:', e);
+        }
+    </script>
+    
+    <!-- App Scripts -->
+    <script src="js/karaokeRenderer.js"></script>
+    <script src="js/audioEngine.js"></script>
+    <script src="js/lyricsEditor.js"></script>
+    <script src="js/mixer.js"></script>
+    <script src="js/player.js"></script>
+    <script src="js/coaching.js"></script>
+    <script src="js/editor.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>