@djangocfg/ui-nextjs 2.1.66 → 2.1.68

package/src/tools/AudioPlayer/context.tsx

@@ -1,426 +0,0 @@
-'use client';
-
-/**
- * AudioContext - Shared audio state and controls
- *
- * Provides centralized audio state management using WaveSurfer.js
- * All child components can access playback state and controls
- */
-
-import {
-  createContext,
-  useContext,
-  useRef,
-  useMemo,
-  useCallback,
-  useState,
-  useEffect,
-  type ReactNode,
-} from 'react';
-import { useWavesurfer } from '@wavesurfer/react';
-import type { AudioContextState, AudioSource, WaveformOptions } from './types';
-import type { AudioLevels } from './effects';
-
-// =============================================================================
-// AUDIO ANALYSIS HOOK (moved here to persist across variant changes)
-// =============================================================================
-
-function useAudioAnalysis(audioElement: HTMLMediaElement | null, isPlaying: boolean): AudioLevels {
-  const [levels, setLevels] = useState<AudioLevels>({ bass: 0, mid: 0, high: 0, overall: 0 });
-
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const analyserRef = useRef<AnalyserNode | null>(null);
-  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
-  const animationRef = useRef<number | null>(null);
-  const connectedElementRef = useRef<HTMLMediaElement | null>(null);
-
-  const cleanup = useCallback(() => {
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current);
-      animationRef.current = null;
-    }
-  }, []);
-
-  // Initialize Web Audio - persists for the lifetime of the provider
-  useEffect(() => {
-    if (!audioElement) {
-      cleanup();
-      return;
-    }
-
-    // Already connected to this element - skip
-    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;
-
-        if (!analyserRef.current) {
-          analyserRef.current = audioContext.createAnalyser();
-          analyserRef.current.fftSize = 256;
-          analyserRef.current.smoothingTimeConstant = 0.85;
-        }
-
-        // Only create source node if not already connected
-        if (connectedElementRef.current !== audioElement) {
-          if (sourceRef.current) {
-            try { sourceRef.current.disconnect(); } catch { /* ignore */ }
-          }
-
-          sourceRef.current = audioContext.createMediaElementSource(audioElement);
-          sourceRef.current.connect(analyserRef.current);
-          analyserRef.current.connect(audioContext.destination);
-          connectedElementRef.current = audioElement;
-        }
-      } catch (error) {
-        console.warn('AudioContext: Could not connect audio analysis', 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, cleanup]);
-
-  // Animation loop - runs continuously when playing
-  useEffect(() => {
-    if (!isPlaying || !analyserRef.current) {
-      cleanup();
-      // Smooth fade out
-      setLevels(prev => ({
-        bass: prev.bass * 0.95 < 0.01 ? 0 : prev.bass * 0.95,
-        mid: prev.mid * 0.95,
-        high: prev.high * 0.95,
-        overall: prev.overall * 0.95,
-      }));
-      return;
-    }
-
-    const analyser = analyserRef.current;
-    const dataArray = new Uint8Array(analyser.frequencyBinCount);
-
-    const animate = () => {
-      analyser.getByteFrequencyData(dataArray);
-      const binCount = dataArray.length;
-
-      // Bass (0-15%)
-      const bassEnd = Math.floor(binCount * 0.15);
-      let bassSum = 0;
-      for (let i = 0; i < bassEnd; i++) bassSum += dataArray[i];
-      const bass = bassSum / bassEnd / 255;
-
-      // Mids (15-50%)
-      const midStart = bassEnd;
-      const midEnd = Math.floor(binCount * 0.5);
-      let midSum = 0;
-      for (let i = midStart; i < midEnd; i++) midSum += dataArray[i];
-      const mid = midSum / (midEnd - midStart) / 255;
-
-      // Highs (50-100%)
-      const highStart = midEnd;
-      let highSum = 0;
-      for (let i = highStart; i < binCount; i++) highSum += dataArray[i];
-      const high = highSum / (binCount - highStart) / 255;
-
-      // Overall
-      let totalSum = 0;
-      for (let i = 0; i < binCount; i++) totalSum += dataArray[i];
-      const overall = totalSum / binCount / 255;
-
-      // Smooth with lerp
-      setLevels(prev => ({
-        bass: prev.bass * 0.7 + bass * 0.3,
-        mid: prev.mid * 0.7 + mid * 0.3,
-        high: prev.high * 0.7 + high * 0.3,
-        overall: prev.overall * 0.7 + overall * 0.3,
-      }));
-
-      animationRef.current = requestAnimationFrame(animate);
-    };
-
-    animationRef.current = requestAnimationFrame(animate);
-    return cleanup;
-  }, [isPlaying, cleanup]);
-
-  return levels;
-}
-
-// =============================================================================
-// CONTEXT
-// =============================================================================
-
-// Named AudioPlayerContext to avoid conflict with browser's AudioContext
-const AudioPlayerContext = createContext<AudioContextState | null>(null);
-
-// =============================================================================
-// PROVIDER PROPS
-// =============================================================================
-
-interface AudioProviderProps {
-  /** Audio source */
-  source: AudioSource;
-  /** Auto-play when loaded */
-  autoPlay?: boolean;
-  /** WaveSurfer options */
-  waveformOptions?: WaveformOptions;
-  /** Container ref for waveform rendering */
-  containerRef: React.RefObject<HTMLDivElement | null>;
-  /** Children components */
-  children: ReactNode;
-}
-
-// =============================================================================
-// PROVIDER
-// =============================================================================
-
-export function AudioProvider({
-  source,
-  autoPlay = false,
-  waveformOptions = {},
-  containerRef,
-  children,
-}: AudioProviderProps) {
-  // Memoize WaveSurfer options with theme-aware colors
-  const options = useMemo(
-    () => ({
-      container: containerRef,
-      url: source.uri,
-      // Theme-aware colors using HSL
-      waveColor: waveformOptions.waveColor || 'hsl(217 91% 60% / 0.3)',
-      progressColor: waveformOptions.progressColor || 'hsl(217 91% 60%)',
-      cursorColor: waveformOptions.cursorColor || 'hsl(217 91% 60%)',
-      cursorWidth: waveformOptions.cursorWidth ?? 2,
-      height: waveformOptions.height ?? 64,
-      barWidth: waveformOptions.barWidth ?? 3,
-      barRadius: waveformOptions.barRadius ?? 3,
-      barGap: waveformOptions.barGap ?? 2,
-      normalize: true,
-      interact: true,
-      hideScrollbar: true,
-      autoplay: autoPlay,
-    }),
-    [source.uri, autoPlay, waveformOptions, containerRef]
-  );
-
-  // Use official wavesurfer-react hook
-  const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer(options);
-
-  // Derived state
-  const duration = wavesurfer?.getDuration() ?? 0;
-  const volume = wavesurfer?.getVolume() ?? 1;
-  const isMuted = wavesurfer?.getMuted() ?? false;
-
-  // Get audio element for equalizer
-  const audioElement = useMemo(() => {
-    return wavesurfer?.getMediaElement() ?? null;
-  }, [wavesurfer]);
-
-  // Audio analysis for reactive effects (persists across variant changes)
-  const audioLevels = useAudioAnalysis(audioElement, isPlaying);
-
-  // Actions
-  const play = useCallback(async () => {
-    await wavesurfer?.play();
-  }, [wavesurfer]);
-
-  const pause = useCallback(() => {
-    wavesurfer?.pause();
-  }, [wavesurfer]);
-
-  const togglePlay = useCallback(() => {
-    wavesurfer?.playPause();
-  }, [wavesurfer]);
-
-  const seek = useCallback(
-    (time: number) => {
-      if (wavesurfer) {
-        const clampedTime = Math.max(0, Math.min(time, duration));
-        wavesurfer.setTime(clampedTime);
-      }
-    },
-    [wavesurfer, duration]
-  );
-
-  const seekTo = useCallback(
-    (progress: number) => {
-      if (wavesurfer) {
-        const clampedProgress = Math.max(0, Math.min(progress, 1));
-        wavesurfer.seekTo(clampedProgress);
-      }
-    },
-    [wavesurfer]
-  );
-
-  const skip = useCallback(
-    (seconds: number) => {
-      wavesurfer?.skip(seconds);
-    },
-    [wavesurfer]
-  );
-
-  const setVolume = useCallback(
-    (vol: number) => {
-      if (wavesurfer) {
-        wavesurfer.setVolume(Math.max(0, Math.min(vol, 1)));
-      }
-    },
-    [wavesurfer]
-  );
-
-  const toggleMute = useCallback(() => {
-    if (wavesurfer) {
-      wavesurfer.setMuted(!wavesurfer.getMuted());
-    }
-  }, [wavesurfer]);
-
-  const restart = useCallback(() => {
-    if (wavesurfer) {
-      wavesurfer.seekTo(0);
-      wavesurfer.play();
-    }
-  }, [wavesurfer]);
-
-  // Context value
-  const contextValue = useMemo<AudioContextState>(
-    () => ({
-      // Core instances
-      wavesurfer,
-      audioElement,
-
-      // Playback state
-      isReady,
-      isPlaying,
-      currentTime,
-      duration,
-      volume,
-      isMuted,
-
-      // Audio analysis
-      audioLevels,
-
-      // Actions
-      play,
-      pause,
-      togglePlay,
-      seek,
-      seekTo,
-      skip,
-      setVolume,
-      toggleMute,
-      restart,
-    }),
-    [
-      wavesurfer,
-      audioElement,
-      isReady,
-      isPlaying,
-      currentTime,
-      duration,
-      volume,
-      isMuted,
-      audioLevels,
-      play,
-      pause,
-      togglePlay,
-      seek,
-      seekTo,
-      skip,
-      setVolume,
-      toggleMute,
-      restart,
-    ]
-  );
-
-  return (
-    <AudioPlayerContext.Provider value={contextValue}>
-      {children}
-    </AudioPlayerContext.Provider>
-  );
-}
-
-// =============================================================================
-// HOOK
-// =============================================================================
-
-export function useAudio(): AudioContextState {
-  const context = useContext(AudioPlayerContext);
-  if (!context) {
-    throw new Error('useAudio must be used within an AudioProvider');
-  }
-  return context;
-}
-
-// =============================================================================
-// SELECTIVE HOOKS - for performance optimization
-// =============================================================================
-
-/** Hook for playback controls only (no re-render on time updates) */
-export function useAudioControls() {
-  const {
-    isReady,
-    play,
-    pause,
-    togglePlay,
-    skip,
-    restart,
-    setVolume,
-    toggleMute,
-  } = useAudio();
-
-  return {
-    isReady,
-    play,
-    pause,
-    togglePlay,
-    skip,
-    restart,
-    setVolume,
-    toggleMute,
-  };
-}
-
-/** Hook for playback state (read-only) */
-export function useAudioState() {
-  const {
-    isReady,
-    isPlaying,
-    currentTime,
-    duration,
-    volume,
-    isMuted,
-  } = useAudio();
-
-  return {
-    isReady,
-    isPlaying,
-    currentTime,
-    duration,
-    volume,
-    isMuted,
-  };
-}
-
-/** Hook for audio element access (for equalizer and reactive effects) */
-export function useAudioElement() {
-  const { audioElement, isPlaying, audioLevels } = useAudio();
-  return { audioElement, isPlaying, audioLevels };
-}