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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.37",
+  "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/domain/entities/video-project.types.ts

@@ -5,6 +5,13 @@
 
 export type AspectRatio = "16:9" | "9:16" | "1:1" | "4:5";
 
+export interface FilterPreset {
+  readonly id: string;
+  readonly name: string;
+  readonly overlay: string;
+  readonly opacity: number;
+}
+
 export type LayerType = "text" | "image" | "video" | "shape";
 
 export type TransitionType = "fade" | "slide" | "zoom" | "wipe" | "none";
@@ -127,6 +134,7 @@ export interface Scene {
   layers: Layer[];
   transition: Transition;
   audio?: Audio;
+  filter?: FilterPreset;
 }
 
 export interface ExportSettings {

package/src/index.ts

@@ -33,6 +33,7 @@ export type {
   AddTextLayerData,
   AddImageLayerData,
   AddShapeLayerData,
+  FilterPreset,
 } from "./domain/entities";
 
 // =============================================================================
@@ -73,6 +74,9 @@ export {
   DraggableLayer,
   ImageLayerEditor,
   ExportDialog,
+  SpeedControlPanel,
+  VideoFilterPicker,
+  CollageEditorCanvas,
 } from "./presentation/components";
 
 export { useEditorLayers } from "./presentation/hooks/useEditorLayers";
@@ -97,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/filter.constants.ts

@@ -0,0 +1,26 @@
+/**
+ * Filter Presets
+ * Color overlay-based filters for video and photo editing
+ */
+
+import type { FilterPreset } from "../../domain/entities";
+
+export const FILTER_PRESETS: FilterPreset[] = [
+  { id: "none", name: "Original", overlay: "transparent", opacity: 0 },
+  { id: "vivid", name: "Vivid", overlay: "rgba(255, 100, 50, 0.15)", opacity: 0.15 },
+  { id: "warm", name: "Warm", overlay: "rgba(255, 170, 50, 0.2)", opacity: 0.2 },
+  { id: "cool", name: "Cool", overlay: "rgba(50, 130, 255, 0.18)", opacity: 0.18 },
+  { id: "bw", name: "B&W", overlay: "rgba(0, 0, 0, 0)", opacity: 0 },
+  { id: "vintage", name: "Vintage", overlay: "rgba(200, 150, 80, 0.25)", opacity: 0.25 },
+  { id: "fade", name: "Fade", overlay: "rgba(230, 220, 210, 0.3)", opacity: 0.3 },
+  { id: "dramatic", name: "Drama", overlay: "rgba(20, 20, 40, 0.2)", opacity: 0.2 },
+  { id: "rose", name: "Rose", overlay: "rgba(255, 100, 150, 0.18)", opacity: 0.18 },
+  { id: "emerald", name: "Emerald", overlay: "rgba(0, 200, 100, 0.15)", opacity: 0.15 },
+  { id: "cinema", name: "Cinema", overlay: "rgba(30, 50, 80, 0.22)", opacity: 0.22 },
+  { id: "retro", name: "Retro DV", overlay: "rgba(180, 140, 60, 0.3)", opacity: 0.3 },
+  { id: "glitch", name: "Glitch", overlay: "rgba(0, 255, 200, 0.12)", opacity: 0.12 },
+  { id: "noir", name: "Noir", overlay: "rgba(0, 0, 0, 0.1)", opacity: 0.1 },
+  { id: "sunset", name: "Sunset", overlay: "rgba(255, 120, 50, 0.22)", opacity: 0.22 },
+];
+
+export const DEFAULT_FILTER = FILTER_PRESETS[0];

package/src/infrastructure/constants/index.ts

@@ -9,3 +9,6 @@ export * from "./shape-layer.constants";
 export * from "./animation-layer.constants";
 export * from "./image-layer.constants";
 export * from "./export.constants";
+export * from "./filter.constants";
+export * from "./speed.constants";
+export * from "./collage.constants";

package/src/infrastructure/constants/speed.constants.ts

@@ -0,0 +1,22 @@
+/**
+ * Speed Presets
+ * Playback rate options for video editing
+ */
+
+export interface SpeedPreset {
+  readonly label: string;
+  readonly value: number;
+}
+
+export const SPEED_PRESETS: SpeedPreset[] = [
+  { label: "0.25x", value: 0.25 },
+  { label: "0.5x", value: 0.5 },
+  { label: "0.75x", value: 0.75 },
+  { label: "1x", value: 1 },
+  { label: "1.5x", value: 1.5 },
+  { label: "2x", value: 2 },
+  { label: "3x", value: 3 },
+  { label: "4x", value: 4 },
+];
+
+export const DEFAULT_PLAYBACK_RATE = 1;

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

@@ -44,6 +44,8 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   nativeControls = true,
   contentFit = "cover",
   style,
+  playbackRate = 1,
+  filterOverlay,
 }) => {
   // IMPORTANT: Call useResponsive BEFORE useAppDesignTokens to maintain hook order
   const { width: screenWidth, horizontalPadding } = useResponsive();
@@ -60,6 +62,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     loop,
     muted,
     autoPlay,
+    playbackRate,
   });
 
   const handlePlay = useCallback(() => {
@@ -147,6 +150,15 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
           contentFit={contentFit}
           nativeControls={nativeControls}
         />
+        {filterOverlay && filterOverlay.opacity > 0 && (
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: filterOverlay.overlay, opacity: filterOverlay.opacity },
+            ]}
+            pointerEvents="none"
+          />
+        )}
       </View>
     );
   }

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

@@ -36,10 +36,11 @@ declare const __DEV__: boolean;
 export const useVideoPlayerControl = (
   config: VideoPlayerConfig,
 ): UseVideoPlayerControlResult => {
-  const { source, loop = true, muted = false, autoPlay = false } = config;
+  const { source, loop = true, muted = false, autoPlay = false, playbackRate: initialRate = 1 } = config;
 
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const [playbackRate, setPlaybackRateState] = useState(initialRate);
 
   const player = useExpoVideoPlayer(source || "", (p: any) => {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
@@ -85,18 +86,25 @@ export const useVideoPlayerControl = (
     if (success) setIsPlaying(!isPlaying);
   }, [player, isPlayerValid, isPlaying]);
 
+  const setPlaybackRate = useCallback((rate: number) => {
+    if (!isPlayerValid || !player) return;
+    (player as any).playbackRate = rate;
+    setPlaybackRateState(rate);
+  }, [player, isPlayerValid]);
+
   const state: VideoPlayerState = useMemo(
     () => ({
       isPlaying,
       isPlayerValid,
       isLoading: isLoading && Boolean(source),
+      playbackRate,
     }),
-    [isPlaying, isPlayerValid, isLoading, source],
+    [isPlaying, isPlayerValid, isLoading, source, playbackRate],
   );
 
   const controls: VideoPlayerControls = useMemo(
-    () => ({ play, pause, toggle }),
-    [play, pause, toggle],
+    () => ({ play, pause, toggle, setPlaybackRate }),
+    [play, pause, toggle, setPlaybackRate],
   );
 
   return { player, state, controls };

package/src/player/types/index.ts

@@ -14,6 +14,7 @@ export interface VideoPlayerConfig {
   readonly loop?: boolean;
   readonly muted?: boolean;
   readonly autoPlay?: boolean;
+  readonly playbackRate?: number;
 }
 
 /**
@@ -23,6 +24,7 @@ export interface VideoPlayerState {
   readonly isPlaying: boolean;
   readonly isPlayerValid: boolean;
   readonly isLoading: boolean;
+  readonly playbackRate: number;
 }
 
 /**
@@ -32,6 +34,7 @@ export interface VideoPlayerControls {
   readonly play: () => void;
   readonly pause: () => void;
   readonly toggle: () => void;
+  readonly setPlaybackRate: (rate: number) => void;
 }
 
 /**
@@ -69,6 +72,8 @@ export interface VideoPlayerProps {
   readonly style?: ViewStyle;
   readonly contentFit?: "contain" | "cover" | "fill";
   readonly thumbnailUrl?: string;
+  readonly playbackRate?: number;
+  readonly filterOverlay?: { overlay: string; opacity: number };
 }
 
 export type { VideoPlayer } from "expo-video";

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/EditorToolPanel.tsx

@@ -9,7 +9,6 @@ import {
   ScrollView,
   TouchableOpacity,
   StyleSheet,
-  Alert,
 } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -21,6 +20,8 @@ interface EditorToolPanelProps {
   onAddShape: () => void;
   onAudio: () => void;
   hasAudio: boolean;
+  onFilters?: () => void;
+  onSpeed?: () => void;
 }
 
 export const EditorToolPanel: React.FC<EditorToolPanelProps> = ({
@@ -29,6 +30,8 @@ export const EditorToolPanel: React.FC<EditorToolPanelProps> = ({
   onAddShape,
   onAudio,
   hasAudio,
+  onFilters,
+  onSpeed,
 }) => {
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
@@ -124,26 +127,41 @@ export const EditorToolPanel: React.FC<EditorToolPanelProps> = ({
           )}
         </TouchableOpacity>
 
-        <TouchableOpacity
-          style={[
-            styles.toolButton,
-            { backgroundColor: tokens.colors.backgroundPrimary },
-          ]}
-          onPress={() =>
-            Alert.alert(
-              t("editor.tools.effects"),
-              t("editor.tools.effectsComingSoon"),
-            )
-          }
-        >
-          <AtomicIcon name="sparkles-outline" size="md" color="primary" />
-          <AtomicText
-            type="labelSmall"
-            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
+        {onFilters && (
+          <TouchableOpacity
+            style={[
+              styles.toolButton,
+              { backgroundColor: tokens.colors.backgroundPrimary },
+            ]}
+            onPress={onFilters}
           >
-            {t("editor.tools.effects")}
-          </AtomicText>
-        </TouchableOpacity>
+            <AtomicIcon name="sparkles" size="md" color="primary" />
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
+            >
+              {t("editor.tools.filters") || "Filters"}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+
+        {onSpeed && (
+          <TouchableOpacity
+            style={[
+              styles.toolButton,
+              { backgroundColor: tokens.colors.backgroundPrimary },
+            ]}
+            onPress={onSpeed}
+          >
+            <AtomicIcon name="flash" size="md" color="primary" />
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
+            >
+              {t("editor.tools.speed") || "Speed"}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
       </ScrollView>
     </View>
   );

package/src/presentation/components/SpeedControlPanel.tsx

@@ -0,0 +1,76 @@
+/**
+ * SpeedControlPanel Component
+ * Horizontal speed selector for video playback rate
+ */
+
+import React, { useMemo } from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { SPEED_PRESETS } from "../../infrastructure/constants/speed.constants";
+
+interface SpeedControlPanelProps {
+  playbackRate: number;
+  onChangeRate: (rate: number) => void;
+  t: (key: string) => string;
+}
+
+export const SpeedControlPanel: React.FC<SpeedControlPanelProps> = ({
+  playbackRate,
+  onChangeRate,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: { paddingVertical: tokens.spacing.sm },
+        label: {
+          paddingHorizontal: tokens.spacing.md,
+          marginBottom: tokens.spacing.sm,
+        },
+        scroll: { paddingHorizontal: tokens.spacing.md, gap: tokens.spacing.sm },
+        btn: {
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.sm,
+          borderRadius: tokens.borders.radius.full,
+          backgroundColor: tokens.colors.surfaceVariant,
+        },
+        btnActive: {
+          backgroundColor: tokens.colors.primary,
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="labelSmall" color="textSecondary" style={styles.label}>
+        {t("editor.speed") || "Speed"}
+      </AtomicText>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scroll}>
+        {SPEED_PRESETS.map((preset) => {
+          const isActive = playbackRate === preset.value;
+          return (
+            <TouchableOpacity
+              key={preset.value}
+              style={[styles.btn, isActive && styles.btnActive]}
+              onPress={() => onChangeRate(preset.value)}
+              accessibilityLabel={preset.label}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
+            >
+              <AtomicText
+                fontWeight={isActive ? "bold" : "normal"}
+                color={isActive ? "onPrimary" : "textSecondary"}
+              >
+                {preset.label}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};

package/src/presentation/components/VideoFilterPicker.tsx

@@ -0,0 +1,94 @@
+/**
+ * VideoFilterPicker Component
+ * Horizontal filter selector with color preview dots
+ */
+
+import React, { useMemo } from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { FILTER_PRESETS } from "../../infrastructure/constants/filter.constants";
+import type { FilterPreset } from "../../domain/entities";
+
+interface VideoFilterPickerProps {
+  activeFilter: FilterPreset;
+  onSelectFilter: (filter: FilterPreset) => void;
+  t: (key: string) => string;
+}
+
+export const VideoFilterPicker: React.FC<VideoFilterPickerProps> = ({
+  activeFilter,
+  onSelectFilter,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: { paddingVertical: tokens.spacing.sm },
+        label: {
+          paddingHorizontal: tokens.spacing.md,
+          marginBottom: tokens.spacing.sm,
+        },
+        scroll: { paddingHorizontal: tokens.spacing.md, gap: tokens.spacing.md },
+        item: { alignItems: "center", gap: tokens.spacing.xs },
+        dot: {
+          width: 48,
+          height: 48,
+          borderRadius: 24,
+          borderWidth: 2,
+          borderColor: "transparent",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: tokens.colors.surfaceVariant,
+        },
+        dotActive: {
+          borderColor: tokens.colors.primary,
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="labelSmall" color="textSecondary" style={styles.label}>
+        {t("editor.filters") || "Filters"}
+      </AtomicText>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scroll}>
+        {FILTER_PRESETS.map((filter) => {
+          const isActive = activeFilter.id === filter.id;
+          const isNone = filter.id === "none";
+          return (
+            <TouchableOpacity
+              key={filter.id}
+              style={styles.item}
+              onPress={() => onSelectFilter(filter)}
+              accessibilityLabel={filter.name}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
+            >
+              <View
+                style={[
+                  styles.dot,
+                  isActive && styles.dotActive,
+                  !isNone && { backgroundColor: filter.overlay },
+                ]}
+              >
+                {isNone && (
+                  <AtomicIcon name="close" size="sm" color="textSecondary" />
+                )}
+              </View>
+              <AtomicText
+                type="labelSmall"
+                color={isActive ? "primary" : "textSecondary"}
+              >
+                {filter.name}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};

package/src/presentation/components/index.ts

@@ -15,3 +15,6 @@ export * from "./AnimationEditor";
 export * from "./DraggableLayer";
 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,
+  };
+}