loukai-app 0.3.0

package/src/renderer/js/PlayerInterface.js

@@ -0,0 +1,267 @@
+/**
+ * PlayerInterface - Abstract base class for all playback engines
+ *
+ * This interface ensures consistent behavior across different audio formats
+ * (KAI, CDG, MP4, etc.) and eliminates code duplication for common features
+ * like state reporting, playback control, and position tracking.
+ */
+
+/* global KAIPlayer, CDGPlayer, MoviePlayer */
+
+export class PlayerInterface {
+  constructor() {
+    if (this.constructor === PlayerInterface) {
+      throw new Error('PlayerInterface is abstract and cannot be instantiated directly');
+    }
+
+    // Common state
+    this.isPlaying = false;
+    this.stateReportInterval = null;
+    this.onSongEndedCallback = null;
+  }
+
+  // ============================================================================
+  // Abstract methods - MUST be implemented by subclasses
+  // ============================================================================
+
+  /**
+   * Start or resume playback
+   * @returns {Promise<boolean>} Success status
+   */
+  play() {
+    return Promise.reject(new Error('play() must be implemented by subclass'));
+  }
+
+  /**
+   * Pause playback
+   * @returns {Promise<void>}
+   */
+  pause() {
+    return Promise.reject(new Error('pause() must be implemented by subclass'));
+  }
+
+  /**
+   * Seek to specific position in seconds
+   * @param {number} _positionSec - Position in seconds
+   * @returns {Promise<void>}
+   */
+  seek(_positionSec) {
+    return Promise.reject(new Error('seek() must be implemented by subclass'));
+  }
+
+  /**
+   * Get current playback position in seconds
+   * @returns {number} Current position
+   */
+  getCurrentPosition() {
+    throw new Error('getCurrentPosition() must be implemented by subclass');
+  }
+
+  /**
+   * Get total duration in seconds
+   * @returns {number} Duration
+   */
+  getDuration() {
+    throw new Error('getDuration() must be implemented by subclass');
+  }
+
+  /**
+   * Load song data
+   * @param {Object} _songData - Song data to load
+   * @returns {Promise<boolean>} Success status
+   */
+  loadSong(_songData) {
+    return Promise.reject(new Error('loadSong() must be implemented by subclass'));
+  }
+
+  // ============================================================================
+  // Common methods - Implemented once, used by all subclasses
+  // ============================================================================
+
+  /**
+   * Report current playback state to main process via IPC
+   * This is called periodically and on state changes
+   */
+  reportStateChange() {
+    if (window.kaiAPI?.renderer) {
+      const state = {
+        isPlaying: this.isPlaying,
+        position: this.getCurrentPosition(),
+        duration: this.getDuration(),
+      };
+      window.kaiAPI.renderer.updatePlaybackState(state);
+    }
+  }
+
+  /**
+   * Start periodic state reporting (every 100ms)
+   * Call this when playback starts
+   */
+  startStateReporting() {
+    this.stopStateReporting();
+
+    // Report state every 100ms (10x/sec)
+    this.stateReportInterval = setInterval(() => {
+      if (this.isPlaying) {
+        this.reportStateChange();
+      }
+    }, 100);
+  }
+
+  /**
+   * Stop periodic state reporting
+   * Call this when playback stops/pauses
+   */
+  stopStateReporting() {
+    if (this.stateReportInterval) {
+      clearInterval(this.stateReportInterval);
+      this.stateReportInterval = null;
+    }
+  }
+
+  /**
+   * Reset playback position to beginning
+   * Call this when loading a new song to ensure clean state
+   *
+   * Subclasses should override this to reset their specific timing variables
+   * and then call super.resetPosition()
+   */
+  resetPosition() {
+    // Stop any ongoing playback
+    if (this.isPlaying) {
+      this.pause();
+    }
+
+    // Stop state reporting
+    this.stopStateReporting();
+
+    // Reset playing state
+    this.isPlaying = false;
+
+    // Subclasses should reset their own position tracking variables
+    // (currentPosition, pauseTime, startTime, etc.)
+  }
+
+  /**
+   * Set callback for when song finishes playing
+   * @param {Function} callback - Called when song ends naturally (not from pause/stop)
+   */
+  onSongEnded(callback) {
+    this.onSongEndedCallback = callback;
+  }
+
+  /**
+   * Internal method called when song ends naturally
+   * Subclasses should call this when playback completes
+   */
+  _triggerSongEnd() {
+    this.stopStateReporting();
+    this.isPlaying = false;
+
+    // Report final state (position at end, not playing)
+    this.reportStateChange();
+
+    if (this.onSongEndedCallback) {
+      this.onSongEndedCallback();
+    }
+  }
+
+  /**
+   * Get the format type this player handles
+   * @returns {string} Format name (e.g., 'kai', 'cdg', 'mp4')
+   */
+  getFormat() {
+    throw new Error('getFormat() must be implemented by subclass');
+  }
+
+  /**
+   * Cleanup resources before destroying the player
+   * Override this if your player needs custom cleanup
+   */
+  destroy() {
+    this.stopStateReporting();
+    if (this.isPlaying) {
+      this.pause();
+    }
+  }
+}
+
+/**
+ * PlayerFactory - Creates the appropriate player instance based on format
+ *
+ * This factory pattern centralizes player instantiation and makes it easy
+ * to add new formats without modifying calling code.
+ */
+export class PlayerFactory {
+  /**
+   * Create a player for the specified format
+   * @param {string} format - Format type ('kai', 'cdg', 'mp4', etc.)
+   * @param {Object} options - Format-specific options
+   * @param {string} options.canvasId - Canvas element ID (for CDG/video formats)
+   * @returns {PlayerInterface} Player instance
+   * @throws {Error} If format is not supported
+   */
+  static create(format, options = {}) {
+    switch (format.toLowerCase()) {
+      case 'kai':
+        if (typeof KAIPlayer === 'undefined') {
+          throw new Error('KAIPlayer not loaded. Include kaiPlayer.js before using this format.');
+        }
+        return new KAIPlayer();
+
+      case 'cdg':
+        if (typeof CDGPlayer === 'undefined') {
+          throw new Error('CDGPlayer not loaded. Include cdgPlayer.js before using this format.');
+        }
+        if (!options.canvasId) {
+          throw new Error('CDGPlayer requires canvasId option');
+        }
+        return new CDGPlayer(options.canvasId);
+
+      case 'mp4':
+      case 'webm':
+      case 'mkv':
+      case 'video':
+        if (typeof MoviePlayer === 'undefined') {
+          throw new Error('MoviePlayer not loaded. Video format support not yet implemented.');
+        }
+        if (!options.videoElementId) {
+          throw new Error('MoviePlayer requires videoElementId option');
+        }
+        return new MoviePlayer(options.videoElementId);
+
+      default:
+        throw new Error(`Unsupported format: ${format}. Supported formats: kai, cdg`);
+    }
+  }
+
+  /**
+   * Check if a format is supported
+   * @param {string} format - Format type to check
+   * @returns {boolean} True if format is supported
+   */
+  static isSupported(format) {
+    const supported = ['kai', 'cdg'];
+
+    // Check if MoviePlayer is available for video formats
+    if (typeof MoviePlayer !== 'undefined') {
+      supported.push('mp4', 'webm', 'mkv', 'video');
+    }
+
+    return supported.includes(format.toLowerCase());
+  }
+
+  /**
+   * Get list of all supported formats
+   * @returns {string[]} Array of supported format names
+   */
+  static getSupportedFormats() {
+    const formats = ['kai', 'cdg'];
+
+    if (typeof MoviePlayer !== 'undefined') {
+      formats.push('mp4', 'webm', 'mkv');
+    }
+
+    return formats;
+  }
+}

package/src/renderer/js/autoTuneWorklet.js

@@ -0,0 +1,224 @@
+class AutoTuneProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+
+    // Auto-tune parameters
+    this.enabled = false;
+    this.strength = 0.5; // 0-1 range
+    this.speed = 0.05; // How quickly to correct pitch
+    this.targetPitch = null;
+    this.currentKey = 'C';
+
+    // Pitch detection
+    this.sampleRate = 44100;
+    this.bufferSize = 2048;
+    this.buffer = new Float32Array(this.bufferSize);
+    this.bufferIndex = 0;
+
+    // Musical notes in Hz (A4 = 440Hz)
+    this.noteFrequencies = {
+      C: [65.41, 130.81, 261.63, 523.25, 1046.5],
+      'C#': [69.3, 138.59, 277.18, 554.37, 1108.73],
+      D: [73.42, 146.83, 293.66, 587.33, 1174.66],
+      'D#': [77.78, 155.56, 311.13, 622.25, 1244.51],
+      E: [82.41, 164.81, 329.63, 659.25, 1318.51],
+      F: [87.31, 174.61, 349.23, 698.46, 1396.91],
+      'F#': [92.5, 185.0, 369.99, 739.99, 1479.98],
+      G: [98.0, 196.0, 392.0, 783.99, 1567.98],
+      'G#': [103.83, 207.65, 415.3, 830.61, 1661.22],
+      A: [110.0, 220.0, 440.0, 880.0, 1760.0],
+      'A#': [116.54, 233.08, 466.16, 932.33, 1864.66],
+      B: [123.47, 246.94, 493.88, 987.77, 1975.53],
+    };
+
+    // Scales for key detection
+    this.scales = {
+      C: ['C', 'D', 'E', 'F', 'G', 'A', 'B'],
+      G: ['G', 'A', 'B', 'C', 'D', 'E', 'F#'],
+      D: ['D', 'E', 'F#', 'G', 'A', 'B', 'C#'],
+      A: ['A', 'B', 'C#', 'D', 'E', 'F#', 'G#'],
+      E: ['E', 'F#', 'G#', 'A', 'B', 'C#', 'D#'],
+      B: ['B', 'C#', 'D#', 'E', 'F#', 'G#', 'A#'],
+      F: ['F', 'G', 'A', 'A#', 'C', 'D', 'E'],
+      'A#': ['A#', 'C', 'D', 'D#', 'F', 'G', 'A'],
+      'D#': ['D#', 'F', 'G', 'G#', 'A#', 'C', 'D'],
+      'G#': ['G#', 'A#', 'C', 'C#', 'D#', 'F', 'G'],
+      'C#': ['C#', 'D#', 'F', 'F#', 'G#', 'A#', 'B'],
+      'F#': ['F#', 'G#', 'A#', 'B', 'C#', 'D#', 'F'],
+    };
+
+    // Phase vocoder for pitch shifting
+    this.fftSize = 2048;
+    this.hopSize = this.fftSize / 4;
+    this.analysisWindow = this.createWindow(this.fftSize);
+    this.synthesisWindow = this.createWindow(this.fftSize);
+
+    // Overlap-add buffers
+    this.inputBuffer = new Float32Array(this.fftSize);
+    this.outputBuffer = new Float32Array(this.fftSize);
+    this.overlapBuffer = new Float32Array(this.fftSize);
+
+    // Debug logging
+    this.frameCount = 0;
+    this.lastLogTime = 0;
+
+    // Handle parameter changes from main thread
+    this.port.onmessage = (event) => {
+      if (event.data.type === 'setEnabled') {
+        this.enabled = event.data.value;
+      } else if (event.data.type === 'setStrength') {
+        this.strength = event.data.value / 100; // Convert from 0-100 to 0-1
+      } else if (event.data.type === 'setSpeed') {
+        this.speed = event.data.value / 100; // Convert from 1-100 to 0.01-1
+      } else if (event.data.type === 'setKey') {
+        this.currentKey = event.data.value;
+      }
+    };
+  }
+
+  createWindow(size) {
+    const window = new Float32Array(size);
+    for (let i = 0; i < size; i++) {
+      // Hann window
+      window[i] = 0.5 * (1 - Math.cos((2 * Math.PI * i) / (size - 1)));
+    }
+    return window;
+  }
+
+  detectPitch(buffer) {
+    // Simple autocorrelation-based pitch detection
+    const minPeriod = Math.floor(this.sampleRate / 800); // 800 Hz max
+    const maxPeriod = Math.floor(this.sampleRate / 80); // 80 Hz min
+
+    let maxCorrelation = 0;
+    let bestPeriod = 0;
+
+    for (let period = minPeriod; period < maxPeriod; period++) {
+      let correlation = 0;
+      for (let i = 0; i < buffer.length - period; i++) {
+        correlation += buffer[i] * buffer[i + period];
+      }
+
+      if (correlation > maxCorrelation) {
+        maxCorrelation = correlation;
+        bestPeriod = period;
+      }
+    }
+
+    if (bestPeriod > 0 && maxCorrelation > 0.01) {
+      return this.sampleRate / bestPeriod;
+    }
+
+    return null;
+  }
+
+  findNearestNote(frequency) {
+    if (!frequency) return null;
+
+    const scaleNotes = this.scales[this.currentKey] || this.scales['C'];
+    let minDiff = Infinity;
+    let nearestNote = null;
+    let nearestFreq = null;
+
+    for (const note of scaleNotes) {
+      const frequencies = this.noteFrequencies[note];
+      for (const freq of frequencies) {
+        const diff = Math.abs(frequency - freq);
+        if (diff < minDiff) {
+          minDiff = diff;
+          nearestNote = note;
+          nearestFreq = freq;
+        }
+      }
+    }
+
+    return { note: nearestNote, frequency: nearestFreq };
+  }
+
+  processWithRobotEffect(inputSample) {
+    // Create a robotic auto-tune effect using wave shaping
+    // This is more audible than true pitch shifting but gives the characteristic sound
+
+    // Hard clip the signal for a more digital sound
+    let processed = Math.max(-1, Math.min(1, inputSample * 2));
+
+    // Add harmonic distortion for the "robotic" quality
+    processed = Math.sin(processed * Math.PI);
+
+    // Quantize to create stepped pitch effect
+    const steps = 16; // Number of quantization levels
+    processed = Math.round(processed * steps) / steps;
+
+    // Mix with original based on strength
+    return inputSample * (1 - this.strength) + processed * this.strength;
+  }
+
+  process(inputs, outputs, _parameters) {
+    const input = inputs[0];
+    const output = outputs[0];
+
+    if (!input || !input[0]) {
+      return true;
+    }
+
+    const inputChannel = input[0];
+    const outputChannel = output[0];
+
+    if (!this.enabled) {
+      // Pass through unprocessed
+      outputChannel.set(inputChannel);
+      return true;
+    }
+
+    // Fill detection buffer
+    for (let i = 0; i < inputChannel.length; i++) {
+      this.buffer[this.bufferIndex++] = inputChannel[i];
+
+      if (this.bufferIndex >= this.bufferSize) {
+        // Detect pitch
+        const detectedPitch = this.detectPitch(this.buffer);
+
+        if (detectedPitch) {
+          const nearest = this.findNearestNote(detectedPitch);
+          if (nearest) {
+            // Calculate pitch shift factor
+            const shiftFactor = nearest.frequency / detectedPitch;
+
+            // Log pitch detection every second
+            this.frameCount++;
+            const now = Date.now();
+            if (now - this.lastLogTime > 1000) {
+              this.lastLogTime = now;
+            }
+
+            // Smooth the pitch correction based on speed parameter
+            if (this.targetPitch) {
+              this.targetPitch = this.targetPitch * (1 - this.speed) + shiftFactor * this.speed;
+            } else {
+              this.targetPitch = shiftFactor;
+            }
+          }
+        }
+
+        // Reset buffer
+        this.bufferIndex = 0;
+        this.buffer.fill(0);
+      }
+    }
+
+    // Apply auto-tune effect
+    // For now, use the robotic effect which is more immediately audible
+    for (let i = 0; i < outputChannel.length; i++) {
+      outputChannel[i] = this.processWithRobotEffect(inputChannel[i]);
+    }
+
+    // Log that we're processing
+    if (this.frameCount % 1000 === 0) {
+      // Debug logging disabled for performance
+    }
+
+    return true;
+  }
+}
+
+registerProcessor('auto-tune-processor', AutoTuneProcessor);

package/src/renderer/js/butterchurnVerify.js

@@ -0,0 +1,46 @@
+/**
+ * butterchurnVerify.js
+ * Verifies Butterchurn libraries loaded correctly and checks WebGL compatibility
+ * This runs early in the app lifecycle to catch any issues
+ */
+
+export function verifyButterchurn() {
+  console.log('Butterchurn libraries loaded:', {
+    butterchurn: typeof window.butterchurn,
+    presets: typeof window.butterchurnPresets,
+  });
+
+  // Verify presets are available and debug butterchurn structure
+  if (window.butterchurnPresets && typeof window.butterchurnPresets.getPresets === 'function') {
+    const presets = window.butterchurnPresets.getPresets();
+    console.log(
+      'SUCCESS: Butterchurn loaded with',
+      Object.keys(presets).length,
+      'presets available'
+    );
+  } else {
+    console.error('FAILED: Butterchurn presets not properly loaded');
+    return false;
+  }
+
+  // WebGL compatibility test
+  try {
+    const testCanvas = document.createElement('canvas');
+    const testGL = testCanvas.getContext('webgl2') || testCanvas.getContext('webgl');
+    console.log('WebGL context test:', {
+      hasWebGL: Boolean(testGL),
+      version: testGL ? testGL.getParameter(testGL.VERSION) : 'none',
+      renderer: testGL ? testGL.getParameter(testGL.RENDERER) : 'none',
+    });
+
+    if (!testGL) {
+      console.error('FAILED: WebGL not available - Butterchurn effects will not work');
+      return false;
+    }
+  } catch (e) {
+    console.error('WebGL test error:', e);
+    return false;
+  }
+
+  return true;
+}

package/src/renderer/js/canvas-app.js

@@ -0,0 +1,114 @@
+/**
+ * Canvas App - WebRTC receiver for canvas window
+ * Handles receiving and displaying the karaoke canvas stream
+ */
+
+// Note: Using CommonJS require since nodeIntegration is enabled in canvas window
+const { ipcRenderer } = require('electron');
+
+// Dynamically import ES module
+let WebRTCManager;
+
+// Will be set after WebRTCManager is loaded
+let webrtcManager = null;
+
+// Setup IPC handlers for WebRTC commands from main process
+function setupIPCHandlers() {
+  if (!webrtcManager) {
+    console.error('❌ WebRTC manager not loaded yet');
+    return;
+  }
+  // Setup receiver
+  ipcRenderer.on('webrtc:setupReceiver', async () => {
+    const result = await webrtcManager.setupReceiver();
+    ipcRenderer.send('webrtc:setupReceiver-response', result);
+  });
+
+  // Check receiver ready
+  ipcRenderer.on('webrtc:checkReceiverReady', () => {
+    const result = webrtcManager.checkReceiverReady();
+    ipcRenderer.send('webrtc:checkReceiverReady-response', result);
+  });
+
+  // Set offer and create answer
+  ipcRenderer.on('webrtc:setOfferAndCreateAnswer', async (event, offer) => {
+    const result = await webrtcManager.setOfferAndCreateAnswer(offer);
+    ipcRenderer.send('webrtc:setOfferAndCreateAnswer-response', result);
+  });
+
+  // Get receiver status
+  ipcRenderer.on('webrtc:getReceiverStatus', () => {
+    const result = webrtcManager.getReceiverStatus();
+    ipcRenderer.send('webrtc:getReceiverStatus-response', result);
+  });
+
+  // Add ICE candidate
+  ipcRenderer.on('webrtc:addReceiverICECandidate', async (event, candidate) => {
+    await webrtcManager.addReceiverICECandidate(candidate);
+  });
+
+  // Cleanup receiver
+  ipcRenderer.on('webrtc:cleanupReceiver', async () => {
+    await webrtcManager.cleanupReceiver();
+  });
+
+  console.log('✅ Canvas window IPC handlers registered');
+}
+
+// Setup receiver when DOM is ready
+async function init() {
+  console.log('🎬 Canvas window initializing...');
+
+  // Load WebRTC manager
+  try {
+    const module = await import('./webrtcManager.js');
+    WebRTCManager = module.WebRTCManager;
+    webrtcManager = new WebRTCManager();
+    window.webrtcManager = webrtcManager;
+    console.log('✅ WebRTC manager loaded');
+  } catch (error) {
+    console.error('❌ Failed to load WebRTC manager:', error);
+    return;
+  }
+
+  // Setup IPC handlers
+  setupIPCHandlers();
+
+  // Handle fullscreen on video click
+  const video = document.getElementById('video');
+  if (video) {
+    // Disable context menu (right-click)
+    video.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      return false;
+    });
+
+    // Handle fullscreen toggle on click
+    video.addEventListener('click', async () => {
+      try {
+        if (!document.fullscreenElement) {
+          await video.requestFullscreen();
+        } else {
+          await document.exitFullscreen();
+        }
+      } catch (error) {
+        console.error('Fullscreen toggle failed:', error);
+      }
+    });
+
+    // Ensure controls are never shown
+    video.controls = false;
+    video.removeAttribute('controls');
+  }
+
+  // Signal to main process that canvas window is ready
+  ipcRenderer.send('canvas:childReady');
+  console.log('📢 Sent canvas:childReady signal to main process');
+}
+
+// Wait for DOM to be ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}