@djangocfg/ui-nextjs 2.1.64 → 2.1.66

package/src/tools/AudioPlayer/context.tsx

@@ -0,0 +1,426 @@
+'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 };
+}