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

package/package.json

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

@@ -76,6 +76,7 @@ export {
   ExportDialog,
   SpeedControlPanel,
   VideoFilterPicker,
+  CollageEditorCanvas,
 } from "./presentation/components";
 
 export { useEditorLayers } from "./presentation/hooks/useEditorLayers";
@@ -100,6 +101,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,
+  };
+}