@upeex/ads-sdk 1.1.16 → 1.1.17

package/README.md

@@ -4,38 +4,13 @@ SDK para aplicaçõe React Native rodarem anúncios:
 # Comando para inciar
 npm i @upeex/ads-sdk
 
-## Como usar
+### Como importar
 
-### Importação
-
-```javascript
+```js
 import AdBanner from '@upeex/ads-sdk';
-```
-
-### 1. Anúncio Tipo Banner (Padrão)
-Exibe um banner na posição onde o componente é colocado.
-
-```javascript
-<AdBanner
-  client="CLIENT_ID"
-  slot="SLOT_ID"
-  typeAds="banner" // Opcional (padrão é banner)
-/>
-```
-
-### 2. Anúncio Tipo Popup (Tela Cheia)
-Exibe um modal em tela cheia sobrepondo o conteúdo.
-- O botão de fechar aparece após **5 segundos**.
-- Não possui refresh automático.
-
-```javascript
-<AdBanner
-  client="CLIENT_ID"
-  slot="SLOT_ID"
-  typeAds="popup"
-/>
-```
-
-### Props Disponíveis
 
-| `debug` | `boolean` | Ativa logs no console |
+// Carregar anúncio
+ <AdBanner
+  client="SEU_CLIENTE"
+  slot="SEU_SLOT"
+ /

package/dist/AdBanner.d.ts

@@ -9,5 +9,5 @@ type Props = {
     debug?: boolean;
 };
 export default function AdBanner({ client, slot, baseUrl, theme, typeAds, typeads, // Receive alias
-style, debug, }: Props): import("react/jsx-runtime").JSX.Element;
+style, debug, }: Props): any;
 export {};

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import { Platform, Dimensions, Animated, StyleSheet, View, Text, Modal, TouchableOpacity, Image, ActivityIndicator, Linking } from 'react-native';
+import { useState, useEffect } from 'react';
+import { Platform, Dimensions, StyleSheet, View, Text, Modal, TouchableOpacity, Image, Linking } from 'react-native';
 
 async function getSignals() {
     var _a, _b, _c, _d, _e, _f;
@@ -79,24 +79,18 @@ async function fetchAd({ baseUrl, client, slot, debug = false, typeAds, }) {
     return ad;
 }
 
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-// Workaround for TS2604: JSX element type 'Animated.View' does not have any construct or call signatures.
-const AnimatedView = Animated.View;
 function AdBanner({ client, slot, baseUrl = 'https://app.upeex.com.br/ad', theme = 'light', typeAds, typeads, // Receive alias
 style = {}, debug = false, }) {
     var _a;
     const [ad, setAd] = useState(null);
     const [error, setError] = useState(null);
     const [modalVisible, setModalVisible] = useState(false);
-    const [canClose, setCanClose] = useState(false);
-    const progressAnim = useRef(new Animated.Value(0)).current;
-    // Normalize typeAds: prefer typeAds, fallback to typeads, default undefined.
-    // Ensure lowercase for backend compatibility (POPUP -> popup)
-    const effectiveTypeAds = (_a = (typeAds || typeads)) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     const log = (...args) => {
         if (debug)
             console.log('[UPEEX ADS]', ...args);
     };
+    const effectiveTypeAds = (_a = (typeAds || typeads)) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const isPopup = effectiveTypeAds === 'popup';
     useEffect(() => {
         let refreshTimer;
         const load = async () => {
@@ -117,29 +111,15 @@ style = {}, debug = false, }) {
                 }
                 setAd(data);
                 setError(null);
-                if (effectiveTypeAds === 'popup') {
+                if (isPopup) {
                     setModalVisible(true);
-                    setCanClose(false);
-                    progressAnim.setValue(0);
-                    Animated.timing(progressAnim, {
-                        toValue: 1,
-                        duration: 5000,
-                        useNativeDriver: false,
-                    }).start(({ finished }) => {
-                        if (finished) {
-                            setCanClose(true);
-                        }
-                    });
                 }
-                // Only enable refresh if it's NOT a popup
-                if (effectiveTypeAds !== 'popup') {
-                    if (data.refresh && data.refresh > 0) {
-                        log(`Refresh ativo: ${data.refresh}s`);
-                        refreshTimer = setTimeout(() => {
-                            log('Refazendo request do anúncio');
-                            load();
-                        }, data.refresh * 1000);
-                    }
+                if (data.refresh && data.refresh > 0) {
+                    log(`Refresh ativo: ${data.refresh}s`);
+                    refreshTimer = setTimeout(() => {
+                        log('Refazendo request do anúncio');
+                        load();
+                    }, data.refresh * 1000);
                 }
             }
             catch (err) {
@@ -156,14 +136,11 @@ style = {}, debug = false, }) {
                 clearTimeout(refreshTimer);
         };
     }, [client, slot, baseUrl, effectiveTypeAds]);
-    if (error) {
-        return debug ? (jsx(View, { style: [styles.container, styles.debug], children: jsx(Text, { style: styles.debugText, children: error }) })) : null;
-    }
-    if (!ad) {
-        return debug ? (jsx(View, { style: [styles.container, styles.loading], children: jsx(Text, { style: styles.loadingText, children: "Carregando an\u00FAncio\u2026" }) })) : null;
-    }
     const handlePress = () => {
         log('Clique no anúncio', ad.clickUrl);
+        if (isPopup) {
+            setModalVisible(false);
+        }
         if (!ad.clickUrl)
             return;
         if (Platform.OS === 'web') {
@@ -173,23 +150,25 @@ style = {}, debug = false, }) {
             Linking.openURL(ad.clickUrl);
         }
     };
-    if (effectiveTypeAds === 'popup') {
-        return (jsx(Modal, { visible: modalVisible, transparent: true, animationType: "fade", onRequestClose: () => {
-                if (canClose)
-                    setModalVisible(false);
-            }, children: jsxs(View, { style: styles.modalBackground, children: [!canClose && (jsx(View, { style: styles.progressBarContainer, children: jsx(AnimatedView, { style: [
-                                styles.progressBar,
-                                {
-                                    width: progressAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: ['0%', '100%'],
-                                    }),
-                                },
-                            ] }) })), jsx(TouchableOpacity, { style: styles.fullScreenTouch, activeOpacity: 1, onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: styles.fullScreenImage, resizeMode: "contain" }) }), jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setModalVisible(false), disabled: !canClose, children: !canClose ? (jsx(ActivityIndicator, { size: "small", color: "#fff" })) : (jsx(Text, { style: styles.closeButtonText, children: "X" })) })] }) }));
+    const handleClose = () => {
+        setModalVisible(false);
+    };
+    if (error) {
+        return debug ? (jsx(View, { style: [styles.upeexContainer, styles.upeexDebug], children: jsx(Text, { style: styles.upeexDebugText, children: error }) })) : null;
+    }
+    if (!ad) {
+        return debug ? (jsx(View, { style: [styles.upeexContainer, styles.upeexLoading], children: jsx(Text, { style: styles.upeexLoadingText, children: "Carregando an\u00FAncio\u2026" }) })) : null;
+    }
+    if (isPopup) {
+        return (jsx(Modal, { transparent: true, visible: modalVisible, onRequestClose: handleClose, animationType: "fade", children: jsx(View, { style: styles.upeexOverlay, children: jsxs(View, { style: [styles.upeexPopupContainer, theme === 'dark' && styles.upeexDark], children: [jsx(TouchableOpacity, { onPress: handleClose, style: styles.upeexCloseButton, children: jsx(Text, { style: styles.upeexCloseText, children: "\u2715" }) }), jsx(TouchableOpacity, { activeOpacity: 0.9, onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
+                                    width: ad.width || 300,
+                                    height: ad.height || 300,
+                                    resizeMode: 'contain',
+                                } }) })] }) }) }));
     }
     return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [
-            styles.container,
-            theme === 'dark' && styles.dark,
+            styles.upeexContainer,
+            theme === 'dark' && styles.upeexDark,
             style,
         ], onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
                 width: ad.width || 320,
@@ -198,74 +177,58 @@ style = {}, debug = false, }) {
             } }) }));
 }
 const styles = StyleSheet.create({
-    container: {
+    upeexContainer: {
         backgroundColor: '#f2f2f2',
         padding: 8,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    dark: {
+    upeexDark: {
         backgroundColor: '#121212',
     },
-    loading: {
+    upeexLoading: {
         backgroundColor: '#fafafa',
     },
-    loadingText: {
+    upeexLoadingText: {
         fontSize: 11,
         color: '#999',
     },
-    debug: {
+    upeexDebug: {
         backgroundColor: '#ffecec',
     },
-    debugText: {
+    upeexDebugText: {
         fontSize: 11,
         color: '#c00',
     },
-    modalBackground: {
+    upeexOverlay: {
         flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.9)',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
         justifyContent: 'center',
         alignItems: 'center',
     },
-    fullScreenTouch: {
-        flex: 1,
-        width: '100%',
-        height: '100%',
-        justifyContent: 'center',
+    upeexPopupContainer: {
+        backgroundColor: '#fff',
+        padding: 20,
+        borderRadius: 10,
         alignItems: 'center',
+        position: 'relative',
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
     },
-    fullScreenImage: {
-        width: '90%',
-        height: '90%',
-    },
-    closeButton: {
+    upeexCloseButton: {
         position: 'absolute',
-        top: 50,
-        right: 20,
-        backgroundColor: 'rgba(0,0,0,0.6)',
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 999,
+        top: 5,
+        right: 5,
+        zIndex: 1,
+        padding: 5,
     },
-    closeButtonText: {
-        color: '#fff',
+    upeexCloseText: {
         fontSize: 18,
         fontWeight: 'bold',
-    },
-    progressBarContainer: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: 5,
-        backgroundColor: 'rgba(255,255,255,0.3)',
-        zIndex: 1000,
-    },
-    progressBar: {
-        height: '100%',
+        color: '#333',
     },
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upeex/ads-sdk",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "description": "Upeex Ads SDK for React Native and universal apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,11 +27,10 @@
   "author": "Upeex",
   "license": "MIT",
   "dependencies": {
+    "@upeex/ads-sdk": "^1.1.10",
     "expo-localization": "^17.0.8"
   },
   "devDependencies": {
-    "@types/react": "^19.2.13",
-    "@types/react-native": "^0.73.0",
     "rollup": "^4.57.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "tslib": "^2.8.1",