@djangocfg/ui-nextjs 2.1.65 → 2.1.67

package/src/tools/VideoPlayer/utils/fileSource.ts

@@ -0,0 +1,78 @@
+/**
+ * File source resolution utilities
+ */
+
+import type { VideoSourceUnion, ResolveFileSourceOptions } from '../types';
+
+/**
+ * Resolve file content to VideoSourceUnion
+ * Useful for FileWorkspace/file manager integrations
+ *
+ * @example
+ * const source = resolveFileSource({
+ *   content: file.content,
+ *   path: file.path,
+ *   mimeType: file.mimeType,
+ *   sessionId: sessionId,
+ *   loadMethod: file.loadMethod,
+ *   getStreamUrl: terminalClient.terminal_media.streamStreamRetrieveUrl
+ * });
+ *
+ * <VideoPlayer source={source} />
+ */
+export function resolveFileSource(options: ResolveFileSourceOptions): VideoSourceUnion | null {
+  const {
+    content,
+    path,
+    mimeType,
+    sessionId,
+    loadMethod,
+    getStreamUrl,
+    title,
+    poster,
+  } = options;
+
+  const contentSize = content
+    ? typeof content === 'string'
+      ? content.length
+      : content.byteLength
+    : 0;
+  const hasContent = contentSize > 0;
+
+  // Priority 1: HTTP Range streaming for large files
+  if (loadMethod === 'http_stream' && !hasContent && sessionId && getStreamUrl) {
+    return {
+      type: 'stream',
+      sessionId,
+      path,
+      getStreamUrl,
+      mimeType,
+      title,
+      poster,
+    };
+  }
+
+  // Priority 2: Data URL (base64 string)
+  if (typeof content === 'string' && hasContent) {
+    return {
+      type: 'data-url',
+      data: content,
+      title,
+      poster,
+    };
+  }
+
+  // Priority 3: ArrayBuffer → Blob
+  if (content instanceof ArrayBuffer && hasContent) {
+    return {
+      type: 'blob',
+      data: content,
+      mimeType: mimeType || 'video/mp4',
+      title,
+      poster,
+    };
+  }
+
+  // No valid content
+  return null;
+}

package/src/tools/VideoPlayer/utils/index.ts

@@ -0,0 +1,11 @@
+/**
+ * VideoPlayer utilities - Public API
+ */
+
+export {
+  resolvePlayerMode,
+  isSimpleStreamSource,
+  resolveStreamSource,
+} from './resolvers';
+
+export { resolveFileSource } from './fileSource';

package/src/tools/VideoPlayer/utils/resolvers.ts

@@ -0,0 +1,75 @@
+/**
+ * Video source and player mode resolvers
+ */
+
+import type { VideoSourceUnion, PlayerMode, SimpleStreamSource, StreamSource, VideoPlayerContextValue } from '../types';
+
+/**
+ * Determine which provider to use based on source type
+ */
+export function resolvePlayerMode(
+  source: VideoSourceUnion,
+  mode: PlayerMode = 'auto'
+): 'vidstack' | 'native' | 'streaming' {
+  if (mode !== 'auto') {
+    return mode;
+  }
+
+  switch (source.type) {
+    case 'youtube':
+    case 'vimeo':
+    case 'hls':
+    case 'dash':
+      return 'vidstack';
+
+    case 'stream':
+    case 'blob':
+      return 'streaming';
+
+    case 'data-url':
+    case 'url':
+    default:
+      return 'native';
+  }
+}
+
+/**
+ * Check if source is a simplified stream source (without getStreamUrl)
+ */
+export function isSimpleStreamSource(
+  source: VideoSourceUnion | SimpleStreamSource
+): source is SimpleStreamSource {
+  return source.type === 'stream' && !('getStreamUrl' in source);
+}
+
+/**
+ * Resolve simplified stream source to full stream source using context
+ */
+export function resolveStreamSource(
+  source: SimpleStreamSource,
+  context: VideoPlayerContextValue | null
+): StreamSource | null {
+  if (!context?.getStreamUrl) {
+    console.warn(
+      'VideoPlayer: Stream source requires getStreamUrl. ' +
+      'Either provide it in source or wrap with VideoPlayerProvider.'
+    );
+    return null;
+  }
+
+  const sessionId = source.sessionId || context.sessionId;
+  if (!sessionId) {
+    console.warn('VideoPlayer: Stream source requires sessionId.');
+    return null;
+  }
+
+  return {
+    type: 'stream',
+    sessionId,
+    path: source.path,
+    getStreamUrl: context.getStreamUrl,
+    mimeType: source.mimeType,
+    title: source.title,
+    poster: source.poster,
+  };
+}

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,97 @@ 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';
+
+// Export Media Cache Store
+export {
+  useMediaCacheStore,
+  useImageCache,
+  useAudioCache,
+  useVideoCache,
+  useBlobUrlCleanup,
+  generateContentKey,
+} from '../stores/mediaCache';

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

package/src/tools/VideoPlayer/VideoPlayer.tsx

@@ -1,231 +0,0 @@
-// @ts-nocheck
-/**
- * Professional VideoPlayer - Vidstack Implementation
- * Supports YouTube, Vimeo, MP4, HLS and more with custom controls
- */
-
-'use client';
-
-// Import Vidstack base styles
-import '@vidstack/react/player/styles/base.css';
-// Import default theme
-import '@vidstack/react/player/styles/default/theme.css';
-import '@vidstack/react/player/styles/default/layouts/video.css';
-
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
-
-import { cn, generateOgImageUrl } from '@djangocfg/ui-core/lib';
-import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
-import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
-
-import { type, VideoPlayerProps, VideoPlayerRef } from './types';
-
-import type { MediaPlayerInstance } from '@vidstack/react';
-/**
- * Custom error class for invalid video URLs
- */
-export class VideoUrlError extends Error {
-  constructor(
-    message: string,
-    public readonly url: string,
-    public readonly suggestion?: string
-  ) {
-    super(message);
-    this.name = 'VideoUrlError';
-  }
-}
-
-/**
- * Validates and normalizes video URL for Vidstack
- * @throws {VideoUrlError} If URL format is invalid for the detected provider
- */
-function normalizeVideoUrl(url: string): string {
-  if (!url || typeof url !== 'string') {
-    throw new VideoUrlError('Video URL is required', url || '');
-  }
-
-  const trimmedUrl = url.trim();
-
-  // Already in correct format (youtube/ID, vimeo/ID, or direct URL)
-  if (trimmedUrl.startsWith('youtube/') || trimmedUrl.startsWith('vimeo/')) {
-    return trimmedUrl;
-  }
-
-  // YouTube URL patterns - auto-convert to youtube/ID format
-  const youtubePatterns = [
-    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
-    /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/,
-  ];
-
-  for (const pattern of youtubePatterns) {
-    const match = trimmedUrl.match(pattern);
-    if (match) {
-      // Auto-convert YouTube URL to youtube/ID format
-      const videoId = match[1];
-      return `youtube/${videoId}`;
-    }
-  }
-
-  // Vimeo URL patterns - auto-convert to vimeo/ID format
-  const vimeoPattern = /vimeo\.com\/(\d+)/;
-  const vimeoMatch = trimmedUrl.match(vimeoPattern);
-  if (vimeoMatch) {
-    const videoId = vimeoMatch[1];
-    return `vimeo/${videoId}`;
-  }
-
-  // Direct video URLs (mp4, webm, etc.) - allow as-is
-  if (/\.(mp4|webm|ogg|m3u8|mpd)(\?.*)?$/i.test(trimmedUrl)) {
-    return trimmedUrl;
-  }
-
-  // HLS/DASH streams
-  if (trimmedUrl.includes('.m3u8') || trimmedUrl.includes('.mpd')) {
-    return trimmedUrl;
-  }
-
-  // Unknown format - return as-is
-  return trimmedUrl;
-}
-
-export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(({
-  source,
-  aspectRatio = 16 / 9,
-  autoplay = false,
-  muted = false,
-  playsInline = true,
-  controls = true,
-  className,
-  showInfo = false,
-  theme = 'default',
-  onPlay,
-  onPause,
-  onEnded,
-  onError,
-}, ref) => {
-  const playerRef = useRef<MediaPlayerInstance | null>(null);
-
-  // Auto-generate poster if not provided (uses OG Image API)
-  const posterUrl = useMemo(() => {
-    if (source.poster) return source.poster;
-    if (!source.title) return undefined;
-    return generateOgImageUrl({ title: source.title, description: source.description });
-  }, [source.poster, source.title, source.description]);
-
-  // Validate and normalize URL - throws VideoUrlError if invalid
-  const normalizedUrl = useMemo(() => {
-    try {
-      return normalizeVideoUrl(source.url);
-    } catch (error) {
-      if (error instanceof VideoUrlError) {
-        // Call onError callback and re-throw
-        onError?.(error.message + (error.suggestion ? ` Use: "${error.suggestion}"` : ''));
-        throw error;
-      }
-      throw error;
-    }
-  }, [source.url, onError]);
-
-  // Expose player methods via ref
-  useImperativeHandle(ref, () => {
-    const player = playerRef.current;
-    
-    return {
-      play: () => player?.play(),
-      pause: () => player?.pause(),
-      togglePlay: () => {
-        if (player) {
-          player.paused ? player.play() : player.pause();
-        }
-      },
-      seekTo: (time: number) => {
-        if (player) player.currentTime = time;
-      },
-      setVolume: (volume: number) => {
-        if (player) player.volume = Math.max(0, Math.min(1, volume));
-      },
-      toggleMute: () => {
-        if (player) player.muted = !player.muted;
-      },
-      enterFullscreen: () => player?.enterFullscreen(),
-      exitFullscreen: () => player?.exitFullscreen(),
-    };
-  }, []);
-
-  const handlePlay = () => {
-    onPlay?.();
-  };
-
-  const handlePause = () => {
-    onPause?.();
-  };
-
-  const handleEnded = () => {
-    onEnded?.();
-  };
-
-  const handleError = (detail: any) => {
-    onError?.(detail?.message || 'Video playback error');
-  };
-
-  return (
-    <div className={cn("w-full", className)}>
-      {/* Video Player */}
-      <div 
-        className={cn(
-          "relative w-full rounded-sm bg-black overflow-hidden",
-          theme === 'minimal' && "rounded-none",
-          theme === 'modern' && "rounded-xl shadow-2xl"
-        )}
-        style={{ aspectRatio: aspectRatio }}
-      >
-        <MediaPlayer
-          ref={playerRef}
-          title={source.title || 'Video'}
-          src={normalizedUrl}
-          autoPlay={autoplay}
-          muted={muted}
-          playsInline={playsInline}
-          onPlay={handlePlay}
-          onPause={handlePause}
-          onEnded={handleEnded}
-          onError={handleError}
-          className="w-full h-full"
-        >
-          <MediaProvider />
-          
-          {/* Poster with proper aspect ratio handling */}
-          {posterUrl && (
-            <Poster
-              className="vds-poster"
-              src={posterUrl}
-              alt={source.title || 'Video poster'}
-              style={{ objectFit: 'cover' }}
-            />
-          )}
-
-          {/* Use Vidstack's built-in default layout */}
-          {controls && (
-            <DefaultVideoLayout
-              icons={defaultLayoutIcons}
-              thumbnails={posterUrl}
-            />
-          )}
-        </MediaPlayer>
-      </div>
-      
-      {/* Video Info */}
-      {showInfo && source.title && (
-        <div className="mt-4 space-y-2">
-          <h3 className="text-xl font-semibold text-foreground">{source.title}</h3>
-          {source.description && (
-            <p className="text-muted-foreground">{source.description}</p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-});
-
-VideoPlayer.displayName = 'VideoPlayer';
-