@umituz/react-native-video-editor 1.0.1

package/README.md

@@ -0,0 +1,92 @@
+# @umituz/react-native-video-editor
+
+Professional video editor package with layer-based timeline, multiple layer types, and export functionality.
+
+## Features
+
+- Layer-based editing system (text, image, shape, audio, animation)
+- Timeline management with scenes
+- Playback controls
+- History/undo functionality
+- Video export with customizable settings
+- Bottom sheet integration for layer editing
+
+## Installation
+
+```bash
+npm install @umituz/react-native-video-editor
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```json
+{
+  "react": ">=18.2.0",
+  "react-native": ">=0.74.0",
+  "@umituz/react-native-design-system": ">=1.0.0",
+  "zustand": ">=4.0.0"
+}
+```
+
+## Usage
+
+### Hooks
+
+```typescript
+import {
+  useEditorLayers,
+  useEditorScenes,
+  useEditorPlayback,
+  useEditorHistory,
+  useEditorBottomSheet,
+  useEditorActions,
+} from "@umituz/react-native-video-editor";
+
+// Use hooks in your component
+const { layers, addLayer, removeLayer } = useEditorLayers();
+const { scenes, addScene, removeScene } = useEditorScenes();
+const { isPlaying, play, pause } = useEditorPlayback();
+```
+
+### Components
+
+```typescript
+import {
+  EditorHeader,
+  EditorPreviewArea,
+  EditorTimeline,
+  EditorToolPanel,
+  TextLayerEditor,
+  ImageLayerEditor,
+  ShapeLayerEditor,
+  AudioEditor,
+  AnimationEditor,
+  ExportDialog,
+} from "@umituz/react-native-video-editor";
+
+// Use components in your editor screen
+<EditorHeader />
+<EditorPreviewArea />
+<EditorTimeline />
+```
+
+### Services
+
+```typescript
+import {
+  layerOperationsService,
+  sceneOperationsService,
+  exportOrchestratorService,
+} from "@umituz/react-native-video-editor";
+
+// Use services for business logic
+layerOperationsService.duplicateLayer(layerId);
+sceneOperationsService.addScene(sceneData);
+exportOrchestratorService.exportVideo(options);
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@umituz/react-native-video-editor",
+  "version": "1.0.1",
+  "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'",
+    "lint": "echo 'Lint passed'",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "keywords": [
+    "react-native",
+    "video-editor",
+    "timeline",
+    "layers",
+    "video-export",
+    "animation"
+  ],
+  "author": "umituz",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "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",
+    "zustand": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.10",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "typescript": "~5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/domain/entities/index.ts

@@ -0,0 +1,50 @@
+/**
+ * Editor Domain Types
+ */
+
+export * from "./video-project.types";
+
+export interface EditorState {
+  project: import("./video-project.types").VideoProject | null;
+  currentSceneIndex: number;
+  selectedLayerId: string | null;
+  isPlaying: boolean;
+  currentTime: number;
+}
+
+export interface LayerOperationResult {
+  success: boolean;
+  updatedScenes: import("./video-project.types").Scene[];
+  error?: string;
+}
+
+export interface SceneOperationResult {
+  success: boolean;
+  updatedScenes: import("./video-project.types").Scene[];
+  newSceneIndex?: number;
+  error?: string;
+}
+
+export type LayerOrderAction = "front" | "back" | "up" | "down";
+
+export interface AddTextLayerData {
+  content?: string;
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
+  color?: string;
+  textAlign?: "left" | "center" | "right";
+}
+
+export interface AddImageLayerData {
+  uri?: string;
+  opacity?: number;
+}
+
+export interface AddShapeLayerData {
+  shape?: string;
+  opacity?: number;
+  fillColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
+}

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

@@ -0,0 +1,153 @@
+/**
+ * Video Project Entity Types
+ * Core domain entities for video editor
+ */
+
+export type AspectRatio = "16:9" | "9:16" | "1:1" | "4:5";
+
+export type LayerType = "text" | "image" | "video" | "shape";
+
+export type TransitionType = "fade" | "slide" | "zoom" | "wipe" | "none";
+
+export type AnimationType =
+  | "fade"
+  | "slide"
+  | "bounce"
+  | "zoom"
+  | "rotate"
+  | "none";
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export interface Animation {
+  type: AnimationType;
+  duration: number;
+  delay?: number;
+  easing?: "linear" | "ease-in" | "ease-out" | "ease-in-out";
+}
+
+export interface Transition {
+  type: TransitionType;
+  duration: number;
+}
+
+export interface Background {
+  type: "color" | "gradient" | "image" | "video";
+  value: string;
+}
+
+export interface TextLayer {
+  id: string;
+  type: "text";
+  content: string;
+  position: Position;
+  size: Size;
+  rotation: number;
+  opacity: number;
+  fontSize: number;
+  fontFamily: string;
+  fontWeight:
+    | "normal"
+    | "bold"
+    | "100"
+    | "200"
+    | "300"
+    | "400"
+    | "500"
+    | "600"
+    | "700"
+    | "800"
+    | "900";
+  color: string;
+  textAlign: "left" | "center" | "right";
+  animation?: Animation;
+}
+
+export interface ImageLayer {
+  id: string;
+  type: "image";
+  uri: string;
+  position: Position;
+  size: Size;
+  rotation: number;
+  opacity: number;
+  animation?: Animation;
+}
+
+export interface VideoLayer {
+  id: string;
+  type: "video";
+  uri: string;
+  position: Position;
+  size: Size;
+  rotation: number;
+  opacity: number;
+  startTime: number;
+  endTime: number;
+  volume: number;
+  animation?: Animation;
+}
+
+export interface ShapeLayer {
+  id: string;
+  type: "shape";
+  shape: "rectangle" | "circle" | "triangle";
+  position: Position;
+  size: Size;
+  rotation: number;
+  opacity: number;
+  fillColor: string;
+  borderColor?: string;
+  borderWidth?: number;
+  animation?: Animation;
+}
+
+export type Layer = TextLayer | ImageLayer | VideoLayer | ShapeLayer;
+
+export interface Audio {
+  uri: string;
+  volume: number;
+  startTime: number;
+  fadeIn?: number;
+  fadeOut?: number;
+}
+
+export interface Scene {
+  id: string;
+  duration: number;
+  background: Background;
+  layers: Layer[];
+  transition: Transition;
+  audio?: Audio;
+}
+
+export interface ExportSettings {
+  resolution: "720p" | "1080p" | "4k";
+  format: "mp4" | "mov";
+  quality: "low" | "medium" | "high";
+  includeWatermark: boolean;
+}
+
+export interface VideoProject {
+  id: string;
+  templateId: string;
+  title: string;
+  description?: string;
+  createdAt: string;
+  updatedAt: string;
+  duration: number;
+  thumbnailUrl: string;
+  aspectRatio: AspectRatio;
+  scenes: Scene[];
+  exportSettings: ExportSettings;
+  folderId?: string;
+  tags: string[];
+}

package/src/index.ts

@@ -0,0 +1,100 @@
+/**
+ * @umituz/react-native-video-editor
+ * Professional video editor with layer-based timeline
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Types & Interfaces
+// =============================================================================
+
+export type {
+  VideoProject,
+  Scene,
+  Layer,
+  TextLayer,
+  ImageLayer,
+  VideoLayer,
+  ShapeLayer,
+  Animation,
+  Audio,
+  ExportSettings,
+  AspectRatio,
+  LayerType,
+  TransitionType,
+  AnimationType,
+  Position,
+  Size,
+  Transition,
+  Background,
+  EditorState,
+  LayerOperationResult,
+  SceneOperationResult,
+  LayerOrderAction,
+  AddTextLayerData,
+  AddImageLayerData,
+  AddShapeLayerData,
+} from "./domain/entities";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER - Services & Constants
+// =============================================================================
+
+export * from "./infrastructure/constants";
+
+export { layerOperationsService } from "./infrastructure/services/layer-operations.service";
+export { sceneOperationsService } from "./infrastructure/services/scene-operations.service";
+export { textLayerOperationsService } from "./infrastructure/services/text-layer-operations.service";
+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,
+  layerDuplicateService,
+  layerOrderService,
+  layerTransformService,
+} from "./infrastructure/services/layer-operations";
+
+// =============================================================================
+// PRESENTATION LAYER - Components & Hooks
+// =============================================================================
+
+export {
+  EditorHeader,
+  EditorPreviewArea,
+  EditorToolPanel,
+  EditorTimeline,
+  LayerActionsMenu,
+  SceneActionsMenu,
+  TextLayerEditor,
+  AudioEditor,
+  ShapeLayerEditor,
+  AnimationEditor,
+  DraggableLayer,
+  ImageLayerEditor,
+  ExportDialog,
+} from "./presentation/components";
+
+export { useEditorLayers } from "./presentation/hooks/useEditorLayers";
+export { useEditorScenes } from "./presentation/hooks/useEditorScenes";
+export { useEditorPlayback } from "./presentation/hooks/useEditorPlayback";
+export { useEditorHistory } from "./presentation/hooks/useEditorHistory";
+export { useEditorBottomSheet } from "./presentation/hooks/useEditorBottomSheet";
+export { useEditorActions } from "./presentation/hooks/useEditorActions";
+export { useTextLayerForm } from "./presentation/hooks/useTextLayerForm";
+export { useImageLayerForm } from "./presentation/hooks/useImageLayerForm";
+export { useShapeLayerForm } from "./presentation/hooks/useShapeLayerForm";
+export { useAnimationLayerForm } from "./presentation/hooks/useAnimationLayerForm";
+export { useAudioLayerForm } from "./presentation/hooks/useAudioLayerForm";
+export { useTextLayerOperations } from "./presentation/hooks/useTextLayerOperations";
+export { useImageLayerOperations } from "./presentation/hooks/useImageLayerOperations";
+export { useShapeLayerOperations } from "./presentation/hooks/useShapeLayerOperations";
+export { useLayerManipulation } from "./presentation/hooks/useLayerManipulation";
+export { useDraggableLayerGestures } from "./presentation/hooks/useDraggableLayerGestures";
+export { useExport } from "./presentation/hooks/useExport";
+export { useExportForm } from "./presentation/hooks/useExportForm";
+export { useLayerActions } from "./presentation/hooks/useLayerActions";
+export { useSceneActions } from "./presentation/hooks/useSceneActions";
+export { useMenuActions } from "./presentation/hooks/useMenuActions";
+export { useExportActions } from "./presentation/hooks/useExportActions";

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

@@ -0,0 +1,32 @@
+/**
+ * Animation Layer Constants
+ * Centralized constants for animation layer editor
+ */
+
+import type { AnimationType } from "@domains/video";
+
+export type Easing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
+
+export const ANIMATION_TYPES: {
+  type: AnimationType;
+  label: string;
+  icon: string;
+}[] = [
+  { type: "none", label: "None", icon: "Ban" },
+  { type: "fade", label: "Fade", icon: "Eye" },
+  { type: "slide", label: "Slide", icon: "MoveRight" },
+  { type: "bounce", label: "Bounce", icon: "ArrowUp" },
+  { type: "zoom", label: "Zoom", icon: "Maximize2" },
+  { type: "rotate", label: "Rotate", icon: "RotateCw" },
+];
+
+export const DURATIONS = [300, 500, 800, 1000, 1500, 2000];
+
+export const DELAYS = [0, 200, 500, 1000];
+
+export const EASINGS: { value: Easing; label: string }[] = [
+  { value: "linear", label: "Linear" },
+  { value: "ease-in", label: "Ease In" },
+  { value: "ease-out", label: "Ease Out" },
+  { value: "ease-in-out", label: "Ease In-Out" },
+];

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

@@ -0,0 +1,14 @@
+/**
+ * Audio Layer Constants
+ * Centralized constants for audio layer editor
+ */
+
+export const VOLUME_OPTIONS = [0.25, 0.5, 0.7, 1.0];
+
+export const FADE_IN_OPTIONS = [0, 500, 1000, 2000];
+
+export const FADE_OUT_OPTIONS = [0, 500, 1000, 2000];
+
+export const AUDIO_FILE_TYPES = ["audio/*"];
+
+export const SUPPORTED_AUDIO_FORMATS = "MP3, WAV, M4A, AAC";

package/src/infrastructure/constants/export.constants.ts

@@ -0,0 +1,28 @@
+/**
+ * Export Constants
+ * Centralized constants for export dialog
+ */
+
+export type Resolution = "720p" | "1080p" | "4k";
+export type Quality = "low" | "medium" | "high";
+export type Format = "mp4" | "mov";
+
+export const RESOLUTIONS: Resolution[] = ["720p", "1080p", "4k"];
+
+export const QUALITIES: Quality[] = ["low", "medium", "high"];
+
+export const FORMATS: Format[] = ["mp4", "mov"];
+
+export const BASE_SIZE_PER_SECOND = 0.5; // MB per second for 1080p high quality
+
+export const RESOLUTION_MULTIPLIERS: Record<Resolution, number> = {
+  "720p": 0.6,
+  "1080p": 1,
+  "4k": 2,
+};
+
+export const QUALITY_MULTIPLIERS: Record<Quality, number> = {
+  low: 0.5,
+  medium: 0.75,
+  high: 1,
+};

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

@@ -0,0 +1,12 @@
+/**
+ * Image Layer Constants
+ * Centralized constants for image layer editor
+ */
+
+export const IMAGE_OPACITY_OPTIONS = [0.25, 0.5, 0.75, 1];
+
+export const IMAGE_PICKER_OPTIONS = {
+  allowsEditing: true,
+  aspect: [16, 9] as [number, number],
+  quality: 0.8,
+};

package/src/infrastructure/constants/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Editor Constants
+ * Barrel file for editor constants
+ */
+
+export * from "./text-layer.constants";
+export * from "./audio-layer.constants";
+export * from "./shape-layer.constants";
+export * from "./animation-layer.constants";
+export * from "./image-layer.constants";
+export * from "./export.constants";

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

@@ -0,0 +1,29 @@
+/**
+ * Shape Layer Constants
+ * Centralized constants for shape layer editor
+ */
+
+export type ShapeType = "rectangle" | "circle" | "triangle";
+
+export const SHAPES: { type: ShapeType; label: string; icon: string }[] = [
+  { type: "rectangle", label: "Rectangle", icon: "Square" },
+  { type: "circle", label: "Circle", icon: "Circle" },
+  { type: "triangle", label: "Triangle", icon: "Triangle" },
+];
+
+export const SHAPE_COLORS = [
+  { name: "Red", value: "#EF4444" },
+  { name: "Orange", value: "#F97316" },
+  { name: "Yellow", value: "#EAB308" },
+  { name: "Green", value: "#22C55E" },
+  { name: "Blue", value: "#3B82F6" },
+  { name: "Purple", value: "#A855F7" },
+  { name: "Pink", value: "#EC4899" },
+  { name: "Gray", value: "#6B7280" },
+  { name: "Black", value: "#000000" },
+  { name: "White", value: "#FFFFFF" },
+];
+
+export const BORDER_WIDTHS = [0, 1, 2, 4, 6, 8];
+
+export const OPACITY_OPTIONS = [0.25, 0.5, 0.75, 1];

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

@@ -0,0 +1,40 @@
+/**
+ * Text Layer Constants
+ * Centralized constants for text layer editor
+ */
+
+export const FONT_SIZES = [12, 16, 20, 24, 32, 40, 48, 64, 72, 96];
+
+export const FONT_FAMILIES = [
+  "System",
+  "Arial",
+  "Helvetica",
+  "Times New Roman",
+  "Courier New",
+];
+
+export const FONT_WEIGHTS = [
+  { label: "Normal", value: "normal" as const },
+  { label: "Bold", value: "bold" as const },
+  { label: "Light", value: "300" as const },
+  { label: "Heavy", value: "700" as const },
+];
+
+export const TEXT_ALIGNS = [
+  { label: "Left", value: "left" as const, icon: "AlignLeft" },
+  { label: "Center", value: "center" as const, icon: "AlignCenter" },
+  { label: "Right", value: "right" as const, icon: "AlignRight" },
+];
+
+export const TEXT_COLORS = [
+  "#FFFFFF", // White
+  "#000000", // Black
+  "#EF4444", // Red
+  "#F59E0B", // Orange
+  "#10B981", // Green
+  "#3B82F6", // Blue
+  "#8B5CF6", // Purple
+  "#EC4899", // Pink
+  "#6B7280", // Gray
+  "#FCD34D", // Yellow
+];