@djangocfg/ui-tools 2.1.91

package/src/tools/AudioPlayer/components/HybridWaveform.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+/**
+ * HybridWaveform - Real-time frequency visualization for hybrid player.
+ *
+ * Two modes:
+ * - 'frequency': Real-time frequency bars (default, requires playing audio)
+ * - 'static': Static progress bar (for when no analyser is available)
+ *
+ * Features:
+ * - Shows buffered regions
+ * - Click to seek
+ * - Responsive width
+ */
+
+import { useRef, useEffect, useCallback, memo } from 'react';
+import { useHybridAudioContext } from '../context/HybridAudioProvider';
+import { cn } from '@djangocfg/ui-core/lib';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface HybridWaveformProps {
+  /** Visualization mode */
+  mode?: 'frequency' | 'static';
+  /** Canvas height in pixels */
+  height?: number;
+  /** Bar width in pixels */
+  barWidth?: number;
+  /** Gap between bars in pixels */
+  barGap?: number;
+  /** Bar border radius */
+  barRadius?: number;
+  /** Color for played portion */
+  progressColor?: string;
+  /** Color for unplayed portion */
+  waveColor?: string;
+  /** Color for buffered regions indicator */
+  bufferedColor?: string;
+  /** Additional CSS class */
+  className?: string;
+  /** Callback when user seeks */
+  onSeek?: (time: number) => void;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export const HybridWaveform = memo(function HybridWaveform({
+  mode = 'frequency',
+  height = 64,
+  barWidth = 3,
+  barGap = 2,
+  barRadius = 2,
+  progressColor = 'hsl(217 91% 60%)',
+  waveColor = 'hsl(217 91% 60% / 0.3)',
+  bufferedColor = 'hsl(217 91% 60% / 0.15)',
+  className,
+  onSeek,
+}: HybridWaveformProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animationRef = useRef<number | null>(null);
+  const { state, controls, webAudio } = useHybridAudioContext();
+
+  // Handle click to seek
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      const canvas = canvasRef.current;
+      if (!canvas || !state.duration) return;
+
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const progress = x / rect.width;
+      const time = state.duration * progress;
+
+      controls.seek(time);
+      onSeek?.(time);
+    },
+    [state.duration, controls, onSeek]
+  );
+
+  // Render frequency bars (real-time visualization)
+  const renderFrequency = useCallback(() => {
+    const canvas = canvasRef.current;
+    const analyser = webAudio.analyser;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const { width, height: canvasHeight } = canvas;
+    const dpr = window.devicePixelRatio || 1;
+    const displayWidth = width / dpr;
+
+    // Get frequency data if analyser is available
+    let dataArray: Uint8Array<ArrayBuffer> | null = null;
+    if (analyser) {
+      dataArray = new Uint8Array(analyser.frequencyBinCount) as Uint8Array<ArrayBuffer>;
+      analyser.getByteFrequencyData(dataArray);
+    }
+
+    ctx.clearRect(0, 0, width, canvasHeight);
+
+    // Draw buffered regions at bottom
+    if (state.buffered && state.duration > 0) {
+      ctx.fillStyle = bufferedColor;
+      for (let i = 0; i < state.buffered.length; i++) {
+        const start = (state.buffered.start(i) / state.duration) * width;
+        const end = (state.buffered.end(i) / state.duration) * width;
+        ctx.fillRect(start, canvasHeight - 3 * dpr, end - start, 3 * dpr);
+      }
+    }
+
+    // Calculate bar count based on available width
+    const barCount = Math.floor(displayWidth / (barWidth + barGap));
+    const progress = state.duration > 0 ? state.currentTime / state.duration : 0;
+    const progressX = width * progress;
+
+    // Draw bars
+    for (let i = 0; i < barCount; i++) {
+      let barHeight: number;
+
+      if (dataArray && state.isPlaying) {
+        // Real-time frequency data
+        const step = Math.floor(dataArray.length / barCount);
+        const value = dataArray[i * step] / 255;
+        barHeight = Math.max(4 * dpr, value * (canvasHeight - 6 * dpr) * 0.9);
+      } else {
+        // Static fallback - small bars
+        barHeight = 8 * dpr;
+      }
+
+      const x = i * (barWidth + barGap) * dpr;
+      const y = (canvasHeight - barHeight) / 2;
+
+      ctx.fillStyle = x < progressX ? progressColor : waveColor;
+
+      // Draw rounded rect
+      const radius = barRadius * dpr;
+      const rectWidth = barWidth * dpr;
+      ctx.beginPath();
+      ctx.roundRect(x, y, rectWidth, barHeight, radius);
+      ctx.fill();
+    }
+
+    // Continue animation if playing
+    if (state.isPlaying) {
+      animationRef.current = requestAnimationFrame(renderFrequency);
+    }
+  }, [
+    webAudio.analyser,
+    state.buffered,
+    state.duration,
+    state.currentTime,
+    state.isPlaying,
+    barWidth,
+    barGap,
+    barRadius,
+    progressColor,
+    waveColor,
+    bufferedColor,
+  ]);
+
+  // Render static progress bar
+  const renderStatic = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const { width, height: canvasHeight } = canvas;
+    const dpr = window.devicePixelRatio || 1;
+
+    ctx.clearRect(0, 0, width, canvasHeight);
+
+    // Draw buffered regions
+    if (state.buffered && state.duration > 0) {
+      ctx.fillStyle = bufferedColor;
+      for (let i = 0; i < state.buffered.length; i++) {
+        const start = (state.buffered.start(i) / state.duration) * width;
+        const end = (state.buffered.end(i) / state.duration) * width;
+        ctx.fillRect(start, 0, end - start, canvasHeight);
+      }
+    }
+
+    // Draw progress bar
+    const progress = state.duration > 0 ? state.currentTime / state.duration : 0;
+    const progressWidth = width * progress;
+
+    // Background
+    ctx.fillStyle = waveColor;
+    ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, width, 4 * dpr);
+
+    // Progress
+    ctx.fillStyle = progressColor;
+    ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, progressWidth, 4 * dpr);
+
+    // Handle
+    if (progress > 0) {
+      ctx.beginPath();
+      ctx.arc(progressWidth, canvasHeight / 2, 6 * dpr, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }, [state.buffered, state.duration, state.currentTime, progressColor, waveColor, bufferedColor]);
+
+  // Resize canvas to match container
+  useEffect(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+
+      const dpr = window.devicePixelRatio || 1;
+      const displayWidth = entry.contentRect.width;
+      const displayHeight = height;
+
+      canvas.width = displayWidth * dpr;
+      canvas.height = displayHeight * dpr;
+      canvas.style.width = `${displayWidth}px`;
+      canvas.style.height = `${displayHeight}px`;
+
+      // Re-render after resize
+      if (mode === 'frequency') {
+        renderFrequency();
+      } else {
+        renderStatic();
+      }
+    });
+
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [height, mode, renderFrequency, renderStatic]);
+
+  // Animation loop for frequency mode
+  useEffect(() => {
+    if (mode === 'frequency') {
+      renderFrequency();
+    }
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [mode, renderFrequency]);
+
+  // Re-render on time change for static mode
+  useEffect(() => {
+    if (mode === 'static') {
+      renderStatic();
+    }
+  }, [mode, state.currentTime, renderStatic]);
+
+  // Re-render frequency when playback state changes
+  useEffect(() => {
+    if (mode === 'frequency' && !state.isPlaying) {
+      // One final render when stopped
+      renderFrequency();
+    }
+  }, [mode, state.isPlaying, renderFrequency]);
+
+  return (
+    <div ref={containerRef} className={cn('w-full', className)}>
+      <canvas
+        ref={canvasRef}
+        onClick={handleClick}
+        className="cursor-pointer"
+        style={{ width: '100%', height }}
+      />
+    </div>
+  );
+});

package/src/tools/AudioPlayer/components/ReactiveCover/AudioReactiveCover.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+/**
+ * AudioReactiveCover - Album art with audio-reactive animations
+ *
+ * Uses effects utilities for clean data preparation before render.
+ * Click on cover to switch between effect variants.
+ *
+ * Must be used within HybridAudioProvider context.
+ */
+
+import { type ReactNode } from 'react';
+import { cn } from '../../../_shared';
+import { useHybridAudioLevels, useHybridAudioState } from '../../context/HybridAudioProvider';
+import {
+  type EffectVariant,
+  type EffectIntensity,
+  type EffectColorScheme,
+  getEffectConfig,
+  prepareEffectColors,
+  calculateGlowLayers,
+  calculateOrbs,
+  calculateMeshGradients,
+  calculateSpotlight,
+  EFFECT_ANIMATIONS,
+} from '../../effects';
+import { GlowEffect, OrbsEffect, SpotlightEffect, MeshEffect, type GlowEffectData } from './effects';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface AudioReactiveCoverProps {
+  children: ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: EffectVariant;
+  intensity?: EffectIntensity;
+  colorScheme?: EffectColorScheme;
+  onClick?: () => void;
+  className?: string;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const SIZES = {
+  sm: { container: 'w-32 h-32', orbBase: 40 },
+  md: { container: 'w-40 h-40', orbBase: 50 },
+  lg: { container: 'w-48 h-48', orbBase: 60 },
+};
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function AudioReactiveCover({
+  children,
+  size = 'lg',
+  variant = 'spotlight',
+  intensity = 'medium',
+  colorScheme = 'primary',
+  onClick,
+  className,
+}: AudioReactiveCoverProps) {
+  // Get audio state from HybridAudioProvider context
+  const { isPlaying } = useHybridAudioState();
+  const levels = useHybridAudioLevels();
+
+  // =========================================================================
+  // PREPARE DATA BEFORE RENDER
+  // =========================================================================
+
+  const sizeConfig = SIZES[size];
+  const effectConfig = getEffectConfig(intensity);
+  const { colors, hueShift } = prepareEffectColors(colorScheme, levels);
+
+  // Calculate scale based on overall level
+  const containerScale = 1 + levels.overall * effectConfig.scale;
+
+  // Prepare effect-specific data - NO memoization for real-time reactivity
+  const glowData: GlowEffectData | null = variant === 'glow' ? {
+    layers: calculateGlowLayers(levels, effectConfig, colors),
+    hueShift,
+    showPulseRings: levels.bass > 0.5,
+    showSparkle: levels.high > 0.4,
+  } : null;
+
+  const orbsData = variant === 'orbs'
+    ? calculateOrbs(levels, effectConfig, colors, sizeConfig.orbBase)
+    : null;
+
+  const meshData = variant === 'mesh'
+    ? calculateMeshGradients(levels, effectConfig, colors)
+    : null;
+
+  const spotlightData = variant === 'spotlight'
+    ? calculateSpotlight(levels, effectConfig, colors, levels.mid * 360)
+    : null;
+
+  // =========================================================================
+  // RENDER
+  // =========================================================================
+
+  return (
+    <div
+      className={cn('relative', sizeConfig.container, className)}
+      style={{
+        transform: `scale(${containerScale})`,
+        transition: 'transform 0.1s ease-out',
+      }}
+    >
+      {/* Effect layers container - under cover, non-interactive */}
+      <div className="absolute inset-0 z-0 pointer-events-none overflow-visible">
+        {glowData && (
+          <GlowEffect data={glowData} colors={colors} isPlaying={isPlaying} />
+        )}
+
+        {orbsData && (
+          <OrbsEffect orbs={orbsData} blur={effectConfig.blur} isPlaying={isPlaying} />
+        )}
+
+        {spotlightData && (
+          <SpotlightEffect data={spotlightData} colors={colors} blur={effectConfig.blur} isPlaying={isPlaying} />
+        )}
+
+        {meshData && (
+          <MeshEffect gradients={meshData} blur={effectConfig.blur} isPlaying={isPlaying} />
+        )}
+      </div>
+
+      {/* Content (cover art) */}
+      <div
+        className="relative w-full h-full rounded-lg overflow-hidden shadow-2xl z-10 bg-background cursor-pointer"
+        onClick={onClick}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        onKeyDown={onClick ? (e) => e.key === 'Enter' && onClick() : undefined}
+      >
+        {children}
+      </div>
+
+      {/* Inject animations once */}
+      <style dangerouslySetInnerHTML={{ __html: EFFECT_ANIMATIONS }} />
+    </div>
+  );
+}
+
+export default AudioReactiveCover;

package/src/tools/AudioPlayer/components/ReactiveCover/effects/GlowEffect.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+/**
+ * GlowEffect - Multi-layer glow effect with pulse rings
+ */
+
+import { cn } from '../../../../_shared';
+import type { calculateGlowLayers } from '../../../effects';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface GlowEffectData {
+  layers: ReturnType<typeof calculateGlowLayers>;
+  hueShift: number;
+  showPulseRings: boolean;
+  showSparkle: boolean;
+}
+
+interface GlowEffectProps {
+  data: GlowEffectData;
+  colors: string[];
+  isPlaying: boolean;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function GlowEffect({ data, colors, isPlaying }: GlowEffectProps) {
+  const { layers, hueShift, showPulseRings, showSparkle } = data;
+
+  return (
+    <>
+      {/* Main glow layers */}
+      {layers.map((layer, i) => (
+        <div
+          key={i}
+          className={cn('absolute rounded-2xl -z-10', layer.blur)}
+          style={{
+            inset: `-${layer.inset}px`,
+            background: layer.background,
+            opacity: isPlaying ? layer.opacity : 0,
+            transform: i < 2 ? `scaleY(${layer.scale})` : `scale(${layer.scale})`,
+            animation: isPlaying && layer.animation ? layer.animation : 'none',
+            transition: 'opacity 0.3s',
+          }}
+        />
+      ))}
+
+      {/* Rotating color sweep */}
+      <div
+        className="absolute rounded-2xl blur-xl overflow-hidden -z-10"
+        style={{
+          inset: '-75px',
+          opacity: isPlaying ? 0.6 : 0,
+          transition: 'opacity 0.5s',
+        }}
+      >
+        <div
+          className="absolute inset-0"
+          style={{
+            background: `conic-gradient(
+              from ${hueShift}deg at 50% 50%,
+              hsl(${colors[0]} / 0.4) 0deg,
+              hsl(${colors[1] || colors[0]} / 0.3) 90deg,
+              hsl(${colors[2] || colors[0]} / 0.3) 180deg,
+              hsl(${colors[3] || colors[0]} / 0.3) 270deg,
+              hsl(${colors[0]} / 0.4) 360deg
+            )`,
+            animation: isPlaying ? 'glow-rotate 6s linear infinite' : 'none',
+          }}
+        />
+      </div>
+
+      {/* Pulse rings on bass hits */}
+      {showPulseRings && (
+        <>
+          <div
+            className="absolute -inset-6 rounded-xl border-2 animate-ping -z-10"
+            style={{
+              borderColor: `hsl(${colors[0]} / 0.4)`,
+              animationDuration: '1s',
+            }}
+          />
+          <div
+            className="absolute -inset-12 rounded-2xl border animate-ping -z-10"
+            style={{
+              borderColor: `hsl(${colors[1] || colors[0]} / 0.3)`,
+              animationDuration: '1.5s',
+              animationDelay: '0.2s',
+            }}
+          />
+        </>
+      )}
+
+      {/* Sparkle on high frequencies */}
+      {showSparkle && (
+        <div
+          className="absolute -inset-18 rounded-3xl -z-10"
+          style={{
+            background: `radial-gradient(circle at 50% 30%, hsl(${colors[2] || colors[0]} / 0.5) 0%, transparent 30%)`,
+            animation: 'sparkle-move 0.5s ease-out',
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/tools/AudioPlayer/components/ReactiveCover/effects/MeshEffect.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+/**
+ * MeshEffect - Mesh gradient blobs that react to audio
+ */
+
+import { cn } from '../../../../_shared';
+import type { calculateMeshGradients } from '../../../effects';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface MeshEffectProps {
+  gradients: ReturnType<typeof calculateMeshGradients>;
+  blur: string;
+  isPlaying: boolean;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function MeshEffect({ gradients, isPlaying }: MeshEffectProps) {
+  return (
+    <>
+      {gradients.map((g, i) => {
+        const isCenter = 'isCenter' in g && g.isCenter;
+        const scale = 'scale' in g ? g.scale : 1;
+        const rotation = 'rotation' in g ? g.rotation : 0;
+        const itemBlur = 'blur' in g ? g.blur : 'blur-2xl';
+
+        return (
+          <div
+            key={i}
+            className={cn('absolute rounded-full -z-10', itemBlur)}
+            style={{
+              width: g.width,
+              height: g.height,
+              top: 'top' in g ? g.top : undefined,
+              bottom: 'bottom' in g ? g.bottom : undefined,
+              left: 'left' in g ? g.left : undefined,
+              right: 'right' in g ? g.right : undefined,
+              background: isCenter
+                ? `radial-gradient(circle, hsl(${g.color} / 0.6) 0%, hsl(${g.color} / 0.3) 30%, transparent 60%)`
+                : `radial-gradient(circle, hsl(${g.color}) 0%, hsl(${g.color} / 0.5) 30%, transparent 65%)`,
+              opacity: isPlaying ? g.opacity : 0,
+              transform: isCenter
+                ? `translate(-50%, -50%) scale(${scale})`
+                : `scale(${scale}) rotate(${rotation}deg)`,
+              transition: 'all 0.08s ease-out',
+            }}
+          />
+        );
+      })}
+    </>
+  );
+}

package/src/tools/AudioPlayer/components/ReactiveCover/effects/OrbsEffect.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+/**
+ * OrbsEffect - Floating orb particles that react to audio
+ */
+
+import { cn } from '../../../../_shared';
+import type { calculateOrbs } from '../../../effects';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface OrbsEffectProps {
+  orbs: ReturnType<typeof calculateOrbs>;
+  blur: string;
+  isPlaying: boolean;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function OrbsEffect({ orbs, blur, isPlaying }: OrbsEffectProps) {
+  return (
+    <>
+      {orbs.map((orb, i) => (
+        <div
+          key={i}
+          className={cn('absolute rounded-full -z-10', blur)}
+          style={{
+            width: orb.size,
+            height: orb.size,
+            left: `${orb.x}%`,
+            top: `${orb.y}%`,
+            background: `radial-gradient(circle at 30% 30%, hsl(${orb.color}) 0%, hsl(${orb.color} / 0.5) 40%, transparent 70%)`,
+            opacity: isPlaying ? orb.opacity : 0,
+            transform: `translate(-50%, -50%) scale(${orb.scale})`,
+            transition: 'all 0.08s ease-out',
+          }}
+        />
+      ))}
+    </>
+  );
+}