@djangocfg/ui-nextjs 2.1.82 → 2.1.84

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;
-}

package/src/tools/AudioPlayer/progressive/index.ts

@@ -1,40 +0,0 @@
-/**
- * Progressive Audio Player
- *
- * Audio player with progressive waveform loading.
- * Uses native HTML5 audio (supports Range requests) and custom canvas visualization.
- */
-
-// Components
-export { ProgressiveAudioPlayer } from './ProgressiveAudioPlayer';
-export { WaveformCanvas } from './WaveformCanvas';
-
-// Hooks
-export { useAudioElement } from './useAudioElement';
-export { useProgressiveWaveform } from './useProgressiveWaveform';
-
-// Utilities
-export {
-  extractPeaks,
-  mergePeaks,
-  resamplePeaks,
-  smoothPeaks,
-  calculatePeaksCount,
-  timeToIndex,
-  indexToTime,
-} from './peaks';
-
-// Types
-export type {
-  WaveformData,
-  LoadedRange,
-  WaveformLoadingState,
-  AudioState,
-  AudioControls,
-  WaveformStyle,
-  WaveformInteraction,
-  ProgressiveAudioPlayerProps,
-  ChunkInfo,
-  DecodeResult,
-  DecoderOptions,
-} from './types';

package/src/tools/AudioPlayer/progressive/peaks.ts

@@ -1,234 +0,0 @@
-/**
- * Audio Peaks Extraction Utilities
- *
- * Extracts waveform peaks from AudioBuffer for visualization.
- */
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-interface ExtractPeaksOptions {
-  /** Number of peaks to extract */
-  length: number;
-  /** Channel to use (0 = left, 1 = right, -1 = mix) */
-  channel?: number;
-  /** Normalize peaks to 0-1 range */
-  normalize?: boolean;
-}
-
-// =============================================================================
-// PEAK EXTRACTION
-// =============================================================================
-
-/**
- * Extract peaks from an AudioBuffer
- *
- * @param audioBuffer - Decoded audio buffer
- * @param options - Extraction options
- * @returns Array of normalized peak values (0-1)
- */
-export function extractPeaks(
-  audioBuffer: AudioBuffer,
-  options: ExtractPeaksOptions
-): number[] {
-  const { length, channel = -1, normalize = true } = options;
-
-  // Get channel data
-  let data: Float32Array;
-  if (channel === -1) {
-    // Mix all channels
-    data = mixChannels(audioBuffer);
-  } else {
-    data = audioBuffer.getChannelData(Math.min(channel, audioBuffer.numberOfChannels - 1));
-  }
-
-  const peaks = new Array<number>(length);
-  const samplesPerPeak = Math.floor(data.length / length);
-
-  let maxPeak = 0;
-
-  for (let i = 0; i < length; i++) {
-    const start = i * samplesPerPeak;
-    const end = Math.min(start + samplesPerPeak, data.length);
-
-    let max = 0;
-    for (let j = start; j < end; j++) {
-      const abs = Math.abs(data[j]);
-      if (abs > max) max = abs;
-    }
-
-    peaks[i] = max;
-    if (max > maxPeak) maxPeak = max;
-  }
-
-  // Normalize to 0-1
-  if (normalize && maxPeak > 0) {
-    for (let i = 0; i < length; i++) {
-      peaks[i] = peaks[i] / maxPeak;
-    }
-  }
-
-  return peaks;
-}
-
-/**
- * Mix all channels into mono
- */
-function mixChannels(audioBuffer: AudioBuffer): Float32Array {
-  const numChannels = audioBuffer.numberOfChannels;
-  const length = audioBuffer.length;
-  const mixed = new Float32Array(length);
-
-  for (let ch = 0; ch < numChannels; ch++) {
-    const channelData = audioBuffer.getChannelData(ch);
-    for (let i = 0; i < length; i++) {
-      mixed[i] += channelData[i];
-    }
-  }
-
-  // Average
-  const divisor = numChannels;
-  for (let i = 0; i < length; i++) {
-    mixed[i] /= divisor;
-  }
-
-  return mixed;
-}
-
-// =============================================================================
-// PEAK MERGING
-// =============================================================================
-
-/**
- * Merge two peaks arrays (for progressive loading)
- *
- * @param existing - Existing peaks array
- * @param newPeaks - New peaks to merge
- * @param startIndex - Start index for new peaks
- * @returns Merged peaks array
- */
-export function mergePeaks(
-  existing: number[],
-  newPeaks: number[],
-  startIndex: number
-): number[] {
-  const result = [...existing];
-
-  // Extend if needed
-  const neededLength = startIndex + newPeaks.length;
-  while (result.length < neededLength) {
-    result.push(0);
-  }
-
-  // Merge
-  for (let i = 0; i < newPeaks.length; i++) {
-    result[startIndex + i] = newPeaks[i];
-  }
-
-  return result;
-}
-
-// =============================================================================
-// PEAK RESAMPLING
-// =============================================================================
-
-/**
- * Resample peaks to a different length
- *
- * @param peaks - Source peaks
- * @param targetLength - Target number of peaks
- * @returns Resampled peaks
- */
-export 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;
-}
-
-// =============================================================================
-// PEAK SMOOTHING
-// =============================================================================
-
-/**
- * Smooth peaks using moving average
- *
- * @param peaks - Source peaks
- * @param windowSize - Smoothing window size
- * @returns Smoothed peaks
- */
-export function smoothPeaks(peaks: number[], windowSize: number = 3): number[] {
-  if (windowSize < 2 || peaks.length < windowSize) return [...peaks];
-
-  const result = new Array<number>(peaks.length);
-  const halfWindow = Math.floor(windowSize / 2);
-
-  for (let i = 0; i < peaks.length; i++) {
-    const start = Math.max(0, i - halfWindow);
-    const end = Math.min(peaks.length, i + halfWindow + 1);
-
-    let sum = 0;
-    for (let j = start; j < end; j++) {
-      sum += peaks[j];
-    }
-    result[i] = sum / (end - start);
-  }
-
-  return result;
-}
-
-// =============================================================================
-// PEAK CALCULATIONS
-// =============================================================================
-
-/**
- * Calculate peaks per second based on width and duration
- */
-export function calculatePeaksCount(
-  width: number,
-  barWidth: number,
-  barGap: number
-): number {
-  const totalBarSpace = barWidth + barGap;
-  return Math.floor(width / totalBarSpace);
-}
-
-/**
- * Calculate which peak index corresponds to a time
- */
-export function timeToIndex(
-  time: number,
-  duration: number,
-  peaksCount: number
-): number {
-  if (duration <= 0) return 0;
-  const progress = time / duration;
-  return Math.floor(progress * peaksCount);
-}
-
-/**
- * Calculate time from peak index
- */
-export function indexToTime(
-  index: number,
-  peaksCount: number,
-  duration: number
-): number {
-  if (peaksCount <= 0) return 0;
-  return (index / peaksCount) * duration;
-}