Karaoke API
Documentation

// Import the production-ready H3.5 compiler
import H35Compiler, { VERSION_INFO, formatTime, getActiveLines, getWordProgress } from './lib/karaokeCompilers';

// The compiler automatically handles damaged JSON and provides error recovery
const processKaraokeData = (apiResponse) => {
  // H35Compiler is the default export - optimized for h3.5 format
  const compiledData = H35Compiler.compile(apiResponse);
  
  // The compiler always returns valid data structure
  console.log(`✅ Compiled ${compiledData.lines.length} lines across ${compiledData.tracks.length} tracks`);
  console.log('Metadata:', compiledData.metadata);
  
  // Advanced error handling is built-in
  if (compiledData.tracks.length === 0) {
    console.warn('No tracks found - check API response');
  }
  
  return compiledData;
};

// Check compiler version
console.log('Using Karaoke Compiler', VERSION_INFO.version);

// Enable debug mode for development
if (process.env.NODE_ENV === 'development') {
  VERSION_INFO.enableDebugLogging();
}

import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import H35Compiler, { getActiveLines, getWordProgress, formatTime } from '@/lib/karaokeCompilers';

interface KaraokePlayerProps {
  apiResponse: any; // Response from /api/v1/get_markup
  audioUrl: string;
  onError?: (error: Error) => void;
}

const KaraokePlayer: React.FC<KaraokePlayerProps> = ({ 
  apiResponse, 
  audioUrl, 
  onError 
}) => {
  const [currentTime, setCurrentTime] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const [duration, setDuration] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  
  const audioRef = useRef<HTMLAudioElement>(null);
  const lyricsRef = useRef<HTMLDivElement>(null);
  const animationRef = useRef<number>();
  
  // Compile API response with H3.5 compiler (memoized)
  const karaokeData = useMemo(() => {
    try {
      const compiled = H35Compiler.compile(apiResponse);
      if (!compiled) throw new Error('Failed to compile karaoke data');
      return compiled;
    } catch (error) {
      console.error('Compilation error:', error);
      if (onError) onError(error as Error);
      return null;
    }
  }, [apiResponse, onError]);
  
  // Audio event handlers
  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;
    
    const handleLoadedData = () => {
      setIsLoading(false);
      setDuration(audio.duration);
    };
    
    const handleError = () => {
      setIsLoading(false);
      if (onError) onError(new Error('Failed to load audio'));
    };
    
    const handleEnded = () => {
      setIsPlaying(false);
      setCurrentTime(0);
    };
    
    audio.addEventListener('loadeddata', handleLoadedData);
    audio.addEventListener('error', handleError);
    audio.addEventListener('ended', handleEnded);
    
    return () => {
      audio.removeEventListener('loadeddata', handleLoadedData);
      audio.removeEventListener('error', handleError);
      audio.removeEventListener('ended', handleEnded);
    };
  }, [onError]);
  
  // Real-time sync with requestAnimationFrame
  useEffect(() => {
    const updateTime = () => {
      if (audioRef.current && isPlaying) {
        setCurrentTime(audioRef.current.currentTime);
        animationRef.current = requestAnimationFrame(updateTime);
      }
    };

    if (isPlaying) {
      updateTime();
    }
    
    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [isPlaying]);

  // Auto-scroll to active line
  useEffect(() => {
    if (!lyricsRef.current || !isPlaying) return;
    
    const activeElement = lyricsRef.current.querySelector('.line.active');
    if (activeElement) {
      activeElement.scrollIntoView({ 
        behavior: 'smooth', 
        block: 'center' 
      });
    }
  }, [currentTime, isPlaying]);

  const togglePlay = useCallback(async () => {
    const audio = audioRef.current;
    if (!audio || !karaokeData) return;
    
    try {
      if (isPlaying) {
        audio.pause();
        setIsPlaying(false);
      } else {
        await audio.play();
        setIsPlaying(true);
      }
    } catch (error) {
      console.error('Playback error:', error);
      if (onError) onError(error as Error);
    }
  }, [isPlaying, karaokeData, onError]);
  
  const handleSeek = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    const audio = audioRef.current;
    if (!audio || !duration) return;
    
    const rect = e.currentTarget.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const newTime = (clickX / rect.width) * duration;
    
    audio.currentTime = newTime;
    setCurrentTime(newTime);
  }, [duration]);

  // Get currently active lines across all tracks
  const activeLines = useMemo(() => {
    if (!karaokeData) return [];
    return getActiveLines(karaokeData.lines, currentTime);
  }, [karaokeData, currentTime]);
  
  if (!karaokeData) {
    return (
      <div className="karaoke-player error">
        <p>Failed to load karaoke data. Please check the API response.</p>
      </div>
    );
  }

  return (
    <div className="karaoke-player">
      <audio 
        ref={audioRef} 
        src={audioUrl}
        preload="metadata"
      />
      
      <div className="controls">
        <button 
          onClick={togglePlay}
          className="play-button"
          disabled={isLoading}
        >
          {isPlaying ? '⏸️' : '▶️'} {isPlaying ? 'Pause' : 'Play'}
      </button>
      
        <span className="time-display">
          {formatTime(currentTime)} / {formatTime(duration)}
        </span>
        
        <div 
          className="progress-bar"
          onClick={handleSeek}
          role="slider"
          aria-label="Seek"
          aria-valuemin={0}
          aria-valuemax={duration}
          aria-valuenow={currentTime}
        >
          <div 
            className="progress-fill"
            style={{ width: `${duration ? (currentTime / duration) * 100 : 0}%` }}
          />
        </div>
      </div>

      <div ref={lyricsRef} className="lyrics-container">
        {isLoading ? (
          <div className="loading">Loading karaoke data...</div>
        ) : (
          karaokeData.tracks.map((track) => (
            <div key={track.id} className="track">
              <h4 style={{ color: track.color }}>
                {track.name} ({track.role})
              </h4>
              
              {karaokeData.lines
                .filter(line => line.trackId === track.id)
                .map((line) => {
                  const isActive = activeLines.some(l => l.id === line.id);
                  const isPast = currentTime > line.endTime;
          
          return (
                    <div 
                      key={line.id} 
                      className={`line ${isActive ? 'active' : isPast ? 'past' : 'future'}`}
                    >
                      <span className="line-time">
                        {formatTime(line.startTime)}
                      </span>
                      <div className="line-content">
                        {line.segments.map((segment, idx) => (
                          <span key={idx} className="segment">
                            {segment.words?.map((word, wordIdx) => {
                              const progress = getWordProgress(word, currentTime);
                    
                    return (
                                <span key={wordIdx} className="word-wrapper">
                        <span className="word-base">{word.text}</span>
                        <span 
                          className="word-fill"
                                    style={{
                                      width: `${progress * 100}%`,
                                      color: track.color
                                    }}
                        >
                          {word.text}
                                  </span>{" "}
                      </span>
                    );
                  }) || segment.text}
                </span>
              ))}
                      </div>
            </div>
          );
        })}
      </div>
          ))
        )}
      </div>
    </div>
  );
};

export default KaraokePlayer;

.karaoke-player {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(20, 20, 25, 0.95));
  border-radius: 16px;
  padding: 2rem;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.track {
  margin-bottom: 2rem;
}

.track h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.line {
  padding: 0.75rem 0;
  font-size: 1.4rem;
  line-height: 1.5;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin: 0.5rem 0;
}

.line.future {
  opacity: 0.3;
  filter: blur(1px);
}

.line.past {
  opacity: 0.5;
  color: #666;
}

.line.active {
  opacity: 1;
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.word-wrapper {
  position: relative;
  display: inline-block;
  margin-right: 0.3rem;
}

.word-base {
  color: #666;
}

.word-fill {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  text-shadow: 0 0 15px currentColor;
  transition: width 0.1s linear;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}