@upeex/ads-sdk 1.1.15 → 1.1.16

package/README.md

@@ -4,14 +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"
-  typeAds="banner" // banner ou popup
- /
+| `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, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { Platform, Dimensions, StyleSheet, View, Text, Modal, TouchableOpacity, Image, ActivityIndicator, Linking } from 'react-native';
+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;
@@ -80,6 +80,8 @@ async function fetchAd({ baseUrl, client, slot, debug = false, typeAds, }) {
 }
 
 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;
@@ -87,6 +89,7 @@ style = {}, debug = false, }) {
     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();
@@ -117,17 +120,26 @@ style = {}, debug = false, }) {
                 if (effectiveTypeAds === 'popup') {
                     setModalVisible(true);
                     setCanClose(false);
-                    // Timer to enable close button
-                    setTimeout(() => {
-                        setCanClose(true);
-                    }, 2000);
+                    progressAnim.setValue(0);
+                    Animated.timing(progressAnim, {
+                        toValue: 1,
+                        duration: 5000,
+                        useNativeDriver: false,
+                    }).start(({ finished }) => {
+                        if (finished) {
+                            setCanClose(true);
+                        }
+                    });
                 }
-                if (data.refresh && data.refresh > 0) {
-                    log(`Refresh ativo: ${data.refresh}s`);
-                    refreshTimer = setTimeout(() => {
-                        log('Refazendo request do anúncio');
-                        load();
-                    }, data.refresh * 1000);
+                // 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) {
@@ -165,7 +177,15 @@ style = {}, debug = false, }) {
         return (jsx(Modal, { visible: modalVisible, transparent: true, animationType: "fade", onRequestClose: () => {
                 if (canClose)
                     setModalVisible(false);
-            }, children: jsxs(View, { style: styles.modalBackground, children: [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" })) })] }) }));
+            }, 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,
@@ -220,9 +240,9 @@ const styles = StyleSheet.create({
     },
     closeButton: {
         position: 'absolute',
-        top: 40,
+        top: 50,
         right: 20,
-        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+        backgroundColor: 'rgba(0,0,0,0.6)',
         width: 40,
         height: 40,
         borderRadius: 20,
@@ -235,6 +255,18 @@ const styles = StyleSheet.create({
         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.15",
+  "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"
   }
-}
+}