loukai-app 0.3.0

package/src/shared/components/PlayerControls.jsx

@@ -0,0 +1,206 @@
+/**
+ * PlayerControls - Unified player transport controls
+ *
+ * Based on renderer UI (better styling than web admin)
+ * Works with both ElectronBridge and WebBridge via callbacks
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import { formatDuration } from '../formatUtils.js';
+
+export function PlayerControls({
+  playback,
+  currentSong,
+  currentEffect,
+  isLoading,
+  onPlay,
+  onPause,
+  onRestart,
+  onNext,
+  onSeek,
+  onPreviousEffect,
+  onNextEffect,
+  onOpenCanvasWindow,
+  className = '',
+}) {
+  const { isPlaying, position = 0, duration = 0 } = playback || {};
+
+  // Smooth position interpolation for 60fps progress bar updates
+  const [interpolatedPosition, setInterpolatedPosition] = useState(position);
+  const lastReportedPosition = useRef(position);
+  const lastReportedTime = useRef(performance.now());
+  const animationFrameRef = useRef(null);
+
+  // Derive loading state from currentSong if not explicitly provided
+  const loading = isLoading !== undefined ? isLoading : currentSong?.isLoading || false;
+
+  // Update refs when position changes from IPC
+  useEffect(() => {
+    lastReportedPosition.current = position;
+    lastReportedTime.current = performance.now();
+    setInterpolatedPosition(position);
+  }, [position]);
+
+  // Smooth interpolation when playing
+  useEffect(() => {
+    if (!isPlaying) {
+      // Stop interpolation when paused
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      return;
+    }
+
+    // Interpolate position on every frame
+    const animate = () => {
+      const now = performance.now();
+      const elapsed = (now - lastReportedTime.current) / 1000; // Convert to seconds
+      const newPosition = Math.min(lastReportedPosition.current + elapsed, duration || Infinity);
+      setInterpolatedPosition(newPosition);
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animationFrameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [isPlaying, duration]);
+
+  // Truncate effect name to 28 characters with ellipsis
+  const truncateEffectName = (name) => {
+    if (!name || name === 'No Effect') return name;
+    return name.length > 28 ? name.substring(0, 28) + '…' : name;
+  };
+
+  const handleProgressClick = (e) => {
+    if (!duration || !onSeek) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const progress = Math.max(0, Math.min(1, x / rect.width));
+    const newPosition = progress * duration;
+    onSeek(newPosition);
+  };
+
+  // Use interpolated position for smooth 60fps progress bar
+  const progress = duration > 0 ? (interpolatedPosition / duration) * 100 : 0;
+
+  return (
+    <div
+      className={`bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-4 ${className}`}
+    >
+      <div className="flex items-center gap-3">
+        {/* Transport Controls */}
+        <button
+          onClick={onRestart}
+          title="Restart Track"
+          className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition disabled:opacity-50 flex items-center justify-center"
+          disabled={loading}
+        >
+          <span className="material-icons text-gray-700 dark:text-gray-300 text-2xl leading-none">
+            replay
+          </span>
+        </button>
+
+        <button
+          onClick={isPlaying ? onPause : onPlay}
+          title={loading ? 'Loading...' : isPlaying ? 'Pause' : 'Play'}
+          className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition disabled:opacity-50 flex items-center justify-center"
+          disabled={loading}
+        >
+          {loading ? (
+            <span className="material-icons text-gray-700 dark:text-gray-300 text-2xl leading-none animate-spin">
+              hourglass_empty
+            </span>
+          ) : (
+            <span className="material-icons text-blue-600 dark:text-blue-400 text-2xl leading-none">
+              {isPlaying ? 'pause' : 'play_arrow'}
+            </span>
+          )}
+        </button>
+
+        <button
+          onClick={onNext}
+          title="Next Track"
+          className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition disabled:opacity-50 flex items-center justify-center"
+          disabled={loading}
+        >
+          <span className="material-icons text-gray-700 dark:text-gray-300 text-2xl leading-none">
+            skip_next
+          </span>
+        </button>
+
+        {/* Progress Bar */}
+        <div className="flex-1 mx-4">
+          <div
+            className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full cursor-pointer"
+            onClick={handleProgressClick}
+          >
+            <div
+              className="absolute inset-y-0 left-0 bg-blue-600 rounded-full"
+              style={{ width: `${progress}%` }}
+            />
+            <div
+              className="absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 rounded-full shadow-lg"
+              style={{ left: `calc(${progress}% - 8px)` }}
+            />
+          </div>
+        </div>
+
+        {/* Time Display */}
+        <div className="flex items-center gap-1 text-sm font-mono text-gray-700 dark:text-gray-300 flex-shrink-0">
+          <span>{formatDuration(interpolatedPosition)}</span>
+          <span>/</span>
+          <span>{formatDuration(duration)}</span>
+        </div>
+
+        {/* Divider */}
+        <div className="w-px h-8 bg-gray-200 dark:bg-gray-700 mx-2" />
+
+        {/* Effects Controls */}
+        {onPreviousEffect && (
+          <button
+            onClick={onPreviousEffect}
+            title="Previous Effect"
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition flex items-center justify-center"
+          >
+            <span className="material-icons text-gray-700 dark:text-gray-300 leading-none">
+              chevron_left
+            </span>
+          </button>
+        )}
+        <span
+          className="px-3 py-1 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium min-w-[120px] text-center"
+          title={currentEffect || 'No Effect'}
+        >
+          {truncateEffectName(currentEffect || 'No Effect')}
+        </span>
+        {onNextEffect && (
+          <button
+            onClick={onNextEffect}
+            title="Next Effect"
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition flex items-center justify-center"
+          >
+            <span className="material-icons text-gray-700 dark:text-gray-300 leading-none">
+              chevron_right
+            </span>
+          </button>
+        )}
+        {onOpenCanvasWindow && (
+          <button
+            onClick={onOpenCanvasWindow}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition flex items-center justify-center"
+            title="Open Canvas Window"
+          >
+            <span className="material-icons text-gray-700 dark:text-gray-300 leading-none">
+              open_in_new
+            </span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/shared/components/PortalSelect.jsx

@@ -0,0 +1,239 @@
+/**
+ * PortalSelect - Custom select component using portal for dropdown positioning
+ *
+ * DESIGN EXCEPTION: We normally prefer native HTML elements (see SYSTEM_ARCHITECTURE.md),
+ * but native <select> dropdowns are broken on Linux due to Electron 38+ Wayland bugs.
+ * The dropdown renders at the top-left corner instead of below the select element.
+ * See: https://github.com/electron/electron/issues/44607
+ *
+ * This component renders the dropdown via a React portal to document.body,
+ * bypassing the Wayland popup positioning bug. We maintain as much native
+ * behavior as possible: keyboard navigation, focus management, escape to close.
+ *
+ * This workaround should be removed when Electron fixes Wayland popup positioning.
+ */
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+export function PortalSelect({
+  id,
+  value,
+  onChange,
+  options = [],
+  placeholder = 'Select...',
+  className = '',
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0, minWidth: 0, openUpward: false });
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+
+  // Estimated dropdown height for positioning calculation
+  const DROPDOWN_MAX_HEIGHT = 240; // matches max-h-60 (15rem = 240px)
+
+  // Find the selected option's label
+  const selectedOption = options.find((opt) => opt.value === value);
+  const displayText = selectedOption ? selectedOption.label : placeholder;
+
+  // Find index of currently selected value
+  const selectedIndex = options.findIndex((opt) => opt.value === value);
+
+  // Update dropdown position when opened
+  const updatePosition = useCallback(() => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+
+      // Determine if we should open upward
+      const estimatedHeight = Math.min(options.length * 40, DROPDOWN_MAX_HEIGHT);
+      const openUpward = spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
+
+      setPosition({
+        top: openUpward ? rect.top - 2 : rect.bottom + 2,
+        left: rect.left,
+        minWidth: rect.width,
+        openUpward,
+      });
+    }
+  }, [options.length]);
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+      setFocusedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    }
+  }, [isOpen, updatePosition, selectedIndex]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event) => {
+      if (
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target) &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  // Close on scroll outside dropdown to prevent misalignment
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleScroll = (event) => {
+      // Don't close if scrolling within the dropdown itself
+      if (dropdownRef.current && dropdownRef.current.contains(event.target)) {
+        return;
+      }
+      setIsOpen(false);
+    };
+    window.addEventListener('scroll', handleScroll, true);
+    return () => window.removeEventListener('scroll', handleScroll, true);
+  }, [isOpen]);
+
+  const handleSelect = useCallback(
+    (optionValue) => {
+      onChange?.({ target: { value: optionValue } });
+      setIsOpen(false);
+      triggerRef.current?.focus();
+    },
+    [onChange]
+  );
+
+  // Keyboard navigation matching native select behavior
+  const handleKeyDown = useCallback(
+    (event) => {
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          if (isOpen && focusedIndex >= 0) {
+            handleSelect(options[focusedIndex].value);
+          } else {
+            setIsOpen(!isOpen);
+          }
+          break;
+        case 'Escape':
+          event.preventDefault();
+          setIsOpen(false);
+          triggerRef.current?.focus();
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setFocusedIndex((prev) => Math.min(prev + 1, options.length - 1));
+          }
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          if (isOpen) {
+            setFocusedIndex((prev) => Math.max(prev - 1, 0));
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          if (isOpen) setFocusedIndex(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          if (isOpen) setFocusedIndex(options.length - 1);
+          break;
+        case 'Tab':
+          if (isOpen) setIsOpen(false);
+          break;
+        default:
+          // Type-to-search: find first option starting with pressed key
+          if (event.key.length === 1 && isOpen) {
+            const char = event.key.toLowerCase();
+            const idx = options.findIndex((opt) => opt.label.toLowerCase().startsWith(char));
+            if (idx >= 0) setFocusedIndex(idx);
+          }
+      }
+    },
+    [isOpen, focusedIndex, options, handleSelect]
+  );
+
+  // Scroll focused option into view
+  useEffect(() => {
+    if (isOpen && dropdownRef.current && focusedIndex >= 0) {
+      const focusedElement = dropdownRef.current.children[focusedIndex];
+      focusedElement?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [isOpen, focusedIndex]);
+
+  return (
+    <>
+      {/* Trigger Button - styled to match native select */}
+      <button
+        ref={triggerRef}
+        id={id}
+        type="button"
+        className={`w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-between text-left ${className}`}
+        onClick={() => setIsOpen(!isOpen)}
+        onKeyDown={handleKeyDown}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-labelledby={id}
+      >
+        <span className="truncate">{displayText}</span>
+        <svg
+          className={`w-4 h-4 ml-2 flex-shrink-0 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Dropdown Portal - renders at document.body to bypass Wayland positioning bug */}
+      {isOpen &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            className="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded shadow-lg max-h-60 overflow-y-auto"
+            style={{
+              ...(position.openUpward
+                ? { bottom: window.innerHeight - position.top, left: position.left }
+                : { top: position.top, left: position.left }),
+              minWidth: position.minWidth,
+            }}
+            role="listbox"
+            onKeyDown={handleKeyDown}
+          >
+            {options.map((option, index) => (
+              <div
+                key={option.value}
+                className={`px-3 py-2 cursor-pointer transition-colors whitespace-nowrap ${
+                  index === focusedIndex
+                    ? 'bg-blue-500 text-white'
+                    : option.value === value
+                      ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100'
+                      : 'text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-600'
+                }`}
+                onClick={() => handleSelect(option.value)}
+                role="option"
+                aria-selected={option.value === value}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>,
+          document.body
+        )}
+    </>
+  );
+}