@djangocfg/ui-nextjs 2.1.80 → 2.1.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.80",
+  "version": "2.1.82",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.80",
-    "@djangocfg/ui-core": "^2.1.80",
+    "@djangocfg/api": "^2.1.82",
+    "@djangocfg/ui-core": "^2.1.82",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -110,7 +110,7 @@
     "wavesurfer.js": "^7.12.1"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.80",
+    "@djangocfg/typescript-config": "^2.1.82",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/tools/AudioPlayer/context/AudioProvider.tsx

@@ -19,7 +19,7 @@ import {
 import { useWavesurfer } from '@wavesurfer/react';
 import type { AudioContextState, AudioSource, WaveformOptions } from '../types';
 import { useSharedWebAudio, useAudioAnalysis, useAudioSource } from '../hooks';
-import { useAudioCache } from '../../../stores/mediaCache';
+import { useMediaCacheStore } from '../../../stores/mediaCache';
 import { audioDebug } from '../utils/debug';
 
 // =============================================================================
@@ -57,8 +57,9 @@ export function AudioProvider({
   containerRef,
   children,
 }: AudioProviderProps) {
-  // Cache for playback position persistence
-  const { saveAudioPosition, getAudioPosition } = useAudioCache();
+  // Get stable function references from store
+  const saveAudioPosition = useMediaCacheStore.getState().saveAudioPosition;
+  const getAudioPosition = useMediaCacheStore.getState().getAudioPosition;
   const lastSavedTimeRef = useRef<number>(0);
 
   // Handle prefetch if enabled (for streaming URLs)
@@ -149,7 +150,8 @@ export function AudioProvider({
         }
       }
     }
-  }, [isReady, wavesurfer, source.uri, getAudioPosition]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isReady, wavesurfer, source.uri]);
 
   // Save playback position periodically and on pause
   useEffect(() => {
@@ -169,7 +171,8 @@ export function AudioProvider({
       saveAudioPosition(source.uri, currentTime);
       lastSavedTimeRef.current = currentTime;
     }
-  }, [isPlaying, currentTime, source.uri, saveAudioPosition]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isPlaying, currentTime, source.uri]);
 
   // Derived state
   const duration = wavesurfer?.getDuration() ?? 0;

package/src/tools/AudioPlayer/hooks/useAudioSource.ts

@@ -58,15 +58,30 @@ export function useAudioSource(source: AudioSource): UseAudioSourceResult {
 
         const response = await fetch(source.uri, {
           signal: abortController.signal,
+          headers: {
+            // Request full file - some servers require Range header
+            'Range': 'bytes=0-',
+          },
         });
 
+        // Accept 200 OK or 206 Partial Content (response.ok covers both)
         if (!response.ok) {
           throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         }
 
         // Get content length for progress tracking
-        const contentLength = response.headers.get('Content-Length');
-        const totalBytes = contentLength ? parseInt(contentLength, 10) : 0;
+        // For Range requests, use Content-Range header (format: "bytes 0-1234/5678")
+        let totalBytes = 0;
+        const contentRange = response.headers.get('Content-Range');
+        if (contentRange) {
+          const match = contentRange.match(/\/(\d+)$/);
+          if (match) {
+            totalBytes = parseInt(match[1], 10);
+          }
+        } else {
+          const contentLength = response.headers.get('Content-Length');
+          totalBytes = contentLength ? parseInt(contentLength, 10) : 0;
+        }
 
         if (!response.body) {
           // Fallback for browsers without ReadableStream

package/src/tools/ImageViewer/hooks/useImageLoading.ts

@@ -5,7 +5,7 @@
  */
 
 import { useState, useEffect, useRef } from 'react';
-import { useImageCache, generateContentKey } from '../../../stores/mediaCache';
+import { useMediaCacheStore, generateContentKey } from '../../../stores/mediaCache';
 import { createLQIP, MAX_IMAGE_SIZE, WARNING_IMAGE_SIZE, PROGRESSIVE_LOADING_THRESHOLD, imageDebug } from '../utils';
 
 // =============================================================================
@@ -50,7 +50,9 @@ export interface UseImageLoadingReturn {
 export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadingReturn {
   const { content, mimeType, src: directSrc } = options;
 
-  const { getOrCreateBlobUrl, releaseBlobUrl } = useImageCache();
+  // Get stable function references from store (not from hook to avoid re-renders)
+  const getOrCreateBlobUrl = useMediaCacheStore.getState().getOrCreateBlobUrl;
+  const releaseBlobUrl = useMediaCacheStore.getState().releaseBlobUrl;
 
   const [src, setSrc] = useState<string | null>(null);
   const [lqip, setLqip] = useState<string | null>(null);
@@ -58,6 +60,7 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
   const [error, setError] = useState<string | null>(null);
 
   const contentKeyRef = useRef<string | null>(null);
+  const isMountedRef = useRef(true);
 
   // Calculate size and flags
   const size = content ? (typeof content === 'string' ? content.length : content.byteLength) : 0;
@@ -65,6 +68,19 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
   const hasContent = directSrc ? true : size > 0;
   const useProgressiveLoading = directSrc ? false : size > PROGRESSIVE_LOADING_THRESHOLD;
 
+  // Track unmount for cleanup
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      // Release blob URL only on actual unmount
+      if (contentKeyRef.current) {
+        useMediaCacheStore.getState().releaseBlobUrl(contentKeyRef.current);
+        contentKeyRef.current = null;
+      }
+    };
+  }, []);
+
   // Create blob URL with caching and size validation
   useEffect(() => {
     // Reset error state
@@ -112,6 +128,12 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
       const encoder = new TextEncoder();
       const buffer = encoder.encode(content).buffer;
       const contentKey = generateContentKey(buffer);
+
+      // Release previous blob URL if content changed
+      if (contentKeyRef.current && contentKeyRef.current !== contentKey) {
+        releaseBlobUrl(contentKeyRef.current);
+      }
+
       contentKeyRef.current = contentKey;
       const url = getOrCreateBlobUrl(contentKey, buffer, mimeType || 'image/png');
       imageDebug.load(url, 'blob');
@@ -122,19 +144,21 @@ export function useImageLoading(options: UseImageLoadingOptions): UseImageLoadin
 
     // Handle ArrayBuffer with cached blob URL
     const contentKey = generateContentKey(content);
+
+    // Release previous blob URL if content changed
+    if (contentKeyRef.current && contentKeyRef.current !== contentKey) {
+      releaseBlobUrl(contentKeyRef.current);
+    }
+
     contentKeyRef.current = contentKey;
     const url = getOrCreateBlobUrl(contentKey, content, mimeType || 'image/png');
     imageDebug.load(url, 'blob');
     imageDebug.state('loaded', { size, mimeType, contentKey });
     setSrc(url);
 
-    return () => {
-      if (contentKeyRef.current) {
-        releaseBlobUrl(contentKeyRef.current);
-        contentKeyRef.current = null;
-      }
-    };
-  }, [content, mimeType, hasContent, size, directSrc, getOrCreateBlobUrl, releaseBlobUrl]);
+    // No cleanup here - cleanup happens in unmount effect above
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [content, mimeType, hasContent, size, directSrc]);
 
   // Create LQIP for progressive loading
   useEffect(() => {

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

@@ -7,7 +7,7 @@
  */
 
 import { useRef, useEffect, useCallback } from 'react';
-import { useVideoCache } from '../../../stores/mediaCache';
+import { useMediaCacheStore } from '../../../stores/mediaCache';
 
 // =============================================================================
 // TYPES
@@ -54,7 +54,10 @@ export function useVideoPositionCache(
 ): UseVideoPositionCacheReturn {
   const { cacheKey, currentTime, duration, isPlaying, isReady, onSeek } = options;
 
-  const { saveVideoPosition, getVideoPosition } = useVideoCache();
+  // Get stable function references from store
+  const saveVideoPosition = useMediaCacheStore.getState().saveVideoPosition;
+  const getVideoPosition = useMediaCacheStore.getState().getVideoPosition;
+
   const lastSavedTimeRef = useRef<number>(0);
   const hasRestoredRef = useRef<boolean>(false);
 
@@ -70,7 +73,8 @@ export function useVideoPositionCache(
       }
     }
     hasRestoredRef.current = true;
-  }, [isReady, cacheKey, duration, getVideoPosition, onSeek]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isReady, cacheKey, duration, onSeek]);
 
   // Reset restored flag when cache key changes
   useEffect(() => {
@@ -87,20 +91,23 @@ export function useVideoPositionCache(
       saveVideoPosition(cacheKey, currentTime);
       lastSavedTimeRef.current = currentTime;
     }
-  }, [cacheKey, isPlaying, currentTime, saveVideoPosition]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cacheKey, isPlaying, currentTime]);
 
   const savePosition = useCallback(() => {
     if (cacheKey && currentTime > 0) {
       saveVideoPosition(cacheKey, currentTime);
       lastSavedTimeRef.current = currentTime;
     }
-  }, [cacheKey, currentTime, saveVideoPosition]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cacheKey, currentTime]);
 
   const clearPosition = useCallback(() => {
     if (cacheKey) {
       saveVideoPosition(cacheKey, 0);
     }
-  }, [cacheKey, saveVideoPosition]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cacheKey]);
 
   return {
     savePosition,

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

@@ -14,7 +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 { useMediaCacheStore, generateContentKey } from '../../../stores/mediaCache';
 
 import type { StreamProviderProps, VideoPlayerRef, StreamSource, BlobSource, DataUrlSource, ErrorFallbackProps } from '../types';
 import { videoDebug } from '../utils/debug';
@@ -77,14 +77,12 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
     const contentKeyRef = useRef<string | null>(null);
     const lastSavedTimeRef = useRef<number>(0);
 
-    // Cache hooks
-    const {
-      getOrCreateBlobUrl,
-      releaseBlobUrl,
-      getOrCreateStreamUrl,
-      saveVideoPosition,
-      getVideoPosition,
-    } = useVideoCache();
+    // Get stable function references from store (not from hook to avoid re-renders)
+    const getOrCreateBlobUrl = useMediaCacheStore.getState().getOrCreateBlobUrl;
+    const releaseBlobUrl = useMediaCacheStore.getState().releaseBlobUrl;
+    const getOrCreateStreamUrl = useMediaCacheStore.getState().getOrCreateStreamUrl;
+    const saveVideoPosition = useMediaCacheStore.getState().saveVideoPosition;
+    const getVideoPosition = useMediaCacheStore.getState().getVideoPosition;
 
     // Retry function for error fallback
     // Regenerates URL for stream sources to get fresh token/session
@@ -143,12 +141,31 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       []
     );
 
+    // Track unmount for cleanup
+    const isMountedRef = useRef(true);
+    useEffect(() => {
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+        // Release blob URL only on actual unmount
+        if (contentKeyRef.current) {
+          useMediaCacheStore.getState().releaseBlobUrl(contentKeyRef.current);
+          contentKeyRef.current = null;
+        }
+      };
+    }, []);
+
     // Create video URL based on source type with caching
     useEffect(() => {
-      // Cleanup previous blob URL from cache
+      // Release previous blob URL if source changed
       if (contentKeyRef.current) {
-        releaseBlobUrl(contentKeyRef.current);
-        contentKeyRef.current = null;
+        const newKey = source.type === 'blob'
+          ? generateContentKey((source as BlobSource).data)
+          : null;
+        if (newKey !== contentKeyRef.current) {
+          releaseBlobUrl(contentKeyRef.current);
+          contentKeyRef.current = null;
+        }
       }
 
       setHasError(false);
@@ -198,13 +215,9 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
           setErrorMessage('Invalid video source');
       }
 
-      return () => {
-        if (contentKeyRef.current) {
-          releaseBlobUrl(contentKeyRef.current);
-          contentKeyRef.current = null;
-        }
-      };
-    }, [source, getOrCreateBlobUrl, getOrCreateStreamUrl, releaseBlobUrl]);
+      // No cleanup here - cleanup happens in unmount effect above
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [source]);
 
     // Get source key for position caching
     const getSourceKey = useCallback(() => {
@@ -244,7 +257,8 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       }
 
       onCanPlay?.();
-    }, [getSourceKey, getVideoPosition, onCanPlay]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getSourceKey, onCanPlay]);
 
     // Save playback position periodically
     const handleTimeUpdate = useCallback(() => {
@@ -262,7 +276,8 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
       }
 
       onTimeUpdate?.(video.currentTime, video.duration);
-    }, [getSourceKey, saveVideoPosition, onTimeUpdate]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getSourceKey, onTimeUpdate]);
 
     // Save position on pause
     const handlePause = useCallback(() => {
@@ -273,7 +288,8 @@ export const StreamProvider = forwardRef<VideoPlayerRef, StreamProviderProps>(
         lastSavedTimeRef.current = video.currentTime;
       }
       onPause?.();
-    }, [getSourceKey, saveVideoPosition, onPause]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getSourceKey, onPause]);
 
     // Handle buffer progress
     const handleProgress = useCallback(() => {