@djangocfg/ui-nextjs 2.1.66 → 2.1.68

package/src/tools/AudioPlayer/AudioReactiveCover.tsx

@@ -1,389 +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.
- *
- * Audio analysis is performed in the AudioProvider context to persist
- * across variant changes (including switching to 'none' and back).
- */
-
-import { type ReactNode } from 'react';
-import { cn } from '@djangocfg/ui-nextjs';
-import { useAudioElement } from './context';
-import {
-  type EffectVariant,
-  type EffectIntensity,
-  type EffectColorScheme,
-  getEffectConfig,
-  prepareEffectColors,
-  calculateGlowLayers,
-  calculateOrbs,
-  calculateMeshGradients,
-  calculateSpotlight,
-  EFFECT_ANIMATIONS,
-} 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 levels from context (persists across variant changes)
-  const { isPlaying, audioLevels: levels } = useAudioElement();
-
-  // =========================================================================
-  // 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 = 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 */}
-      {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} />
-      )}
-
-      {/* 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>
-  );
-}
-
-// =============================================================================
-// EFFECT COMPONENTS (Pure render, no logic)
-// =============================================================================
-
-interface GlowEffectData {
-  layers: ReturnType<typeof calculateGlowLayers>;
-  hueShift: number;
-  showPulseRings: boolean;
-  showSparkle: boolean;
-}
-
-function GlowEffect({
-  data,
-  colors,
-  isPlaying
-}: {
-  data: GlowEffectData;
-  colors: string[];
-  isPlaying: boolean;
-}) {
-  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',
-          }}
-        />
-      )}
-    </>
-  );
-}
-
-function OrbsEffect({
-  orbs,
-  blur,
-  isPlaying
-}: {
-  orbs: ReturnType<typeof calculateOrbs>;
-  blur: string;
-  isPlaying: boolean;
-}) {
-  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',
-          }}
-        />
-      ))}
-    </>
-  );
-}
-
-function SpotlightEffect({
-  data,
-  colors,
-  blur,
-  isPlaying
-}: {
-  data: ReturnType<typeof calculateSpotlight>;
-  colors: string[];
-  blur: string;
-  isPlaying: boolean;
-}) {
-  const inset = 'inset' in data ? data.inset : 12;
-  const pulseInset = 'pulseInset' in data ? data.pulseInset : 24;
-  const ringOpacity = 'ringOpacity' in data ? data.ringOpacity : 0.3;
-  const ringScale = 'ringScale' in data ? data.ringScale : 1;
-
-  return (
-    <>
-      {/* Rotating conic gradient - reactive size */}
-      <div
-        className={cn('absolute rounded-xl -z-10', blur)}
-        style={{
-          inset: `-${inset}px`,
-          background: `conic-gradient(
-            from ${data.rotation}deg,
-            hsl(${colors[0]} / ${data.colors[0]?.opacity || 0.5}),
-            hsl(${colors[1] || colors[0]} / ${data.colors[1]?.opacity || 0.7}),
-            hsl(${colors[2] || colors[0]} / ${data.colors[2]?.opacity || 0.5}),
-            hsl(${colors[0]} / ${data.colors[1]?.opacity || 0.7}),
-            hsl(${colors[0]} / ${data.colors[0]?.opacity || 0.5})
-          )`,
-          opacity: isPlaying ? 1 : 0,
-          transition: 'all 0.08s ease-out',
-        }}
-      />
-
-      {/* Inner border */}
-      <div
-        className="absolute -inset-1 rounded-lg bg-background -z-10"
-        style={{ opacity: isPlaying ? 1 : 0, transition: 'opacity 0.1s' }}
-      />
-
-      {/* Bass pulse glow - reactive size */}
-      <div
-        className={cn('absolute rounded-2xl -z-10', blur)}
-        style={{
-          inset: `-${pulseInset}px`,
-          background: `radial-gradient(circle, hsl(${colors[0]} / 0.7) 0%, hsl(${colors[0]} / 0.3) 50%, transparent 70%)`,
-          opacity: isPlaying ? data.pulseOpacity : 0,
-          transform: `scale(${data.pulseScale})`,
-          transition: 'all 0.08s ease-out',
-        }}
-      />
-
-      {/* Outer ring glow */}
-      <div
-        className="absolute rounded-3xl -z-10 blur-2xl"
-        style={{
-          inset: `-${pulseInset + 30}px`,
-          background: `radial-gradient(circle, hsl(${colors[1] || colors[0]} / 0.4) 0%, transparent 60%)`,
-          opacity: isPlaying ? ringOpacity : 0,
-          transform: `scale(${ringScale})`,
-          transition: 'all 0.08s ease-out',
-        }}
-      />
-    </>
-  );
-}
-
-function MeshEffect({
-  gradients,
-  isPlaying
-}: {
-  gradients: ReturnType<typeof calculateMeshGradients>;
-  blur: string;
-  isPlaying: boolean;
-}) {
-  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',
-            }}
-          />
-        );
-      })}
-    </>
-  );
-}
-
-export default AudioReactiveCover;