@djangocfg/ui-nextjs 2.1.89 → 2.1.91

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

@@ -1,279 +0,0 @@
-'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

@@ -1,149 +0,0 @@
-'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 '@djangocfg/ui-nextjs';
-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

@@ -1,110 +0,0 @@
-'use client';
-
-/**
- * GlowEffect - Multi-layer glow effect with pulse rings
- */
-
-import { cn } from '@djangocfg/ui-nextjs';
-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

@@ -1,58 +0,0 @@
-'use client';
-
-/**
- * MeshEffect - Mesh gradient blobs that react to audio
- */
-
-import { cn } from '@djangocfg/ui-nextjs';
-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

@@ -1,45 +0,0 @@
-'use client';
-
-/**
- * OrbsEffect - Floating orb particles that react to audio
- */
-
-import { cn } from '@djangocfg/ui-nextjs';
-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',
-          }}
-        />
-      ))}
-    </>
-  );
-}