@djangocfg/ui-nextjs 2.1.66 → 2.1.68

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 '@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

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

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

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

@@ -0,0 +1,82 @@
+'use client';
+
+/**
+ * SpotlightEffect - Rotating spotlight with conic gradients
+ */
+
+import { cn } from '@djangocfg/ui-nextjs';
+import type { calculateSpotlight } from '../../../effects';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface SpotlightEffectProps {
+  data: ReturnType<typeof calculateSpotlight>;
+  colors: string[];
+  blur: string;
+  isPlaying: boolean;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function SpotlightEffect({ data, colors, blur, isPlaying }: SpotlightEffectProps) {
+  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',
+        }}
+      />
+    </>
+  );
+}

package/src/tools/AudioPlayer/components/ReactiveCover/effects/index.ts

@@ -0,0 +1,8 @@
+/**
+ * ReactiveCover effects - Audio-reactive visual effects
+ */
+
+export { GlowEffect, type GlowEffectData } from './GlowEffect';
+export { OrbsEffect } from './OrbsEffect';
+export { SpotlightEffect } from './SpotlightEffect';
+export { MeshEffect } from './MeshEffect';

package/src/tools/AudioPlayer/components/ReactiveCover/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ReactiveCover - Audio-reactive cover art component
+ */
+
+export { AudioReactiveCover, type AudioReactiveCoverProps } from './AudioReactiveCover';
+export { GlowEffect, OrbsEffect, SpotlightEffect, MeshEffect, type GlowEffectData } from './effects';

package/src/tools/AudioPlayer/{SimpleAudioPlayer.tsx → components/SimpleAudioPlayer.tsx}

@@ -37,13 +37,13 @@ import { useRef, type ReactNode } from 'react';
 import { Music } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core';
 
-import { AudioProvider } from './context';
+import { AudioProvider } from '../context';
 import { AudioPlayer } from './AudioPlayer';
-import { AudioReactiveCover } from './AudioReactiveCover';
-import { VisualizationProvider, useAudioVisualization } from './useAudioVisualization';
-import type { WaveformOptions, EqualizerOptions } from './types';
-import type { EffectIntensity, EffectColorScheme } from './effects';
-import type { VisualizationVariant } from './useAudioVisualization';
+import { AudioReactiveCover } from './ReactiveCover';
+import { VisualizationProvider, useVisualization } from '../hooks';
+import type { WaveformOptions, EqualizerOptions } from '../types';
+import type { EffectIntensity, EffectColorScheme } from '../effects';
+import type { VisualizationVariant } from '../hooks';
 
 // =============================================================================
 // TYPES
@@ -77,6 +77,9 @@ export interface SimpleAudioPlayerProps {
   /** Show volume control */
   showVolume?: boolean;
 
+  /** Show loop/repeat button */
+  showLoop?: boolean;
+
   /** Enable audio-reactive cover effects */
   reactiveCover?: boolean;
 
@@ -137,6 +140,7 @@ function SimpleAudioPlayerContent({
   showEqualizer = false,
   showTimer = true,
   showVolume = true,
+  showLoop = true,
   reactiveCover = true,
   variant,
   intensity,
@@ -148,7 +152,7 @@ function SimpleAudioPlayerContent({
   className,
 }: SimpleAudioPlayerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const { settings: vizSettings, nextVariant } = useAudioVisualization();
+  const { settings: vizSettings, nextVariant } = useVisualization();
 
   // Determine effective variant (from props or localStorage settings)
   const effectiveVariant = variant ?? (vizSettings.variant !== 'none' ? vizSettings.variant : 'spotlight');
@@ -263,6 +267,7 @@ function SimpleAudioPlayerContent({
             showEqualizer={showEqualizer}
             showTimer={showTimer}
             showVolume={showVolume}
+            showLoop={showLoop}
             equalizerOptions={equalizerOptions}
             className="border-0 bg-transparent"
           />

package/src/tools/AudioPlayer/{VisualizationToggle.tsx → components/VisualizationToggle.tsx}

@@ -9,11 +9,7 @@
 
 import { Sparkles } from 'lucide-react';
 import { Button, cn } from '@djangocfg/ui-nextjs';
-import {
-  useAudioVisualization,
-  VARIANT_INFO,
-  type VisualizationVariant,
-} from './useAudioVisualization';
+import { useVisualization, VARIANT_INFO } from '../hooks';
 
 // =============================================================================
 // TYPES
@@ -34,7 +30,7 @@ export function VisualizationToggle({
   compact = false,
   className,
 }: VisualizationToggleProps) {
-  const { settings, nextVariant } = useAudioVisualization();
+  const { settings, nextVariant } = useVisualization();
 
   const currentInfo = VARIANT_INFO[settings.variant];
   const isEnabled = settings.variant !== 'none';

package/src/tools/AudioPlayer/components/index.ts

@@ -0,0 +1,21 @@
+/**
+ * AudioPlayer components - Public API
+ */
+
+// Main components
+export { AudioPlayer } from './AudioPlayer';
+export { SimpleAudioPlayer, type SimpleAudioPlayerProps } from './SimpleAudioPlayer';
+export { AudioEqualizer } from './AudioEqualizer';
+export { AudioShortcutsPopover } from './AudioShortcutsPopover';
+export { VisualizationToggle, type VisualizationToggleProps } from './VisualizationToggle';
+
+// ReactiveCover
+export {
+  AudioReactiveCover,
+  type AudioReactiveCoverProps,
+  GlowEffect,
+  OrbsEffect,
+  SpotlightEffect,
+  MeshEffect,
+  type GlowEffectData,
+} from './ReactiveCover';