From 3fe241f03c9fb67d15d44a93c9eddf70b430b2c1 Mon Sep 17 00:00:00 2001 From: aamir Date: Sun, 13 Oct 2024 12:47:01 +0500 Subject: [PATCH] chore: add components to modularize code added components to the new added effects. --- ads/adIds.ts | 22 ++-- app/(screens)/effects/backgroundRemove.tsx | 5 +- app/(screens)/effects/backgroundReplace.tsx | 1 + app/(screens)/effects/generativeFill.tsx | 55 ++-------- app/(screens)/effects/generativeRecolor.tsx | 112 ++++++++------------ app/(screens)/effects/generativeReplace.tsx | 5 +- app/(screens)/effects/imageRestore.tsx | 1 + app/(screens)/effects/imageUpscale.tsx | 1 + app/(screens)/effects/improveColors.tsx | 1 + app/(screens)/effects/magicEraser.tsx | 3 +- components/common/customCheckBox.tsx | 5 +- components/common/effectImagePreview.tsx | 7 +- 12 files changed, 79 insertions(+), 139 deletions(-) diff --git a/ads/adIds.ts b/ads/adIds.ts index ce24a57..74b59c5 100644 --- a/ads/adIds.ts +++ b/ads/adIds.ts @@ -1,17 +1,17 @@ import { TestIds } from "react-native-google-mobile-ads"; -// export const AdIds = { -// appOpen: TestIds.APP_OPEN, -// adaptiveBanner: TestIds.ADAPTIVE_BANNER, -// Interstitial: TestIds.INTERSTITIAL, -// rewarded: TestIds.REWARDED, -// rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL, -// }; - export const AdIds = { appOpen: TestIds.APP_OPEN, - adaptiveBanner: "ca-app-pub-3417831874175604/7074955178", - Interstitial: "ca-app-pub-3417831874175604/6639064228", - rewarded: "ca-app-pub-3417831874175604/9119216895", + adaptiveBanner: TestIds.ADAPTIVE_BANNER, + Interstitial: TestIds.INTERSTITIAL, + rewarded: TestIds.REWARDED, rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL, }; + +// export const AdIds = { +// appOpen: TestIds.APP_OPEN, +// adaptiveBanner: "ca-app-pub-3417831874175604/7074955178", +// Interstitial: "ca-app-pub-3417831874175604/6639064228", +// rewarded: "ca-app-pub-3417831874175604/9119216895", +// rewardedInterstitial: TestIds.REWARDED_INTERSTITIAL, +// }; diff --git a/app/(screens)/effects/backgroundRemove.tsx b/app/(screens)/effects/backgroundRemove.tsx index 91e253f..58bcc33 100644 --- a/app/(screens)/effects/backgroundRemove.tsx +++ b/app/(screens)/effects/backgroundRemove.tsx @@ -128,14 +128,11 @@ //? ================== Temporary ================= import { Text, View, ScrollView } from 'react-native' -import React, { useContext } from 'react' +import React from 'react' import { Link } from 'expo-router' import BannerAdComponent from '@/ads/banner'; -import { BannerAdSize } from 'react-native-google-mobile-ads'; import ComingSoon from '@/components/comingSoon'; -import { GlobalContext } from '@/context/contextProvider'; const backgroundRemove = () => { - const { allowAds } = useContext(GlobalContext) return ( diff --git a/app/(screens)/effects/backgroundReplace.tsx b/app/(screens)/effects/backgroundReplace.tsx index 1fd44c6..5501f94 100644 --- a/app/(screens)/effects/backgroundReplace.tsx +++ b/app/(screens)/effects/backgroundReplace.tsx @@ -101,6 +101,7 @@ const backgroundReplace = () => { { } - setLoadingMessage("Initializing generative recolor..."); + setLoadingMessage("Initializing generative Fill..."); await validateAppVersion(); @@ -161,6 +162,7 @@ const GenerativeFill = () => { getPicture={getPicture} effectTitle={"Generative Fill"} image={img} + originalButtonText='Fill' setButtonText={setButtonText} loadingMessage={loadingMessage} setLoadingMessage={setLoadingMessage} @@ -170,41 +172,6 @@ const GenerativeFill = () => { /> - Generative Fill - - { - - - - setLoadingMessage("Generative fill in progress...")} - onLoad={() => setLoadingMessage("")} - onError={() => { - setLoadingMessage("") - Alert.alert("Error", "something went wrong while loading images. try again later"); - setTransformedImageUrl(undefined) - }} - resizeMode={"contain"} - className={`w-full absolute top-0 left-0 h-full ${loadingMessage ? "opacity-0" : "opacity-100"}`} - source={transformedImageUrl - ? { uri: transformedImageUrl } - : img?.uri - ? { uri: img.uri } - : require("@/assets/images/transparent.png")} - /> - - - - - - Select Image - - - - - - } - @@ -249,16 +216,12 @@ const GenerativeFill = () => { : null} {/* buttons */} - - - - Cancel - - - - {(transformedImageUrl && !loadingMessage) ? "Save" : "Recolor"} - - + 1} + style='pb-40' + /> diff --git a/app/(screens)/effects/generativeRecolor.tsx b/app/(screens)/effects/generativeRecolor.tsx index b585c9f..f9f49dc 100644 --- a/app/(screens)/effects/generativeRecolor.tsx +++ b/app/(screens)/effects/generativeRecolor.tsx @@ -14,6 +14,10 @@ import Checkbox from "expo-checkbox"; import { validateAppVersion } from '@/utils/validateAppVersion'; import ColorPickerModel from '@/components/colorPickerModel'; import { rewarded } from '@/ads/reward'; +import EffectImagePreview from '@/components/common/effectImagePreview'; +import PromptComponent from '@/components/common/promptComponent'; +import CustomCheckBox from '@/components/common/customCheckBox'; +import ActionButtons from '@/components/common/actionButtons'; const GenerativeRecolor = () => { @@ -25,7 +29,7 @@ const GenerativeRecolor = () => { const [transformedImageUrl, setTransformedImageUrl] = useState(undefined) const [loadingMessage, setLoadingMessage] = useState(""); const { allowAds } = useContext(GlobalContext); - + const [buttonText, setButtonText] = useState("Recolor"); const getPicture = async () => { const asset = await getAssetFromGallery({ fileType: "image" }); setImg(asset) @@ -70,7 +74,7 @@ const GenerativeRecolor = () => { return; } - if (items.length === 0) { + if (items.length === 0 && prompt.trim().length === 0) { Alert.alert("Prompt Missing", "Select at least one item to recolor"); return; } @@ -80,7 +84,13 @@ const GenerativeRecolor = () => { await validateAppVersion(); // remove the hast from the start. const color = colorPicked.slice(1); - const promptToSend = items.length === 1 ? items.join("") : `(${items.join(";")})`; + let promptToSend; + + if (items.length == 0) { + promptToSend = `(${prompt})`; + } else { + promptToSend = items.length === 1 ? items.join("") : `(${items.join(";")})`; + } if (allowAds && rewarded.loaded) { @@ -116,53 +126,27 @@ const GenerativeRecolor = () => { return ( - Generative Recolor - - { - - - - setLoadingMessage("Generative recolor in progress...")} - onLoad={() => setLoadingMessage("")} - onError={() => { - setLoadingMessage("") - Alert.alert("Error", "something went wrong while loading images. try again later"); - setTransformedImageUrl(undefined) - }} - resizeMode={"contain"} - className={`w-full absolute top-0 left-0 h-full ${loadingMessage ? "opacity-0" : "opacity-100"}`} - source={transformedImageUrl - ? { uri: transformedImageUrl } - : img?.uri - ? { uri: img.uri } - : require("@/assets/images/transparent.png")} - /> - - - - - - Select Image - - - - - - } + - {/* prompt Area */} - { + { handleItems(e) setTransformedImageUrl(""); }} - numberOfLines={3} placeholder={items.length === 0 ? 'Items to recolor separate my comma. (3 max)' : items.length >= 3 ? "Max items selected" : "New items"} - className='mt-8 h-12 px-2 bg-backgroundContainer text-gray-200 focus:border-2 rounded-md focus:border-outline' - placeholderTextColor={"#65558F"} /> {/* items to recolor */} @@ -186,24 +170,17 @@ const GenerativeRecolor = () => { - { - setMultiple(prev => !prev); - setTransformedImageUrl(""); - }} - activeOpacity={1} - className='flex-row py-1.5 items-center' - > - { - setMultiple(prev => !prev); - setTransformedImageUrl(""); + + { + setMultiple(prev => !prev) + transformedImageUrl && setTransformedImageUrl(""); }} - color={multiple ? "#326AFD" : "white"} + label={"Recolor Multiple"} /> - Recolor multiple - + @@ -213,16 +190,11 @@ const GenerativeRecolor = () => { {/* buttons */} - - - - Cancel - - - - {(transformedImageUrl && !loadingMessage) ? "Save" : "Recolor"} - - + diff --git a/app/(screens)/effects/generativeReplace.tsx b/app/(screens)/effects/generativeReplace.tsx index 0c00bc0..2e9de27 100644 --- a/app/(screens)/effects/generativeReplace.tsx +++ b/app/(screens)/effects/generativeReplace.tsx @@ -96,6 +96,7 @@ const GenerativeReplace = () => { { { + onPromptChange={(e: string) => { setFrom(e); transformedImageUrl && setTransformedImageUrl(""); }} @@ -119,7 +120,7 @@ const GenerativeReplace = () => { style='w-[48%]' /> { + onPromptChange={(e: string) => { setTo(e); transformedImageUrl && setTransformedImageUrl(""); }} diff --git a/app/(screens)/effects/imageRestore.tsx b/app/(screens)/effects/imageRestore.tsx index f332375..5eeeb70 100644 --- a/app/(screens)/effects/imageRestore.tsx +++ b/app/(screens)/effects/imageRestore.tsx @@ -93,6 +93,7 @@ const ImageRestore = () => { { getPicture={getPicture} effectTitle={"Image Upscale"} image={img} + originalButtonText='Upscale' setButtonText={setButtonText} loadingMessage={loadingMessage} setLoadingMessage={setLoadingMessage} diff --git a/app/(screens)/effects/improveColors.tsx b/app/(screens)/effects/improveColors.tsx index 47fc56e..8a46e6a 100644 --- a/app/(screens)/effects/improveColors.tsx +++ b/app/(screens)/effects/improveColors.tsx @@ -150,6 +150,7 @@ const ImproveColors = () => { getPicture={getPicture} effectTitle={"Improve Colors"} image={img} + originalButtonText={"Improve"} setButtonText={setButtonText} loadingMessage={loadingMessage} setLoadingMessage={setLoadingMessage} diff --git a/app/(screens)/effects/magicEraser.tsx b/app/(screens)/effects/magicEraser.tsx index da3b1e2..2355eec 100644 --- a/app/(screens)/effects/magicEraser.tsx +++ b/app/(screens)/effects/magicEraser.tsx @@ -104,6 +104,7 @@ const MagicEraser = () => { getPicture={getPicture} effectTitle={"Generative Remove"} image={img} + originalButtonText='Remove' setButtonText={setButtonText} loadingMessage={loadingMessage} setLoadingMessage={setLoadingMessage} @@ -115,7 +116,7 @@ const MagicEraser = () => { {/* prompt Area */} { + onPromptChange={(e: string) => { setPrompt(e) transformedImageUrl && setTransformedImageUrl(""); }} diff --git a/components/common/customCheckBox.tsx b/components/common/customCheckBox.tsx index f63e4b1..15fefbf 100644 --- a/components/common/customCheckBox.tsx +++ b/components/common/customCheckBox.tsx @@ -6,13 +6,14 @@ interface Props { onChecked: () => void checked: boolean label: string + style?: string } -const CustomCheckBox = ({ onChecked, checked, label }: Props) => { +const CustomCheckBox = ({ onChecked, checked, label, style }: Props) => { return ( > setButtonText: React.Dispatch> + originalButtonText: string transformedImageUrl: string | undefined setTransformedImageUrl: React.Dispatch> image: ImagePickerAsset | undefined @@ -23,21 +24,21 @@ const EffectImagePreview = ({ setButtonText, setLoadingMessage, setTransformedImageUrl, + originalButtonText, image, transformedImageUrl }: Props) => { - const onImageLoadError = () => { setLoadingMessage(""); Alert.alert("Error", "something went wrong while loading images. try again later"); setTransformedImageUrl(undefined); - setButtonText("Replace"); + setButtonText(originalButtonText); } const onImageLoad = () => { setLoadingMessage(""); - transformedImageUrl ? setButtonText("Save") : setButtonText("Replace"); + transformedImageUrl ? setButtonText("Save") : setButtonText(originalButtonText); } const imageSource = transformedImageUrl