@upeex/ads-sdk 1.1.14 → 1.1.16

package/README.md

@@ -4,13 +4,38 @@ SDK para aplicaçõe React Native rodarem anúncios:
 # Comando para inciar
 npm i @upeex/ads-sdk
 
-### Como importar
+## Como usar
 
-```js
+### Importação
+
+```javascript
 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
 
-// Carregar anúncio
- <AdBanner
-  client="SEU_CLIENTE"
-  slot="SEU_SLOT"
- /
+| `debug` | `boolean` | Ativa logs no console |

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): any;
+style, debug, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.js

@@ -1,6 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { Platform, Dimensions, StyleSheet, View, Text, TouchableOpacity, Image, Linking } from 'react-native';
+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';
 
 async function getSignals() {
     var _a, _b, _c, _d, _e, _f;
@@ -79,10 +79,20 @@ 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);
@@ -90,12 +100,8 @@ style = {}, debug = false, }) {
     useEffect(() => {
         let refreshTimer;
         const load = async () => {
-            var _a;
             try {
                 log('Buscando anúncio', { client, slot });
-                // 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 data = await fetchAd({
                     baseUrl,
                     client,
@@ -111,12 +117,29 @@ style = {}, debug = false, }) {
                 }
                 setAd(data);
                 setError(null);
-                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 (effectiveTypeAds === 'popup') {
+                    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);
+                    }
                 }
             }
             catch (err) {
@@ -132,7 +155,7 @@ style = {}, debug = false, }) {
             if (refreshTimer)
                 clearTimeout(refreshTimer);
         };
-    }, [client, slot, baseUrl]);
+    }, [client, slot, baseUrl, effectiveTypeAds]);
     if (error) {
         return debug ? (jsx(View, { style: [styles.container, styles.debug], children: jsx(Text, { style: styles.debugText, children: error }) })) : null;
     }
@@ -150,6 +173,20 @@ 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" })) })] }) }));
+    }
     return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [
             styles.container,
             theme === 'dark' && styles.dark,
@@ -184,6 +221,52 @@ const styles = StyleSheet.create({
         fontSize: 11,
         color: '#c00',
     },
+    modalBackground: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.9)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fullScreenTouch: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fullScreenImage: {
+        width: '90%',
+        height: '90%',
+    },
+    closeButton: {
+        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,
+    },
+    closeButtonText: {
+        color: '#fff',
+        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%',
+    },
 });
 
 export { AdBanner, AdBanner as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upeex/ads-sdk",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "Upeex Ads SDK for React Native and universal apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,13 +27,14 @@
   "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",
     "typescript": "^5.9.3"
   }
-}
+}