loukai-app 0.3.0

package/src/renderer/react-entry.jsx

@@ -0,0 +1,44 @@
+/**
+ * React Entry Point for Electron Renderer
+ *
+ * Single entry point - mounts ONE React app with shared context
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './styles/tailwind.css';
+import { ElectronBridge } from './adapters/ElectronBridge.js';
+import { AppRoot } from './components/AppRoot.jsx';
+import { App } from './components/App.jsx';
+import { verifyButterchurn } from './js/butterchurnVerify.js';
+
+console.log('🚀 Initializing application...');
+
+// Verify Butterchurn libraries loaded correctly
+verifyButterchurn();
+
+// Get the ElectronBridge singleton instance
+const bridge = ElectronBridge.getInstance();
+
+// Connect bridge and mount React app
+bridge.connect().then(() => {
+  console.log('✅ ElectronBridge connected');
+
+  // Mount single React app to root
+  const root = document.getElementById('root');
+  if (root) {
+    ReactDOM.createRoot(root).render(
+      <React.StrictMode>
+        <AppRoot>
+          <App bridge={bridge} />
+        </AppRoot>
+      </React.StrictMode>
+    );
+    console.log('✅ React app mounted');
+  }
+});
+
+// Cleanup on window unload
+window.addEventListener('beforeunload', () => {
+  bridge.disconnect();
+});

package/src/renderer/styles/tailwind.css

@@ -0,0 +1,106 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom scrollbar for dark mode */
+@layer base {
+  :root {
+    color-scheme: light dark;
+  }
+
+  * {
+    @apply border-gray-200 dark:border-gray-700;
+  }
+
+  body {
+    @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100;
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    overflow: hidden;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    @apply w-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-gray-100 dark:bg-gray-800;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-400 dark:bg-gray-500;
+  }
+
+  /* Fullscreen canvas styling */
+  #karaokeCanvas:fullscreen {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+    background: #000;
+  }
+
+  /* Webkit prefix for Safari */
+  #karaokeCanvas:-webkit-full-screen {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+    background: #000;
+  }
+
+  /* Firefox prefix */
+  #karaokeCanvas:-moz-full-screen {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+    background: #000;
+  }
+}
+
+/* Utility classes */
+@layer components {
+  .btn-primary {
+    @apply px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors;
+  }
+
+  .btn-secondary {
+    @apply px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-lg font-medium transition-colors;
+  }
+
+  .input {
+    @apply px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500;
+  }
+
+  .card {
+    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm;
+  }
+}
+
+/* Material Icons font */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../../../static/fonts/material-icons.woff2') format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

package/src/renderer/utils/qrCodeGenerator.js

@@ -0,0 +1,98 @@
+/**
+ * QR Code Generator Utility
+ * Generates QR codes to canvas for server URLs
+ */
+
+import QRCode from 'qrcode';
+
+/**
+ * Generate QR code data URL
+ * @param {string} text - Text to encode (server URL)
+ * @param {Object} options - QR code options
+ * @returns {Promise<string>} Data URL of QR code image
+ */
+export async function generateQRCode(text, options = {}) {
+  const defaultOptions = {
+    width: 200,
+    margin: 2,
+    color: {
+      dark: '#000000',
+      light: '#FFFFFF',
+    },
+    errorCorrectionLevel: 'M',
+    ...options,
+  };
+
+  try {
+    const dataUrl = await QRCode.toDataURL(text, defaultOptions);
+    return dataUrl;
+  } catch (error) {
+    console.error('Error generating QR code:', error);
+    return null;
+  }
+}
+
+/**
+ * Generate QR code to an offscreen canvas
+ * @param {string} text - Text to encode (server URL)
+ * @param {number} size - Size of QR code in pixels
+ * @returns {Promise<HTMLCanvasElement>} Canvas with QR code
+ */
+export async function generateQRCodeCanvas(text, size = 200) {
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+
+  try {
+    await QRCode.toCanvas(canvas, text, {
+      width: size,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF',
+      },
+      errorCorrectionLevel: 'M',
+    });
+    return canvas;
+  } catch (error) {
+    console.error('Error generating QR code canvas:', error);
+    return null;
+  }
+}
+
+/**
+ * Generate QR code with label overlay
+ * @param {string} text - Text to encode (server URL)
+ * @param {string} label - Label text to display below QR code
+ * @param {number} qrSize - Size of QR code
+ * @returns {Promise<HTMLCanvasElement>} Canvas with QR code and label
+ */
+export async function generateQRCodeWithLabel(text, label, qrSize = 200) {
+  // Generate QR code
+  const qrCanvas = await generateQRCodeCanvas(text, qrSize);
+  if (!qrCanvas) return null;
+
+  // Create final canvas with extra space for label
+  const padding = 20;
+  const labelHeight = 40;
+  const finalCanvas = document.createElement('canvas');
+  finalCanvas.width = qrSize + padding * 2;
+  finalCanvas.height = qrSize + labelHeight + padding * 2;
+
+  const ctx = finalCanvas.getContext('2d');
+
+  // White background
+  ctx.fillStyle = '#FFFFFF';
+  ctx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
+
+  // Draw QR code
+  ctx.drawImage(qrCanvas, padding, padding);
+
+  // Draw label
+  ctx.fillStyle = '#000000';
+  ctx.font = 'bold 16px Arial';
+  ctx.textAlign = 'center';
+  ctx.fillText(label, finalCanvas.width / 2, qrSize + padding + 25);
+
+  return finalCanvas;
+}

package/src/renderer/vite.config.js

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react()],
+  root: __dirname,
+  base: './', // Use relative paths for Electron
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    sourcemap: true,
+    rollupOptions: {
+      input: path.resolve(__dirname, 'react-entry.jsx'),
+      output: {
+        entryFileNames: 'renderer.js',
+        assetFileNames: 'renderer.[ext]',
+        chunkFileNames: 'assets/[name]-[hash].js',
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@shared': path.resolve(__dirname, '../shared'),
+      '@renderer': path.resolve(__dirname, '.'),
+    },
+  },
+});

package/src/shared/adapters/BridgeInterface.js

@@ -0,0 +1,195 @@
+/**
+ * BridgeInterface - Abstract base class for platform-specific communication
+ *
+ * This defines the contract that both ElectronBridge and WebBridge must implement.
+ * Components use this interface and don't care about the underlying transport.
+ *
+ * Platform-specific implementations:
+ * - ElectronBridge: Uses window.kaiAPI (IPC to main process)
+ * - WebBridge: Uses fetch() and Socket.IO (REST + WebSocket)
+ */
+
+export class BridgeInterface {
+  // ===== Player Controls =====
+
+  play() {
+    return Promise.reject(new Error('play() not implemented'));
+  }
+
+  pause() {
+    return Promise.reject(new Error('pause() not implemented'));
+  }
+
+  restart() {
+    return Promise.reject(new Error('restart() not implemented'));
+  }
+
+  seek(_positionSec) {
+    return Promise.reject(new Error('seek() not implemented'));
+  }
+
+  getPlaybackState() {
+    return Promise.reject(new Error('getPlaybackState() not implemented'));
+  }
+
+  // ===== Queue Management =====
+
+  getQueue() {
+    return Promise.reject(new Error('getQueue() not implemented'));
+  }
+
+  addToQueue(_song) {
+    return Promise.reject(new Error('addToQueue() not implemented'));
+  }
+
+  removeFromQueue(_id) {
+    return Promise.reject(new Error('removeFromQueue() not implemented'));
+  }
+
+  clearQueue() {
+    return Promise.reject(new Error('clearQueue() not implemented'));
+  }
+
+  reorderQueue(_fromIndex, _toIndex) {
+    return Promise.reject(new Error('reorderQueue() not implemented'));
+  }
+
+  playNext() {
+    return Promise.reject(new Error('playNext() not implemented'));
+  }
+
+  // ===== Mixer Controls =====
+
+  getMixerState() {
+    return Promise.reject(new Error('getMixerState() not implemented'));
+  }
+
+  setMasterGain(_bus, _gainDb) {
+    return Promise.reject(new Error('setMasterGain() not implemented'));
+  }
+
+  toggleMasterMute(_bus) {
+    return Promise.reject(new Error('toggleMasterMute() not implemented'));
+  }
+
+  setMasterMute(_bus, _muted) {
+    return Promise.reject(new Error('setMasterMute() not implemented'));
+  }
+
+  // ===== Effects Controls =====
+
+  getEffects() {
+    return Promise.reject(new Error('getEffects() not implemented'));
+  }
+
+  selectEffect(_effectName) {
+    return Promise.reject(new Error('selectEffect() not implemented'));
+  }
+
+  toggleEffect(_effectName, _enabled) {
+    return Promise.reject(new Error('toggleEffect() not implemented'));
+  }
+
+  nextEffect() {
+    return Promise.reject(new Error('nextEffect() not implemented'));
+  }
+
+  previousEffect() {
+    return Promise.reject(new Error('previousEffect() not implemented'));
+  }
+
+  randomEffect() {
+    return Promise.reject(new Error('randomEffect() not implemented'));
+  }
+
+  // ===== Library Management =====
+
+  getLibrary() {
+    return Promise.reject(new Error('getLibrary() not implemented'));
+  }
+
+  scanLibrary() {
+    return Promise.reject(new Error('scanLibrary() not implemented'));
+  }
+
+  searchSongs(_query) {
+    return Promise.reject(new Error('searchSongs() not implemented'));
+  }
+
+  loadSongForEditing(_path) {
+    return Promise.reject(new Error('loadSongForEditing() not implemented'));
+  }
+
+  saveSongEdits(_updates) {
+    return Promise.reject(new Error('saveSongEdits() not implemented'));
+  }
+
+  // ===== Preferences =====
+
+  getPreferences() {
+    return Promise.reject(new Error('getPreferences() not implemented'));
+  }
+
+  updateAutoTunePreferences(_prefs) {
+    return Promise.reject(new Error('updateAutoTunePreferences() not implemented'));
+  }
+
+  updateMicrophonePreferences(_prefs) {
+    return Promise.reject(new Error('updateMicrophonePreferences() not implemented'));
+  }
+
+  updateEffectsPreferences(_prefs) {
+    return Promise.reject(new Error('updateEffectsPreferences() not implemented'));
+  }
+
+  // ===== Song Requests =====
+
+  getRequests() {
+    return Promise.reject(new Error('getRequests() not implemented'));
+  }
+
+  approveRequest(_requestId) {
+    return Promise.reject(new Error('approveRequest() not implemented'));
+  }
+
+  rejectRequest(_requestId) {
+    return Promise.reject(new Error('rejectRequest() not implemented'));
+  }
+
+  // ===== State Subscriptions =====
+
+  /**
+   * Subscribe to state changes for a specific domain
+   * @param {string} domain - State domain (mixer, queue, playback, effects, etc.)
+   * @param {Function} callback - Callback function (receives updated state)
+   * @returns {Function} Unsubscribe function
+   */
+  onStateChange(_domain, _callback) {
+    throw new Error('onStateChange() not implemented');
+  }
+
+  /**
+   * Unsubscribe from state changes
+   * @param {string} domain - State domain
+   * @param {Function} callback - Callback to remove
+   */
+  offStateChange(_domain, _callback) {
+    throw new Error('offStateChange() not implemented');
+  }
+
+  // ===== Lifecycle =====
+
+  /**
+   * Initialize the bridge (e.g., connect sockets)
+   */
+  async connect() {
+    // Optional - override if needed
+  }
+
+  /**
+   * Clean up resources (e.g., disconnect sockets)
+   */
+  async disconnect() {
+    // Optional - override if needed
+  }
+}

package/src/shared/components/EffectsPanel.jsx

@@ -0,0 +1,177 @@
+/**
+ * EffectsPanel - Unified effects browser and control panel
+ *
+ * Based on renderer's effects design (grid layout with categories)
+ * Works with both ElectronBridge and WebBridge via callbacks
+ */
+
+export function EffectsPanel({
+  effects = [],
+  currentEffect = null,
+  disabledEffects = [],
+  searchTerm = '',
+  currentCategory = 'all',
+  onSearch,
+  onCategoryChange,
+  onSelectEffect,
+  onRandomEffect,
+  onEnableEffect,
+  onDisableEffect,
+}) {
+  // Filter effects based on category and search
+  let filteredEffects = [...effects];
+
+  if (currentCategory !== 'all') {
+    filteredEffects = filteredEffects.filter((effect) => effect.category === currentCategory);
+  }
+
+  if (searchTerm.trim()) {
+    const searchLower = searchTerm.toLowerCase();
+    filteredEffects = filteredEffects.filter(
+      (effect) =>
+        effect.name?.toLowerCase().includes(searchLower) ||
+        effect.displayName?.toLowerCase().includes(searchLower) ||
+        effect.author?.toLowerCase().includes(searchLower)
+    );
+  }
+
+  const categories = [
+    { id: 'all', label: 'All' },
+    { id: 'geiss', label: 'Geiss' },
+    { id: 'martin', label: 'Martin' },
+    { id: 'flexi', label: 'Flexi' },
+    { id: 'shifter', label: 'Shifter' },
+    { id: 'other', label: 'Other' },
+  ];
+
+  const sanitizeFilename = (name) => {
+    return name.replace(/[^a-zA-Z0-9-_\s]/g, '_');
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-gray-50 dark:bg-gray-900">
+      <div className="p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+        <div className="flex-1 max-w-md">
+          <input
+            type="text"
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500"
+            placeholder="Search effects..."
+            value={searchTerm}
+            onChange={(e) => onSearch && onSearch(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-4 text-gray-600 dark:text-gray-400">
+          <span id="effectsCount" className="text-sm">
+            {currentCategory === 'all' && !searchTerm.trim()
+              ? `${effects.length} effects`
+              : `${filteredEffects.length} of ${effects.length} effects`}
+          </span>
+          {onRandomEffect && (
+            <button
+              onClick={onRandomEffect}
+              className="px-4 py-2 bg-blue-600 border-none rounded text-white cursor-pointer text-sm transition-colors flex items-center gap-1.5 hover:bg-blue-700"
+            >
+              <span className="material-icons text-lg">casino</span>
+              Random
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="p-2.5 px-4 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex gap-2.5">
+          {categories.map((cat) => (
+            <button
+              key={cat.id}
+              className={`px-3 py-1.5 rounded text-xs cursor-pointer transition-all ${currentCategory === cat.id ? 'bg-blue-600 border-blue-600 text-white' : 'bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white'}`}
+              onClick={() => onCategoryChange && onCategoryChange(cat.id)}
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-4">
+          {filteredEffects.length === 0 ? (
+            <div className="text-center p-10 text-gray-500 dark:text-gray-400 flex flex-col items-center">
+              <span className="material-icons text-5xl mb-2.5">search_off</span>
+              <div className="text-base">No effects found</div>
+            </div>
+          ) : (
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
+              {filteredEffects.map((effect) => {
+                const isActive = currentEffect === effect.name;
+                const isDisabled = disabledEffects.includes(effect.name);
+                const sanitizedName = sanitizeFilename(effect.name);
+                const screenshotPath = `../../static/images/butterchurn-screenshots/${sanitizedName}.png`;
+
+                return (
+                  <div
+                    key={effect.name}
+                    className={`rounded-md p-0 cursor-pointer transition-all overflow-hidden flex flex-col ${isActive ? 'bg-blue-100 dark:bg-blue-900/40 border border-blue-600' : 'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-blue-600'} ${isDisabled ? 'opacity-60' : ''}`}
+                    onClick={() => !isDisabled && onSelectEffect && onSelectEffect(effect.name)}
+                  >
+                    <div className="relative w-full h-[150px] bg-gray-200 dark:bg-gray-900 overflow-hidden">
+                      <img
+                        src={screenshotPath}
+                        alt={effect.displayName}
+                        className="w-full h-full object-cover transition-transform hover:scale-105"
+                        onError={(e) => {
+                          e.target.style.display = 'none';
+                          e.target.nextElementSibling.style.display = 'flex';
+                        }}
+                      />
+                      <div className="absolute top-0 left-0 w-full h-full hidden items-center justify-center bg-gray-200 dark:bg-gray-900 text-gray-400 dark:text-gray-600">
+                        <span className="material-icons text-5xl">image_not_supported</span>
+                      </div>
+                    </div>
+                    <div className={`p-4 flex-1 ${isDisabled ? 'opacity-60' : ''}`}>
+                      <div className="inline-block bg-blue-600 text-white px-1.5 py-0.5 rounded text-[11px] mb-2">
+                        {effect.category}
+                      </div>
+                      <div
+                        className={`font-bold mb-1.5 text-sm ${isDisabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-white'}`}
+                      >
+                        {effect.displayName}
+                      </div>
+                      <div
+                        className={`text-xs mb-1.5 ${isDisabled ? 'text-gray-400 dark:text-gray-600' : 'text-gray-600 dark:text-gray-400'}`}
+                      >
+                        by {effect.author}
+                      </div>
+                      <div className="flex gap-2 mt-2.5">
+                        <button
+                          className={`flex-1 px-3 py-1.5 rounded text-xs cursor-pointer transition-colors ${isDisabled ? 'bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed opacity-50' : 'bg-blue-600 border-blue-600 text-white hover:bg-blue-700'}`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            !isDisabled && onSelectEffect && onSelectEffect(effect.name);
+                          }}
+                          disabled={isDisabled}
+                        >
+                          Use
+                        </button>
+                        <button
+                          className="flex-1 px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-xs cursor-pointer transition-colors hover:bg-gray-200 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            if (isDisabled) {
+                              onEnableEffect && onEnableEffect(effect.name);
+                            } else {
+                              onDisableEffect && onDisableEffect(effect.name);
+                            }
+                          }}
+                        >
+                          {isDisabled ? 'Enable' : 'Disable'}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}