@djangocfg/ui-nextjs 2.1.64 → 2.1.66

package/src/tools/VideoPlayer/VideoPlayer.tsx

@@ -1,231 +1,202 @@
-// @ts-nocheck
 /**
- * Professional VideoPlayer - Vidstack Implementation
- * Supports YouTube, Vimeo, MP4, HLS and more with custom controls
+ * VideoPlayer - Unified Video Player Component
+ *
+ * Supports multiple modes:
+ * - vidstack: Full-featured player (YouTube, Vimeo, HLS, DASH)
+ * - native: Lightweight HTML5 player
+ * - streaming: HTTP Range streaming with auth / Blob sources
+ *
+ * @example
+ * // YouTube video
+ * <VideoPlayer source={{ type: 'youtube', id: 'dQw4w9WgXcQ' }} />
+ *
+ * @example
+ * // HLS stream
+ * <VideoPlayer source={{ type: 'hls', url: 'https://example.com/video.m3u8' }} />
+ *
+ * @example
+ * // HTTP Range streaming with auth (full source)
+ * <VideoPlayer
+ *   source={{
+ *     type: 'stream',
+ *     sessionId: 'abc123',
+ *     path: '/videos/movie.mp4',
+ *     getStreamUrl: (id, path) => `/api/stream/${id}?path=${path}&token=${token}`
+ *   }}
+ * />
+ *
+ * @example
+ * // HTTP Range streaming (simplified, using VideoPlayerProvider context)
+ * <VideoPlayerProvider sessionId={sessionId} getStreamUrl={getStreamUrl}>
+ *   <VideoPlayer source={{ type: 'stream', path: '/videos/movie.mp4' }} />
+ * </VideoPlayerProvider>
+ *
+ * @example
+ * // Blob/ArrayBuffer
+ * <VideoPlayer source={{ type: 'blob', data: arrayBuffer, mimeType: 'video/mp4' }} />
  */
 
 '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();
+import React, { forwardRef, useMemo } from 'react';
+
+import { VidstackProvider, NativeProvider, StreamProvider } from './providers';
+import { useVideoPlayerContext, isSimpleStreamSource, resolveStreamSource } from './VideoPlayerContext';
+import { resolvePlayerMode } from './types';
+
+import type { VideoPlayerProps, VideoPlayerRef, VideoSourceUnion, VidstackProviderProps, NativeProviderProps, StreamProviderProps } from './types';
+import type { SimpleStreamSource } from './VideoPlayerContext';
+
+export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps & { source: VideoSourceUnion | SimpleStreamSource }>(
+  (
+    {
+      source: rawSource,
+      mode = 'auto',
+      aspectRatio = 16 / 9,
+      autoPlay = false,
+      muted = false,
+      loop = false,
+      playsInline = true,
+      controls = true,
+      preload = 'metadata',
+      theme = 'default',
+      showInfo = false,
+      className,
+      videoClassName,
+      disableContextMenu = false,
+      showPreloader = true,
+      preloaderTimeout = 5000,
+      errorFallback,
+      onPlay,
+      onPause,
+      onEnded,
+      onError,
+      onLoadStart,
+      onCanPlay,
+      onTimeUpdate,
+    },
+    ref
+  ) => {
+    // Get context for simplified stream sources
+    const context = useVideoPlayerContext();
+
+    // Resolve simplified stream source to full source using context
+    const source = useMemo(() => {
+      if (isSimpleStreamSource(rawSource)) {
+        const resolved = resolveStreamSource(rawSource, context);
+        if (!resolved) {
+          // Return a special error source that will trigger error fallback
+          return null;
+        }
+        return resolved;
+      }
+      return rawSource;
+    }, [rawSource, context]);
+
+    // Handle unresolved source
+    if (!source) {
+      // Render error state
+      const errorMessage = 'Stream source requires VideoPlayerProvider with getStreamUrl and sessionId';
+
+      if (typeof errorFallback === 'function') {
+        return (
+          <div className={className} style={{ aspectRatio: aspectRatio === 'fill' ? undefined : aspectRatio }}>
+            {errorFallback({ error: errorMessage })}
+          </div>
+        );
+      }
 
-  // Already in correct format (youtube/ID, vimeo/ID, or direct URL)
-  if (trimmedUrl.startsWith('youtube/') || trimmedUrl.startsWith('vimeo/')) {
-    return trimmedUrl;
-  }
+      if (errorFallback) {
+        return (
+          <div className={className} style={{ aspectRatio: aspectRatio === 'fill' ? undefined : aspectRatio }}>
+            {errorFallback}
+          </div>
+        );
+      }
 
-  // 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}`;
+      // Default error UI
+      return (
+        <div
+          className={className}
+          style={{
+            aspectRatio: aspectRatio === 'fill' ? undefined : aspectRatio,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'black',
+            color: 'white',
+          }}
+        >
+          <p>{errorMessage}</p>
+        </div>
+      );
     }
-  }
-
-  // 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;
-  }
+    // Determine which provider to use
+    const resolvedMode = resolvePlayerMode(source, mode);
+
+    // Common props for all providers
+    const commonProps = {
+      aspectRatio,
+      autoPlay,
+      muted,
+      loop,
+      playsInline,
+      controls,
+      preload,
+      className,
+      onPlay,
+      onPause,
+      onEnded,
+      onError,
+      onLoadStart,
+      onCanPlay,
+      onTimeUpdate,
+    };
 
-  // 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;
+    // Render appropriate provider
+    switch (resolvedMode) {
+      case 'vidstack':
+        return (
+          <VidstackProvider
+            ref={ref}
+            source={source as VidstackProviderProps['source']}
+            theme={theme}
+            showInfo={showInfo}
+            errorFallback={errorFallback}
+            {...commonProps}
+          />
+        );
+
+      case 'streaming':
+        return (
+          <StreamProvider
+            ref={ref}
+            source={source as StreamProviderProps['source']}
+            videoClassName={videoClassName}
+            disableContextMenu={disableContextMenu}
+            showPreloader={showPreloader}
+            preloaderTimeout={preloaderTimeout}
+            errorFallback={errorFallback}
+            {...commonProps}
+          />
+        );
+
+      case 'native':
+      default:
+        return (
+          <NativeProvider
+            ref={ref}
+            source={source as NativeProviderProps['source']}
+            videoClassName={videoClassName}
+            disableContextMenu={disableContextMenu}
+            showPreloader={showPreloader}
+            preloaderTimeout={preloaderTimeout}
+            {...commonProps}
+          />
+        );
     }
-  }, [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';
-

package/src/tools/VideoPlayer/VideoPlayerContext.tsx

@@ -0,0 +1,125 @@
+/**
+ * VideoPlayerContext - Context for streaming configuration
+ * Simplifies streaming API by providing getStreamUrl globally
+ */
+
+'use client';
+
+import React, { createContext, useContext, useMemo } from 'react';
+
+import type { VideoSourceUnion, StreamSource } from './types';
+
+// ============================================================================
+// Context Types
+// ============================================================================
+
+export interface VideoPlayerContextValue {
+  /** Function to generate stream URL (for HTTP Range streaming) */
+  getStreamUrl?: (sessionId: string, path: string) => string;
+  /** Current session ID */
+  sessionId?: string | null;
+}
+
+export interface VideoPlayerProviderProps extends VideoPlayerContextValue {
+  children: React.ReactNode;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const VideoPlayerContext = createContext<VideoPlayerContextValue | null>(null);
+
+/**
+ * Provider for VideoPlayer streaming configuration
+ *
+ * @example
+ * // In your app layout or FileWorkspace
+ * <VideoPlayerProvider
+ *   sessionId={sessionId}
+ *   getStreamUrl={terminalClient.terminal_media.streamStreamRetrieveUrl}
+ * >
+ *   <VideoPlayer source={{ type: 'stream', path: '/video.mp4' }} />
+ * </VideoPlayerProvider>
+ */
+export function VideoPlayerProvider({
+  children,
+  getStreamUrl,
+  sessionId,
+}: VideoPlayerProviderProps) {
+  const value = useMemo(
+    () => ({ getStreamUrl, sessionId }),
+    [getStreamUrl, sessionId]
+  );
+
+  return (
+    <VideoPlayerContext.Provider value={value}>
+      {children}
+    </VideoPlayerContext.Provider>
+  );
+}
+
+/**
+ * Hook to access VideoPlayer context
+ */
+export function useVideoPlayerContext(): VideoPlayerContextValue | null {
+  return useContext(VideoPlayerContext);
+}
+
+// ============================================================================
+// Simplified Stream Source
+// ============================================================================
+
+/** Simplified stream source (uses context for getStreamUrl) */
+export interface SimpleStreamSource {
+  type: 'stream';
+  /** File path on server */
+  path: string;
+  /** Session ID (optional, uses context if not provided) */
+  sessionId?: string;
+  /** MIME type for the video */
+  mimeType?: string;
+  title?: string;
+  poster?: string;
+}
+
+/**
+ * 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/VideoPlayer/index.ts

@@ -1,16 +1,68 @@
 /**
- * Professional VideoPlayer - Vidstack Implementation
- * Export all components and types
+ * VideoPlayer - Unified Video Player
+ * Supports Vidstack (YouTube, Vimeo, HLS, DASH), Native HTML5, and HTTP Streaming
  */
 
-export { VideoPlayer, VideoUrlError } from './VideoPlayer';
-export { NativePlayer } from './NativePlayer';
+// Main component
+export { VideoPlayer } from './VideoPlayer';
+
+// Controls (can be used standalone with Vidstack)
 export { VideoControls } from './VideoControls';
+
+// Providers (for advanced usage)
+export { VidstackProvider, NativeProvider, StreamProvider } from './providers';
+
+// Context (for streaming configuration)
+export {
+  VideoPlayerProvider,
+  useVideoPlayerContext,
+  isSimpleStreamSource,
+  resolveStreamSource,
+} from './VideoPlayerContext';
+export type {
+  VideoPlayerContextValue,
+  VideoPlayerProviderProps,
+  SimpleStreamSource,
+} from './VideoPlayerContext';
+
+// Error Fallback
+export {
+  VideoErrorFallback,
+  createVideoErrorFallback,
+} from './VideoErrorFallback';
+export type {
+  VideoErrorFallbackProps,
+  CreateVideoErrorFallbackOptions,
+} from './VideoErrorFallback';
+
+// Types
 export type {
-  VideoSource,
+  // Source types
+  VideoSourceUnion,
+  UrlSource,
+  YouTubeSource,
+  VimeoSource,
+  HLSSource,
+  DASHSource,
+  StreamSource,
+  BlobSource,
+  DataUrlSource,
+  // Player types
+  PlayerMode,
+  AspectRatioValue,
   VideoPlayerProps,
   VideoPlayerRef,
-  NativePlayerProps,
-  NativePlayerRef,
+  ErrorFallbackProps,
+  // Provider props (internal)
+  VidstackProviderProps,
+  NativeProviderProps,
+  StreamProviderProps,
+  // Common types
+  CommonPlayerSettings,
+  CommonPlayerEvents,
+  // File source helper types
+  ResolveFileSourceOptions,
 } from './types';
 
+// Helpers
+export { resolvePlayerMode, resolveFileSource } from './types';