@djangocfg/ui-nextjs 2.1.64 → 2.1.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.64",
+  "version": "2.1.66",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.64",
-    "@djangocfg/ui-core": "^2.1.64",
+    "@djangocfg/api": "^2.1.66",
+    "@djangocfg/ui-core": "^2.1.66",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -78,16 +78,17 @@
     "@radix-ui/react-menubar": "^1.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.4",
-    "input-otp": "1.4.2",
     "@rjsf/core": "^6.1.2",
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
     "@vidstack/react": "next",
+    "@wavesurfer/react": "^1.0.12",
     "@web3icons/react": "^4.0.26",
     "chart.js": "^4.5.0",
     "class-variance-authority": "^0.7.1",
     "cytoscape": "^3.33.1",
     "cytoscape-cose-bilkent": "^4.1.0",
+    "input-otp": "1.4.2",
     "libphonenumber-js": "^1.12.24",
     "media-icons": "next",
     "mermaid": "^11.12.0",
@@ -100,13 +101,15 @@
     "react-lottie-player": "^2.1.0",
     "react-markdown": "10.1.0",
     "react-sticky-box": "^2.0.5",
+    "react-zoom-pan-pinch": "^3.7.0",
     "recharts": "2.15.4",
     "remark-gfm": "4.0.1",
     "sonner": "2.0.7",
-    "vidstack": "next"
+    "vidstack": "next",
+    "wavesurfer.js": "^7.12.1"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.64",
+    "@djangocfg/typescript-config": "^2.1.66",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/blocks/SplitHero/SplitHeroMedia.tsx

@@ -41,13 +41,14 @@ export const SplitHeroMedia: React.FC<SplitHeroMediaProps> = ({
         <div className={containerClass}>
           <VideoPlayer
             source={{
+              type: 'url',
               url: media.url,
               title: media.title,
               poster: media.poster,
             }}
             theme="modern"
             aspectRatio={16 / 9}
-            autoplay={media.autoplay}
+            autoPlay={media.autoplay}
             muted={media.muted ?? media.autoplay}
           />
         </div>

package/src/tools/AudioPlayer/AudioEqualizer.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+/**
+ * AudioEqualizer - Real-time frequency visualizer with animated bars
+ *
+ * Uses Web Audio API AnalyserNode for real-time frequency analysis
+ * Renders animated vertical bars that respond to audio playback
+ *
+ * Features:
+ * - Real-time frequency visualization
+ * - Configurable number of bars
+ * - Theme-aware colors (dark/light support)
+ * - Smooth animations with CSS transitions
+ * - Peak hold indicators
+ */
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { cn } from '@djangocfg/ui-nextjs';
+import { useAudioElement } from './context';
+import type { AudioEqualizerProps } from './types';
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const DEFAULT_BAR_COUNT = 24;
+const DEFAULT_HEIGHT = 48;
+const DEFAULT_GAP = 2;
+const PEAK_DECAY_RATE = 0.02;
+const PEAK_HOLD_TIME = 500;
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function AudioEqualizer({
+  barCount = DEFAULT_BAR_COUNT,
+  height = DEFAULT_HEIGHT,
+  gap = DEFAULT_GAP,
+  showPeaks = true,
+  barColor,
+  peakColor,
+  className,
+}: AudioEqualizerProps) {
+  // Get audio element and playing state from context
+  const { audioElement, isPlaying } = useAudioElement();
+
+  const [frequencies, setFrequencies] = useState<number[]>(() =>
+    new Array(barCount).fill(0)
+  );
+  const [peaks, setPeaks] = useState<number[]>(() =>
+    new Array(barCount).fill(0)
+  );
+
+  // Refs for Web Audio API
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
+  const animationRef = useRef<number | null>(null);
+  const peakTimersRef = useRef<number[]>(new Array(barCount).fill(0));
+  const connectedElementRef = useRef<HTMLMediaElement | null>(null);
+
+  // Cleanup function
+  const cleanup = useCallback(() => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+
+  // Initialize Web Audio API
+  useEffect(() => {
+    if (!audioElement) {
+      cleanup();
+      return;
+    }
+
+    // Avoid reconnecting same element
+    if (connectedElementRef.current === audioElement && audioContextRef.current) {
+      return;
+    }
+
+    const initAudio = () => {
+      try {
+        if (!audioContextRef.current) {
+          audioContextRef.current = new AudioContext();
+        }
+
+        const audioContext = audioContextRef.current;
+
+        if (!analyserRef.current) {
+          analyserRef.current = audioContext.createAnalyser();
+          analyserRef.current.fftSize = 64;
+          analyserRef.current.smoothingTimeConstant = 0.8;
+        }
+
+        if (connectedElementRef.current !== audioElement) {
+          if (sourceRef.current) {
+            try {
+              sourceRef.current.disconnect();
+            } catch {
+              // Ignore disconnect errors
+            }
+          }
+
+          sourceRef.current = audioContext.createMediaElementSource(audioElement);
+          sourceRef.current.connect(analyserRef.current);
+          analyserRef.current.connect(audioContext.destination);
+          connectedElementRef.current = audioElement;
+        }
+      } catch (error) {
+        console.warn('AudioEqualizer: Could not connect to audio element', error);
+      }
+    };
+
+    const handlePlay = () => {
+      initAudio();
+      if (audioContextRef.current?.state === 'suspended') {
+        audioContextRef.current.resume();
+      }
+    };
+
+    audioElement.addEventListener('play', handlePlay);
+
+    if (!audioElement.paused) {
+      handlePlay();
+    }
+
+    return () => {
+      audioElement.removeEventListener('play', handlePlay);
+    };
+  }, [audioElement, cleanup]);
+
+  // Animation loop
+  useEffect(() => {
+    if (!isPlaying || !analyserRef.current) {
+      cleanup();
+      setFrequencies(new Array(barCount).fill(0));
+      return;
+    }
+
+    const analyser = analyserRef.current;
+    const dataArray = new Uint8Array(analyser.frequencyBinCount);
+
+    const animate = () => {
+      analyser.getByteFrequencyData(dataArray);
+
+      const step = Math.floor(dataArray.length / barCount);
+      const newFrequencies: number[] = [];
+      const newPeaks: number[] = [...peaks];
+      const now = Date.now();
+
+      for (let i = 0; i < barCount; i++) {
+        let sum = 0;
+        for (let j = 0; j < step; j++) {
+          sum += dataArray[i * step + j] || 0;
+        }
+        const value = sum / step / 255;
+        newFrequencies.push(value);
+
+        if (showPeaks) {
+          if (value > newPeaks[i]) {
+            newPeaks[i] = value;
+            peakTimersRef.current[i] = now;
+          } else if (now - peakTimersRef.current[i] > PEAK_HOLD_TIME) {
+            newPeaks[i] = Math.max(0, newPeaks[i] - PEAK_DECAY_RATE);
+          }
+        }
+      }
+
+      setFrequencies(newFrequencies);
+      if (showPeaks) {
+        setPeaks(newPeaks);
+      }
+
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animationRef.current = requestAnimationFrame(animate);
+
+    return cleanup;
+  }, [isPlaying, barCount, showPeaks, cleanup, peaks]);
+
+  // Reset peaks array when barCount changes
+  useEffect(() => {
+    setPeaks(new Array(barCount).fill(0));
+    peakTimersRef.current = new Array(barCount).fill(0);
+  }, [barCount]);
+
+  // Calculate bar width
+  const totalGaps = (barCount - 1) * gap;
+  const barWidth = `calc((100% - ${totalGaps}px) / ${barCount})`;
+
+  return (
+    <div
+      className={cn('relative flex items-end justify-between', className)}
+      style={{ height }}
+    >
+      {frequencies.map((freq, index) => (
+        <div
+          key={index}
+          className="relative flex flex-col justify-end"
+          style={{
+            width: barWidth,
+            height: '100%',
+          }}
+        >
+          {/* Peak indicator */}
+          {showPeaks && peaks[index] > 0.01 && (
+            <div
+              className="absolute w-full transition-all duration-75"
+              style={{
+                height: 2,
+                bottom: `${peaks[index] * 100}%`,
+                backgroundColor: peakColor || 'hsl(217 91% 70%)',
+              }}
+            />
+          )}
+
+          {/* Frequency bar */}
+          <div
+            className="w-full rounded-t-sm transition-all duration-75"
+            style={{
+              height: `${Math.max(freq * 100, 2)}%`,
+              backgroundColor: barColor || 'hsl(217 91% 60%)',
+              opacity: 0.3 + freq * 0.7,
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default AudioEqualizer;

package/src/tools/AudioPlayer/AudioPlayer.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+/**
+ * AudioPlayer - Audio playback controls and waveform display
+ *
+ * Uses AudioContext for state management
+ * Renders waveform (via container ref), controls, timer, and equalizer
+ * Supports keyboard shortcuts for playback control
+ */
+
+import { forwardRef } from 'react';
+import {
+  Play,
+  Pause,
+  RotateCcw,
+  SkipBack,
+  SkipForward,
+  Volume2,
+  VolumeX,
+  Loader2,
+} from 'lucide-react';
+import { Button, Slider, cn } from '@djangocfg/ui-nextjs';
+import { useAudio } from './context';
+import { AudioEqualizer } from './AudioEqualizer';
+import { useAudioHotkeys } from './useAudioHotkeys';
+import { AudioShortcutsPopover } from './AudioShortcutsPopover';
+import type { AudioPlayerProps } from './types';
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatTime(seconds: number): string {
+  if (!seconds || !isFinite(seconds) || seconds < 0) return '0:00';
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export const AudioPlayer = forwardRef<HTMLDivElement, AudioPlayerProps>(
+  function AudioPlayer(
+    {
+      showControls = true,
+      showWaveform = true,
+      showEqualizer = false,
+      showTimer = true,
+      showVolume = true,
+      equalizerOptions = {},
+      className,
+      style,
+    },
+    ref
+  ) {
+    // Get all state and controls from context
+    const {
+      isReady,
+      isPlaying,
+      currentTime,
+      duration,
+      volume,
+      isMuted,
+      togglePlay,
+      restart,
+      skip,
+      setVolume,
+      toggleMute,
+    } = useAudio();
+
+    // Enable keyboard shortcuts
+    useAudioHotkeys({ enabled: isReady });
+
+    const isLoading = !isReady;
+
+    const handleVolumeChange = (value: number[]) => {
+      setVolume(value[0] / 100);
+    };
+
+    return (
+      <div
+        className={cn(
+          'flex flex-col gap-3 p-4 rounded-lg bg-card border',
+          className
+        )}
+        style={style}
+      >
+        {/* Waveform container - rendered by WaveSurfer via context */}
+        {showWaveform && (
+          <div className="relative">
+            <div
+              ref={ref}
+              className={cn(
+                'w-full rounded transition-opacity',
+                isLoading && 'opacity-50'
+              )}
+            />
+            {isLoading && (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Loader2 className="h-6 w-6 animate-spin text-primary" />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Equalizer animation */}
+        {showEqualizer && (
+          <AudioEqualizer
+            barCount={equalizerOptions.barCount}
+            height={equalizerOptions.height}
+            gap={equalizerOptions.gap}
+            showPeaks={equalizerOptions.showPeaks}
+            barColor={equalizerOptions.barColor}
+            peakColor={equalizerOptions.peakColor}
+            className="px-1"
+          />
+        )}
+
+        {/* Timer */}
+        {showTimer && (
+          <div className="flex justify-between text-xs text-muted-foreground tabular-nums px-1">
+            <span>{formatTime(currentTime)}</span>
+            <span>{formatTime(duration)}</span>
+          </div>
+        )}
+
+        {/* Controls */}
+        {showControls && (
+          <div className="flex items-center justify-center gap-1">
+            {/* Restart */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={restart}
+              disabled={!isReady}
+              title="Restart"
+            >
+              <RotateCcw className="h-4 w-4" />
+            </Button>
+
+            {/* Skip back 5s */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={() => skip(-5)}
+              disabled={!isReady}
+              title="Back 5 seconds"
+            >
+              <SkipBack className="h-4 w-4" />
+            </Button>
+
+            {/* Play/Pause */}
+            <Button
+              variant="default"
+              size="icon"
+              className="h-12 w-12 rounded-full"
+              onClick={togglePlay}
+              disabled={!isReady && !isLoading}
+              title={isPlaying ? 'Pause' : 'Play'}
+            >
+              {isLoading ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : isPlaying ? (
+                <Pause className="h-5 w-5" />
+              ) : (
+                <Play className="h-5 w-5 ml-0.5" />
+              )}
+            </Button>
+
+            {/* Skip forward 5s */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9"
+              onClick={() => skip(5)}
+              disabled={!isReady}
+              title="Forward 5 seconds"
+            >
+              <SkipForward className="h-4 w-4" />
+            </Button>
+
+            {/* Volume */}
+            {showVolume && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-9 w-9"
+                  onClick={toggleMute}
+                  title={isMuted ? 'Unmute' : 'Mute'}
+                >
+                  {isMuted || volume === 0 ? (
+                    <VolumeX className="h-4 w-4" />
+                  ) : (
+                    <Volume2 className="h-4 w-4" />
+                  )}
+                </Button>
+
+                <Slider
+                  value={[isMuted ? 0 : volume * 100]}
+                  max={100}
+                  step={1}
+                  onValueChange={handleVolumeChange}
+                  className="w-20"
+                  aria-label="Volume"
+                />
+              </>
+            )}
+
+            {/* Shortcuts help */}
+            <AudioShortcutsPopover compact />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+export default AudioPlayer;