@umituz/react-native-video-editor 1.0.14 → 1.0.17

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.0.14",
+  "version": "1.0.17",
   "description": "Professional video editor with layer-based timeline, text/image/shape/audio/animation layers, and export functionality",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
-    "typecheck": "echo 'TypeScript validation passed'",
+    "typecheck": "npx tsc --noEmit",
     "lint": "echo 'Lint passed'",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
@@ -26,22 +26,31 @@
     "url": "https://github.com/umituz/react-native-video-editor"
   },
   "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
     "@umituz/react-native-design-system": ">=1.0.0",
     "expo-document-picker": ">=14.0.0",
+    "expo-file-system": ">=17.0.0",
     "expo-image": ">=1.0.0",
     "expo-video": ">=3.0.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
     "zustand": ">=4.0.0"
   },
   "devDependencies": {
+    "@gorhom/bottom-sheet": "^5.2.8",
     "@types/react": "~19.1.10",
     "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-filesystem": "latest",
+    "expo-application": "^7.0.8",
+    "expo-device": "^8.0.10",
     "expo-document-picker": "^14.0.8",
+    "expo-file-system": "^19.0.0",
     "expo-image": "^3.0.11",
+    "expo-linear-gradient": "^15.0.7",
     "expo-video": "^3.0.15",
     "react": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.1",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/player/index.ts

@@ -12,6 +12,9 @@ export type {
   VideoVisibilityConfig,
   VideoPlayerProps,
   VideoPlayer as VideoPlayerType,
+  VideoDownloadProgressCallback,
+  VideoCacheResult,
+  VideoCachingState,
 } from "./types";
 
 // Services
@@ -23,9 +26,19 @@ export {
   configurePlayer,
 } from "./infrastructure/services/player-control.service";
 
+export {
+  isVideoCached,
+  getCachedVideoUri,
+  downloadVideo,
+  getOrDownloadVideo,
+  clearVideoCache,
+  deleteSpecificCachedVideo,
+} from "./infrastructure/services/video-cache.service";
+
 // Hooks
 export { useVideoPlayerControl } from "./presentation/hooks/useVideoPlayerControl";
 export { useVideoVisibility } from "./presentation/hooks/useVideoVisibility";
+export { useVideoCaching } from "./presentation/hooks/useVideoCaching";
 
 // Components
 export { VideoPlayer } from "./presentation/components/VideoPlayer";

package/src/player/infrastructure/services/video-cache.service.ts

@@ -0,0 +1,136 @@
+/**
+ * Video Cache Service
+ * Downloads and caches remote videos for playback
+ * Bypasses CDN Range request issues by downloading entire file first
+ */
+
+import {
+  downloadFileWithProgress,
+  getCachedFileUri,
+  isUrlCached,
+  deleteCachedFile,
+  getCacheDirectory,
+  clearCache,
+  type DownloadProgressCallback,
+  type DownloadProgress,
+} from "@umituz/react-native-filesystem";
+
+declare const __DEV__: boolean;
+
+const VIDEO_CACHE_SUBDIR = "video-cache";
+
+/** Cache result type */
+export interface VideoCacheResult {
+  readonly uri: string;
+  readonly fromCache: boolean;
+}
+
+/** Re-export progress callback type */
+export type VideoDownloadProgressCallback = (progress: number) => void;
+
+/**
+ * Get video cache directory path
+ */
+const getVideoCacheDir = (): string => {
+  const cacheDir = getCacheDirectory();
+  return `${cacheDir}${VIDEO_CACHE_SUBDIR}/`;
+};
+
+/**
+ * Check if video is already cached
+ */
+export const isVideoCached = (url: string): boolean => {
+  if (!url || url.startsWith("file://")) return false;
+  return isUrlCached(url, getVideoCacheDir());
+};
+
+/**
+ * Get cached video URI if exists
+ */
+export const getCachedVideoUri = (url: string): string | null => {
+  if (!url) return null;
+  if (url.startsWith("file://")) return url;
+  return getCachedFileUri(url, getVideoCacheDir());
+};
+
+/**
+ * Download video to cache with progress tracking
+ */
+export const downloadVideo = async (
+  url: string,
+  onProgress?: VideoDownloadProgressCallback,
+): Promise<string> => {
+  if (!url) throw new Error("URL is required");
+  if (url.startsWith("file://")) return url;
+
+  if (__DEV__) {
+    console.log("[VideoCache] Downloading:", url);
+  }
+
+  const progressCallback: DownloadProgressCallback | undefined = onProgress
+    ? (progress: DownloadProgress) => {
+        const percent = progress.totalBytesExpectedToWrite > 0
+          ? progress.totalBytesWritten / progress.totalBytesExpectedToWrite
+          : 0;
+        onProgress(percent);
+      }
+    : undefined;
+
+  const result = await downloadFileWithProgress(
+    url,
+    getVideoCacheDir(),
+    progressCallback,
+  );
+
+  if (!result.success || !result.uri) {
+    throw new Error(result.error || "Download failed");
+  }
+
+  if (__DEV__) {
+    console.log("[VideoCache] Download complete:", result.uri);
+  }
+
+  return result.uri;
+};
+
+/**
+ * Get video from cache or download if not cached
+ */
+export const getOrDownloadVideo = async (
+  url: string,
+  onProgress?: VideoDownloadProgressCallback,
+): Promise<VideoCacheResult> => {
+  if (!url) throw new Error("URL is required");
+
+  if (url.startsWith("file://")) {
+    return { uri: url, fromCache: true };
+  }
+
+  // Check cache first
+  const cachedUri = getCachedVideoUri(url);
+  if (cachedUri) {
+    if (__DEV__) {
+      console.log("[VideoCache] Using cached video:", cachedUri);
+    }
+    return { uri: cachedUri, fromCache: true };
+  }
+
+  // Download if not cached
+  const downloadedUri = await downloadVideo(url, onProgress);
+  return { uri: downloadedUri, fromCache: false };
+};
+
+/**
+ * Clear all cached videos
+ */
+export const clearVideoCache = async (): Promise<void> => {
+  await clearCache();
+};
+
+/**
+ * Delete a specific cached video
+ */
+export const deleteSpecificCachedVideo = (url: string): boolean => {
+  if (!url || url.startsWith("file://")) return false;
+  return deleteCachedFile(url, getVideoCacheDir());
+};

package/src/player/presentation/components/VideoPlayer.tsx

@@ -1,6 +1,6 @@
 /**
  * VideoPlayer Component
- * Reusable video player with thumbnail and controls
+ * Reusable video player with caching, thumbnail and controls
  */
 
 import React, { useState, useCallback, useMemo, useEffect } from "react";
@@ -11,10 +11,12 @@ import {
   useResponsive,
   useAppDesignTokens,
   AtomicIcon,
+  AtomicText,
 } from "@umituz/react-native-design-system";
 
 import type { VideoPlayerProps } from "../../types";
 import { useVideoPlayerControl } from "../hooks/useVideoPlayerControl";
+import { useVideoCaching } from "../hooks/useVideoCaching";
 
 declare const __DEV__: boolean;
 
@@ -38,14 +40,17 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   contentFit = "cover",
   style,
 }) => {
-  // IMPORTANT: Call useResponsive BEFORE useAppDesignTokens to maintain consistent hook order
-  // useAppDesignTokens internally calls useResponsive, so order matters
+  // IMPORTANT: Call useResponsive BEFORE useAppDesignTokens to maintain hook order
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const tokens = useAppDesignTokens();
   const [showVideo, setShowVideo] = useState(autoPlay);
 
+  // Cache the video first (downloads if needed)
+  const { localUri, isDownloading, downloadProgress, error } = useVideoCaching(source);
+
+  // Use cached local URI for player
   const { player, state, controls } = useVideoPlayerControl({
-    source,
+    source: localUri,
     loop,
     muted,
     autoPlay: false,
@@ -53,23 +58,21 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
 
   useEffect(() => {
     if (showVideo && state.isPlayerValid && player) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        // eslint-disable-next-line no-console
-        console.log("[VideoPlayer] Starting playback...");
+      if (__DEV__) {
+        console.log("[VideoPlayer] Starting playback from:", localUri);
       }
       controls.play();
     }
-  }, [showVideo, state.isPlayerValid, player, controls]);
+  }, [showVideo, state.isPlayerValid, player, controls, localUri]);
 
   const handlePlay = useCallback(() => {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      // eslint-disable-next-line no-console
-      console.log("[VideoPlayer] handlePlay called, source:", source);
+    if (__DEV__) {
+      console.log("[VideoPlayer] handlePlay, localUri:", localUri);
     }
     setShowVideo(true);
-  }, [source]);
+  }, [localUri]);
 
-  // Calculate absolute dimensions for VideoView (expo-video requires pixel values)
+  // Calculate dimensions
   const videoWidth = getWidthFromStyle(style as ViewStyle) ?? (screenWidth - horizontalPadding * 2);
   const videoHeight = videoWidth / ASPECT_RATIO;
 
@@ -81,67 +84,63 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     overflow: "hidden" as const,
   }), [tokens.colors.surface, videoWidth, videoHeight]);
 
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        video: {
-          width: videoWidth,
-          height: videoHeight,
-        },
-        thumbnailContainer: {
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        thumbnail: {
-          width: videoWidth,
-          height: videoHeight,
-        },
-        placeholder: {
-          width: videoWidth,
-          height: videoHeight,
-          backgroundColor: tokens.colors.surfaceSecondary,
-        },
-        playButtonContainer: {
-          ...StyleSheet.absoluteFillObject,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        playButton: {
-          width: 64,
-          height: 64,
-          borderRadius: 32,
-          backgroundColor: tokens.colors.primary,
-          justifyContent: "center",
-          alignItems: "center",
-          paddingLeft: 4,
-        },
-      }),
-    [tokens, videoWidth, videoHeight]
-  );
+  const styles = useMemo(() => StyleSheet.create({
+    video: { width: videoWidth, height: videoHeight },
+    thumbnailContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
+    thumbnail: { width: videoWidth, height: videoHeight },
+    placeholder: { width: videoWidth, height: videoHeight, backgroundColor: tokens.colors.surfaceSecondary },
+    playButtonContainer: { ...StyleSheet.absoluteFillObject, justifyContent: "center", alignItems: "center" },
+    playButton: {
+      width: 64, height: 64, borderRadius: 32,
+      backgroundColor: tokens.colors.primary,
+      justifyContent: "center", alignItems: "center", paddingLeft: 4,
+    },
+    progressContainer: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: "center", alignItems: "center",
+      backgroundColor: "rgba(0,0,0,0.5)",
+    },
+    progressText: { color: "#fff", fontSize: 16, fontWeight: "600" },
+    errorText: { color: tokens.colors.error, fontSize: 14, textAlign: "center", padding: 16 },
+  }), [tokens, videoWidth, videoHeight]);
 
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    // eslint-disable-next-line no-console
-    console.log("[VideoPlayer] state:", {
-      showVideo,
-      isPlayerValid: state.isPlayerValid,
-      hasPlayer: !!player,
-      source,
-    });
-    // eslint-disable-next-line no-console
-    console.log("[VideoPlayer] dimensions:", {
-      screenWidth,
-      horizontalPadding,
-      videoWidth,
-      videoHeight,
-      styleWidth: getWidthFromStyle(style as ViewStyle),
-    });
+  // Show error state
+  if (error) {
+    return (
+      <View style={[containerStyle, style]}>
+        <View style={styles.thumbnailContainer}>
+          <View style={styles.placeholder} />
+          <View style={styles.progressContainer}>
+            <AtomicText style={styles.errorText}>{error}</AtomicText>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  // Show download progress
+  if (isDownloading) {
+    const progressPercent = Math.round(downloadProgress * 100);
+    return (
+      <View style={[containerStyle, style]}>
+        <View style={styles.thumbnailContainer}>
+          {thumbnailUrl ? (
+            <Image source={{ uri: thumbnailUrl }} style={styles.thumbnail} contentFit="cover" />
+          ) : (
+            <View style={styles.placeholder} />
+          )}
+          <View style={styles.progressContainer}>
+            <AtomicText style={styles.progressText}>{progressPercent}%</AtomicText>
+          </View>
+        </View>
+      </View>
+    );
   }
 
+  // Show video player
   if (showVideo && state.isPlayerValid && player) {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      // eslint-disable-next-line no-console
-      console.log("[VideoPlayer] Rendering VideoView with dimensions:", { videoWidth, videoHeight });
+    if (__DEV__) {
+      console.log("[VideoPlayer] Rendering VideoView:", { videoWidth, videoHeight });
     }
     return (
       <View style={[containerStyle, style]}>
@@ -155,19 +154,12 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     );
   }
 
+  // Show thumbnail with play button
   return (
-    <TouchableOpacity
-      style={[containerStyle, style]}
-      onPress={handlePlay}
-      activeOpacity={0.8}
-    >
+    <TouchableOpacity style={[containerStyle, style]} onPress={handlePlay} activeOpacity={0.8}>
       <View style={styles.thumbnailContainer}>
         {thumbnailUrl ? (
-          <Image
-            source={{ uri: thumbnailUrl }}
-            style={styles.thumbnail}
-            contentFit="cover"
-          />
+          <Image source={{ uri: thumbnailUrl }} style={styles.thumbnail} contentFit="cover" />
         ) : (
           <View style={styles.placeholder} />
         )}

package/src/player/presentation/hooks/useVideoCaching.ts

@@ -0,0 +1,104 @@
+/**
+ * useVideoCaching Hook
+ * Manages video caching state and download progress
+ */
+
+import { useState, useEffect, useCallback } from "react";
+
+import {
+  getOrDownloadVideo,
+  isVideoCached,
+  type VideoCacheResult,
+} from "../../infrastructure/services/video-cache.service";
+
+declare const __DEV__: boolean;
+
+/** Video caching state */
+export interface VideoCachingState {
+  readonly localUri: string | null;
+  readonly isDownloading: boolean;
+  readonly downloadProgress: number;
+  readonly fromCache: boolean;
+  readonly error: string | null;
+  readonly retry: () => void;
+}
+
+/**
+ * Hook for managing video caching
+ * Downloads remote videos to local cache for playback
+ */
+export const useVideoCaching = (sourceUrl: string | null): VideoCachingState => {
+  const [localUri, setLocalUri] = useState<string | null>(null);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [fromCache, setFromCache] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadVideo = useCallback(async () => {
+    if (!sourceUrl) {
+      setLocalUri(null);
+      setIsDownloading(false);
+      setDownloadProgress(0);
+      setFromCache(false);
+      setError(null);
+      return;
+    }
+
+    if (sourceUrl.startsWith("file://")) {
+      setLocalUri(sourceUrl);
+      setIsDownloading(false);
+      setDownloadProgress(1);
+      setFromCache(true);
+      setError(null);
+      return;
+    }
+
+    const cached = isVideoCached(sourceUrl);
+    setIsDownloading(!cached);
+    setDownloadProgress(cached ? 1 : 0);
+    setError(null);
+
+    try {
+      const result: VideoCacheResult = await getOrDownloadVideo(
+        sourceUrl,
+        (progress) => setDownloadProgress(progress),
+      );
+
+      setLocalUri(result.uri);
+      setFromCache(result.fromCache);
+      setIsDownloading(false);
+      setDownloadProgress(1);
+
+      if (__DEV__) {
+        console.log("[useVideoCaching] Video ready:", result.uri);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Download failed";
+      setError(message);
+      setIsDownloading(false);
+      setLocalUri(null);
+
+      if (__DEV__) {
+        console.log("[useVideoCaching] Error:", message);
+      }
+    }
+  }, [sourceUrl]);
+
+  useEffect(() => {
+    loadVideo();
+  }, [loadVideo]);
+
+  const retry = useCallback(() => {
+    setError(null);
+    loadVideo();
+  }, [loadVideo]);
+
+  return {
+    localUri,
+    isDownloading,
+    downloadProgress,
+    fromCache,
+    error,
+    retry,
+  };
+};

package/src/player/presentation/hooks/useVideoPlayerControl.ts

@@ -3,7 +3,7 @@
  * Main hook for video player control with safe operations
  */
 
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useVideoPlayer as useExpoVideoPlayer } from "expo-video";
 
 import type {
@@ -58,31 +58,6 @@ export const useVideoPlayerControl = (
     }
   });
 
-  // Listen to player status changes and errors
-  useEffect(() => {
-    if (!player) return;
-
-    const subscription = player.addListener("statusChange", ({ status, error }) => {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        // eslint-disable-next-line no-console
-        console.log("[useVideoPlayerControl] Status changed:", status, "Error:", error);
-      }
-      if (status === "readyToPlay") {
-        setIsLoading(false);
-      }
-      if (error) {
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          // eslint-disable-next-line no-console
-          console.error("[useVideoPlayerControl] Player error:", error);
-        }
-      }
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, [player]);
-
   const isPlayerValid = useMemo(
     () => isPlayerReady(player, source),
     [player, source],

package/src/player/types/index.ts

@@ -72,3 +72,12 @@ export interface VideoPlayerProps {
 }
 
 export type { VideoPlayer } from "expo-video";
+
+/**
+ * Video caching types
+ */
+export type {
+  VideoDownloadProgressCallback,
+  VideoCacheResult,
+} from "../infrastructure/services/video-cache.service";
+export type { VideoCachingState } from "../presentation/hooks/useVideoCaching";