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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.36",
+  "version": "1.1.38",
   "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,8 @@ export {
   DraggableLayer,
   ImageLayerEditor,
   ExportDialog,
+  SpeedControlPanel,
+  VideoFilterPicker,
 } from "./presentation/components";
 
 export { useEditorLayers } from "./presentation/hooks/useEditorLayers";

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,5 @@ 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";

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/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,5 @@ export * from "./AnimationEditor";
 export * from "./DraggableLayer";
 export * from "./ImageLayerEditor";
 export * from "./ExportDialog";
+export * from "./SpeedControlPanel";
+export * from "./VideoFilterPicker";