@djangocfg/ui-nextjs 1.4.45

package/src/tools/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,230 @@
+// @ts-nocheck
+/**
+ * Professional VideoPlayer - Vidstack Implementation
+ * Supports YouTube, Vimeo, MP4, HLS and more with custom controls
+ */
+
+'use client';
+
+import React, { forwardRef, useImperativeHandle, useRef, useMemo } from 'react';
+import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
+import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
+import type { MediaPlayerInstance } from '@vidstack/react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { generateOgImageUrl } from '@djangocfg/ui-core/lib';
+import { type VideoPlayerProps, type VideoPlayerRef } from './types';
+
+// 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';
+
+/**
+ * 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 */}
+          {source.poster && (
+            <Poster
+              className="vds-poster"
+              src={source.poster}
+              alt={source.title || 'Video poster'}
+              style={{ objectFit: 'cover' }}
+            />
+          )}
+          
+          {/* Use Vidstack's built-in default layout */}
+          {controls && (
+            <DefaultVideoLayout
+              icons={defaultLayoutIcons}
+              thumbnails={source.poster}
+            />
+          )}
+        </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/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Professional VideoPlayer - Vidstack Implementation
+ * Export all components and types
+ */
+
+export { VideoPlayer, VideoUrlError } from './VideoPlayer';
+export { VideoControls } from './VideoControls';
+export type { VideoSource, VideoPlayerProps, VideoPlayerRef } from './types';
+

package/src/tools/VideoPlayer/types.ts

@@ -0,0 +1,62 @@
+/**
+ * VideoPlayer Types - Professional Vidstack Implementation
+ */
+
+export interface VideoSource {
+  /** Video URL - supports YouTube, Vimeo, MP4, HLS, etc. */
+  url: string;
+  /** Video title */
+  title?: string;
+  /** Video description */
+  description?: string;
+  /** Custom poster/thumbnail URL */
+  poster?: string;
+  /** Video duration in seconds */
+  duration?: number;
+}
+
+export interface VideoPlayerProps {
+  /** Video source configuration */
+  source: VideoSource;
+  /** Aspect ratio (default: 16/9) */
+  aspectRatio?: number;
+  /** Auto-play video */
+  autoplay?: boolean;
+  /** Mute video by default */
+  muted?: boolean;
+  /** Play video inline on mobile */
+  playsInline?: boolean;
+  /** Show custom controls */
+  controls?: boolean;
+  /** Custom CSS class */
+  className?: string;
+  /** Show video info */
+  showInfo?: boolean;
+  /** Player theme */
+  theme?: 'default' | 'minimal' | 'modern';
+  /** Event callbacks */
+  onPlay?: () => void;
+  onPause?: () => void;
+  onEnded?: () => void;
+  onError?: (error: string) => void;
+}
+
+export interface VideoPlayerRef {
+  /** Play video */
+  play: () => void;
+  /** Pause video */
+  pause: () => void;
+  /** Toggle play/pause */
+  togglePlay: () => void;
+  /** Seek to time */
+  seekTo: (time: number) => void;
+  /** Set volume (0-1) */
+  setVolume: (volume: number) => void;
+  /** Toggle mute */
+  toggleMute: () => void;
+  /** Enter fullscreen */
+  enterFullscreen: () => void;
+  /** Exit fullscreen */
+  exitFullscreen: () => void;
+}
+

package/src/tools/index.ts

@@ -0,0 +1,43 @@
+/**
+ * Tools - Heavy components with dynamic imports
+ *
+ * All components are lazy-loaded to reduce initial bundle size:
+ * - Mermaid: ~800KB (diagram rendering)
+ * - PrettyCode: ~500KB (code syntax highlighting)
+ * - JsonTree: ~100KB (JSON visualization)
+ * - LottiePlayer: ~200KB (Lottie animation player)
+ * - JsonForm: ~300KB (JSON Schema form generator)
+ * - OpenapiViewer: ~400KB (OpenAPI schema viewer & playground)
+ * - VideoPlayer: ~150KB (Professional video player with Vidstack)
+ */
+
+// Export tools as named exports (all use dynamic imports internally)
+export { default as JsonTree } from './JsonTree';
+export type { JsonTreeConfig } from './JsonTree';
+export { default as Mermaid } from './Mermaid';
+export { default as PrettyCode } from './PrettyCode';
+export type { Language } from './PrettyCode';
+export { LottiePlayer, useLottie } from './LottiePlayer';
+export type {
+  LottiePlayerProps,
+  LottieSize,
+  LottieSpeed,
+  LottieDirection,
+  UseLottieOptions,
+  UseLottieReturn,
+} from './LottiePlayer';
+
+// Export JsonForm components
+export { JsonSchemaForm } from './JsonForm';
+export type { JsonSchemaFormProps } from './JsonForm';
+export * from './JsonForm/widgets';
+export * from './JsonForm/templates';
+export * from './JsonForm/utils';
+
+// Export OpenapiViewer
+export { default as OpenapiViewer } from './OpenapiViewer';
+export type { PlaygroundConfig, SchemaSource, PlaygroundProps } from './OpenapiViewer';
+
+// Export VideoPlayer
+export { VideoPlayer, VideoUrlError, VideoControls } from './VideoPlayer';
+export type { VideoSource, VideoPlayerProps, VideoPlayerRef } from './VideoPlayer';