@djangocfg/ui-nextjs 2.1.64 → 2.1.66

package/src/tools/AudioPlayer/AudioReactiveCover.tsx

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

package/src/tools/AudioPlayer/AudioShortcutsPopover.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+/**
+ * AudioShortcutsPopover
+ *
+ * Displays keyboard shortcuts for audio player controls.
+ */
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Button,
+  Kbd,
+  KbdGroup,
+  Separator,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@djangocfg/ui-nextjs';
+import { Keyboard } from 'lucide-react';
+import { AUDIO_SHORTCUTS } from './useAudioHotkeys';
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+interface AudioShortcutsPopoverProps {
+  /** Compact mode for smaller displays */
+  compact?: boolean;
+}
+
+export function AudioShortcutsPopover({ compact = false }: AudioShortcutsPopoverProps) {
+  const trigger = (
+    <PopoverTrigger asChild>
+      <Button
+        variant="ghost"
+        size="icon"
+        className={compact ? 'h-6 w-6' : 'size-7 text-muted-foreground hover:text-foreground'}
+        title={compact ? undefined : 'Keyboard shortcuts'}
+      >
+        <Keyboard className={compact ? 'h-3.5 w-3.5' : 'size-4'} />
+      </Button>
+    </PopoverTrigger>
+  );
+
+  return (
+    <Popover>
+      {compact ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+          <TooltipContent side="bottom">Shortcuts</TooltipContent>
+        </Tooltip>
+      ) : (
+        trigger
+      )}
+      <PopoverContent className="w-56 p-0" align="end">
+        <div className="px-3 py-2 border-b">
+          <h4 className="font-medium text-sm">Player Shortcuts</h4>
+        </div>
+        <div className="p-2 space-y-3 max-h-72 overflow-y-auto">
+          {AUDIO_SHORTCUTS.map((group, groupIndex) => (
+            <div key={group.title}>
+              {groupIndex > 0 && <Separator className="my-2" />}
+              <div className="text-xs font-medium text-muted-foreground mb-1.5 px-1">
+                {group.title}
+              </div>
+              <div className="space-y-1">
+                {group.shortcuts.map((shortcut) => (
+                  <div
+                    key={shortcut.label}
+                    className="flex items-center justify-between px-1 py-0.5"
+                  >
+                    <span className="text-sm text-foreground">
+                      {shortcut.label}
+                    </span>
+                    <KbdGroup>
+                      {shortcut.keys.map((key, i) => (
+                        <Kbd key={i} size="sm">
+                          {key}
+                        </Kbd>
+                      ))}
+                    </KbdGroup>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default AudioShortcutsPopover;