@upeex/ads-sdk 1.1.24 → 1.1.27

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { Platform, Dimensions, Animated, StyleSheet, Modal, View, TouchableOpacity, Image, Text, Linking } from 'react-native';
+import { useState, useRef, useEffect } from 'react';
+import { Platform, Dimensions, Animated, StyleSheet, Modal, View, ActivityIndicator, TouchableOpacity, Text, Image, Linking } from 'react-native';
 
 async function getSignals() {
     var _a, _b, _c, _d, _e, _f;
@@ -79,24 +79,42 @@ async function fetchAd({ baseUrl, client, slot, debug = false, typeAds, }) {
     return ad;
 }
 
-// Default fallback ads
+// Default fallback ads shown when server returns an error
 const DEFAULT_POPUP_IMAGE = 'https://app.upeex.com.br/files/show/ads_square.jpeg';
 const DEFAULT_BANNER_IMAGE = 'https://app.upeex.com.br/files/show/ads_horizontal.jpg';
 const DEFAULT_CLICK_URL = 'https://upeex.com/';
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-// Workaround for TS2604
-Animated.View;
+// 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, 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;
     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';
+    // Start 5-second progress bar when popup becomes visible
+    useEffect(() => {
+        if (modalVisible) {
+            setCanClose(false);
+            progressAnim.setValue(0);
+            Animated.timing(progressAnim, {
+                toValue: 1,
+                duration: 5000,
+                useNativeDriver: false,
+            }).start(({ finished }) => {
+                if (finished) {
+                    setCanClose(true);
+                }
+            });
+        }
+    }, [modalVisible]);
     useEffect(() => {
         let refreshTimer;
         const load = async () => {
@@ -142,7 +160,7 @@ function AdBanner({ client, slot, baseUrl = 'https://app.upeex.com.br/ad', theme
                 clearTimeout(refreshTimer);
         };
     }, [client, slot, baseUrl]);
-    // ─── FALLBACK: show default ad on error ───────────────────────────────────
+    // ─── FALLBACK: default ad on error ────────────────────────────────────────
     if (error) {
         const fallbackImage = isPopup ? DEFAULT_POPUP_IMAGE : DEFAULT_BANNER_IMAGE;
         const handleFallbackPress = () => {
@@ -154,18 +172,27 @@ function AdBanner({ client, slot, baseUrl = 'https://app.upeex.com.br/ad', theme
             }
         };
         if (isPopup) {
-            return (jsx(Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: () => { }, children: jsx(View, { style: styles.modalOverlay, children: jsx(View, { style: styles.modalContent, children: jsx(TouchableOpacity, { onPress: handleFallbackPress, activeOpacity: 0.9, children: jsx(Image, { source: { uri: fallbackImage }, style: styles.popupImage, resizeMode: "contain" }) }) }) }) }));
+            return (jsx(Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: () => { }, children: jsx(View, { style: styles.modalBackground, children: jsxs(View, { style: styles.imageWrapper, children: [jsx(View, { style: styles.progressBarContainer, children: jsx(AnimatedView, { style: [
+                                        styles.progressBar,
+                                        {
+                                            width: progressAnim.interpolate({
+                                                inputRange: [0, 1],
+                                                outputRange: ['0%', '100%'],
+                                            }),
+                                            backgroundColor: '#fff',
+                                        },
+                                    ] }) }), !canClose && (jsx(View, { style: styles.spinnerOverlay, children: jsx(ActivityIndicator, { size: "small", color: "#fff" }) })), canClose && (jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => { }, children: jsx(Text, { style: styles.closeButtonText, children: "X" }) })), jsx(TouchableOpacity, { activeOpacity: 1, onPress: handleFallbackPress, children: jsx(Image, { source: { uri: fallbackImage }, style: styles.popupImage, resizeMode: "contain" }) })] }) }) }));
         }
         // Banner fallback
-        return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [styles.upeexContainer, theme === 'dark' && styles.upeexDark, style], onPress: handleFallbackPress, children: jsx(Image, { source: { uri: fallbackImage }, style: styles.bannerFallbackImage, resizeMode: "contain" }) }));
+        return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [styles.container, theme === 'dark' && styles.dark, style], onPress: handleFallbackPress, children: jsx(Image, { source: { uri: fallbackImage }, style: { width: 320, height: 50, resizeMode: 'contain' } }) }));
     }
     // ──────────────────────────────────────────────────────────────────────────
     if (!ad) {
-        return debug ? (jsx(View, { style: [styles.upeexContainer, styles.upeexLoading], children: jsx(Text, { style: styles.upeexLoadingText, children: "Carregando an\u00FAncio\u2026" }) })) : null;
+        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) {
+        if (isPopup && canClose) {
             setModalVisible(false);
         }
         if (!ad.clickUrl)
@@ -179,81 +206,104 @@ function AdBanner({ client, slot, baseUrl = 'https://app.upeex.com.br/ad', theme
     };
     // ─── POPUP ─────────────────────────────────────────────────────────────────
     if (isPopup) {
-        return (jsx(Modal, { transparent: true, animationType: "fade", visible: modalVisible, onRequestClose: () => setModalVisible(false), children: jsx(View, { style: styles.modalOverlay, children: jsxs(View, { style: styles.modalContent, children: [jsx(TouchableOpacity, { style: styles.modalClose, onPress: () => setModalVisible(false), children: jsx(Text, { style: styles.modalCloseText, children: "\u2715" }) }), jsx(TouchableOpacity, { onPress: handlePress, activeOpacity: 0.9, children: jsx(Image, { source: { uri: ad.image }, style: styles.popupImage, resizeMode: "contain" }) })] }) }) }));
+        return (jsx(Modal, { transparent: true, animationType: "fade", visible: modalVisible, onRequestClose: () => canClose && setModalVisible(false), children: jsx(View, { style: styles.modalBackground, children: jsxs(View, { style: styles.imageWrapper, children: [jsx(View, { style: styles.progressBarContainer, children: jsx(AnimatedView, { style: [
+                                    styles.progressBar,
+                                    {
+                                        width: progressAnim.interpolate({
+                                            inputRange: [0, 1],
+                                            outputRange: ['0%', '100%'],
+                                        }),
+                                        backgroundColor: '#fff',
+                                    },
+                                ] }) }), !canClose && (jsx(View, { style: styles.spinnerOverlay, children: jsx(ActivityIndicator, { size: "small", color: "#fff" }) })), canClose && (jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setModalVisible(false), children: jsx(Text, { style: styles.closeButtonText, children: "X" }) })), jsx(TouchableOpacity, { activeOpacity: 1, onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: styles.popupImage, resizeMode: "contain" }) })] }) }) }));
     }
     // ─── BANNER ────────────────────────────────────────────────────────────────
-    return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [
-            styles.upeexContainer,
-            theme === 'dark' && styles.upeexDark,
-            style,
-        ], onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
+    return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [styles.container, theme === 'dark' && styles.dark, style], onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
                 width: ad.width || 320,
                 height: ad.height || 50,
                 resizeMode: 'contain',
             } }) }));
 }
 const styles = StyleSheet.create({
-    upeexContainer: {
+    container: {
         backgroundColor: '#f2f2f2',
         padding: 8,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    upeexDark: {
+    dark: {
         backgroundColor: '#121212',
     },
-    upeexLoading: {
+    loading: {
         backgroundColor: '#fafafa',
     },
-    upeexLoadingText: {
+    loadingText: {
         fontSize: 11,
         color: '#999',
     },
-    upeexDebug: {
+    debug: {
         backgroundColor: '#ffecec',
     },
-    upeexDebugText: {
+    debugText: {
         fontSize: 11,
         color: '#c00',
     },
-    bannerFallbackImage: {
-        width: 320,
-        height: 50,
-    },
-    // Modal / Popup styles
-    modalOverlay: {
+    // Modal / Popup
+    modalBackground: {
         flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.6)',
-        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.9)',
         justifyContent: 'center',
+        alignItems: 'center',
     },
-    modalContent: {
+    // Wrapper that groups image + progress bar + close button together
+    imageWrapper: {
         position: 'relative',
+        width: screenWidth * 0.88,
+        aspectRatio: 1,
+        maxWidth: 420,
+    },
+    popupImage: {
+        width: '100%',
+        height: '100%',
         borderRadius: 8,
-        overflow: 'hidden',
     },
-    modalClose: {
+    closeButton: {
         position: 'absolute',
         top: 8,
         right: 8,
-        zIndex: 10,
-        backgroundColor: 'rgba(0,0,0,0.5)',
+        backgroundColor: 'rgba(0,0,0,0.65)',
+        width: 32,
+        height: 32,
         borderRadius: 16,
-        width: 28,
-        height: 28,
-        alignItems: 'center',
         justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 999,
     },
-    modalCloseText: {
+    closeButtonText: {
         color: '#fff',
-        fontSize: 14,
+        fontSize: 15,
         fontWeight: 'bold',
     },
-    popupImage: {
-        width: screenWidth * 0.85,
-        height: screenWidth * 0.85,
-        maxWidth: 400,
-        maxHeight: 400,
+    progressBarContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: 5,
+        backgroundColor: 'rgba(255,255,255,0.3)',
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        zIndex: 1000,
+    },
+    progressBar: {
+        height: '100%',
+        borderTopLeftRadius: 8,
+    },
+    spinnerOverlay: {
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        zIndex: 1000,
     },
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upeex/ads-sdk",
-  "version": "1.1.24",
+  "version": "1.1.27",
   "description": "Upeex Ads SDK for React Native and universal apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,4 +39,4 @@
     "react": "18.2.0",
     "react-native": "0.73.0"
   }
-}
+}