@djangocfg/ui-nextjs 2.1.65 → 2.1.66

package/src/tools/index.ts

@@ -9,6 +9,8 @@
  * - JsonForm: ~300KB (JSON Schema form generator)
  * - OpenapiViewer: ~400KB (OpenAPI schema viewer & playground)
  * - VideoPlayer: ~150KB (Professional video player with Vidstack)
+ * - AudioPlayer: ~200KB (Audio player with WaveSurfer.js)
+ * - ImageViewer: ~50KB (Image viewer with zoom/pan/rotate)
  */
 
 // Export tools as named exports (all use dynamic imports internally)
@@ -39,11 +41,87 @@ export { default as OpenapiViewer } from './OpenapiViewer';
 export type { PlaygroundConfig, SchemaSource, PlaygroundProps } from './OpenapiViewer';
 
 // Export VideoPlayer
-export { VideoPlayer, VideoUrlError, VideoControls, NativePlayer } from './VideoPlayer';
+export {
+  VideoPlayer,
+  VideoControls,
+  VidstackProvider,
+  NativeProvider,
+  StreamProvider,
+  VideoPlayerProvider,
+  useVideoPlayerContext,
+  VideoErrorFallback,
+  createVideoErrorFallback,
+  resolvePlayerMode,
+  resolveFileSource,
+  isSimpleStreamSource,
+  resolveStreamSource,
+} from './VideoPlayer';
 export type {
-  VideoSource,
+  VideoSourceUnion,
+  UrlSource,
+  YouTubeSource,
+  VimeoSource,
+  HLSSource,
+  DASHSource,
+  StreamSource,
+  BlobSource,
+  DataUrlSource,
+  PlayerMode,
+  AspectRatioValue,
   VideoPlayerProps,
   VideoPlayerRef,
-  NativePlayerProps,
-  NativePlayerRef,
+  ErrorFallbackProps,
+  ResolveFileSourceOptions,
+  VideoPlayerContextValue,
+  VideoPlayerProviderProps,
+  SimpleStreamSource,
+  VideoErrorFallbackProps,
+  CreateVideoErrorFallbackOptions,
 } from './VideoPlayer';
+
+// Export AudioPlayer
+export {
+  // Simple wrapper (recommended)
+  SimpleAudioPlayer,
+  // Core components
+  AudioPlayer,
+  AudioEqualizer,
+  AudioReactiveCover,
+  AudioShortcutsPopover,
+  VisualizationToggle,
+  AudioProvider,
+  useAudio,
+  useAudioControls,
+  useAudioState,
+  useAudioElement,
+  useAudioHotkeys,
+  AUDIO_SHORTCUTS,
+  useAudioVisualization,
+  VisualizationProvider,
+  VARIANT_INFO,
+  INTENSITY_INFO,
+  COLOR_SCHEME_INFO,
+} from './AudioPlayer';
+export type {
+  SimpleAudioPlayerProps,
+  AudioSource,
+  PlaybackStatus,
+  WaveformOptions,
+  EqualizerOptions,
+  AudioContextState,
+  AudioPlayerProps,
+  AudioEqualizerProps,
+  AudioReactiveCoverProps,
+  AudioViewerProps,
+  VisualizationSettings,
+  VisualizationVariant,
+  VisualizationIntensity,
+  VisualizationColorScheme,
+  AudioHotkeyOptions,
+  ShortcutItem,
+  ShortcutGroup,
+} from './AudioPlayer';
+
+// Export ImageViewer
+export { ImageViewer } from './ImageViewer';
+export type { ImageViewerProps, ImageFile } from './ImageViewer';

package/src/tools/VideoPlayer/NativePlayer.tsx

@@ -1,141 +0,0 @@
-/**
- * NativePlayer - Lightweight native HTML5 video player
- * For demo videos, background videos, autoplay loop muted scenarios
- * Use VideoPlayer (Vidstack) for full-featured player with controls
- */
-
-'use client';
-
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-import { Preloader, AspectRatio } from '@djangocfg/ui-core';
-
-import type { NativePlayerProps, NativePlayerRef } from './types';
-
-export const NativePlayer = forwardRef<NativePlayerRef, NativePlayerProps>(
-  (
-    {
-      src,
-      poster,
-      aspectRatio = 16 / 9,
-      autoPlay = true,
-      muted = true,
-      loop = true,
-      playsInline = true,
-      preload = 'auto',
-      controls = false,
-      disableContextMenu = true,
-      showPreloader = true,
-      preloaderTimeout = 5000,
-      className,
-      videoClassName,
-      preloaderClassName,
-      onLoadStart,
-      onCanPlay,
-      onPlaying,
-      onEnded,
-      onError,
-    },
-    ref
-  ) => {
-    const [isLoading, setIsLoading] = useState(showPreloader);
-    const videoRef = useRef<HTMLVideoElement>(null);
-
-    // Expose video element methods via ref
-    useImperativeHandle(ref, () => ({
-      play: () => videoRef.current?.play(),
-      pause: () => videoRef.current?.pause(),
-      get currentTime() {
-        return videoRef.current?.currentTime ?? 0;
-      },
-      set currentTime(time: number) {
-        if (videoRef.current) videoRef.current.currentTime = time;
-      },
-      get paused() {
-        return videoRef.current?.paused ?? true;
-      },
-      get element() {
-        return videoRef.current;
-      },
-    }));
-
-    useEffect(() => {
-      if (!showPreloader) return;
-
-      const video = videoRef.current;
-      if (!video) return;
-
-      // Check if video is already loaded (readyState >= HAVE_FUTURE_DATA)
-      if (video.readyState >= 3) {
-        setIsLoading(false);
-        return;
-      }
-
-      const hideLoader = () => setIsLoading(false);
-
-      // Listen to multiple events for better browser support
-      video.addEventListener('canplay', hideLoader);
-      video.addEventListener('loadeddata', hideLoader);
-      video.addEventListener('playing', hideLoader);
-
-      // Fallback: hide loader after timeout even if video fails (shows poster instead)
-      const timeout = setTimeout(hideLoader, preloaderTimeout);
-
-      return () => {
-        video.removeEventListener('canplay', hideLoader);
-        video.removeEventListener('loadeddata', hideLoader);
-        video.removeEventListener('playing', hideLoader);
-        clearTimeout(timeout);
-      };
-    }, [showPreloader, preloaderTimeout]);
-
-    const handleContextMenu = (e: React.MouseEvent) => {
-      if (disableContextMenu) {
-        e.preventDefault();
-      }
-    };
-
-    return (
-      <div className={cn('relative overflow-hidden', className)}>
-        <AspectRatio ratio={aspectRatio}>
-          {/* Preloader */}
-          {showPreloader && isLoading && (
-            <div
-              className={cn(
-                'absolute inset-0 flex items-center justify-center bg-muted/30 backdrop-blur-sm z-10',
-                preloaderClassName
-              )}
-            >
-              <Preloader size="lg" spinnerClassName="text-white" />
-            </div>
-          )}
-
-          {/* Video */}
-          <video
-            ref={videoRef}
-            className={cn('w-full h-full object-cover', videoClassName)}
-            autoPlay={autoPlay}
-            muted={muted}
-            loop={loop}
-            playsInline={playsInline}
-            preload={preload}
-            controls={controls}
-            poster={poster}
-            onContextMenu={handleContextMenu}
-            onLoadStart={onLoadStart}
-            onCanPlay={onCanPlay}
-            onPlaying={onPlaying}
-            onEnded={onEnded}
-            onError={onError}
-          >
-            <source src={src} type="video/mp4" />
-            Your browser does not support the video tag.
-          </video>
-        </AspectRatio>
-      </div>
-    );
-  }
-);
-
-NativePlayer.displayName = 'NativePlayer';