@djangocfg/ui-nextjs 2.1.65 → 2.1.66

package/src/tools/VideoPlayer/providers/NativeProvider.tsx

@@ -0,0 +1,206 @@
+/**
+ * NativeProvider - Lightweight native HTML5 video player
+ * For demo videos, background videos, autoplay loop muted scenarios
+ */
+
+'use client';
+
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { Preloader, AspectRatio } from '@djangocfg/ui-core';
+
+import type { NativeProviderProps, VideoPlayerRef } from '../types';
+
+/**
+ * Get video URL from source
+ */
+function getVideoUrl(source: NativeProviderProps['source']): string {
+  switch (source.type) {
+    case 'url':
+      return source.url;
+    case 'data-url':
+      return source.data;
+    default:
+      return '';
+  }
+}
+
+export const NativeProvider = forwardRef<VideoPlayerRef, NativeProviderProps>(
+  (
+    {
+      source,
+      aspectRatio = 16 / 9,
+      autoPlay = true,
+      muted = true,
+      loop = true,
+      playsInline = true,
+      preload = 'auto',
+      controls = false,
+      disableContextMenu = true,
+      showPreloader = true,
+      preloaderTimeout = 5000,
+      className,
+      videoClassName,
+      onPlay,
+      onPause,
+      onEnded,
+      onError,
+      onLoadStart,
+      onCanPlay,
+      onTimeUpdate,
+    },
+    ref
+  ) => {
+    const [isLoading, setIsLoading] = useState(showPreloader);
+    const videoRef = useRef<HTMLVideoElement>(null);
+
+    const videoUrl = getVideoUrl(source);
+
+    // Expose video element methods via ref
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => videoRef.current?.play(),
+        pause: () => videoRef.current?.pause(),
+        togglePlay: () => {
+          const video = videoRef.current;
+          if (video) {
+            video.paused ? video.play() : video.pause();
+          }
+        },
+        seekTo: (time: number) => {
+          if (videoRef.current) videoRef.current.currentTime = time;
+        },
+        setVolume: (volume: number) => {
+          if (videoRef.current) videoRef.current.volume = Math.max(0, Math.min(1, volume));
+        },
+        toggleMute: () => {
+          if (videoRef.current) videoRef.current.muted = !videoRef.current.muted;
+        },
+        enterFullscreen: () => videoRef.current?.requestFullscreen(),
+        exitFullscreen: () => document.exitFullscreen(),
+        get currentTime() {
+          return videoRef.current?.currentTime ?? 0;
+        },
+        get duration() {
+          return videoRef.current?.duration ?? 0;
+        },
+        get paused() {
+          return videoRef.current?.paused ?? true;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      if (!showPreloader) return;
+
+      const video = videoRef.current;
+      if (!video) return;
+
+      // Check if video is already loaded
+      if (video.readyState >= 3) {
+        setIsLoading(false);
+        return;
+      }
+
+      const hideLoader = () => setIsLoading(false);
+
+      video.addEventListener('canplay', hideLoader);
+      video.addEventListener('loadeddata', hideLoader);
+      video.addEventListener('playing', hideLoader);
+
+      // Fallback: hide loader after timeout
+      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();
+      }
+    };
+
+    const handleError = (e: React.SyntheticEvent<HTMLVideoElement>) => {
+      setIsLoading(false);
+      onError?.(e.currentTarget.error?.message || 'Video playback error');
+    };
+
+    const handleTimeUpdate = () => {
+      const video = videoRef.current;
+      if (video && onTimeUpdate) {
+        onTimeUpdate(video.currentTime, video.duration);
+      }
+    };
+
+    // Determine if we should use AspectRatio wrapper or fill mode
+    const isFillMode = aspectRatio === 'fill';
+    const computedAspectRatio = aspectRatio === 'auto' || aspectRatio === 'fill' ? undefined : aspectRatio;
+
+    // Video content
+    const videoContent = (
+      <>
+        {/* Preloader */}
+        {showPreloader && isLoading && (
+          <div
+            className={cn(
+              'absolute inset-0 flex items-center justify-center bg-muted/30 backdrop-blur-sm z-10'
+            )}
+          >
+            <Preloader size="lg" spinnerClassName="text-white" />
+          </div>
+        )}
+
+        {/* Video */}
+        <video
+          ref={videoRef}
+          className={cn('w-full h-full object-cover', videoClassName)}
+          src={videoUrl}
+          autoPlay={autoPlay}
+          muted={muted}
+          loop={loop}
+          playsInline={playsInline}
+          preload={preload}
+          controls={controls}
+          poster={source.poster}
+          onContextMenu={handleContextMenu}
+          onLoadStart={onLoadStart}
+          onCanPlay={onCanPlay}
+          onPlay={onPlay}
+          onPause={onPause}
+          onPlaying={() => setIsLoading(false)}
+          onEnded={onEnded}
+          onError={handleError}
+          onTimeUpdate={handleTimeUpdate}
+        />
+      </>
+    );
+
+    // Fill mode - no AspectRatio wrapper
+    if (isFillMode) {
+      return (
+        <div className={cn('relative w-full h-full overflow-hidden', className)}>
+          {videoContent}
+        </div>
+      );
+    }
+
+    // Normal mode with AspectRatio
+    return (
+      <div className={cn('relative overflow-hidden', className)}>
+        <AspectRatio ratio={computedAspectRatio}>
+          {videoContent}
+        </AspectRatio>
+      </div>
+    );
+  }
+);
+
+NativeProvider.displayName = 'NativeProvider';

package/src/tools/VideoPlayer/providers/StreamProvider.tsx

@@ -0,0 +1,311 @@
+/**
+ * StreamProvider - HTTP Range streaming and Blob video player
+ * Supports:
+ * - HTTP Range requests with authorization (for large files)
+ * - Blob/ArrayBuffer sources
+ * - Data URL sources
+ * - Fill parent container mode
+ * - Custom error fallback
+ */
+
+'use client';
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { Preloader, AspectRatio } from '@djangocfg/ui-core';
+
+import type { StreamProviderProps, VideoPlayerRef, StreamSource, BlobSource, DataUrlSource, ErrorFallbackProps } from '../types';
+
+/** Default error fallback UI */
+function DefaultErrorFallback({ error }: ErrorFallbackProps) {
+  return (
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 text-white">
+      <svg
+        className="w-16 h-16 text-muted-foreground"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+        />
+      </svg>
+      <p className="text-lg">{error || 'Video cannot be previewed'}</p>
+    </div>
+  );
+}
+
+export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
+  (
+    {
+      source,
+      aspectRatio = 16 / 9,
+      autoPlay = false,
+      muted = false,
+      loop = false,
+      playsInline = true,
+      preload = 'metadata',
+      controls = true,
+      disableContextMenu = false,
+      showPreloader = true,
+      preloaderTimeout = 10000,
+      className,
+      videoClassName,
+      errorFallback,
+      onPlay,
+      onPause,
+      onEnded,
+      onError,
+      onLoadStart,
+      onCanPlay,
+      onTimeUpdate,
+    },
+    ref
+  ) => {
+    const [videoUrl, setVideoUrl] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    const [errorMessage, setErrorMessage] = useState<string>('Video cannot be previewed');
+    const blobUrlRef = useRef<string | null>(null);
+    const videoRef = useRef<HTMLVideoElement>(null);
+
+    // Retry function for error fallback
+    const retry = useCallback(() => {
+      setHasError(false);
+      setIsLoading(true);
+      // Re-trigger source effect by forcing state update
+      const video = videoRef.current;
+      if (video && videoUrl) {
+        video.load();
+      }
+    }, [videoUrl]);
+
+    // Expose video element methods via ref
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => videoRef.current?.play(),
+        pause: () => videoRef.current?.pause(),
+        togglePlay: () => {
+          const video = videoRef.current;
+          if (video) {
+            video.paused ? video.play() : video.pause();
+          }
+        },
+        seekTo: (time: number) => {
+          if (videoRef.current) videoRef.current.currentTime = time;
+        },
+        setVolume: (volume: number) => {
+          if (videoRef.current) videoRef.current.volume = Math.max(0, Math.min(1, volume));
+        },
+        toggleMute: () => {
+          if (videoRef.current) videoRef.current.muted = !videoRef.current.muted;
+        },
+        enterFullscreen: () => videoRef.current?.requestFullscreen(),
+        exitFullscreen: () => document.exitFullscreen(),
+        get currentTime() {
+          return videoRef.current?.currentTime ?? 0;
+        },
+        get duration() {
+          return videoRef.current?.duration ?? 0;
+        },
+        get paused() {
+          return videoRef.current?.paused ?? true;
+        },
+      }),
+      []
+    );
+
+    // Create video URL based on source type
+    useEffect(() => {
+      // Cleanup previous blob URL
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+        blobUrlRef.current = null;
+      }
+
+      setHasError(false);
+      setIsLoading(true);
+
+      switch (source.type) {
+        case 'stream': {
+          const streamSource = source as StreamSource;
+          const url = streamSource.getStreamUrl(streamSource.sessionId, streamSource.path);
+          setVideoUrl(url);
+          break;
+        }
+
+        case 'blob': {
+          const blobSource = source as BlobSource;
+          const blob = new Blob([blobSource.data], {
+            type: blobSource.mimeType || 'video/mp4'
+          });
+          const url = URL.createObjectURL(blob);
+          blobUrlRef.current = url;
+          setVideoUrl(url);
+          break;
+        }
+
+        case 'data-url': {
+          const dataUrlSource = source as DataUrlSource;
+          setVideoUrl(dataUrlSource.data);
+          break;
+        }
+
+        default:
+          setVideoUrl(null);
+          setHasError(true);
+          setErrorMessage('Invalid video source');
+      }
+
+      return () => {
+        if (blobUrlRef.current) {
+          URL.revokeObjectURL(blobUrlRef.current);
+          blobUrlRef.current = null;
+        }
+      };
+    }, [source]);
+
+    // Preloader timeout
+    useEffect(() => {
+      if (!showPreloader || !isLoading) return;
+
+      const timeout = setTimeout(() => {
+        setIsLoading(false);
+      }, preloaderTimeout);
+
+      return () => clearTimeout(timeout);
+    }, [showPreloader, isLoading, preloaderTimeout]);
+
+    const handleContextMenu = (e: React.MouseEvent) => {
+      if (disableContextMenu) {
+        e.preventDefault();
+      }
+    };
+
+    const handleCanPlay = () => {
+      setIsLoading(false);
+      onCanPlay?.();
+    };
+
+    const handleLoadedData = () => {
+      setIsLoading(false);
+    };
+
+    const handleError = () => {
+      setIsLoading(false);
+      setHasError(true);
+      setErrorMessage('Failed to load video');
+      onError?.('Video playback error');
+    };
+
+    const handleTimeUpdate = () => {
+      const video = videoRef.current;
+      if (video && onTimeUpdate) {
+        onTimeUpdate(video.currentTime, video.duration);
+      }
+    };
+
+    // Determine if we should use AspectRatio wrapper or fill mode
+    const isFillMode = aspectRatio === 'fill';
+    const computedAspectRatio = aspectRatio === 'auto' || aspectRatio === 'fill' ? undefined : aspectRatio;
+
+    // Render error fallback
+    const renderErrorFallback = () => {
+      const fallbackProps: ErrorFallbackProps = { error: errorMessage, retry };
+
+      if (typeof errorFallback === 'function') {
+        return errorFallback(fallbackProps);
+      }
+
+      if (errorFallback) {
+        return errorFallback;
+      }
+
+      return <DefaultErrorFallback {...fallbackProps} />;
+    };
+
+    // Error state
+    if (!videoUrl || hasError) {
+      if (isFillMode) {
+        return (
+          <div className={cn('relative w-full h-full overflow-hidden bg-black', className)}>
+            {renderErrorFallback()}
+          </div>
+        );
+      }
+
+      return (
+        <div className={cn('relative overflow-hidden bg-black', className)}>
+          <AspectRatio ratio={computedAspectRatio}>
+            {renderErrorFallback()}
+          </AspectRatio>
+        </div>
+      );
+    }
+
+    // Video content
+    const videoContent = (
+      <>
+        {/* Loading indicator */}
+        {showPreloader && isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/50 z-10">
+            <Preloader size="lg" spinnerClassName="text-white" />
+          </div>
+        )}
+
+        {/* Video element */}
+        <video
+          ref={videoRef}
+          src={videoUrl}
+          className={cn(
+            'w-full h-full object-contain',
+            isLoading && 'opacity-0',
+            videoClassName
+          )}
+          autoPlay={autoPlay}
+          muted={muted}
+          loop={loop}
+          playsInline={playsInline}
+          preload={preload}
+          controls={controls}
+          crossOrigin="anonymous"
+          poster={source.poster}
+          onContextMenu={handleContextMenu}
+          onLoadStart={onLoadStart}
+          onCanPlay={handleCanPlay}
+          onLoadedData={handleLoadedData}
+          onPlay={onPlay}
+          onPause={onPause}
+          onEnded={onEnded}
+          onError={handleError}
+          onTimeUpdate={handleTimeUpdate}
+        />
+      </>
+    );
+
+    // Fill mode - no AspectRatio wrapper
+    if (isFillMode) {
+      return (
+        <div className={cn('relative w-full h-full overflow-hidden bg-black', className)}>
+          {videoContent}
+        </div>
+      );
+    }
+
+    // Normal mode with AspectRatio
+    return (
+      <div className={cn('relative overflow-hidden bg-black', className)}>
+        <AspectRatio ratio={computedAspectRatio}>
+          {videoContent}
+        </AspectRatio>
+      </div>
+    );
+  }
+);
+
+StreamProvider.displayName = 'StreamProvider';