@djangocfg/ui-nextjs 2.1.65 → 2.1.67

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/components/SimpleAudioPlayer.tsx

@@ -0,0 +1,280 @@
+'use client';
+
+/**
+ * SimpleAudioPlayer - Easy-to-use audio player wrapper
+ *
+ * Combines AudioProvider + AudioPlayer + optional reactive cover
+ * in a single component with sensible defaults.
+ *
+ * @example
+ * // Minimal usage
+ * <SimpleAudioPlayer src="https://example.com/audio.mp3" />
+ *
+ * @example
+ * // With cover art
+ * <SimpleAudioPlayer
+ *   src={audioUrl}
+ *   title="Track Title"
+ *   artist="Artist Name"
+ *   coverArt="/path/to/cover.jpg"
+ * />
+ *
+ * @example
+ * // Full customization
+ * <SimpleAudioPlayer
+ *   src={audioUrl}
+ *   title="Track Title"
+ *   coverArt={coverUrl}
+ *   showWaveform
+ *   showEqualizer={false}
+ *   reactiveCover
+ *   variant="spotlight"
+ *   autoPlay={false}
+ * />
+ */
+
+import { useRef, type ReactNode } from 'react';
+import { Music } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core';
+
+import { AudioProvider } from '../context';
+import { AudioPlayer } from './AudioPlayer';
+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
+// =============================================================================
+
+export interface SimpleAudioPlayerProps {
+  /** Audio source URL */
+  src: string;
+
+  /** Track title */
+  title?: string;
+
+  /** Artist name */
+  artist?: string;
+
+  /** Cover art URL or ReactNode */
+  coverArt?: string | ReactNode;
+
+  /** Cover art size */
+  coverSize?: 'sm' | 'md' | 'lg';
+
+  /** Show waveform visualization */
+  showWaveform?: boolean;
+
+  /** Show equalizer bars */
+  showEqualizer?: boolean;
+
+  /** Show timer */
+  showTimer?: boolean;
+
+  /** Show volume control */
+  showVolume?: boolean;
+
+  /** Show loop/repeat button */
+  showLoop?: boolean;
+
+  /** Enable audio-reactive cover effects */
+  reactiveCover?: boolean;
+
+  /** Reactive effect variant */
+  variant?: VisualizationVariant;
+
+  /** Reactive effect intensity */
+  intensity?: EffectIntensity;
+
+  /** Reactive effect color scheme */
+  colorScheme?: EffectColorScheme;
+
+  /** Auto-play on load */
+  autoPlay?: boolean;
+
+  /** Waveform customization */
+  waveformOptions?: WaveformOptions;
+
+  /** Equalizer customization */
+  equalizerOptions?: EqualizerOptions;
+
+  /** Layout direction */
+  layout?: 'vertical' | 'horizontal';
+
+  /** Additional class name */
+  className?: string;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const COVER_SIZES = {
+  sm: 'w-24 h-24',
+  md: 'w-32 h-32',
+  lg: 'w-48 h-48',
+};
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function SimpleAudioPlayer(props: SimpleAudioPlayerProps) {
+  return (
+    <VisualizationProvider>
+      <SimpleAudioPlayerContent {...props} />
+    </VisualizationProvider>
+  );
+}
+
+function SimpleAudioPlayerContent({
+  src,
+  title,
+  artist,
+  coverArt,
+  coverSize = 'md',
+  showWaveform = true,
+  showEqualizer = false,
+  showTimer = true,
+  showVolume = true,
+  showLoop = true,
+  reactiveCover = true,
+  variant,
+  intensity,
+  colorScheme,
+  autoPlay = false,
+  waveformOptions,
+  equalizerOptions,
+  layout = 'vertical',
+  className,
+}: SimpleAudioPlayerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { settings: vizSettings, nextVariant } = useVisualization();
+
+  // Determine effective variant (from props or localStorage settings)
+  const effectiveVariant = variant ?? (vizSettings.variant !== 'none' ? vizSettings.variant : 'spotlight');
+  const effectiveIntensity = intensity ?? vizSettings.intensity;
+  const effectiveColorScheme = colorScheme ?? vizSettings.colorScheme;
+
+  // Show reactive cover if enabled and variant is not 'none'
+  const showReactiveCover = reactiveCover && effectiveVariant !== 'none';
+
+  // Render cover art content
+  const renderCoverContent = () => {
+    if (typeof coverArt === 'string') {
+      return (
+        <img
+          src={coverArt}
+          alt={title || 'Album cover'}
+          className="w-full h-full object-cover"
+        />
+      );
+    }
+
+    if (coverArt) {
+      return coverArt;
+    }
+
+    // Default placeholder
+    return (
+      <div className="w-full h-full bg-muted/30 flex items-center justify-center">
+        <Music className="w-1/3 h-1/3 text-muted-foreground/50" />
+      </div>
+    );
+  };
+
+  const isHorizontal = layout === 'horizontal';
+
+  return (
+    <AudioProvider
+      source={{ uri: src }}
+      containerRef={containerRef}
+      autoPlay={autoPlay}
+      waveformOptions={waveformOptions}
+    >
+      <div
+        className={cn(
+          'flex gap-4',
+          isHorizontal ? 'flex-row items-center' : 'flex-col items-center',
+          className
+        )}
+      >
+        {/* Cover Art */}
+        {(coverArt || reactiveCover) && (
+          <div className="flex flex-col items-center gap-2 shrink-0">
+            {showReactiveCover ? (
+              <AudioReactiveCover
+                size={coverSize}
+                variant={effectiveVariant as 'glow' | 'orbs' | 'spotlight' | 'mesh'}
+                intensity={effectiveIntensity}
+                colorScheme={effectiveColorScheme}
+                onClick={nextVariant}
+              >
+                <div className={cn('rounded-lg overflow-hidden', COVER_SIZES[coverSize])}>
+                  {renderCoverContent()}
+                </div>
+              </AudioReactiveCover>
+            ) : (
+              <div
+                className={cn(
+                  'rounded-lg overflow-hidden shadow-lg cursor-pointer',
+                  COVER_SIZES[coverSize]
+                )}
+                onClick={nextVariant}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => e.key === 'Enter' && nextVariant()}
+              >
+                {renderCoverContent()}
+              </div>
+            )}
+
+            {/* Effect indicator */}
+            {reactiveCover && (
+              <span className="text-[10px] uppercase tracking-wider text-muted-foreground/50 select-none">
+                {vizSettings.variant === 'none' ? 'off' : vizSettings.variant}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Track Info + Player */}
+        <div className={cn('flex flex-col gap-3', isHorizontal ? 'flex-1 min-w-0' : 'w-full max-w-md')}>
+          {/* Track Info */}
+          {(title || artist) && (
+            <div className={cn('text-center', isHorizontal && 'text-left')}>
+              {title && (
+                <h3 className="text-base font-medium text-foreground truncate">
+                  {title}
+                </h3>
+              )}
+              {artist && (
+                <p className="text-sm text-muted-foreground truncate">
+                  {artist}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Audio Player */}
+          <AudioPlayer
+            ref={containerRef}
+            showControls
+            showWaveform={showWaveform}
+            showEqualizer={showEqualizer}
+            showTimer={showTimer}
+            showVolume={showVolume}
+            showLoop={showLoop}
+            equalizerOptions={equalizerOptions}
+            className="border-0 bg-transparent"
+          />
+        </div>
+      </div>
+    </AudioProvider>
+  );
+}
+
+export default SimpleAudioPlayer;

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

@@ -0,0 +1,64 @@
+'use client';
+
+/**
+ * VisualizationToggle - Simple toggle for audio visualization settings
+ *
+ * Click: cycle through variants
+ * Long press / right click: opens menu (future)
+ */
+
+import { Sparkles } from 'lucide-react';
+import { Button, cn } from '@djangocfg/ui-nextjs';
+import { useVisualization, VARIANT_INFO } from '../hooks';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface VisualizationToggleProps {
+  /** Compact mode (icon only) */
+  compact?: boolean;
+  /** Additional class name */
+  className?: string;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function VisualizationToggle({
+  compact = false,
+  className,
+}: VisualizationToggleProps) {
+  const { settings, nextVariant } = useVisualization();
+
+  const currentInfo = VARIANT_INFO[settings.variant];
+  const isEnabled = settings.variant !== 'none';
+
+  return (
+    <Button
+      variant={isEnabled ? 'secondary' : 'ghost'}
+      size={compact ? 'icon' : 'sm'}
+      className={cn(
+        'transition-all',
+        isEnabled && 'bg-primary/10 text-primary hover:bg-primary/20',
+        className
+      )}
+      onClick={nextVariant}
+      title={`Visualization: ${currentInfo.label} (click to change)`}
+    >
+      <Sparkles
+        className={cn(
+          'h-4 w-4',
+          isEnabled && 'text-primary',
+          !compact && 'mr-1.5'
+        )}
+      />
+      {!compact && (
+        <span className="text-xs">{currentInfo.label}</span>
+      )}
+    </Button>
+  );
+}
+
+export default VisualizationToggle;

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