@djangocfg/ui-nextjs 2.1.66 → 2.1.68

package/src/tools/VideoPlayer/context/VideoPlayerContext.tsx

@@ -0,0 +1,52 @@
+/**
+ * VideoPlayerContext - Context for streaming configuration
+ * Simplifies streaming API by providing getStreamUrl globally
+ */
+
+'use client';
+
+import React, { createContext, useContext, useMemo } from 'react';
+
+import type { VideoPlayerContextValue, VideoPlayerProviderProps } from '../types';
+
+// =============================================================================
+// 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);
+}

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

@@ -0,0 +1,8 @@
+/**
+ * VideoPlayer context - Public API
+ */
+
+export {
+  VideoPlayerProvider,
+  useVideoPlayerContext,
+} from './VideoPlayerContext';

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

@@ -0,0 +1,9 @@
+/**
+ * VideoPlayer hooks - Public API
+ */
+
+export { useVideoPositionCache } from './useVideoPositionCache';
+export type {
+  UseVideoPositionCacheOptions,
+  UseVideoPositionCacheReturn,
+} from './useVideoPositionCache';

package/src/tools/VideoPlayer/hooks/useVideoPositionCache.ts

@@ -0,0 +1,109 @@
+'use client';
+
+/**
+ * useVideoPositionCache - Manages video playback position caching
+ *
+ * Saves position periodically during playback and restores on load.
+ */
+
+import { useRef, useEffect, useCallback } from 'react';
+import { useVideoCache } from '../../../stores/mediaCache';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface UseVideoPositionCacheOptions {
+  /** Unique key for caching (e.g., video URL or stream key) */
+  cacheKey: string | null;
+  /** Current playback time in seconds */
+  currentTime: number;
+  /** Video duration in seconds */
+  duration: number;
+  /** Whether video is currently playing */
+  isPlaying: boolean;
+  /** Whether video is ready to play */
+  isReady: boolean;
+  /** Callback to seek to a specific time */
+  onSeek: (time: number) => void;
+}
+
+export interface UseVideoPositionCacheReturn {
+  /** Manually save current position */
+  savePosition: () => void;
+  /** Clear saved position */
+  clearPosition: () => void;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+/** Save interval in seconds */
+const SAVE_INTERVAL = 5;
+
+/** Minimum offset from end to restore (avoid restoring at the very end) */
+const END_BUFFER = 1;
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+export function useVideoPositionCache(
+  options: UseVideoPositionCacheOptions
+): UseVideoPositionCacheReturn {
+  const { cacheKey, currentTime, duration, isPlaying, isReady, onSeek } = options;
+
+  const { saveVideoPosition, getVideoPosition } = useVideoCache();
+  const lastSavedTimeRef = useRef<number>(0);
+  const hasRestoredRef = useRef<boolean>(false);
+
+  // Restore position when ready
+  useEffect(() => {
+    if (!isReady || !cacheKey || hasRestoredRef.current) return;
+
+    const savedPosition = getVideoPosition(cacheKey);
+    if (savedPosition && savedPosition > 0 && duration > 0) {
+      // Only restore if position is valid (not at the end)
+      if (savedPosition < duration - END_BUFFER) {
+        onSeek(savedPosition);
+      }
+    }
+    hasRestoredRef.current = true;
+  }, [isReady, cacheKey, duration, getVideoPosition, onSeek]);
+
+  // Reset restored flag when cache key changes
+  useEffect(() => {
+    hasRestoredRef.current = false;
+    lastSavedTimeRef.current = 0;
+  }, [cacheKey]);
+
+  // Save position periodically during playback
+  useEffect(() => {
+    if (!cacheKey || !isPlaying || currentTime <= 0) return;
+
+    const timeSinceLastSave = currentTime - lastSavedTimeRef.current;
+    if (timeSinceLastSave >= SAVE_INTERVAL || timeSinceLastSave < 0) {
+      saveVideoPosition(cacheKey, currentTime);
+      lastSavedTimeRef.current = currentTime;
+    }
+  }, [cacheKey, isPlaying, currentTime, saveVideoPosition]);
+
+  const savePosition = useCallback(() => {
+    if (cacheKey && currentTime > 0) {
+      saveVideoPosition(cacheKey, currentTime);
+      lastSavedTimeRef.current = currentTime;
+    }
+  }, [cacheKey, currentTime, saveVideoPosition]);
+
+  const clearPosition = useCallback(() => {
+    if (cacheKey) {
+      saveVideoPosition(cacheKey, 0);
+    }
+  }, [cacheKey, saveVideoPosition]);
+
+  return {
+    savePosition,
+    clearPosition,
+  };
+}

package/src/tools/VideoPlayer/index.ts

@@ -4,10 +4,20 @@
  */
 
 // Main component
-export { VideoPlayer } from './VideoPlayer';
+export { VideoPlayer } from './components';
 
 // Controls (can be used standalone with Vidstack)
-export { VideoControls } from './VideoControls';
+export { VideoControls } from './components';
+
+// Error Fallback
+export {
+  VideoErrorFallback,
+  createVideoErrorFallback,
+} from './components';
+export type {
+  VideoErrorFallbackProps,
+  CreateVideoErrorFallbackOptions,
+} from './components';
 
 // Providers (for advanced usage)
 export { VidstackProvider, NativeProvider, StreamProvider } from './providers';
@@ -16,24 +26,22 @@ export { VidstackProvider, NativeProvider, StreamProvider } from './providers';
 export {
   VideoPlayerProvider,
   useVideoPlayerContext,
-  isSimpleStreamSource,
-  resolveStreamSource,
-} from './VideoPlayerContext';
+} from './context';
+
+// Hooks
+export { useVideoPositionCache } from './hooks';
 export type {
-  VideoPlayerContextValue,
-  VideoPlayerProviderProps,
-  SimpleStreamSource,
-} from './VideoPlayerContext';
+  UseVideoPositionCacheOptions,
+  UseVideoPositionCacheReturn,
+} from './hooks';
 
-// Error Fallback
+// Utils
 export {
-  VideoErrorFallback,
-  createVideoErrorFallback,
-} from './VideoErrorFallback';
-export type {
-  VideoErrorFallbackProps,
-  CreateVideoErrorFallbackOptions,
-} from './VideoErrorFallback';
+  resolvePlayerMode,
+  resolveFileSource,
+  isSimpleStreamSource,
+  resolveStreamSource,
+} from './utils';
 
 // Types
 export type {
@@ -62,7 +70,8 @@ export type {
   CommonPlayerEvents,
   // File source helper types
   ResolveFileSourceOptions,
+  // Context types
+  VideoPlayerContextValue,
+  VideoPlayerProviderProps,
+  SimpleStreamSource,
 } from './types';
-
-// Helpers
-export { resolvePlayerMode, resolveFileSource } from './types';

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

@@ -14,6 +14,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef,
 
 import { cn } from '@djangocfg/ui-core/lib';
 import { Preloader, AspectRatio } from '@djangocfg/ui-core';
+import { useVideoCache, generateContentKey } from '../../../stores/mediaCache';
 
 import type { StreamProviderProps, VideoPlayerRef, StreamSource, BlobSource, DataUrlSource, ErrorFallbackProps } from '../types';
 
@@ -63,6 +64,7 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       onLoadStart,
       onCanPlay,
       onTimeUpdate,
+      onBufferProgress,
     },
     ref
   ) => {
@@ -70,8 +72,18 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
     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);
+    const contentKeyRef = useRef<string | null>(null);
+    const lastSavedTimeRef = useRef<number>(0);
+
+    // Cache hooks
+    const {
+      getOrCreateBlobUrl,
+      releaseBlobUrl,
+      getOrCreateStreamUrl,
+      saveVideoPosition,
+      getVideoPosition,
+    } = useVideoCache();
 
     // Retry function for error fallback
     const retry = useCallback(() => {
@@ -120,12 +132,12 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       []
     );
 
-    // Create video URL based on source type
+    // Create video URL based on source type with caching
     useEffect(() => {
-      // Cleanup previous blob URL
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
+      // Cleanup previous blob URL from cache
+      if (contentKeyRef.current) {
+        releaseBlobUrl(contentKeyRef.current);
+        contentKeyRef.current = null;
       }
 
       setHasError(false);
@@ -134,18 +146,27 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       switch (source.type) {
         case 'stream': {
           const streamSource = source as StreamSource;
-          const url = streamSource.getStreamUrl(streamSource.sessionId, streamSource.path);
+          // Use cached stream URL
+          const url = getOrCreateStreamUrl(
+            streamSource.sessionId,
+            streamSource.path,
+            streamSource.getStreamUrl
+          );
           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;
+          // Generate content key for caching
+          const contentKey = generateContentKey(blobSource.data);
+          contentKeyRef.current = contentKey;
+          // Use cached blob URL
+          const url = getOrCreateBlobUrl(
+            contentKey,
+            blobSource.data,
+            blobSource.mimeType || 'video/mp4'
+          );
           setVideoUrl(url);
           break;
         }
@@ -163,13 +184,93 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       }
 
       return () => {
-        if (blobUrlRef.current) {
-          URL.revokeObjectURL(blobUrlRef.current);
-          blobUrlRef.current = null;
+        if (contentKeyRef.current) {
+          releaseBlobUrl(contentKeyRef.current);
+          contentKeyRef.current = null;
         }
       };
+    }, [source, getOrCreateBlobUrl, getOrCreateStreamUrl, releaseBlobUrl]);
+
+    // Get source key for position caching
+    const getSourceKey = useCallback(() => {
+      switch (source.type) {
+        case 'stream':
+          return `stream:${(source as StreamSource).sessionId}:${(source as StreamSource).path}`;
+        case 'blob':
+          return contentKeyRef.current ? `blob:${contentKeyRef.current}` : null;
+        case 'data-url':
+          return `data:${(source as DataUrlSource).data.slice(0, 50)}`;
+        default:
+          return null;
+      }
     }, [source]);
 
+    // Restore cached playback position when video is ready
+    const handleCanPlay = useCallback(() => {
+      setIsLoading(false);
+
+      // Restore position from cache
+      const sourceKey = getSourceKey();
+      if (sourceKey && videoRef.current) {
+        const cachedPosition = getVideoPosition(sourceKey);
+        if (cachedPosition && cachedPosition > 0) {
+          const duration = videoRef.current.duration;
+          // Only restore if position is valid (not at the end)
+          if (cachedPosition < duration - 1) {
+            videoRef.current.currentTime = cachedPosition;
+          }
+        }
+      }
+
+      onCanPlay?.();
+    }, [getSourceKey, getVideoPosition, onCanPlay]);
+
+    // Save playback position periodically
+    const handleTimeUpdate = useCallback(() => {
+      const video = videoRef.current;
+      if (!video) return;
+
+      // Save position every 5 seconds
+      const sourceKey = getSourceKey();
+      if (sourceKey && video.currentTime > 0) {
+        const timeSinceLastSave = video.currentTime - lastSavedTimeRef.current;
+        if (timeSinceLastSave >= 5 || timeSinceLastSave < 0) {
+          saveVideoPosition(sourceKey, video.currentTime);
+          lastSavedTimeRef.current = video.currentTime;
+        }
+      }
+
+      onTimeUpdate?.(video.currentTime, video.duration);
+    }, [getSourceKey, saveVideoPosition, onTimeUpdate]);
+
+    // Save position on pause
+    const handlePause = useCallback(() => {
+      const video = videoRef.current;
+      const sourceKey = getSourceKey();
+      if (sourceKey && video && video.currentTime > 0) {
+        saveVideoPosition(sourceKey, video.currentTime);
+        lastSavedTimeRef.current = video.currentTime;
+      }
+      onPause?.();
+    }, [getSourceKey, saveVideoPosition, onPause]);
+
+    // Handle buffer progress
+    const handleProgress = useCallback(() => {
+      const video = videoRef.current;
+      if (!video || !onBufferProgress) return;
+
+      // Get the buffered time ranges
+      if (video.buffered.length > 0) {
+        // Get the end of the last buffered range
+        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+        const duration = video.duration;
+
+        if (duration > 0 && !isNaN(bufferedEnd)) {
+          onBufferProgress(bufferedEnd, duration);
+        }
+      }
+    }, [onBufferProgress]);
+
     // Preloader timeout
     useEffect(() => {
       if (!showPreloader || !isLoading) return;
@@ -187,11 +288,6 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       }
     };
 
-    const handleCanPlay = () => {
-      setIsLoading(false);
-      onCanPlay?.();
-    };
-
     const handleLoadedData = () => {
       setIsLoading(false);
     };
@@ -203,13 +299,6 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       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;
@@ -280,10 +369,11 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
           onCanPlay={handleCanPlay}
           onLoadedData={handleLoadedData}
           onPlay={onPlay}
-          onPause={onPause}
+          onPause={handlePause}
           onEnded={onEnded}
           onError={handleError}
           onTimeUpdate={handleTimeUpdate}
+          onProgress={handleProgress}
         />
       </>
     );

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

@@ -10,11 +10,12 @@ import '@vidstack/react/player/styles/base.css';
 import '@vidstack/react/player/styles/default/theme.css';
 import '@vidstack/react/player/styles/default/layouts/video.css';
 
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } 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 { useVideoCache } from '../../../stores/mediaCache';
 
 import type { MediaPlayerInstance } from '@vidstack/react';
 import type { VidstackProviderProps, VideoPlayerRef, ErrorFallbackProps } from '../types';
@@ -86,13 +87,47 @@ export const VidstackProvider = forwardRef<VideoPlayerRef, VidstackProviderProps
     const playerRef = useRef<MediaPlayerInstance | null>(null);
     const [hasError, setHasError] = useState(false);
     const [errorMessage, setErrorMessage] = useState<string>('Video cannot be played');
+    const lastSavedTimeRef = useRef<number>(0);
+    const hasRestoredPositionRef = useRef(false);
 
-    // Generate poster if not provided
+    // Cache hooks
+    const {
+      getPosterUrl,
+      cachePosterUrl,
+      saveVideoPosition,
+      getVideoPosition,
+    } = useVideoCache();
+
+    // Get source key for position caching
+    const sourceKey = useMemo(() => {
+      switch (source.type) {
+        case 'youtube':
+          return `youtube:${source.id}`;
+        case 'vimeo':
+          return `vimeo:${source.id}`;
+        case 'hls':
+        case 'dash':
+        case 'url':
+          return `url:${source.url}`;
+        default:
+          return null;
+      }
+    }, [source]);
+
+    // Generate poster if not provided, with caching
     const posterUrl = useMemo(() => {
       if (source.poster) return source.poster;
       if (!source.title) return undefined;
-      return generateOgImageUrl({ title: source.title });
-    }, [source.poster, source.title]);
+
+      // Check cache first
+      const cached = getPosterUrl(source.title);
+      if (cached) return cached;
+
+      // Generate and cache
+      const url = generateOgImageUrl({ title: source.title });
+      cachePosterUrl(source.title, url);
+      return url;
+    }, [source.poster, source.title, getPosterUrl, cachePosterUrl]);
 
     // Get Vidstack-compatible source URL
     const vidstackSrc = useMemo(() => getVidstackSrc(source), [source]);
@@ -149,8 +184,19 @@ export const VidstackProvider = forwardRef<VideoPlayerRef, VidstackProviderProps
     );
 
     const handlePlay = () => onPlay?.();
-    const handlePause = () => onPause?.();
+
+    const handlePause = useCallback(() => {
+      // Save position on pause
+      const player = playerRef.current;
+      if (sourceKey && player && player.currentTime > 0) {
+        saveVideoPosition(sourceKey, player.currentTime);
+        lastSavedTimeRef.current = player.currentTime;
+      }
+      onPause?.();
+    }, [sourceKey, saveVideoPosition, onPause]);
+
     const handleEnded = () => onEnded?.();
+
     const handleError = (detail: unknown) => {
       const error = detail as { message?: string };
       const msg = error?.message || 'Video playback error';
@@ -158,17 +204,49 @@ export const VidstackProvider = forwardRef<VideoPlayerRef, VidstackProviderProps
       setErrorMessage(msg);
       onError?.(msg);
     };
+
     const handleLoadStart = () => onLoadStart?.();
-    const handleCanPlay = () => {
+
+    const handleCanPlay = useCallback(() => {
       setHasError(false);
+
+      // Restore position from cache (only once per source)
+      if (sourceKey && playerRef.current && !hasRestoredPositionRef.current) {
+        const cachedPosition = getVideoPosition(sourceKey);
+        if (cachedPosition && cachedPosition > 0) {
+          const duration = playerRef.current.duration;
+          // Only restore if position is valid (not at the end)
+          if (cachedPosition < duration - 1) {
+            playerRef.current.currentTime = cachedPosition;
+          }
+        }
+        hasRestoredPositionRef.current = true;
+      }
+
       onCanPlay?.();
-    };
-    const handleTimeUpdate = () => {
+    }, [sourceKey, getVideoPosition, onCanPlay]);
+
+    const handleTimeUpdate = useCallback(() => {
       const player = playerRef.current;
-      if (player && onTimeUpdate) {
-        onTimeUpdate(player.currentTime, player.duration);
+      if (!player) return;
+
+      // Save position every 5 seconds
+      if (sourceKey && player.currentTime > 0) {
+        const timeSinceLastSave = player.currentTime - lastSavedTimeRef.current;
+        if (timeSinceLastSave >= 5 || timeSinceLastSave < 0) {
+          saveVideoPosition(sourceKey, player.currentTime);
+          lastSavedTimeRef.current = player.currentTime;
+        }
       }
-    };
+
+      onTimeUpdate?.(player.currentTime, player.duration);
+    }, [sourceKey, saveVideoPosition, onTimeUpdate]);
+
+    // Reset position restoration flag when source changes
+    useEffect(() => {
+      hasRestoredPositionRef.current = false;
+      lastSavedTimeRef.current = 0;
+    }, [sourceKey]);
 
     // Determine layout mode
     const isFillMode = aspectRatio === 'fill';

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

@@ -0,0 +1,38 @@
+/**
+ * VideoPlayer types - Public API
+ */
+
+// Source types
+export type {
+  UrlSource,
+  YouTubeSource,
+  VimeoSource,
+  HLSSource,
+  DASHSource,
+  StreamSource,
+  BlobSource,
+  DataUrlSource,
+  VideoSourceUnion,
+} from './sources';
+
+// Player types
+export type {
+  PlayerMode,
+  AspectRatioValue,
+  CommonPlayerSettings,
+  CommonPlayerEvents,
+  ErrorFallbackProps,
+  VideoPlayerProps,
+  VideoPlayerRef,
+} from './player';
+
+// Provider types
+export type {
+  VidstackProviderProps,
+  NativeProviderProps,
+  StreamProviderProps,
+  ResolveFileSourceOptions,
+  VideoPlayerContextValue,
+  VideoPlayerProviderProps,
+  SimpleStreamSource,
+} from './provider';