@umituz/react-native-video-editor 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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",
@@ -29,10 +29,15 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "@umituz/react-native-design-system": ">=1.0.0",
+    "expo-image": ">=1.0.0",
+    "expo-video": ">=3.0.0",
     "zustand": ">=4.0.0"
   },
   "devDependencies": {
     "@types/react": "~19.1.10",
+    "@umituz/react-native-design-system": "latest",
+    "expo-image": "^3.0.11",
+    "expo-video": "^3.0.15",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "typescript": "~5.9.2"

package/src/domain/entities/index.ts

@@ -4,8 +4,10 @@
 
 export * from "./video-project.types";
 
+import type { VideoProject, Scene } from "./video-project.types";
+
 export interface EditorState {
-  project: import("./video-project.types").VideoProject | null;
+  project: VideoProject | null;
   currentSceneIndex: number;
   selectedLayerId: string | null;
   isPlaying: boolean;
@@ -14,13 +16,13 @@ export interface EditorState {
 
 export interface LayerOperationResult {
   success: boolean;
-  updatedScenes: import("./video-project.types").Scene[];
+  updatedScenes: Scene[];
   error?: string;
 }
 
 export interface SceneOperationResult {
   success: boolean;
-  updatedScenes: import("./video-project.types").Scene[];
+  updatedScenes: Scene[];
   newSceneIndex?: number;
   error?: string;
 }

package/src/domain/entities/video-project.types.ts

@@ -1,5 +1,5 @@
 /**
- * Video Project Entity Types
+ * Video Project Types
  * Core domain entities for video editor
  */
 

package/src/index.ts

@@ -47,7 +47,6 @@ export { textLayerOperationsService } from "./infrastructure/services/text-layer
 export { imageLayerOperationsService } from "./infrastructure/services/image-layer-operations.service";
 export { shapeLayerOperationsService } from "./infrastructure/services/shape-layer-operations.service";
 export { layerManipulationService } from "./infrastructure/services/layer-manipulation.service";
-export { exportOrchestratorService } from "./infrastructure/services/export-orchestrator.service";
 
 export {
   layerDeleteService,
@@ -98,3 +97,28 @@ export { useLayerActions } from "./presentation/hooks/useLayerActions";
 export { useSceneActions } from "./presentation/hooks/useSceneActions";
 export { useMenuActions } from "./presentation/hooks/useMenuActions";
 export { useExportActions } from "./presentation/hooks/useExportActions";
+
+// =============================================================================
+// VIDEO PLAYER MODULE
+// =============================================================================
+
+export type {
+  VideoPlayerConfig,
+  VideoPlayerState,
+  VideoPlayerControls,
+  UseVideoPlayerControlResult,
+  VideoVisibilityConfig,
+  VideoPlayerProps,
+  VideoPlayerType,
+} from "./player";
+
+export {
+  safePlay,
+  safePause,
+  safeToggle,
+  isPlayerReady,
+  configurePlayer,
+  useVideoPlayerControl,
+  useVideoVisibility,
+  VideoPlayer,
+} from "./player";

package/src/infrastructure/constants/animation-layer.constants.ts

@@ -3,7 +3,7 @@
  * Centralized constants for animation layer editor
  */
 
-import type { AnimationType } from "@domains/video";
+import type { AnimationType } from "../../../domain/entities";
 
 export type Easing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
 

package/src/infrastructure/services/image-layer-operations.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-uuid";
-import type { Scene, ImageLayer } from "@domains/video";
+import type { Scene, ImageLayer } from "../../../domain/entities";
 import type { LayerOperationResult, AddImageLayerData } from "../../types";
 
 class ImageLayerOperationsService {

package/src/infrastructure/services/layer-manipulation.service.ts

@@ -3,7 +3,7 @@
  * Orchestrator service that delegates to specialized layer operation services
  */
 
-import type { Scene, Animation } from "@domains/video";
+import type { Scene, Animation } from "../../../domain/entities";
 import type { LayerOperationResult, LayerOrderAction } from "../../types";
 import {
   layerDeleteService,

package/src/infrastructure/services/layer-operations/layer-delete.service.ts

@@ -3,7 +3,7 @@
  * Single Responsibility: Handle layer deletion operations
  */
 
-import type { Scene } from "@domains/video";
+import type { Scene } from "../../../domain/entities";
 import type { LayerOperationResult } from "../../../types";
 
 class LayerDeleteService {

package/src/infrastructure/services/layer-operations/layer-duplicate.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-uuid";
-import type { Scene } from "@domains/video";
+import type { Scene } from "../../../domain/entities";
 import type { LayerOperationResult } from "../../../types";
 
 class LayerDuplicateService {

package/src/infrastructure/services/layer-operations/layer-order.service.ts

@@ -3,7 +3,7 @@
  * Single Responsibility: Handle layer ordering operations
  */
 
-import type { Scene } from "@domains/video";
+import type { Scene } from "../../../domain/entities";
 import type { LayerOperationResult, LayerOrderAction } from "../../../types";
 
 class LayerOrderService {

package/src/infrastructure/services/layer-operations/layer-transform.service.ts

@@ -3,7 +3,7 @@
  * Single Responsibility: Handle layer position, size, and animation updates
  */
 
-import type { Scene, Animation, Layer } from "@domains/video";
+import type { Scene, Animation, Layer } from "../../../domain/entities";
 import type { LayerOperationResult } from "../../../types";
 
 class LayerTransformService {

package/src/infrastructure/services/layer-operations.service.ts

@@ -7,7 +7,7 @@ import { textLayerOperationsService } from "./text-layer-operations.service";
 import { imageLayerOperationsService } from "./image-layer-operations.service";
 import { shapeLayerOperationsService } from "./shape-layer-operations.service";
 import { layerManipulationService } from "./layer-manipulation.service";
-import type { Scene, TextLayer, ImageLayer, Animation } from "@domains/video";
+import type { Scene, TextLayer, ImageLayer, Animation } from "../../../domain/entities";
 import type {
   LayerOperationResult,
   LayerOrderAction,

package/src/infrastructure/services/scene-operations.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-uuid";
-import type { Scene, Audio } from "@domains/video";
+import type { Scene, Audio } from "../../../domain/entities";
 import type { SceneOperationResult } from "../../types";
 
 class SceneOperationsService {

package/src/infrastructure/services/shape-layer-operations.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-uuid";
-import type { Scene, ShapeLayer } from "@domains/video";
+import type { Scene, ShapeLayer } from "../../../domain/entities";
 import type { LayerOperationResult, AddShapeLayerData } from "../../types";
 
 class ShapeLayerOperationsService {

package/src/infrastructure/services/text-layer-operations.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-uuid";
-import type { Scene, TextLayer } from "@domains/video";
+import type { Scene, TextLayer } from "../../../domain/entities";
 import type { LayerOperationResult, AddTextLayerData } from "../../types";
 
 class TextLayerOperationsService {

package/src/player/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Video Player Module
+ * Exports for video playback functionality
+ */
+
+// Types
+export type {
+  VideoPlayerConfig,
+  VideoPlayerState,
+  VideoPlayerControls,
+  UseVideoPlayerControlResult,
+  VideoVisibilityConfig,
+  VideoPlayerProps,
+  VideoPlayer as VideoPlayerType,
+} from "./types";
+
+// Services
+export {
+  safePlay,
+  safePause,
+  safeToggle,
+  isPlayerReady,
+  configurePlayer,
+} from "./infrastructure/services/player-control.service";
+
+// Hooks
+export { useVideoPlayerControl } from "./presentation/hooks/useVideoPlayerControl";
+export { useVideoVisibility } from "./presentation/hooks/useVideoVisibility";
+
+// Components
+export { VideoPlayer } from "./presentation/components/VideoPlayer";

package/src/player/infrastructure/services/player-control.service.ts

@@ -0,0 +1,95 @@
+/**
+ * Player Control Service
+ * Safe operations for video player control
+ */
+
+import type { VideoPlayer } from "expo-video";
+
+declare const __DEV__: boolean;
+
+/**
+ * Safely play video with error handling
+ */
+export const safePlay = (player: VideoPlayer | null): boolean => {
+  if (!player) return false;
+
+  try {
+    player.play();
+    return true;
+  } catch (error) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[VideoPlayer] Play error ignored:", error);
+    }
+    return false;
+  }
+};
+
+/**
+ * Safely pause video with error handling
+ */
+export const safePause = (player: VideoPlayer | null): boolean => {
+  if (!player) return false;
+
+  try {
+    player.pause();
+    return true;
+  } catch (error) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[VideoPlayer] Pause error ignored:", error);
+    }
+    return false;
+  }
+};
+
+/**
+ * Safely toggle play/pause state
+ */
+export const safeToggle = (
+  player: VideoPlayer | null,
+  isPlaying: boolean,
+): boolean => {
+  if (!player) return false;
+
+  return isPlaying ? safePause(player) : safePlay(player);
+};
+
+/**
+ * Check if player has valid native object
+ */
+export const isPlayerReady = (
+  player: VideoPlayer | null,
+  source: string | null,
+): boolean => {
+  return Boolean(player && source && source.length > 0);
+};
+
+/**
+ * Configure player with initial settings
+ */
+export const configurePlayer = (
+  player: VideoPlayer,
+  options: {
+    loop?: boolean;
+    muted?: boolean;
+    autoPlay?: boolean;
+  },
+): void => {
+  try {
+    if (options.loop !== undefined) {
+      player.loop = options.loop;
+    }
+    if (options.muted !== undefined) {
+      player.muted = options.muted;
+    }
+    if (options.autoPlay) {
+      player.play();
+    }
+  } catch (error) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[VideoPlayer] Configure error ignored:", error);
+    }
+  }
+};

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

@@ -0,0 +1,135 @@
+/**
+ * VideoPlayer Component
+ * Reusable video player with thumbnail and controls
+ */
+
+import React, { useState, useCallback, useMemo } from "react";
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  useWindowDimensions,
+} from "react-native";
+import { Image } from "expo-image";
+import { VideoView } from "expo-video";
+import { useAppDesignTokens, AtomicIcon } from "@umituz/react-native-design-system";
+
+import type { VideoPlayerProps } from "../../types";
+import { useVideoPlayerControl } from "../hooks/useVideoPlayerControl";
+
+const ASPECT_RATIO = 16 / 9;
+
+export const VideoPlayer: React.FC<VideoPlayerProps> = ({
+  source,
+  thumbnailUrl,
+  loop = true,
+  muted = false,
+  autoPlay = false,
+  nativeControls = true,
+  contentFit = "cover",
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { width } = useWindowDimensions();
+  const [showVideo, setShowVideo] = useState(autoPlay);
+
+  const { player, state } = useVideoPlayerControl({
+    source: showVideo ? source : null,
+    loop,
+    muted,
+    autoPlay,
+  });
+
+  const handlePlay = useCallback(() => {
+    setShowVideo(true);
+    // Player will auto-configure with autoPlay from hook
+  }, []);
+
+  const containerStyle = useMemo(() => ({
+    width: "100%" as const,
+    aspectRatio: ASPECT_RATIO,
+    backgroundColor: tokens.colors.surface,
+    borderRadius: 16,
+    overflow: "hidden" as const,
+  }), [tokens.colors.surface]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        video: {
+          width: "100%",
+          height: "100%",
+        },
+        thumbnailContainer: {
+          width: "100%",
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        thumbnail: {
+          width: "100%",
+          height: "100%",
+        },
+        placeholder: {
+          width: "100%",
+          height: "100%",
+          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]
+  );
+
+  // Show video player when playing
+  if (showVideo && state.isPlayerValid && player) {
+    return (
+      <View style={[containerStyle, style]}>
+        <VideoView
+          player={player}
+          style={styles.video}
+          contentFit={contentFit}
+          nativeControls={nativeControls}
+        />
+      </View>
+    );
+  }
+
+  // Show thumbnail with play button
+  return (
+    <TouchableOpacity
+      style={[containerStyle, style]}
+      onPress={handlePlay}
+      activeOpacity={0.8}
+    >
+      <View style={styles.thumbnailContainer}>
+        {thumbnailUrl ? (
+          <Image
+            source={{ uri: thumbnailUrl }}
+            style={styles.thumbnail}
+            contentFit="cover"
+          />
+        ) : (
+          <View style={styles.placeholder} />
+        )}
+        <View style={styles.playButtonContainer}>
+          <View style={styles.playButton}>
+            <AtomicIcon name="play" customSize={32} color="onPrimary" />
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};

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

@@ -0,0 +1,82 @@
+/**
+ * useVideoPlayerControl Hook
+ * Main hook for video player control with safe operations
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import { useVideoPlayer as useExpoVideoPlayer } from "expo-video";
+
+import type {
+  VideoPlayerConfig,
+  VideoPlayerState,
+  VideoPlayerControls,
+  UseVideoPlayerControlResult,
+} from "../../types";
+import {
+  safePlay,
+  safePause,
+  safeToggle,
+  isPlayerReady,
+  configurePlayer,
+} from "../../infrastructure/services/player-control.service";
+
+/**
+ * Hook for managing video player with safe operations
+ */
+export const useVideoPlayerControl = (
+  config: VideoPlayerConfig,
+): UseVideoPlayerControlResult => {
+  const { source, loop = true, muted = false, autoPlay = false } = config;
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const player = useExpoVideoPlayer(source ?? "", (p) => {
+    if (source && p) {
+      configurePlayer(p, { loop, muted, autoPlay });
+      setIsLoading(false);
+      if (autoPlay) {
+        setIsPlaying(true);
+      }
+    }
+  });
+
+  const isPlayerValid = useMemo(
+    () => isPlayerReady(player, source),
+    [player, source],
+  );
+
+  const play = useCallback(() => {
+    if (!isPlayerValid) return;
+    const success = safePlay(player);
+    if (success) setIsPlaying(true);
+  }, [player, isPlayerValid]);
+
+  const pause = useCallback(() => {
+    if (!isPlayerValid) return;
+    const success = safePause(player);
+    if (success) setIsPlaying(false);
+  }, [player, isPlayerValid]);
+
+  const toggle = useCallback(() => {
+    if (!isPlayerValid) return;
+    const success = safeToggle(player, isPlaying);
+    if (success) setIsPlaying(!isPlaying);
+  }, [player, isPlayerValid, isPlaying]);
+
+  const state: VideoPlayerState = useMemo(
+    () => ({
+      isPlaying,
+      isPlayerValid,
+      isLoading: isLoading && Boolean(source),
+    }),
+    [isPlaying, isPlayerValid, isLoading, source],
+  );
+
+  const controls: VideoPlayerControls = useMemo(
+    () => ({ play, pause, toggle }),
+    [play, pause, toggle],
+  );
+
+  return { player, state, controls };
+};

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

@@ -0,0 +1,62 @@
+/**
+ * useVideoVisibility Hook
+ * Handles auto play/pause based on visibility
+ */
+
+import { useState, useCallback, useEffect } from "react";
+
+import type { VideoVisibilityConfig } from "../../types";
+import {
+  safePlay,
+  safePause,
+} from "../../infrastructure/services/player-control.service";
+
+/**
+ * Optional navigation focus hook type
+ */
+type UseFocusEffectType = (callback: () => (() => void) | undefined) => void;
+
+/**
+ * Hook for managing video visibility-based playback
+ * @param config - Visibility configuration
+ * @param useFocusEffect - Optional navigation focus hook (from @react-navigation/native)
+ */
+export const useVideoVisibility = (
+  config: VideoVisibilityConfig,
+  useFocusEffect?: UseFocusEffectType,
+): void => {
+  const { isVisible, player, isPlayerValid, onPlayingChange } = config;
+  const [isScreenFocused, setIsScreenFocused] = useState(true);
+
+  // Handle screen focus if navigation hook provided
+  useEffect(() => {
+    if (!useFocusEffect) return;
+
+    useFocusEffect(
+      useCallback(() => {
+        setIsScreenFocused(true);
+
+        return () => {
+          setIsScreenFocused(false);
+          if (isPlayerValid) {
+            safePause(player);
+            onPlayingChange?.(false);
+          }
+        };
+      }, [isPlayerValid, player, onPlayingChange]),
+    );
+  }, [useFocusEffect, isPlayerValid, player, onPlayingChange]);
+
+  // Handle visibility changes
+  useEffect(() => {
+    if (!isPlayerValid) return;
+
+    if (isVisible && isScreenFocused) {
+      const success = safePlay(player);
+      if (success) onPlayingChange?.(true);
+    } else {
+      const success = safePause(player);
+      if (success) onPlayingChange?.(false);
+    }
+  }, [isVisible, isScreenFocused, isPlayerValid, player, onPlayingChange]);
+};