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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.0.2",
+  "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/index.ts

@@ -97,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/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]);
+};

package/src/player/types/index.ts

@@ -0,0 +1,74 @@
+/**
+ * Video Player Types
+ * Core type definitions for video playback functionality
+ */
+
+import type { VideoPlayer } from "expo-video";
+import type { ViewStyle } from "react-native";
+
+/**
+ * Configuration for video player initialization
+ */
+export interface VideoPlayerConfig {
+  readonly source: string | null;
+  readonly loop?: boolean;
+  readonly muted?: boolean;
+  readonly autoPlay?: boolean;
+}
+
+/**
+ * Current state of the video player
+ */
+export interface VideoPlayerState {
+  readonly isPlaying: boolean;
+  readonly isPlayerValid: boolean;
+  readonly isLoading: boolean;
+}
+
+/**
+ * Video player control actions
+ */
+export interface VideoPlayerControls {
+  readonly play: () => void;
+  readonly pause: () => void;
+  readonly toggle: () => void;
+}
+
+/**
+ * Combined hook return type
+ */
+export interface UseVideoPlayerControlResult {
+  readonly player: VideoPlayer | null;
+  readonly state: VideoPlayerState;
+  readonly controls: VideoPlayerControls;
+}
+
+/**
+ * Visibility hook configuration
+ */
+export interface VideoVisibilityConfig {
+  readonly isVisible: boolean;
+  readonly player: VideoPlayer | null;
+  readonly isPlayerValid: boolean;
+  readonly onPlayingChange?: (isPlaying: boolean) => void;
+}
+
+/**
+ * Video player component props
+ */
+export interface VideoPlayerProps {
+  readonly source: string | null;
+  readonly isVisible?: boolean;
+  readonly loop?: boolean;
+  readonly muted?: boolean;
+  readonly autoPlay?: boolean;
+  readonly showControls?: boolean;
+  readonly nativeControls?: boolean;
+  readonly onPlayingChange?: (isPlaying: boolean) => void;
+  readonly onError?: (error: Error) => void;
+  readonly style?: ViewStyle;
+  readonly contentFit?: "contain" | "cover" | "fill";
+  readonly thumbnailUrl?: string;
+}
+
+export type { VideoPlayer } from "expo-video";

package/src/presentation/components/export/ExportActions.tsx

@@ -8,11 +8,11 @@ import {
   View,
   StyleSheet,
   TouchableOpacity,
-  ActivityIndicator,
 } from "react-native";
 import {
   AtomicText,
   AtomicIcon,
+  AtomicSpinner,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 
@@ -64,7 +64,7 @@ export const ExportActions: React.FC<ExportActionsProps> = ({
         disabled={isExporting}
       >
         {isExporting ? (
-          <ActivityIndicator color="#FFFFFF" size="small" />
+          <AtomicSpinner size="sm" color="white" />
         ) : (
           <AtomicIcon name="Download" size="sm" color="onSurface" />
         )}