@djangocfg/ui-nextjs 2.1.82 → 2.1.84

package/src/tools/AudioPlayer/hooks/useAudioSource.ts

@@ -1,155 +0,0 @@
-'use client';
-
-/**
- * useAudioSource - Handles audio source loading with optional prefetch
- *
- * For streaming URLs, WaveSurfer needs the complete file to enable seeking.
- * This hook fetches the URL as blob when prefetch is enabled.
- */
-
-import { useState, useEffect, useRef } from 'react';
-import type { AudioSource } from '../types';
-import { audioDebug } from '../utils/debug';
-
-export interface UseAudioSourceResult {
-  /** The resolved URL (blob URL if prefetched, original URL otherwise) */
-  url: string | null;
-  /** Whether the source is currently being fetched */
-  isLoading: boolean;
-  /** Error message if fetch failed */
-  error: string | null;
-  /** Progress percentage (0-100) during fetch */
-  progress: number;
-}
-
-export function useAudioSource(source: AudioSource): UseAudioSourceResult {
-  const [url, setUrl] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [progress, setProgress] = useState(0);
-  const blobUrlRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    // Cleanup previous blob URL
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
-      blobUrlRef.current = null;
-    }
-
-    // Reset state
-    setError(null);
-    setProgress(0);
-
-    // No prefetch - use URL directly
-    if (!source.prefetch) {
-      audioDebug.debug('Using direct URL (prefetch disabled)', { uri: source.uri });
-      setUrl(source.uri);
-      setIsLoading(false);
-      return;
-    }
-
-    // Prefetch enabled - fetch as blob
-    const abortController = new AbortController();
-    setIsLoading(true);
-
-    const fetchAsBlob = async () => {
-      try {
-        audioDebug.info('Prefetching audio as blob', { uri: source.uri });
-
-        const response = await fetch(source.uri, {
-          signal: abortController.signal,
-          headers: {
-            // Request full file - some servers require Range header
-            'Range': 'bytes=0-',
-          },
-        });
-
-        // Accept 200 OK or 206 Partial Content (response.ok covers both)
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-
-        // Get content length for progress tracking
-        // For Range requests, use Content-Range header (format: "bytes 0-1234/5678")
-        let totalBytes = 0;
-        const contentRange = response.headers.get('Content-Range');
-        if (contentRange) {
-          const match = contentRange.match(/\/(\d+)$/);
-          if (match) {
-            totalBytes = parseInt(match[1], 10);
-          }
-        } else {
-          const contentLength = response.headers.get('Content-Length');
-          totalBytes = contentLength ? parseInt(contentLength, 10) : 0;
-        }
-
-        if (!response.body) {
-          // Fallback for browsers without ReadableStream
-          const blob = await response.blob();
-          const blobUrl = URL.createObjectURL(blob);
-          blobUrlRef.current = blobUrl;
-          setUrl(blobUrl);
-          setProgress(100);
-          audioDebug.success('Audio prefetched (no stream)', { size: blob.size });
-          return;
-        }
-
-        // Stream the response for progress tracking
-        const reader = response.body.getReader();
-        const chunks: ArrayBuffer[] = [];
-        let receivedBytes = 0;
-
-        while (true) {
-          const { done, value } = await reader.read();
-
-          if (done) break;
-
-          // Convert Uint8Array to ArrayBuffer for Blob compatibility
-          chunks.push(value.buffer.slice(value.byteOffset, value.byteOffset + value.byteLength));
-          receivedBytes += value.length;
-
-          if (totalBytes > 0) {
-            setProgress(Math.round((receivedBytes / totalBytes) * 100));
-          }
-        }
-
-        // Combine chunks into blob
-        const blob = new Blob(chunks, { type: 'audio/mpeg' });
-        const blobUrl = URL.createObjectURL(blob);
-        blobUrlRef.current = blobUrl;
-        setUrl(blobUrl);
-        setProgress(100);
-
-        audioDebug.success('Audio prefetched', {
-          size: blob.size,
-          sizeFormatted: `${(blob.size / 1024 / 1024).toFixed(2)} MB`,
-        });
-      } catch (err) {
-        if (err instanceof Error && err.name === 'AbortError') {
-          return; // Ignore abort errors
-        }
-
-        const errorMessage = err instanceof Error ? err.message : 'Failed to prefetch audio';
-        audioDebug.error('Failed to prefetch audio', { error: errorMessage, uri: source.uri });
-        setError(errorMessage);
-
-        // Fallback to direct URL (may have seek issues)
-        setUrl(source.uri);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchAsBlob();
-
-    return () => {
-      abortController.abort();
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
-      }
-    };
-  }, [source.uri, source.prefetch]);
-
-  return { url, isLoading, error, progress };
-}

package/src/tools/AudioPlayer/hooks/useSharedWebAudio.ts

@@ -1,106 +0,0 @@
-'use client';
-
-/**
- * useSharedWebAudio - Manages a shared Web Audio context and source node.
- *
- * This prevents the "InvalidStateError" from creating multiple MediaElementSourceNodes
- * for the same audio element. All analyzers share the same source.
- */
-
-import { useRef, useEffect, useCallback } from 'react';
-import type { SharedWebAudioContext } from '../types';
-
-export function useSharedWebAudio(audioElement: HTMLMediaElement | null): SharedWebAudioContext {
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
-  const connectedElementRef = useRef<HTMLMediaElement | null>(null);
-  const analyserNodesRef = useRef<Set<AnalyserNode>>(new Set());
-
-  // Initialize Web Audio on first play
-  useEffect(() => {
-    if (!audioElement) return;
-
-    // Already connected to this element
-    if (connectedElementRef.current === audioElement && audioContextRef.current) {
-      return;
-    }
-
-    const initAudio = () => {
-      try {
-        if (!audioContextRef.current) {
-          const AudioContextClass = window.AudioContext ||
-            (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
-          audioContextRef.current = new AudioContextClass();
-        }
-
-        const audioContext = audioContextRef.current;
-
-        // Only create source node once per audio element
-        if (connectedElementRef.current !== audioElement) {
-          if (sourceRef.current) {
-            try { sourceRef.current.disconnect(); } catch { /* ignore */ }
-          }
-
-          sourceRef.current = audioContext.createMediaElementSource(audioElement);
-          // Connect directly to destination (analysers will be inserted in between)
-          sourceRef.current.connect(audioContext.destination);
-          connectedElementRef.current = audioElement;
-        }
-      } catch (error) {
-        console.warn('[SharedWebAudio] Could not initialize:', error);
-      }
-    };
-
-    const handlePlay = () => {
-      initAudio();
-      if (audioContextRef.current?.state === 'suspended') {
-        audioContextRef.current.resume();
-      }
-    };
-
-    audioElement.addEventListener('play', handlePlay);
-    if (!audioElement.paused) {
-      handlePlay();
-    }
-
-    return () => {
-      audioElement.removeEventListener('play', handlePlay);
-    };
-  }, [audioElement]);
-
-  // Create an analyser connected to the shared source
-  const createAnalyser = useCallback((options?: { fftSize?: number; smoothing?: number }): AnalyserNode | null => {
-    if (!audioContextRef.current || !sourceRef.current) return null;
-
-    try {
-      const analyser = audioContextRef.current.createAnalyser();
-      analyser.fftSize = options?.fftSize ?? 256;
-      analyser.smoothingTimeConstant = options?.smoothing ?? 0.85;
-
-      // Connect: source -> analyser -> destination
-      sourceRef.current.connect(analyser);
-      analyser.connect(audioContextRef.current.destination);
-
-      analyserNodesRef.current.add(analyser);
-      return analyser;
-    } catch (error) {
-      console.warn('[SharedWebAudio] Could not create analyser:', error);
-      return null;
-    }
-  }, []);
-
-  // Disconnect an analyser
-  const disconnectAnalyser = useCallback((analyser: AnalyserNode) => {
-    try {
-      analyser.disconnect();
-      analyserNodesRef.current.delete(analyser);
-    } catch { /* ignore */ }
-  }, []);
-
-  return {
-    audioContext: audioContextRef.current,
-    sourceNode: sourceRef.current,
-    createAnalyser,
-    disconnectAnalyser,
-  };
-}

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

@@ -1,295 +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
- */
-
-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;