@djangocfg/ui-nextjs 2.1.83 → 2.1.84

package/src/tools/AudioPlayer/progressive/ProgressiveAudioPlayer.tsx

@@ -1,303 +0,0 @@
-'use client';
-
-/**
- * ProgressiveAudioPlayer - Audio player with progressive waveform loading
- *
- * Uses native HTML5 audio for playback (supports Range requests)
- * and custom canvas for waveform visualization.
- *
- * Features:
- * - Progressive waveform loading (no need to load entire file)
- * - Smooth seek on any position
- * - Buffered ranges visualization
- * - Keyboard shortcuts
- * - Volume control
- * - Loop mode
- *
- * NOTE: This player does NOT support reactive cover effects.
- * For reactive effects with streaming support, use `HybridSimplePlayer` instead.
- *
- * Use this player when you need:
- * - Progressive waveform that shows the actual audio amplitude shape
- * - Visualization of buffered/loaded ranges
- * - Large file streaming without reactive effects
- */
-
-import { useRef, useCallback } from 'react';
-import {
-  Play,
-  Pause,
-  RotateCcw,
-  SkipBack,
-  SkipForward,
-  Volume2,
-  VolumeX,
-  Loader2,
-  Repeat,
-  AlertCircle,
-} from 'lucide-react';
-import { cn, Button, Slider } from '@djangocfg/ui-core';
-
-import { useAudioElement } from './useAudioElement';
-import { useProgressiveWaveform } from './useProgressiveWaveform';
-import { WaveformCanvas } from './WaveformCanvas';
-import { formatTime } from '../utils';
-import type { ProgressiveAudioPlayerProps, WaveformStyle } from './types';
-
-// =============================================================================
-// COMPONENT
-// =============================================================================
-
-export function ProgressiveAudioPlayer({
-  src,
-  title,
-  artist,
-  coverArt,
-  showWaveform = true,
-  showControls = true,
-  showTimer = true,
-  showVolume = true,
-  showLoop = true,
-  autoPlay = false,
-  waveformStyle,
-  className,
-  onPlay,
-  onPause,
-  onEnded,
-  onTimeUpdate,
-  onError,
-}: ProgressiveAudioPlayerProps) {
-  const audioRef = useRef<HTMLAudioElement>(null);
-
-  // Audio element hook
-  const audio = useAudioElement({
-    src,
-    autoPlay,
-    onPlay,
-    onPause,
-    onEnded,
-    onTimeUpdate,
-    onError,
-  });
-
-  // Progressive waveform loading
-  const waveform = useProgressiveWaveform({
-    url: src,
-    duration: audio.duration,
-    enabled: showWaveform,
-  });
-
-  // Handlers
-  const handleSeek = useCallback((time: number) => {
-    audio.seek(time);
-  }, [audio]);
-
-  const handleVolumeChange = useCallback((value: number[]) => {
-    audio.setVolume(value[0] / 100);
-  }, [audio]);
-
-  // Loading state
-  const isLoading = !audio.isReady;
-  const hasError = audio.error || waveform.error;
-
-  // Default waveform style
-  const defaultStyle: WaveformStyle = {
-    waveColor: 'hsl(217 91% 60% / 0.3)',
-    progressColor: 'hsl(217 91% 60%)',
-    loadingColor: 'hsl(217 91% 60% / 0.1)',
-    cursorColor: 'hsl(217 91% 60%)',
-    barWidth: 3,
-    barGap: 2,
-    barRadius: 2,
-    height: 64,
-    ...waveformStyle,
-  };
-
-  return (
-    <div className={cn('flex flex-col gap-3 p-4 rounded-lg bg-card border', className)}>
-      {/* Hidden audio element */}
-      <audio
-        ref={(el) => {
-          (audioRef as any).current = el;
-          (audio.audioRef as any).current = el;
-        }}
-        preload="metadata"
-        crossOrigin="anonymous"
-      />
-
-      {/* Header with title/artist */}
-      {(title || artist) && (
-        <div className="text-center">
-          {title && <h3 className="text-sm font-medium truncate">{title}</h3>}
-          {artist && <p className="text-xs text-muted-foreground truncate">{artist}</p>}
-        </div>
-      )}
-
-      {/* Waveform */}
-      {showWaveform && (
-        <div className="relative">
-          <WaveformCanvas
-            peaks={waveform.peaks}
-            currentTime={audio.currentTime}
-            duration={audio.duration}
-            buffered={audio.buffered}
-            loadingPercent={waveform.loadedPercent}
-            onSeek={handleSeek}
-            interactive={audio.isReady}
-            style={defaultStyle}
-            className={cn(
-              'rounded transition-opacity',
-              isLoading && 'opacity-50'
-            )}
-          />
-
-          {/* Loading overlay */}
-          {isLoading && (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <Loader2 className="h-6 w-6 animate-spin text-primary" />
-            </div>
-          )}
-
-          {/* Error overlay */}
-          {hasError && (
-            <div className="absolute inset-0 flex items-center justify-center bg-destructive/10 rounded">
-              <div className="flex items-center gap-2 text-destructive text-sm">
-                <AlertCircle className="h-4 w-4" />
-                <span>Failed to load</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={waveform.retry}
-                  className="h-6 px-2"
-                >
-                  Retry
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {/* Loading progress indicator */}
-          {waveform.isLoading && !isLoading && (
-            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-muted overflow-hidden rounded-full">
-              <div
-                className="h-full bg-primary transition-all duration-300"
-                style={{ width: `${waveform.loadedPercent}%` }}
-              />
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Timer */}
-      {showTimer && (
-        <div className="flex justify-between text-xs text-muted-foreground tabular-nums px-1">
-          <span>{formatTime(audio.currentTime)}</span>
-          <span>{formatTime(audio.duration)}</span>
-        </div>
-      )}
-
-      {/* Controls */}
-      {showControls && (
-        <div className="flex items-center justify-center gap-1">
-          {/* Restart */}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-9 w-9"
-            onClick={() => audio.seek(0)}
-            disabled={!audio.isReady}
-            title="Restart"
-          >
-            <RotateCcw className="h-4 w-4" />
-          </Button>
-
-          {/* Skip back 5s */}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-9 w-9"
-            onClick={() => audio.skip(-5)}
-            disabled={!audio.isReady}
-            title="Back 5 seconds"
-          >
-            <SkipBack className="h-4 w-4" />
-          </Button>
-
-          {/* Play/Pause */}
-          <Button
-            variant="default"
-            size="icon"
-            className="h-12 w-12 rounded-full"
-            onClick={audio.togglePlay}
-            disabled={!audio.isReady && !isLoading}
-            title={audio.isPlaying ? 'Pause' : 'Play'}
-          >
-            {isLoading ? (
-              <Loader2 className="h-5 w-5 animate-spin" />
-            ) : audio.isPlaying ? (
-              <Pause className="h-5 w-5" />
-            ) : (
-              <Play className="h-5 w-5 ml-0.5" />
-            )}
-          </Button>
-
-          {/* Skip forward 5s */}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-9 w-9"
-            onClick={() => audio.skip(5)}
-            disabled={!audio.isReady}
-            title="Forward 5 seconds"
-          >
-            <SkipForward className="h-4 w-4" />
-          </Button>
-
-          {/* Volume */}
-          {showVolume && (
-            <>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-9 w-9"
-                onClick={audio.toggleMute}
-                title={audio.isMuted ? 'Unmute' : 'Mute'}
-              >
-                {audio.isMuted || audio.volume === 0 ? (
-                  <VolumeX className="h-4 w-4" />
-                ) : (
-                  <Volume2 className="h-4 w-4" />
-                )}
-              </Button>
-
-              <Slider
-                value={[audio.isMuted ? 0 : audio.volume * 100]}
-                max={100}
-                step={1}
-                onValueChange={handleVolumeChange}
-                className="w-20"
-                aria-label="Volume"
-              />
-            </>
-          )}
-
-          {/* Loop/Repeat */}
-          {showLoop && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className={cn('h-9 w-9', audio.isLooping && 'text-primary')}
-              onClick={audio.toggleLoop}
-              disabled={!audio.isReady}
-              title={audio.isLooping ? 'Disable loop' : 'Enable loop'}
-            >
-              <Repeat className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default ProgressiveAudioPlayer;

package/src/tools/AudioPlayer/progressive/WaveformCanvas.tsx

@@ -1,381 +0,0 @@
-'use client';
-
-/**
- * WaveformCanvas - Canvas-based waveform visualization
- *
- * Features:
- * - Progressive rendering as peaks load
- * - Playback progress overlay
- * - Buffered ranges indicator
- * - Interactive seek (click/drag)
- * - Hover preview
- * - High DPI support
- */
-
-import {
-  useRef,
-  useEffect,
-  useCallback,
-  useState,
-  forwardRef,
-  useImperativeHandle,
-} from 'react';
-import { cn } from '@djangocfg/ui-core';
-import type { WaveformStyle, LoadedRange } from './types';
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-interface WaveformCanvasProps {
-  /** Peaks data (0-1 normalized) */
-  peaks: number[];
-  /** Current playback time (seconds) */
-  currentTime: number;
-  /** Total duration (seconds) */
-  duration: number;
-  /** Buffered ranges from audio element */
-  buffered?: TimeRanges | null;
-  /** Loaded ranges (for progressive loading indicator) */
-  loadedRanges?: LoadedRange[];
-  /** Loading progress (0-100) */
-  loadingPercent?: number;
-  /** Seek callback */
-  onSeek?: (time: number) => void;
-  /** Hover callback */
-  onHover?: (time: number | null) => void;
-  /** Is interactive */
-  interactive?: boolean;
-  /** Style options */
-  style?: WaveformStyle;
-  /** Additional class */
-  className?: string;
-}
-
-export interface WaveformCanvasRef {
-  redraw: () => void;
-}
-
-// =============================================================================
-// DEFAULT STYLES
-// =============================================================================
-
-const DEFAULT_STYLE: Required<WaveformStyle> = {
-  waveColor: 'hsl(217 91% 60% / 0.3)',
-  progressColor: 'hsl(217 91% 60%)',
-  loadingColor: 'hsl(217 91% 60% / 0.1)',
-  cursorColor: 'hsl(217 91% 60%)',
-  barWidth: 3,
-  barGap: 2,
-  barRadius: 2,
-  height: 64,
-};
-
-// =============================================================================
-// COMPONENT
-// =============================================================================
-
-export const WaveformCanvas = forwardRef<WaveformCanvasRef, WaveformCanvasProps>(
-  function WaveformCanvas(props, ref) {
-    const {
-      peaks,
-      currentTime,
-      duration,
-      buffered,
-      loadedRanges = [],
-      loadingPercent = 100,
-      onSeek,
-      onHover,
-      interactive = true,
-      style = {},
-      className,
-    } = props;
-
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [hoverX, setHoverX] = useState<number | null>(null);
-    const [isDragging, setIsDragging] = useState(false);
-
-    // Merge styles
-    const {
-      waveColor,
-      progressColor,
-      loadingColor,
-      cursorColor,
-      barWidth,
-      barGap,
-      barRadius,
-      height,
-    } = { ...DEFAULT_STYLE, ...style };
-
-    // ==========================================================================
-    // DRAWING
-    // ==========================================================================
-
-    const draw = useCallback(() => {
-      const canvas = canvasRef.current;
-      const container = containerRef.current;
-      if (!canvas || !container) return;
-
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return;
-
-      // Get dimensions
-      const rect = container.getBoundingClientRect();
-      const width = rect.width;
-      const dpr = window.devicePixelRatio || 1;
-
-      // Set canvas size with DPI scaling
-      canvas.width = width * dpr;
-      canvas.height = height * dpr;
-      canvas.style.width = `${width}px`;
-      canvas.style.height = `${height}px`;
-      ctx.scale(dpr, dpr);
-
-      // Clear
-      ctx.clearRect(0, 0, width, height);
-
-      // Calculate bar positions
-      const totalBarSpace = barWidth + barGap;
-      const barCount = Math.floor(width / totalBarSpace);
-
-      if (barCount === 0) return;
-
-      // Progress position
-      const progress = duration > 0 ? currentTime / duration : 0;
-      const progressX = progress * width;
-
-      // Hover position
-      const hoverProgress = hoverX !== null ? hoverX / width : null;
-
-      // Draw loading placeholder for unloaded area
-      if (loadingPercent < 100) {
-        const loadedX = (loadingPercent / 100) * width;
-        ctx.fillStyle = loadingColor;
-        ctx.fillRect(loadedX, 0, width - loadedX, height);
-      }
-
-      // Resample peaks to match bar count
-      const resampledPeaks = resamplePeaks(peaks, barCount);
-
-      // Draw bars
-      for (let i = 0; i < barCount; i++) {
-        const x = i * totalBarSpace;
-        const peakValue = resampledPeaks[i] || 0;
-
-        // Bar height (minimum 2px for visibility)
-        const barHeight = Math.max(2, peakValue * (height - 4));
-        const y = (height - barHeight) / 2;
-
-        // Determine color based on position
-        const barProgress = (x + barWidth / 2) / width;
-        let color = waveColor;
-
-        if (barProgress <= progress) {
-          color = progressColor;
-        }
-
-        // Draw bar
-        ctx.fillStyle = color;
-        if (barRadius > 0) {
-          roundRect(ctx, x, y, barWidth, barHeight, barRadius);
-        } else {
-          ctx.fillRect(x, y, barWidth, barHeight);
-        }
-      }
-
-      // Draw cursor
-      if (duration > 0) {
-        ctx.fillStyle = cursorColor;
-        ctx.fillRect(progressX - 1, 0, 2, height);
-      }
-
-      // Draw hover indicator
-      if (hoverProgress !== null && interactive) {
-        ctx.fillStyle = `${cursorColor}80`; // 50% opacity
-        const hoverPx = hoverProgress * width;
-        ctx.fillRect(hoverPx - 1, 0, 2, height);
-      }
-
-      // Draw buffered indicator (thin line at bottom)
-      if (buffered && buffered.length > 0 && duration > 0) {
-        ctx.fillStyle = `${progressColor}40`;
-        for (let i = 0; i < buffered.length; i++) {
-          const start = (buffered.start(i) / duration) * width;
-          const end = (buffered.end(i) / duration) * width;
-          ctx.fillRect(start, height - 2, end - start, 2);
-        }
-      }
-    }, [
-      peaks,
-      currentTime,
-      duration,
-      buffered,
-      loadingPercent,
-      hoverX,
-      waveColor,
-      progressColor,
-      loadingColor,
-      cursorColor,
-      barWidth,
-      barGap,
-      barRadius,
-      height,
-      interactive,
-    ]);
-
-    // ==========================================================================
-    // INTERACTION HANDLERS
-    // ==========================================================================
-
-    const getTimeFromX = useCallback((clientX: number): number => {
-      const container = containerRef.current;
-      if (!container || duration <= 0) return 0;
-
-      const rect = container.getBoundingClientRect();
-      const x = clientX - rect.left;
-      const progress = Math.max(0, Math.min(1, x / rect.width));
-      return progress * duration;
-    }, [duration]);
-
-    const handleMouseMove = useCallback((e: React.MouseEvent) => {
-      if (!interactive) return;
-
-      const container = containerRef.current;
-      if (!container) return;
-
-      const rect = container.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      setHoverX(x);
-
-      const time = getTimeFromX(e.clientX);
-      onHover?.(time);
-
-      if (isDragging) {
-        onSeek?.(time);
-      }
-    }, [interactive, isDragging, getTimeFromX, onHover, onSeek]);
-
-    const handleMouseLeave = useCallback(() => {
-      setHoverX(null);
-      onHover?.(null);
-      setIsDragging(false);
-    }, [onHover]);
-
-    const handleMouseDown = useCallback((e: React.MouseEvent) => {
-      if (!interactive) return;
-      e.preventDefault();
-      setIsDragging(true);
-      const time = getTimeFromX(e.clientX);
-      onSeek?.(time);
-    }, [interactive, getTimeFromX, onSeek]);
-
-    const handleMouseUp = useCallback(() => {
-      setIsDragging(false);
-    }, []);
-
-    // Global mouseup for drag release
-    useEffect(() => {
-      if (!isDragging) return;
-
-      const handleGlobalMouseUp = () => setIsDragging(false);
-      window.addEventListener('mouseup', handleGlobalMouseUp);
-      return () => window.removeEventListener('mouseup', handleGlobalMouseUp);
-    }, [isDragging]);
-
-    // ==========================================================================
-    // EFFECTS
-    // ==========================================================================
-
-    // Redraw on any change
-    useEffect(() => {
-      draw();
-    }, [draw]);
-
-    // Redraw on resize
-    useEffect(() => {
-      const handleResize = () => draw();
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
-    }, [draw]);
-
-    // Expose redraw method
-    useImperativeHandle(ref, () => ({
-      redraw: draw,
-    }), [draw]);
-
-    return (
-      <div
-        ref={containerRef}
-        className={cn(
-          'relative w-full cursor-pointer select-none',
-          !interactive && 'cursor-default',
-          className
-        )}
-        style={{ height }}
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-        onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseUp}
-      >
-        <canvas
-          ref={canvasRef}
-          className="absolute inset-0"
-        />
-      </div>
-    );
-  }
-);
-
-// =============================================================================
-// HELPERS
-// =============================================================================
-
-/**
- * Draw rounded rectangle
- */
-function roundRect(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  radius: number
-) {
-  ctx.beginPath();
-  ctx.moveTo(x + radius, y);
-  ctx.lineTo(x + width - radius, y);
-  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-  ctx.lineTo(x + width, y + height - radius);
-  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-  ctx.lineTo(x + radius, y + height);
-  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-  ctx.lineTo(x, y + radius);
-  ctx.quadraticCurveTo(x, y, x + radius, y);
-  ctx.closePath();
-  ctx.fill();
-}
-
-/**
- * Resample peaks to target length
- */
-function resamplePeaks(peaks: number[], targetLength: number): number[] {
-  if (peaks.length === 0) return new Array(targetLength).fill(0);
-  if (peaks.length === targetLength) return peaks;
-
-  const result = new Array<number>(targetLength);
-  const ratio = peaks.length / targetLength;
-
-  for (let i = 0; i < targetLength; i++) {
-    const start = Math.floor(i * ratio);
-    const end = Math.min(Math.ceil((i + 1) * ratio), peaks.length);
-
-    let max = 0;
-    for (let j = start; j < end; j++) {
-      if (peaks[j] > max) max = peaks[j];
-    }
-    result[i] = max;
-  }
-
-  return result;
-}