@umituz/react-native-video-editor 1.1.38 → 1.1.40

package/package.json

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

package/src/VideoEditor.tsx

@@ -0,0 +1,210 @@
+/**
+ * VideoEditor Component
+ * Self-contained full-screen video editor.
+ * Mirrors PhotoEditor API: accepts videoUri, onClose, onSave.
+ */
+
+import React, { useState, useMemo, useRef, useCallback } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
+
+import { VideoPlayer } from "./player/presentation/components/VideoPlayer";
+import { VideoFilterPicker } from "./presentation/components/VideoFilterPicker";
+import { SpeedControlPanel } from "./presentation/components/SpeedControlPanel";
+import { FILTER_PRESETS, DEFAULT_FILTER } from "./infrastructure/constants/filter.constants";
+import { DEFAULT_PLAYBACK_RATE } from "./infrastructure/constants/speed.constants";
+import type { FilterPreset } from "./domain/entities/video-project.types";
+
+export interface VideoEditorProps {
+  videoUri: string;
+  onClose: () => void;
+  onSave?: (uri: string, filter: FilterPreset, playbackRate: number) => void;
+  title?: string;
+  t: (key: string) => string;
+}
+
+type ActiveTool = "filters" | "speed" | null;
+
+export const VideoEditor: React.FC<VideoEditorProps> = ({
+  videoUri,
+  onClose,
+  onSave,
+  title,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const [activeFilter, setActiveFilter] = useState<FilterPreset>(DEFAULT_FILTER);
+  const [playbackRate, setPlaybackRate] = useState(DEFAULT_PLAYBACK_RATE);
+  const [activeTool, setActiveTool] = useState<ActiveTool>(null);
+
+  const filterSheetRef = useRef<{ present: () => void; dismiss: () => void }>(null);
+  const speedSheetRef = useRef<{ present: () => void; dismiss: () => void }>(null);
+
+  const handleToggleTool = useCallback((tool: Exclude<ActiveTool, null>) => {
+    if (activeTool === tool) {
+      setActiveTool(null);
+      if (tool === "filters") filterSheetRef.current?.dismiss();
+      else speedSheetRef.current?.dismiss();
+    } else {
+      setActiveTool(tool);
+      if (tool === "filters") filterSheetRef.current?.present();
+      else speedSheetRef.current?.present();
+    }
+  }, [activeTool]);
+
+  const handleSave = useCallback(() => {
+    onSave?.(videoUri, activeFilter, playbackRate);
+    onClose();
+  }, [onSave, onClose, videoUri, activeFilter, playbackRate]);
+
+  const styles = useMemo(() => StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingTop: insets.top + tokens.spacing.sm,
+      paddingBottom: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      backgroundColor: tokens.colors.surface,
+    },
+    headerTitle: {
+      flex: 1,
+      textAlign: "center",
+    },
+    headerBtn: {
+      width: 40,
+      height: 40,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    videoArea: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    toolbar: {
+      flexDirection: "row",
+      justifyContent: "space-around",
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.md,
+      paddingBottom: insets.bottom + tokens.spacing.md,
+      backgroundColor: tokens.colors.surface,
+      borderTopWidth: 1,
+      borderTopColor: tokens.colors.border,
+    },
+    toolBtn: {
+      alignItems: "center",
+      gap: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.lg,
+    },
+    toolBtnActive: {
+      opacity: 1,
+    },
+  }), [tokens, insets]);
+
+  const TOOLS: { id: Exclude<ActiveTool, null>; icon: string; labelKey: string }[] = [
+    { id: "filters", icon: "sparkles", labelKey: "editor.tools.filters" },
+    { id: "speed", icon: "flash", labelKey: "editor.tools.speed" },
+  ];
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          style={styles.headerBtn}
+          onPress={onClose}
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+        >
+          <AtomicIcon name="close" size="md" color="textPrimary" />
+        </TouchableOpacity>
+
+        <AtomicText type="headlineSmall" style={styles.headerTitle}>
+          {title || t("editor.video.title") || "Edit Video"}
+        </AtomicText>
+
+        <TouchableOpacity
+          style={styles.headerBtn}
+          onPress={handleSave}
+          accessibilityLabel="Save"
+          accessibilityRole="button"
+        >
+          <AtomicText fontWeight="bold" color="primary">
+            {t("common.save") || "Save"}
+          </AtomicText>
+        </TouchableOpacity>
+      </View>
+
+      {/* Video Preview */}
+      <View style={styles.videoArea}>
+        <VideoPlayer
+          source={videoUri}
+          autoPlay
+          loop
+          nativeControls={false}
+          contentFit="contain"
+          playbackRate={playbackRate}
+          filterOverlay={activeFilter.id !== "none" ? activeFilter : undefined}
+        />
+      </View>
+
+      {/* Toolbar */}
+      <View style={styles.toolbar}>
+        {TOOLS.map((tool) => {
+          const isActive = activeTool === tool.id;
+          return (
+            <TouchableOpacity
+              key={tool.id}
+              style={styles.toolBtn}
+              onPress={() => handleToggleTool(tool.id)}
+              accessibilityLabel={t(tool.labelKey) || tool.id}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
+            >
+              <AtomicIcon
+                name={tool.icon}
+                size="md"
+                color={isActive ? "primary" : "textSecondary"}
+              />
+              <AtomicText
+                type="labelSmall"
+                color={isActive ? "primary" : "textSecondary"}
+              >
+                {t(tool.labelKey) || tool.id}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      {/* Filter Bottom Sheet */}
+      <BottomSheetModal ref={filterSheetRef} snapPoints={["40%"]}>
+        <VideoFilterPicker
+          activeFilter={activeFilter}
+          onSelectFilter={setActiveFilter}
+          t={t}
+        />
+      </BottomSheetModal>
+
+      {/* Speed Bottom Sheet */}
+      <BottomSheetModal ref={speedSheetRef} snapPoints={["30%"]}>
+        <SpeedControlPanel
+          playbackRate={playbackRate}
+          onChangeRate={setPlaybackRate}
+          t={t}
+        />
+      </BottomSheetModal>
+    </View>
+  );
+};

package/src/index.ts

@@ -60,6 +60,9 @@ export {
 // PRESENTATION LAYER - Components & Hooks
 // =============================================================================
 
+export { VideoEditor } from "./VideoEditor";
+export type { VideoEditorProps } from "./VideoEditor";
+
 export {
   EditorHeader,
   EditorPreviewArea,
@@ -76,6 +79,7 @@ export {
   ExportDialog,
   SpeedControlPanel,
   VideoFilterPicker,
+  CollageEditorCanvas,
 } from "./presentation/components";
 
 export { useEditorLayers } from "./presentation/hooks/useEditorLayers";
@@ -100,6 +104,8 @@ export { useLayerActions } from "./presentation/hooks/useLayerActions";
 export { useSceneActions } from "./presentation/hooks/useSceneActions";
 export { useMenuActions } from "./presentation/hooks/useMenuActions";
 export { useExportActions } from "./presentation/hooks/useExportActions";
+export { useCollageEditor } from "./presentation/hooks/useCollageEditor";
+export type { UseCollageEditorReturn } from "./presentation/hooks/useCollageEditor";
 
 // =============================================================================
 // VIDEO PLAYER MODULE

package/src/infrastructure/constants/collage.constants.ts

@@ -0,0 +1,74 @@
+/**
+ * Collage Layouts
+ * Grid definitions for collage editor
+ * Each cell: [x, y, width, height] as fractions of canvas (0–1)
+ */
+
+export interface CollageLayout {
+  readonly id: string;
+  readonly count: number;
+  readonly grid: readonly [number, number, number, number][];
+}
+
+export const COLLAGE_LAYOUTS: CollageLayout[] = [
+  {
+    id: "2h",
+    count: 2,
+    grid: [
+      [0, 0, 0.5, 1],
+      [0.5, 0, 0.5, 1],
+    ],
+  },
+  {
+    id: "2v",
+    count: 2,
+    grid: [
+      [0, 0, 1, 0.5],
+      [0, 0.5, 1, 0.5],
+    ],
+  },
+  {
+    id: "3a",
+    count: 3,
+    grid: [
+      [0, 0, 0.5, 1],
+      [0.5, 0, 0.5, 0.5],
+      [0.5, 0.5, 0.5, 0.5],
+    ],
+  },
+  {
+    id: "3b",
+    count: 3,
+    grid: [
+      [0, 0, 1, 0.5],
+      [0, 0.5, 0.5, 0.5],
+      [0.5, 0.5, 0.5, 0.5],
+    ],
+  },
+  {
+    id: "4",
+    count: 4,
+    grid: [
+      [0, 0, 0.5, 0.5],
+      [0.5, 0, 0.5, 0.5],
+      [0, 0.5, 0.5, 0.5],
+      [0.5, 0.5, 0.5, 0.5],
+    ],
+  },
+  {
+    id: "6",
+    count: 6,
+    grid: [
+      [0, 0, 0.333, 0.5],
+      [0.333, 0, 0.334, 0.5],
+      [0.667, 0, 0.333, 0.5],
+      [0, 0.5, 0.333, 0.5],
+      [0.333, 0.5, 0.334, 0.5],
+      [0.667, 0.5, 0.333, 0.5],
+    ],
+  },
+];
+
+export const DEFAULT_COLLAGE_LAYOUT = COLLAGE_LAYOUTS[0];
+export const DEFAULT_COLLAGE_SPACING = 4;
+export const DEFAULT_COLLAGE_BORDER_RADIUS = 8;

package/src/infrastructure/constants/index.ts

@@ -11,3 +11,4 @@ export * from "./image-layer.constants";
 export * from "./export.constants";
 export * from "./filter.constants";
 export * from "./speed.constants";
+export * from "./collage.constants";

package/src/presentation/components/CollageEditorCanvas.tsx

@@ -0,0 +1,285 @@
+/**
+ * CollageEditorCanvas Component
+ * Collage layout canvas with image cells, layout picker, spacing and border radius controls
+ */
+
+import React, { useMemo } from "react";
+import {
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+} from "react-native";
+import { Image } from "expo-image";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { COLLAGE_LAYOUTS } from "../../infrastructure/constants/collage.constants";
+import type { CollageLayout } from "../../infrastructure/constants/collage.constants";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+interface CollageEditorCanvasProps {
+  layout: CollageLayout;
+  images: (string | null)[];
+  spacing: number;
+  borderRadius: number;
+  onSelectLayout: (layout: CollageLayout) => void;
+  onCellPress: (index: number) => void;
+  onSpacingChange: (value: number) => void;
+  onBorderRadiusChange: (value: number) => void;
+  t: (key: string) => string;
+  canvasSize?: number;
+}
+
+export const CollageEditorCanvas: React.FC<CollageEditorCanvasProps> = ({
+  layout,
+  images,
+  spacing,
+  borderRadius,
+  onSelectLayout,
+  onCellPress,
+  onSpacingChange,
+  onBorderRadiusChange,
+  t,
+  canvasSize,
+}) => {
+  const tokens = useAppDesignTokens();
+  const size = canvasSize ?? SCREEN_WIDTH - tokens.spacing.md * 2;
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        canvas: {
+          width: size,
+          height: size,
+          alignSelf: "center",
+          position: "relative",
+          backgroundColor: tokens.colors.surface,
+          borderRadius: tokens.borders.radius.md,
+          overflow: "hidden",
+        },
+        cell: {
+          position: "absolute",
+          overflow: "hidden",
+        },
+        cellImage: {
+          width: "100%",
+          height: "100%",
+        },
+        cellEmpty: {
+          flex: 1,
+          backgroundColor: tokens.colors.surfaceVariant,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        controls: {
+          paddingHorizontal: tokens.spacing.md,
+          paddingTop: tokens.spacing.md,
+          gap: tokens.spacing.sm,
+        },
+        controlRow: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        },
+        stepper: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tokens.spacing.sm,
+        },
+        stepBtn: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: tokens.colors.surfaceVariant,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        stepValue: {
+          minWidth: 28,
+          textAlign: "center",
+        },
+        layoutSection: {
+          paddingTop: tokens.spacing.sm,
+        },
+        layoutScroll: {
+          paddingHorizontal: tokens.spacing.md,
+          gap: tokens.spacing.sm,
+        },
+        layoutCard: {
+          width: 64,
+          alignItems: "center",
+          gap: tokens.spacing.xs,
+        },
+        layoutPreview: {
+          width: 52,
+          height: 52,
+          borderRadius: tokens.borders.radius.sm,
+          overflow: "hidden",
+          position: "relative",
+          backgroundColor: tokens.colors.surfaceVariant,
+          borderWidth: 2,
+          borderColor: "transparent",
+        },
+        layoutPreviewActive: {
+          borderColor: tokens.colors.primary,
+        },
+      }),
+    [tokens, size],
+  );
+
+  return (
+    <View>
+      {/* Canvas */}
+      <View style={styles.canvas}>
+        {layout.grid.map((cell, index) => {
+          const [cx, cy, cw, ch] = cell;
+          const cellStyle = {
+            left: cx * size + spacing,
+            top: cy * size + spacing,
+            width: cw * size - spacing * 2,
+            height: ch * size - spacing * 2,
+            borderRadius,
+          };
+          return (
+            <TouchableOpacity
+              key={index}
+              style={[styles.cell, cellStyle]}
+              onPress={() => onCellPress(index)}
+              accessibilityLabel={`Cell ${index + 1}`}
+              accessibilityRole="button"
+            >
+              {images[index] ? (
+                <Image
+                  source={{ uri: images[index]! }}
+                  style={[styles.cellImage, { borderRadius }]}
+                  contentFit="cover"
+                />
+              ) : (
+                <View style={styles.cellEmpty}>
+                  <AtomicIcon name="add" size="md" color="textSecondary" />
+                </View>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      {/* Spacing + Border Radius */}
+      <View style={styles.controls}>
+        <View style={styles.controlRow}>
+          <AtomicText type="labelSmall" color="textSecondary">
+            {t("editor.collage.spacing") || "Spacing"}
+          </AtomicText>
+          <View style={styles.stepper}>
+            <TouchableOpacity
+              style={styles.stepBtn}
+              onPress={() => onSpacingChange(Math.max(0, spacing - 2))}
+              accessibilityLabel="Decrease spacing"
+              accessibilityRole="button"
+            >
+              <AtomicIcon name="chevron-back" size="sm" color="textSecondary" />
+            </TouchableOpacity>
+            <AtomicText fontWeight="bold" style={styles.stepValue}>
+              {spacing}
+            </AtomicText>
+            <TouchableOpacity
+              style={styles.stepBtn}
+              onPress={() => onSpacingChange(Math.min(16, spacing + 2))}
+              accessibilityLabel="Increase spacing"
+              accessibilityRole="button"
+            >
+              <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <View style={styles.controlRow}>
+          <AtomicText type="labelSmall" color="textSecondary">
+            {t("editor.collage.corners") || "Corners"}
+          </AtomicText>
+          <View style={styles.stepper}>
+            <TouchableOpacity
+              style={styles.stepBtn}
+              onPress={() => onBorderRadiusChange(Math.max(0, borderRadius - 4))}
+              accessibilityLabel="Decrease corner radius"
+              accessibilityRole="button"
+            >
+              <AtomicIcon name="chevron-back" size="sm" color="textSecondary" />
+            </TouchableOpacity>
+            <AtomicText fontWeight="bold" style={styles.stepValue}>
+              {borderRadius}
+            </AtomicText>
+            <TouchableOpacity
+              style={styles.stepBtn}
+              onPress={() => onBorderRadiusChange(Math.min(24, borderRadius + 4))}
+              accessibilityLabel="Increase corner radius"
+              accessibilityRole="button"
+            >
+              <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+
+      {/* Layout Picker */}
+      <View style={styles.layoutSection}>
+        <AtomicText
+          type="labelSmall"
+          color="textSecondary"
+          style={{ paddingHorizontal: tokens.spacing.md, marginBottom: tokens.spacing.xs }}
+        >
+          {t("editor.collage.layout") || "Layout"}
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.layoutScroll}
+        >
+          {COLLAGE_LAYOUTS.map((l) => {
+            const isActive = layout.id === l.id;
+            return (
+              <TouchableOpacity
+                key={l.id}
+                style={styles.layoutCard}
+                onPress={() => onSelectLayout(l)}
+                accessibilityLabel={`Layout ${l.count} cells`}
+                accessibilityRole="button"
+                accessibilityState={{ selected: isActive }}
+              >
+                <View style={[styles.layoutPreview, isActive && styles.layoutPreviewActive]}>
+                  {l.grid.map((cell, i) => {
+                    const [lx, ly, lw, lh] = cell;
+                    return (
+                      <View
+                        key={i}
+                        style={{
+                          position: "absolute",
+                          left: lx * 52 + 2,
+                          top: ly * 52 + 2,
+                          width: lw * 52 - 4,
+                          height: lh * 52 - 4,
+                          backgroundColor: isActive
+                            ? tokens.colors.primary
+                            : tokens.colors.surfaceVariant,
+                          borderRadius: 2,
+                        }}
+                      />
+                    );
+                  })}
+                </View>
+                <AtomicText
+                  type="labelSmall"
+                  color={isActive ? "primary" : "textSecondary"}
+                >
+                  {l.count}
+                </AtomicText>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </View>
+    </View>
+  );
+};

package/src/presentation/components/index.ts

@@ -17,3 +17,4 @@ export * from "./ImageLayerEditor";
 export * from "./ExportDialog";
 export * from "./SpeedControlPanel";
 export * from "./VideoFilterPicker";
+export * from "./CollageEditorCanvas";

package/src/presentation/hooks/useCollageEditor.ts

@@ -0,0 +1,73 @@
+/**
+ * useCollageEditor Hook
+ * State management for collage editor
+ */
+
+import { useState, useCallback } from "react";
+import {
+  COLLAGE_LAYOUTS,
+  DEFAULT_COLLAGE_LAYOUT,
+  DEFAULT_COLLAGE_SPACING,
+  DEFAULT_COLLAGE_BORDER_RADIUS,
+} from "../../infrastructure/constants/collage.constants";
+import type { CollageLayout } from "../../infrastructure/constants/collage.constants";
+
+export interface UseCollageEditorReturn {
+  layout: CollageLayout;
+  images: (string | null)[];
+  spacing: number;
+  borderRadius: number;
+  setLayout: (layout: CollageLayout) => void;
+  setImage: (index: number, uri: string) => void;
+  clearImage: (index: number) => void;
+  setSpacing: (value: number) => void;
+  setBorderRadius: (value: number) => void;
+  filledCount: number;
+  allLayouts: CollageLayout[];
+}
+
+export function useCollageEditor(): UseCollageEditorReturn {
+  const [layout, setLayoutState] = useState<CollageLayout>(DEFAULT_COLLAGE_LAYOUT);
+  const [images, setImages] = useState<(string | null)[]>(
+    new Array(DEFAULT_COLLAGE_LAYOUT.count).fill(null),
+  );
+  const [spacing, setSpacing] = useState(DEFAULT_COLLAGE_SPACING);
+  const [borderRadius, setBorderRadius] = useState(DEFAULT_COLLAGE_BORDER_RADIUS);
+
+  const setLayout = useCallback((newLayout: CollageLayout) => {
+    setLayoutState(newLayout);
+    setImages(new Array(newLayout.count).fill(null));
+  }, []);
+
+  const setImage = useCallback((index: number, uri: string) => {
+    setImages((prev) => {
+      const next = [...prev];
+      next[index] = uri;
+      return next;
+    });
+  }, []);
+
+  const clearImage = useCallback((index: number) => {
+    setImages((prev) => {
+      const next = [...prev];
+      next[index] = null;
+      return next;
+    });
+  }, []);
+
+  const filledCount = images.filter((img) => img !== null).length;
+
+  return {
+    layout,
+    images,
+    spacing,
+    borderRadius,
+    setLayout,
+    setImage,
+    clearImage,
+    setSpacing,
+    setBorderRadius,
+    filledCount,
+    allLayouts: COLLAGE_LAYOUTS,
+  };
+}