@djangocfg/ui-tools 2.1.91

package/src/tools/VideoPlayer/types/sources.ts

@@ -0,0 +1,97 @@
+/**
+ * Video source type definitions
+ */
+
+// =============================================================================
+// Source Types - Different ways to provide video content
+// =============================================================================
+
+/** Simple URL source (mp4, webm, etc.) */
+export interface UrlSource {
+  type: 'url';
+  url: string;
+  title?: string;
+  poster?: string;
+}
+
+/** YouTube embed source */
+export interface YouTubeSource {
+  type: 'youtube';
+  /** YouTube video ID (11 characters) */
+  id: string;
+  title?: string;
+  poster?: string;
+}
+
+/** Vimeo embed source */
+export interface VimeoSource {
+  type: 'vimeo';
+  /** Vimeo video ID */
+  id: string;
+  title?: string;
+  poster?: string;
+}
+
+/** HLS streaming source */
+export interface HLSSource {
+  type: 'hls';
+  /** URL to .m3u8 manifest */
+  url: string;
+  title?: string;
+  poster?: string;
+}
+
+/** DASH streaming source */
+export interface DASHSource {
+  type: 'dash';
+  /** URL to .mpd manifest */
+  url: string;
+  title?: string;
+  poster?: string;
+}
+
+/** HTTP Range streaming source (for large files with auth) */
+export interface StreamSource {
+  type: 'stream';
+  /** Session ID for authorization */
+  sessionId: string;
+  /** File path on server */
+  path: string;
+  /** Function to generate stream URL */
+  getStreamUrl: (sessionId: string, path: string) => string;
+  /** MIME type for the video */
+  mimeType?: string;
+  title?: string;
+  poster?: string;
+}
+
+/** Binary data source (ArrayBuffer) */
+export interface BlobSource {
+  type: 'blob';
+  /** Video data as ArrayBuffer */
+  data: ArrayBuffer;
+  /** MIME type (default: video/mp4) */
+  mimeType?: string;
+  title?: string;
+  poster?: string;
+}
+
+/** Base64 data URL source */
+export interface DataUrlSource {
+  type: 'data-url';
+  /** Base64 encoded data URL */
+  data: string;
+  title?: string;
+  poster?: string;
+}
+
+/** Union of all source types */
+export type VideoSourceUnion =
+  | UrlSource
+  | YouTubeSource
+  | VimeoSource
+  | HLSSource
+  | DASHSource
+  | StreamSource
+  | BlobSource
+  | DataUrlSource;

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

@@ -0,0 +1,14 @@
+'use client';
+
+/**
+ * VideoPlayer Debug Logger
+ *
+ * Uses universal logger with media-specific helpers.
+ * Logs go to both console (dev) and zustand store (for Console panel).
+ */
+
+import { createMediaLogger } from '@djangocfg/ui-core/lib';
+
+export const videoDebug = createMediaLogger('VideoPlayer');
+
+export default videoDebug;

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,12 @@
+/**
+ * VideoPlayer utilities - Public API
+ */
+
+export {
+  resolvePlayerMode,
+  isSimpleStreamSource,
+  resolveStreamSource,
+} from './resolvers';
+
+export { resolveFileSource } from './fileSource';
+export { videoDebug } from './debug';

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/_shared.ts

@@ -0,0 +1,29 @@
+/**
+ * Shared imports for tools
+ *
+ * This file re-exports commonly used utilities from @djangocfg/ui-core
+ * to simplify imports in deeply nested tool components.
+ */
+
+// Utilities
+export { cn } from '@djangocfg/ui-core/lib';
+
+// Components
+export {
+  Button,
+  Slider,
+  ScrollArea,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DownloadButton,
+} from '@djangocfg/ui-core/components';
+
+// Hooks
+export { useLocalStorage } from '@djangocfg/ui-core/hooks';
+export { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+export type { ResolvedTheme } from '@djangocfg/ui-core/hooks';
+
+// Logger
+export { createLogger } from '@djangocfg/ui-core/lib';

package/src/tools/index.ts

@@ -0,0 +1,172 @@
+/**
+ * Tools - Heavy components with lazy loading (React.lazy + Suspense)
+ *
+ * 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)
+ * - AudioPlayer: ~200KB (Audio player with WaveSurfer.js)
+ * - ImageViewer: ~50KB (Image viewer with zoom/pan/rotate)
+ *
+ * Works in any React environment: Next.js, Vite, Wails, CRA
+ */
+
+// Export tools as named exports (all use React.lazy 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,
+  VideoControls,
+  VidstackProvider,
+  NativeProvider,
+  StreamProvider,
+  VideoPlayerProvider,
+  useVideoPlayerContext,
+  VideoErrorFallback,
+  createVideoErrorFallback,
+  resolvePlayerMode,
+  resolveFileSource,
+  isSimpleStreamSource,
+  resolveStreamSource,
+} from './VideoPlayer';
+export type {
+  VideoSourceUnion,
+  UrlSource,
+  YouTubeSource,
+  VimeoSource,
+  HLSSource,
+  DASHSource,
+  StreamSource,
+  BlobSource,
+  DataUrlSource,
+  PlayerMode,
+  AspectRatioValue,
+  VideoPlayerProps,
+  VideoPlayerRef,
+  ErrorFallbackProps,
+  ResolveFileSourceOptions,
+  VideoPlayerContextValue,
+  VideoPlayerProviderProps,
+  SimpleStreamSource,
+  VideoErrorFallbackProps,
+  CreateVideoErrorFallbackOptions,
+} from './VideoPlayer';
+
+// Export AudioPlayer (Hybrid - HTML5 audio + Web Audio visualization)
+export {
+  // Components
+  HybridSimplePlayer,
+  HybridAudioPlayer,
+  HybridWaveform,
+  AudioReactiveCover,
+  GlowEffect,
+  OrbsEffect,
+  SpotlightEffect,
+  MeshEffect,
+  // Context
+  HybridAudioProvider,
+  useHybridAudioContext,
+  useHybridAudioState,
+  useHybridAudioControls,
+  useHybridAudioLevels,
+  useHybridWebAudio,
+  // Hooks
+  useHybridAudio,
+  useHybridAudioAnalysis,
+  useVisualization,
+  useAudioVisualization,
+  VisualizationProvider,
+  VARIANT_INFO,
+  INTENSITY_INFO,
+  COLOR_SCHEME_INFO,
+  // Effects utilities
+  getEffectConfig,
+  getColors,
+  prepareEffectColors,
+  calculateGlowLayers,
+  calculateOrbs,
+  calculateMeshGradients,
+  calculateSpotlight,
+  INTENSITY_CONFIG,
+  COLOR_SCHEMES,
+  EFFECT_ANIMATIONS,
+  // Utils
+  formatTime,
+} from './AudioPlayer';
+export type {
+  // Component types
+  HybridSimplePlayerProps,
+  HybridAudioPlayerProps,
+  HybridWaveformProps,
+  AudioReactiveCoverProps,
+  GlowEffectData,
+  // Context types
+  HybridAudioProviderProps,
+  HybridAudioContextValue,
+  // Hook types
+  UseHybridAudioOptions,
+  HybridAudioState,
+  HybridAudioControls,
+  HybridWebAudioAPI,
+  UseHybridAudioReturn,
+  VisualizationSettings,
+  VisualizationVariant,
+  VisualizationIntensity,
+  VisualizationColorScheme,
+  UseVisualizationReturn,
+  UseAudioVisualizationReturn,
+  VisualizationProviderProps,
+  // Effect types
+  EffectVariant,
+  EffectIntensity,
+  EffectColorScheme,
+  AudioLevels,
+  EffectConfig,
+  EffectColors,
+  EffectLayer,
+  // Other types
+  EqualizerOptions,
+} 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';