@djangocfg/ui-nextjs 2.1.82 → 2.1.84

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

@@ -1,267 +0,0 @@
-'use client';
-
-/**
- * useProgressiveWaveform - Hook for progressive audio waveform loading
- *
- * Fetches audio in chunks, decodes progressively, and extracts peaks.
- * Provides loading state and partial waveform data as it loads.
- */
-
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { extractPeaks, mergePeaks } from './peaks';
-import type { LoadedRange, DecoderOptions } from './types';
-
-// =============================================================================
-// CONSTANTS
-// =============================================================================
-
-const DEFAULT_CHUNK_SIZE = 512 * 1024; // 512KB
-const DEFAULT_PEAKS_PER_SECOND = 50;
-const MAX_PARALLEL_FETCHES = 2;
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-interface UseProgressiveWaveformOptions extends DecoderOptions {
-  /** Audio source URL */
-  url: string;
-  /** Known duration (from metadata) - improves initial render */
-  duration?: number;
-  /** Enabled */
-  enabled?: boolean;
-}
-
-interface UseProgressiveWaveformReturn {
-  /** Accumulated peaks (0-1 normalized) */
-  peaks: number[];
-  /** Loading progress (0-100) */
-  loadedPercent: number;
-  /** Is currently loading */
-  isLoading: boolean;
-  /** Is complete */
-  isComplete: boolean;
-  /** Error if any */
-  error: Error | null;
-  /** Loaded ranges (for visual indication) */
-  loadedRanges: LoadedRange[];
-  /** Detected duration */
-  detectedDuration: number;
-  /** Retry loading */
-  retry: () => void;
-}
-
-// =============================================================================
-// AUDIO CONTEXT SINGLETON
-// =============================================================================
-
-let audioContextInstance: AudioContext | null = null;
-
-function getAudioContext(): AudioContext {
-  if (!audioContextInstance) {
-    audioContextInstance = new (window.AudioContext || (window as any).webkitAudioContext)();
-  }
-  return audioContextInstance;
-}
-
-// =============================================================================
-// HOOK
-// =============================================================================
-
-export function useProgressiveWaveform(
-  options: UseProgressiveWaveformOptions
-): UseProgressiveWaveformReturn {
-  const {
-    url,
-    duration: knownDuration,
-    enabled = true,
-    chunkSize = DEFAULT_CHUNK_SIZE,
-    peaksPerSecond = DEFAULT_PEAKS_PER_SECOND,
-    parallelFetches = MAX_PARALLEL_FETCHES,
-  } = options;
-
-  // State
-  const [peaks, setPeaks] = useState<number[]>([]);
-  const [loadedPercent, setLoadedPercent] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [loadedRanges, setLoadedRanges] = useState<LoadedRange[]>([]);
-  const [detectedDuration, setDetectedDuration] = useState(knownDuration || 0);
-
-  // Refs
-  const abortControllerRef = useRef<AbortController | null>(null);
-  const accumulatedDataRef = useRef<ArrayBuffer[]>([]);
-  const totalSizeRef = useRef(0);
-  const loadedSizeRef = useRef(0);
-  const retryCountRef = useRef(0);
-
-  // ==========================================================================
-  // DECODE ACCUMULATED DATA
-  // ==========================================================================
-
-  const decodeAccumulated = useCallback(async () => {
-    const chunks = accumulatedDataRef.current;
-    if (chunks.length === 0) return;
-
-    try {
-      // Combine all chunks
-      const totalLength = chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0);
-      const combined = new Uint8Array(totalLength);
-      let offset = 0;
-      for (const chunk of chunks) {
-        combined.set(new Uint8Array(chunk), offset);
-        offset += chunk.byteLength;
-      }
-
-      // Decode
-      const audioContext = getAudioContext();
-      const audioBuffer = await audioContext.decodeAudioData(combined.buffer.slice(0));
-
-      // Extract peaks
-      const targetPeaks = Math.ceil(audioBuffer.duration * peaksPerSecond);
-      const newPeaks = extractPeaks(audioBuffer, { length: targetPeaks });
-
-      setPeaks(newPeaks);
-      setDetectedDuration(audioBuffer.duration);
-    } catch (err) {
-      // Decoding failed - might need more data
-      // This is expected for partial MP3 data
-      console.debug('Decode attempt failed, waiting for more data');
-    }
-  }, [peaksPerSecond]);
-
-  // ==========================================================================
-  // FETCH LOGIC
-  // ==========================================================================
-
-  const loadWaveform = useCallback(async () => {
-    if (!url || !enabled) return;
-
-    // Abort previous
-    abortControllerRef.current?.abort();
-    abortControllerRef.current = new AbortController();
-    const { signal } = abortControllerRef.current;
-
-    // Reset state
-    setIsLoading(true);
-    setIsComplete(false);
-    setError(null);
-    setPeaks([]);
-    setLoadedRanges([]);
-    setLoadedPercent(0);
-    accumulatedDataRef.current = [];
-    loadedSizeRef.current = 0;
-
-    try {
-      // Get file size with HEAD request
-      const headResponse = await fetch(url, { method: 'HEAD', signal });
-      const contentLength = headResponse.headers.get('content-length');
-      const totalSize = contentLength ? parseInt(contentLength, 10) : 0;
-      totalSizeRef.current = totalSize;
-
-      if (totalSize === 0) {
-        // Fallback: fetch entire file
-        const response = await fetch(url, { signal });
-        const data = await response.arrayBuffer();
-        accumulatedDataRef.current = [data];
-        await decodeAccumulated();
-        setIsComplete(true);
-        setLoadedPercent(100);
-        setIsLoading(false);
-        return;
-      }
-
-      // Fetch in chunks
-      let offset = 0;
-      const ranges: LoadedRange[] = [];
-
-      while (offset < totalSize) {
-        if (signal.aborted) return;
-
-        const end = Math.min(offset + chunkSize - 1, totalSize - 1);
-
-        const response = await fetch(url, {
-          headers: { Range: `bytes=${offset}-${end}` },
-          signal,
-        });
-
-        if (!response.ok && response.status !== 206) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-
-        const chunk = await response.arrayBuffer();
-        accumulatedDataRef.current.push(chunk);
-        loadedSizeRef.current += chunk.byteLength;
-
-        // Update progress
-        const progress = (loadedSizeRef.current / totalSize) * 100;
-        setLoadedPercent(progress);
-
-        // Update ranges
-        const rangeStart = offset / totalSize;
-        const rangeEnd = (offset + chunk.byteLength) / totalSize;
-        ranges.push({ start: rangeStart, end: rangeEnd });
-        setLoadedRanges([...ranges]);
-
-        // Try to decode periodically
-        if (accumulatedDataRef.current.length % 2 === 0 || offset + chunkSize >= totalSize) {
-          await decodeAccumulated();
-        }
-
-        offset += chunkSize;
-      }
-
-      // Final decode
-      await decodeAccumulated();
-      setIsComplete(true);
-    } catch (err) {
-      if ((err as Error).name === 'AbortError') return;
-
-      const error = err instanceof Error ? err : new Error('Loading failed');
-      setError(error);
-      console.error('Waveform loading error:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [url, enabled, chunkSize, decodeAccumulated]);
-
-  // ==========================================================================
-  // RETRY
-  // ==========================================================================
-
-  const retry = useCallback(() => {
-    retryCountRef.current += 1;
-    loadWaveform();
-  }, [loadWaveform]);
-
-  // ==========================================================================
-  // EFFECTS
-  // ==========================================================================
-
-  useEffect(() => {
-    loadWaveform();
-
-    return () => {
-      abortControllerRef.current?.abort();
-    };
-  }, [loadWaveform]);
-
-  // Update duration from prop
-  useEffect(() => {
-    if (knownDuration && knownDuration > 0 && detectedDuration === 0) {
-      setDetectedDuration(knownDuration);
-    }
-  }, [knownDuration, detectedDuration]);
-
-  return {
-    peaks,
-    loadedPercent,
-    isLoading,
-    isComplete,
-    error,
-    loadedRanges,
-    detectedDuration,
-    retry,
-  };
-}

package/src/tools/AudioPlayer/types/audio.ts

@@ -1,121 +0,0 @@
-/**
- * Core audio-related types
- */
-
-import type WaveSurfer from 'wavesurfer.js';
-import type { AudioLevels } from './effects';
-
-// =============================================================================
-// AUDIO SOURCE
-// =============================================================================
-
-export interface AudioSource {
-  /** Audio URL (streaming or direct) */
-  uri: string;
-  /**
-   * Pre-fetch the URL as blob before passing to WaveSurfer.
-   * Required for streaming URLs because WaveSurfer needs complete file for seek to work.
-   * When true, the URL will be fetched and converted to blob URL.
-   * @default false
-   */
-  prefetch?: boolean;
-}
-
-// =============================================================================
-// PLAYBACK STATE
-// =============================================================================
-
-export interface PlaybackStatus {
-  isLoaded: boolean;
-  isPlaying: boolean;
-  duration: number;
-  currentTime: number;
-  volume: number;
-  isMuted: boolean;
-}
-
-// =============================================================================
-// WAVEFORM OPTIONS
-// =============================================================================
-
-export interface WaveformOptions {
-  waveColor?: string;
-  progressColor?: string;
-  height?: number;
-  barWidth?: number;
-  barRadius?: number;
-  barGap?: number;
-  cursorWidth?: number;
-  cursorColor?: string;
-}
-
-// =============================================================================
-// EQUALIZER OPTIONS
-// =============================================================================
-
-export interface EqualizerOptions {
-  barCount?: number;
-  height?: number;
-  gap?: number;
-  showPeaks?: boolean;
-  barColor?: string;
-  peakColor?: string;
-}
-
-// =============================================================================
-// SHARED WEB AUDIO CONTEXT
-// =============================================================================
-
-export interface SharedWebAudioContext {
-  /** The Web Audio AudioContext instance */
-  audioContext: AudioContext | null;
-  /** The MediaElementSourceNode connected to the audio element */
-  sourceNode: MediaElementAudioSourceNode | null;
-  /** Create an AnalyserNode connected to the shared source */
-  createAnalyser: (options?: { fftSize?: number; smoothing?: number }) => AnalyserNode | null;
-  /** Disconnect and cleanup an AnalyserNode */
-  disconnectAnalyser: (analyser: AnalyserNode) => void;
-}
-
-// =============================================================================
-// AUDIO CONTEXT STATE
-// =============================================================================
-
-export interface AudioContextState {
-  // Core instances
-  wavesurfer: WaveSurfer | null;
-  audioElement: HTMLMediaElement | null;
-  /** Shared Web Audio context for analyzers */
-  sharedAudio: SharedWebAudioContext;
-
-  // Playback state
-  isReady: boolean;
-  isPlaying: boolean;
-  currentTime: number;
-  duration: number;
-  volume: number;
-  isMuted: boolean;
-  isLooping: boolean;
-
-  // Prefetch state (for streaming URLs)
-  /** Whether audio is being prefetched as blob */
-  isPrefetching: boolean;
-  /** Prefetch progress (0-100) */
-  prefetchProgress: number;
-
-  // Audio analysis (for reactive effects)
-  audioLevels: AudioLevels;
-
-  // Actions
-  play: () => Promise<void>;
-  pause: () => void;
-  togglePlay: () => void;
-  seek: (time: number) => void;
-  seekTo: (progress: number) => void;
-  skip: (seconds: number) => void;
-  setVolume: (volume: number) => void;
-  toggleMute: () => void;
-  toggleLoop: () => void;
-  setLoop: (enabled: boolean) => void;
-  restart: () => void;
-}

package/src/tools/AudioPlayer/types/components.ts

@@ -1,98 +0,0 @@
-/**
- * Component props types
- */
-
-import type { CSSProperties } from 'react';
-import type { WaveformOptions, EqualizerOptions, AudioSource, PlaybackStatus } from './audio';
-
-// =============================================================================
-// AUDIO PLAYER PROPS
-// =============================================================================
-
-export interface AudioPlayerProps {
-  /** Show playback controls */
-  showControls?: boolean;
-  /** Show waveform visualization */
-  showWaveform?: boolean;
-  /** Show equalizer animation */
-  showEqualizer?: boolean;
-  /** Show timer (position/duration) */
-  showTimer?: boolean;
-  /** Show volume control */
-  showVolume?: boolean;
-  /** Show loop/repeat button */
-  showLoop?: boolean;
-  /** WaveSurfer options override */
-  waveformOptions?: WaveformOptions;
-  /** Equalizer options */
-  equalizerOptions?: EqualizerOptions;
-  /** Additional class name */
-  className?: string;
-  /** Additional styles */
-  style?: CSSProperties;
-}
-
-// =============================================================================
-// AUDIO EQUALIZER PROPS
-// =============================================================================
-
-export interface AudioEqualizerProps {
-  /** Number of frequency bars */
-  barCount?: number;
-  /** Height of the equalizer in pixels */
-  height?: number;
-  /** Gap between bars in pixels */
-  gap?: number;
-  /** Show peak indicators */
-  showPeaks?: boolean;
-  /** Bar color (CSS color) */
-  barColor?: string;
-  /** Peak indicator color */
-  peakColor?: string;
-  /** Additional class name */
-  className?: string;
-}
-
-// =============================================================================
-// AUDIO REACTIVE COVER PROPS
-// =============================================================================
-
-export interface AudioReactiveCoverProps {
-  /** Visual variant */
-  variant?: 'glow' | 'orbs' | 'spotlight' | 'mesh';
-  /** Intensity of effects */
-  intensity?: 'subtle' | 'medium' | 'strong';
-  /** Color scheme */
-  colorScheme?: 'primary' | 'vibrant' | 'cool' | 'warm';
-}
-
-// =============================================================================
-// AUDIO VIEWER PROPS (legacy)
-// =============================================================================
-
-export interface AudioViewerProps {
-  /** Audio source URL */
-  source: AudioSource;
-  /** Auto-play when loaded */
-  autoPlay?: boolean;
-  /** Show playback controls */
-  showControls?: boolean;
-  /** Show waveform visualization */
-  showWaveform?: boolean;
-  /** Show equalizer animation */
-  showEqualizer?: boolean;
-  /** Show timer */
-  showTimer?: boolean;
-  /** Show volume control */
-  showVolume?: boolean;
-  /** Waveform options */
-  waveformOptions?: WaveformOptions;
-  /** Equalizer options */
-  equalizerOptions?: EqualizerOptions;
-  /** Callback on playback status change */
-  onPlaybackStatusUpdate?: (status: PlaybackStatus) => void;
-  /** Additional class name */
-  className?: string;
-  /** Additional styles */
-  style?: CSSProperties;
-}