@media-suite/reactnative-sdk 0.1.0 → 0.2.0

package/README.md

@@ -1,11 +1,11 @@
-# @mediasuite/react-native-sdk
+# @media-suite/reactnative-sdk
 
 React Native SDK for MediaSuite ad platform. Renders ads, tracks impressions/clicks with IAB/MRC viewability compliance.
 
 ## Installation
 
 ```bash
-npm install @mediasuite/react-native-sdk @react-native-async-storage/async-storage
+npm install @media-suite/reactnative-sdk @react-native-async-storage/async-storage
 ```
 
 ## Quick Start
@@ -13,7 +13,7 @@ npm install @mediasuite/react-native-sdk @react-native-async-storage/async-stora
 ### 1. Wrap your app with the Provider
 
 ```tsx
-import { MediaSuiteProvider } from '@mediasuite/react-native-sdk';
+import { MediaSuiteProvider } from '@media-suite/reactnative-sdk';
 
 export default function App() {
   return (
@@ -35,7 +35,7 @@ export default function App() {
 ### 2. Render ads anywhere
 
 ```tsx
-import { MediaSuiteAd } from '@mediasuite/react-native-sdk';
+import { MediaSuiteAd } from '@media-suite/reactnative-sdk';
 
 function HomeScreen() {
   return (

package/dist/MediaSuiteAd.js

@@ -14,6 +14,7 @@ export function MediaSuiteAd({ spaceCode, style, screenName, onAdLoaded, onError
     const scrollCheckInterval = useRef(null);
     const adsRef = useRef([]);
     const consecutiveFailures = useRef(0);
+    const lastClickTime = useRef(0);
     // Keep adsRef in sync for use inside interval callbacks
     useEffect(() => { adsRef.current = ads; }, [ads]);
     // Fetch ads — skip until visitorId is ready to avoid false onError
@@ -125,23 +126,26 @@ export function MediaSuiteAd({ spaceCode, style, screenName, onAdLoaded, onError
             cancelViewabilityCheck();
         }
     }, [ads, index, onError, cancelViewabilityCheck]);
-    // Click handler — fire-and-forget tracking + open destination URL
+    // Click handler — debounced, opens tracking URL via Linking (backend 302 redirects to destination)
     const handlePress = useCallback(async () => {
+        const now = Date.now();
+        if (now - lastClickTime.current < 1000)
+            return; // 1s debounce
+        lastClickTime.current = now;
         const ad = ads[index];
         if (!ad)
             return;
         const clickUrl = getClickUrl(ad.placement_id, screenName);
-        // Fire tracking call (don't wait for response)
-        fetch(clickUrl).catch(() => { });
-        // Open the destination URL directly
-        if (ad.click_url) {
-            await Linking.openURL(ad.click_url).catch(() => { });
-        }
+        await Linking.openURL(clickUrl).catch(() => { });
     }, [ads, index, getClickUrl, screenName]);
     if (!ads.length)
         return null;
     const ad = ads[index];
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.9, onPress: handlePress, style: [styles.container, style], accessibilityLabel: ad.alt_text || 'Advertisement', accessibilityRole: "link", children: _jsx(View, { ref: viewRef, collapsable: false, children: _jsx(Image, { source: { uri: ad.image_url }, style: [styles.image, loaded && styles.imageLoaded], resizeMode: "contain", onLoad: () => { setLoaded(true); consecutiveFailures.current = 0; }, onError: handleImageError }, ad.placement_id) }) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.9, onPress: handlePress, style: [styles.container, style], accessibilityLabel: ad.alt_text || 'Advertisement', accessibilityRole: "link", children: _jsx(View, { ref: viewRef, collapsable: false, children: _jsx(Image, { source: { uri: ad.image_url }, style: [
+                    styles.image,
+                    { aspectRatio: ad.image_width && ad.image_height ? ad.image_width / ad.image_height : 16 / 9 },
+                    loaded && styles.imageLoaded,
+                ], resizeMode: "contain", onLoad: () => { setLoaded(true); consecutiveFailures.current = 0; }, onError: handleImageError }, ad.placement_id) }) }));
 }
 const styles = StyleSheet.create({
     container: {
@@ -150,7 +154,6 @@ const styles = StyleSheet.create({
     },
     image: {
         width: '100%',
-        aspectRatio: 16 / 9,
         opacity: 0,
     },
     imageLoaded: {

package/dist/MediaSuiteProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState, useRef, useCallback } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { Platform, useWindowDimensions } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 function uuid() {
     // Prefer crypto.randomUUID (available since RN 0.73+ with Hermes)
@@ -66,13 +66,15 @@ export function MediaSuiteProvider({ config, children, }) {
         };
     }, []);
     const fetchSpace = useCallback(async (spaceCode) => {
+        const CACHE_TTL = 120000; // 120s — matches backend KVS TTL
         const cacheKey = `${spaceCode}:${device}`;
-        if (cache.current[cacheKey])
-            return cache.current[cacheKey];
+        const cached = cache.current[cacheKey];
+        if (cached && Date.now() - cached.ts < CACHE_TTL)
+            return cached.data;
         if (!visitorId)
             return null;
         try {
-            const url = `${baseUrl}/sdk/serve/${encodeURIComponent(config.companyId)}?spaces=${encodeURIComponent(spaceCode)}&device=${device}&visitor_id=${encodeURIComponent(visitorId)}`;
+            const url = `${baseUrl}/sdk/serve/${encodeURIComponent(config.companyId)}?spaces=${encodeURIComponent(spaceCode)}&device=${device}&visitor_id=${encodeURIComponent(visitorId)}&os=${Platform.OS}`;
             const res = await fetch(url, {
                 headers: { 'api-key': config.apiKey },
             });
@@ -81,7 +83,7 @@ export function MediaSuiteProvider({ config, children, }) {
             const json = await res.json();
             const space = json.data.spaces.find((s) => s.space_code === spaceCode) || null;
             if (space)
-                cache.current[cacheKey] = space;
+                cache.current[cacheKey] = { data: space, ts: Date.now() };
             return space;
         }
         catch {
@@ -96,7 +98,7 @@ export function MediaSuiteProvider({ config, children, }) {
             return;
         pendingImpressions.current = [];
         const pageUrl = encodeURIComponent(screenName || 'app://unknown');
-        const url = `${baseUrl}/sdk/impressions?company=${encodeURIComponent(config.companyId)}&placements=${ids.join(',')}&visitor_id=${encodeURIComponent(visitorId)}&device=${device}&page_url=${pageUrl}`;
+        const url = `${baseUrl}/sdk/impressions?company=${encodeURIComponent(config.companyId)}&placements=${ids.join(',')}&visitor_id=${encodeURIComponent(visitorId)}&device=${device}&page_url=${pageUrl}&os=${Platform.OS}`;
         fetch(url, { headers: { 'api-key': config.apiKey } }).catch(() => {
             if (retryCount < MAX_RETRIES && isMounted.current) {
                 ids.forEach((id) => sentImpressions.current.delete(id));
@@ -119,7 +121,7 @@ export function MediaSuiteProvider({ config, children, }) {
     }, [flushImpressions]);
     const getClickUrl = useCallback((placementId, screenName) => {
         const pageUrl = encodeURIComponent(screenName || 'app://unknown');
-        return `${baseUrl}/sdk/click/${encodeURIComponent(placementId)}?vid=${encodeURIComponent(visitorId)}&device=${device}&page_url=${pageUrl}`;
+        return `${baseUrl}/sdk/click/${encodeURIComponent(placementId)}?vid=${encodeURIComponent(visitorId)}&device=${device}&page_url=${pageUrl}&os=${Platform.OS}`;
     }, [baseUrl, visitorId, device]);
     // Render children always — ad components handle the "not ready" state
     return (_jsx(Ctx.Provider, { value: { config, visitorId, device, fetchSpace, trackImpression, getClickUrl }, children: children }));

package/dist/types.d.ts

@@ -9,6 +9,8 @@ export interface MediaSuiteConfig {
 export interface Ad {
     placement_id: string;
     image_url: string;
+    image_width?: number;
+    image_height?: number;
     alt_text?: string;
     click_url?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@media-suite/reactnative-sdk",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "MediaSuite Native SDK — React Native SDK for rendering and tracking ads in mobile apps. IAB/MRC viewability standards, impression/click tracking, and ad rotation.",
   "main": "dist/index.js",
   "module": "dist/index.js",