@umituz/react-native-ai-generation-content 1.17.134 → 1.17.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.134",
+  "version": "1.17.136",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/creations/presentation/components/CreationDetail/DetailVideo.tsx

@@ -3,8 +3,9 @@
  * Video player with thumbnail and play controls for creation detail view
  */
 
-import React from "react";
-import { View, StyleSheet, useWindowDimensions } from "react-native";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { useResponsive } from "@umituz/react-native-design-system";
 import { VideoPlayer } from "@umituz/react-native-video-editor";
 
 interface DetailVideoProps {
@@ -12,17 +13,20 @@ interface DetailVideoProps {
   readonly thumbnailUrl?: string;
 }
 
-const HORIZONTAL_PADDING = 16;
-
 export const DetailVideo: React.FC<DetailVideoProps> = ({
   videoUrl,
   thumbnailUrl,
 }) => {
-  const { width } = useWindowDimensions();
-  const videoWidth = width - (HORIZONTAL_PADDING * 2);
+  const { width, horizontalPadding, spacingMultiplier } = useResponsive();
+  const videoWidth = width - (horizontalPadding * 2);
+
+  const containerStyle = useMemo(() => ({
+    paddingHorizontal: horizontalPadding,
+    marginVertical: 16 * spacingMultiplier,
+  }), [horizontalPadding, spacingMultiplier]);
 
   return (
-    <View style={styles.container}>
+    <View style={containerStyle}>
       <VideoPlayer
         source={videoUrl}
         thumbnailUrl={thumbnailUrl}
@@ -34,10 +38,3 @@ export const DetailVideo: React.FC<DetailVideoProps> = ({
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: HORIZONTAL_PADDING,
-    marginVertical: 16,
-  },
-});

package/src/features/ai-hug/presentation/components/AIHugFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -46,6 +46,8 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const videoSize = screenWidth - horizontalPadding * 2;
 
   const feature = useAIHugFeature({
     config,
@@ -71,9 +73,6 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedVideoUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const videoSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/ai-kiss/presentation/components/AIKissFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -40,6 +40,8 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const videoSize = screenWidth - horizontalPadding * 2;
 
   const feature = useAIKissFeature({
     config,
@@ -65,9 +67,6 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedVideoUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const videoSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/anime-selfie/presentation/components/AnimeSelfieFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet, Image, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ScrollView, StyleSheet, Image } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -35,6 +35,8 @@ export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useAnimeSelfieFeature({
     config,
@@ -65,9 +67,6 @@ export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/face-swap/presentation/components/FaceSwapFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback } from "react";
-import { View, ScrollView, StyleSheet, Image, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, ScrollView, StyleSheet, Image } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -37,6 +37,8 @@ export const FaceSwapFeature: React.FC<FaceSwapFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useFaceSwapFeature({
     config,
@@ -62,9 +64,6 @@ export const FaceSwapFeature: React.FC<FaceSwapFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/hd-touch-up/presentation/components/HDTouchUpFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet, Image, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ScrollView, StyleSheet, Image } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -35,6 +35,8 @@ export const HDTouchUpFeature: React.FC<HDTouchUpFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useHDTouchUpFeature({
     config,
@@ -65,9 +67,6 @@ export const HDTouchUpFeature: React.FC<HDTouchUpFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/image-to-video/domain/constants/animation.constants.ts

@@ -10,37 +10,37 @@ export const DEFAULT_ANIMATION_STYLES: AnimationStyle[] = [
     id: "ken_burns",
     name: "Ken Burns",
     description: "Slow zoom and pan effect",
-    icon: "Maximize2",
+    icon: "expand-outline",
   },
   {
     id: "zoom_in",
     name: "Zoom In",
     description: "Gradual zoom in effect",
-    icon: "ZoomIn",
+    icon: "add-circle-outline",
   },
   {
     id: "zoom_out",
     name: "Zoom Out",
     description: "Gradual zoom out effect",
-    icon: "ZoomOut",
+    icon: "remove-circle-outline",
   },
   {
     id: "slide_left",
     name: "Slide Left",
     description: "Pan from right to left",
-    icon: "ArrowLeft",
+    icon: "arrow-back-outline",
   },
   {
     id: "slide_right",
     name: "Slide Right",
     description: "Pan from left to right",
-    icon: "ArrowRight",
+    icon: "arrow-forward-outline",
   },
   {
     id: "parallax",
     name: "Parallax",
     description: "3D depth effect",
-    icon: "Layers",
+    icon: "layers-outline",
   },
 ];
 

package/src/features/image-to-video/presentation/components/AnimationStyleSelector.tsx

@@ -89,7 +89,7 @@ export const AnimationStyleSelector: React.FC<AnimationStyleSelectorProps> = ({
                 </AtomicText>
               </View>
               {isSelected && (
-                <AtomicIcon name="Check" size="md" color="primary" />
+                <AtomicIcon name="checkmark-outline" size="md" color="primary" />
               )}
             </View>
           </TouchableOpacity>

package/src/features/image-to-video/presentation/components/ImageSelectionGrid.tsx

@@ -61,7 +61,7 @@ export const ImageSelectionGrid: React.FC<ImageSelectionGridProps> = ({
           onPress={onSelectImages}
           activeOpacity={0.7}
         >
-          <AtomicIcon name="Upload" size="xl" color="primary" />
+          <AtomicIcon name="cloud-upload-outline" size="xl" color="primary" />
           <AtomicText
             type="bodyMedium"
             style={[

package/src/features/image-to-video/presentation/hooks/useImageToVideoForm.ts

@@ -4,6 +4,8 @@
  */
 
 import { useMemo, useCallback } from "react";
+
+declare const __DEV__: boolean;
 import { useFormState, type UseFormStateOptions } from "./useFormState";
 import { useGeneration } from "./useGeneration";
 import type {
@@ -60,10 +62,29 @@ export function useImageToVideoForm(
   );
 
   const handleSelectImages = useCallback(async () => {
+    if (__DEV__) {
+      console.log("[useImageToVideoForm] handleSelectImages called");
+    }
     if (callbacks.onSelectImages) {
-      const images = await callbacks.onSelectImages();
-      if (images.length > 0) {
-        actions.addImages(images);
+      try {
+        const images = await callbacks.onSelectImages();
+        if (__DEV__) {
+          console.log("[useImageToVideoForm] Images selected:", images.length);
+        }
+        if (images.length > 0) {
+          actions.addImages(images);
+          if (__DEV__) {
+            console.log("[useImageToVideoForm] Images added to state");
+          }
+        }
+      } catch (error) {
+        if (__DEV__) {
+          console.error("[useImageToVideoForm] Error selecting images:", error);
+        }
+      }
+    } else {
+      if (__DEV__) {
+        console.warn("[useImageToVideoForm] No onSelectImages callback provided");
       }
     }
   }, [callbacks, actions]);

package/src/features/remove-background/presentation/components/RemoveBackgroundFeature.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet, Image, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ScrollView, StyleSheet, Image } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
@@ -35,6 +35,8 @@ export const RemoveBackgroundFeature: React.FC<RemoveBackgroundFeatureProps> = (
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useRemoveBackgroundFeature({
     config,
@@ -65,9 +67,6 @@ export const RemoveBackgroundFeature: React.FC<RemoveBackgroundFeatureProps> = (
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/remove-object/presentation/components/RemoveObjectFeature.tsx

@@ -5,9 +5,10 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { View, ScrollView, StyleSheet, Image, Dimensions, TextInput } from "react-native";
+import { View, ScrollView, StyleSheet, Image, TextInput } from "react-native";
 import {
   useAppDesignTokens,
+  useResponsive,
   AtomicText,
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
@@ -38,6 +39,9 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
+
   const feature = useRemoveObjectFeature({
     config,
     onSelectImage,
@@ -67,9 +71,6 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/replace-background/presentation/components/ComparisonSlider.tsx

@@ -5,21 +5,14 @@
 
 import * as React from "react";
 import { memo, useState, useRef, useMemo } from "react";
-import {
-    View,
-    StyleSheet,
-    Image,
-    PanResponder,
-    Dimensions,
-} from "react-native";
+import { View, StyleSheet, Image, PanResponder } from "react-native";
 import {
     AtomicText,
     useAppDesignTokens,
+    useResponsive,
 } from "@umituz/react-native-design-system";
 import type { ComparisonSliderProps } from "../../domain/entities";
 
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-
 export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
     function ComparisonSlider({
         originalUri,
@@ -28,8 +21,9 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
         afterLabel,
     }) {
         const tokens = useAppDesignTokens();
+        const { width: screenWidth, horizontalPadding } = useResponsive();
         const [sliderPosition, setSliderPosition] = useState(50);
-        const containerWidth = useRef(SCREEN_WIDTH - 32);
+        const containerWidth = useRef(screenWidth - horizontalPadding * 2);
 
         const panResponder = useRef(
             PanResponder.create({

package/src/features/replace-background/presentation/components/ReplaceBackgroundFeature.tsx

@@ -5,9 +5,10 @@
  */
 
 import React, { useCallback, useMemo } from "react";
-import { View, ScrollView, StyleSheet, Image, Dimensions } from "react-native";
+import { View, ScrollView, StyleSheet, Image } from "react-native";
 import {
   useAppDesignTokens,
+  useResponsive,
   AtomicInput,
 } from "@umituz/react-native-design-system";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
@@ -38,6 +39,8 @@ export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> =
   renderProcessingModal,
 }) => {
   const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
 
   const feature = useReplaceBackgroundFeature({
     config,
@@ -68,9 +71,6 @@ export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> =
   }, [feature]);
 
   if (feature.processedUrl) {
-    const screenWidth = Dimensions.get("window").width;
-    const imageSize = screenWidth - 48;
-
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}

package/src/features/script-generator/presentation/components/ScriptDisplay.tsx

@@ -37,7 +37,7 @@ export const ScriptDisplay: React.FC<ScriptDisplayProps> = ({
           📝 {title}
         </AtomicText>
         <TouchableOpacity onPress={onUseScript}>
-          <AtomicIcon name="Check" size="md" color="primary" />
+          <AtomicIcon name="checkmark-outline" size="md" color="primary" />
         </TouchableOpacity>
       </View>
 
@@ -102,7 +102,7 @@ export const ScriptDisplay: React.FC<ScriptDisplayProps> = ({
         ]}
         onPress={onUseScript}
       >
-        <AtomicIcon name="Check" size="md" color="textInverse" />
+        <AtomicIcon name="checkmark-outline" size="md" color="textInverse" />
         <AtomicText
           type="bodyLarge"
           style={[styles.useButtonText, { color: tokens.colors.textInverse }]}

package/src/features/upscaling/presentation/components/ComparisonSlider.tsx

@@ -5,20 +5,13 @@
 
 import * as React from "react";
 import { memo, useState, useRef, useMemo } from "react";
-import {
-  View,
-  StyleSheet,
-  Image,
-  PanResponder,
-  Dimensions,
-} from "react-native";
+import { View, StyleSheet, Image, PanResponder } from "react-native";
 import {
   AtomicText,
   useAppDesignTokens,
+  useResponsive,
 } from "@umituz/react-native-design-system";
 
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-
 export interface ComparisonSliderProps {
   originalUri: string;
   processedUri: string;
@@ -34,8 +27,9 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
     afterLabel = "After",
   }) {
     const tokens = useAppDesignTokens();
+    const { width: screenWidth, horizontalPadding } = useResponsive();
     const [sliderPosition, setSliderPosition] = useState(50);
-    const containerWidth = useRef(SCREEN_WIDTH - 48);
+    const containerWidth = useRef(screenWidth - horizontalPadding * 2);
 
     const panResponder = useRef(
       PanResponder.create({