@djangocfg/ui-nextjs 2.1.83 → 2.1.84

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

@@ -1,236 +0,0 @@
-'use client';
-
-/**
- * AudioPlayer - WaveSurfer-based player component (Legacy)
- *
- * @deprecated Consider using `HybridAudioPlayer` instead for better streaming
- * support and guaranteed no audio crackling.
- *
- * Uses AudioContext for state management.
- * Renders waveform (via container ref), controls, timer, and equalizer.
- * Supports keyboard shortcuts for playback control.
- *
- * @see HybridAudioPlayer for the recommended alternative
- */
-
-import { forwardRef } from 'react';
-import {
-  Play,
-  Pause,
-  RotateCcw,
-  SkipBack,
-  SkipForward,
-  Volume2,
-  VolumeX,
-  Loader2,
-  Repeat,
-} from 'lucide-react';
-import { Button, Slider, cn } from '@djangocfg/ui-nextjs';
-import { useAudio } from '../context';
-import { AudioEqualizer } from './AudioEqualizer';
-import { useAudioHotkeys } from '../hooks';
-import { AudioShortcutsPopover } from './AudioShortcutsPopover';
-import { formatTime } from '../utils';
-import type { AudioPlayerProps } from '../types';
-
-// =============================================================================
-// COMPONENT
-// =============================================================================
-
-export const AudioPlayer = forwardRef<HTMLDivElement, AudioPlayerProps>(
-  function AudioPlayer(
-    {
-      showControls = true,
-      showWaveform = true,
-      showEqualizer = false,
-      showTimer = true,
-      showVolume = true,
-      showLoop = true,
-      equalizerOptions = {},
-      className,
-      style,
-    },
-    ref
-  ) {
-    // Get all state and controls from context
-    const {
-      isReady,
-      isPlaying,
-      currentTime,
-      duration,
-      volume,
-      isMuted,
-      isLooping,
-      togglePlay,
-      restart,
-      skip,
-      setVolume,
-      toggleMute,
-      toggleLoop,
-    } = 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"
-                />
-              </>
-            )}
-
-            {/* Loop/Repeat */}
-            {showLoop && (
-              <Button
-                variant="ghost"
-                size="icon"
-                className={cn('h-9 w-9', isLooping && 'text-primary')}
-                onClick={toggleLoop}
-                disabled={!isReady}
-                title={isLooping ? 'Disable loop' : 'Enable loop'}
-              >
-                <Repeat className="h-4 w-4" />
-              </Button>
-            )}
-
-            {/* Shortcuts help */}
-            <AudioShortcutsPopover compact />
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-export default AudioPlayer;

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

@@ -1,99 +0,0 @@
-'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 '../hooks';
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-interface AudioShortcutsPopoverProps {
-  /** Compact mode for smaller displays */
-  compact?: boolean;
-}
-
-// =============================================================================
-// COMPONENT
-// =============================================================================
-
-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;

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

@@ -1,278 +0,0 @@
-'use client';
-
-/**
- * SimpleAudioPlayer - WaveSurfer-based audio player (Legacy)
- *
- * @deprecated Consider using `HybridSimplePlayer` instead for better streaming
- * support, lower memory usage, and guaranteed no audio crackling.
- *
- * Use SimpleAudioPlayer only when you specifically need the static waveform
- * visualization that shows the full audio amplitude shape.
- *
- * Migration:
- * ```tsx
- * // Before
- * <SimpleAudioPlayer src={url} prefetch reactiveCover />
- *
- * // After
- * <HybridSimplePlayer src={url} reactiveCover />
- * ```
- *
- * Key differences:
- * - HybridSimplePlayer: Real-time frequency bars, native streaming, no prefetch needed
- * - SimpleAudioPlayer: Static waveform shape, requires prefetch for streaming URLs
- */
-
-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;
-
-  /**
-   * Pre-fetch audio as blob before loading into WaveSurfer.
-   * Required for streaming URLs because WaveSurfer needs complete file for seek to work.
-   * @default true
-   */
-  prefetch?: boolean;
-
-  /** 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,
-  prefetch = true,
-  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, prefetch }}
-      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

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