@adtogether/web-sdk 0.1.0 → 0.1.5

package/src/react/AdTogetherInterstitial.tsx

@@ -0,0 +1,328 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { AdTogether } from '../core/AdTogether';
+import { AdModel } from '../core/types';
+
+export interface AdTogetherInterstitialProps {
+  adUnitId: string;
+  /** When true, the interstitial is shown (fetches and displays full-screen ad) */
+  isOpen: boolean;
+  /** Called when the user closes the interstitial */
+  onClose: () => void;
+  /** Called when the ad is successfully loaded */
+  onAdLoaded?: () => void;
+  /** Called when the ad fails to load */
+  onAdFailedToLoad?: (error: Error) => void;
+  /** Pass 'dark' to use dark mode, 'light' for light mode, or 'auto' (default) to respect system preference */
+  theme?: 'dark' | 'light' | 'auto';
+  /** Delay in seconds before the close button appears. Defaults to 3 */
+  closeDelay?: number;
+}
+
+export const AdTogetherInterstitial: React.FC<AdTogetherInterstitialProps> = ({
+  adUnitId,
+  isOpen,
+  onClose,
+  onAdLoaded,
+  onAdFailedToLoad,
+  theme = 'auto',
+  closeDelay = 3,
+}) => {
+  const [adData, setAdData] = useState<AdModel | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(theme === 'dark');
+  const [canClose, setCanClose] = useState(false);
+  const [countdown, setCountdown] = useState(closeDelay);
+
+  const impressionTrackedRef = useRef(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Handle system theme changes
+  useEffect(() => {
+    if (theme === 'auto') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      setIsDarkMode(mediaQuery.matches);
+
+      const handler = (e: MediaQueryListEvent) => setIsDarkMode(e.matches);
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    } else {
+      setIsDarkMode(theme === 'dark');
+    }
+  }, [theme]);
+
+  // Fetch ad when opened
+  useEffect(() => {
+    if (!isOpen) {
+      // Reset state when closed
+      setAdData(null);
+      setIsLoading(false);
+      setHasError(false);
+      setCanClose(false);
+      setCountdown(closeDelay);
+      impressionTrackedRef.current = false;
+
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      if (countdownRef.current) clearInterval(countdownRef.current);
+      return;
+    }
+
+    let isMounted = true;
+    setIsLoading(true);
+
+    AdTogether.fetchAd(adUnitId, 'interstitial')
+      .then((ad) => {
+        if (isMounted) {
+          setAdData(ad);
+          setIsLoading(false);
+          onAdLoaded?.();
+        }
+      })
+      .catch((err) => {
+        if (isMounted) {
+          console.error('AdTogether Failed to load interstitial:', err);
+          setHasError(true);
+          setIsLoading(false);
+          onAdFailedToLoad?.(err);
+          onClose();
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [isOpen, adUnitId]);
+
+  // Close delay countdown
+  useEffect(() => {
+    if (!isOpen || !adData) return;
+
+    setCountdown(closeDelay);
+
+    countdownRef.current = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          if (countdownRef.current) clearInterval(countdownRef.current);
+          setCanClose(true);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => {
+      if (countdownRef.current) clearInterval(countdownRef.current);
+    };
+  }, [isOpen, adData, closeDelay]);
+
+  // Impression tracking
+  useEffect(() => {
+    if (!adData || !isOpen || impressionTrackedRef.current) return;
+    impressionTrackedRef.current = true;
+    AdTogether.trackImpression(adData.id, adData.token);
+  }, [adData, isOpen]);
+
+  const handleAdClick = useCallback(() => {
+    if (!adData) return;
+    AdTogether.trackClick(adData.id, adData.token);
+    if (adData.clickUrl) {
+      window.open(adData.clickUrl, '_blank', 'noopener,noreferrer');
+    }
+  }, [adData]);
+
+  const handleClose = useCallback(() => {
+    if (canClose) {
+      onClose();
+    }
+  }, [canClose, onClose]);
+
+  // Block body scroll when open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const bgOverlay = 'rgba(0, 0, 0, 0.7)';
+  const cardBg = isDarkMode ? '#1F2937' : '#ffffff';
+  const borderColor = isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
+  const textColor = isDarkMode ? '#F9FAFB' : '#111827';
+  const descColor = isDarkMode ? '#9CA3AF' : '#6B7280';
+
+  const content = (
+    <div
+      className="adtogether-interstitial-overlay"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        backgroundColor: bgOverlay,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 100000,
+        backdropFilter: 'blur(8px)',
+        animation: 'adtogether-fade-in 0.3s ease-out',
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget && canClose) handleClose();
+      }}
+    >
+      <style>{`
+        @keyframes adtogether-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes adtogether-scale-in {
+          from { opacity: 0; transform: scale(0.9); }
+          to { opacity: 1; transform: scale(1); }
+        }
+      `}</style>
+
+      {isLoading ? (
+        <div style={{ color: '#fff', fontSize: '18px' }}>Loading Ad...</div>
+      ) : adData ? (
+        <div
+          style={{
+            position: 'relative',
+            maxWidth: '800px',
+            width: '95%',
+            backgroundColor: cardBg,
+            borderRadius: '24px',
+            border: `1px solid ${borderColor}`,
+            overflow: 'hidden',
+            boxShadow: '0 25px 50px rgba(0, 0, 0, 0.5)',
+            animation: 'adtogether-scale-in 0.3s ease-out',
+          }}
+        >
+          {/* Close / Countdown Button */}
+          <div style={{ position: 'absolute', top: '12px', right: '12px', zIndex: 10 }}>
+            {canClose ? (
+              <button
+                onClick={handleClose}
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '50%',
+                  backgroundColor: 'rgba(0,0,0,0.6)',
+                  border: 'none',
+                  color: '#fff',
+                  fontSize: '18px',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backdropFilter: 'blur(4px)',
+                }}
+                aria-label="Close ad"
+              >
+                ✕
+              </button>
+            ) : (
+              <div
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '50%',
+                  backgroundColor: 'rgba(0,0,0,0.6)',
+                  color: '#fff',
+                  fontSize: '14px',
+                  fontWeight: 'bold',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backdropFilter: 'blur(4px)',
+                }}
+              >
+                {countdown}
+              </div>
+            )}
+          </div>
+
+          {/* Ad Image */}
+          {adData.imageUrl && (
+            <div
+              style={{ cursor: 'pointer', position: 'relative' }}
+              onClick={handleAdClick}
+            >
+              <img
+                src={adData.imageUrl}
+                alt={adData.title}
+                style={{
+                  width: '100%',
+                  aspectRatio: '16/9',
+                  objectFit: 'cover',
+                  display: 'block',
+                }}
+              />
+            </div>
+          )}
+
+          {/* Ad Content */}
+          <div
+            style={{ padding: '20px', cursor: 'pointer' }}
+            onClick={handleAdClick}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
+              <span style={{ fontWeight: 'bold', fontSize: '18px', color: textColor }}>
+                {adData.title}
+              </span>
+              <span
+                style={{
+                  backgroundColor: '#FBBF24',
+                  color: '#000',
+                  fontSize: '10px',
+                  fontWeight: 'bold',
+                  padding: '3px 6px',
+                  borderRadius: '4px',
+                  marginLeft: '8px',
+                  flexShrink: 0,
+                }}
+              >
+                AD
+              </span>
+            </div>
+            <p style={{ fontSize: '14px', color: descColor, margin: 0, lineHeight: 1.5 }}>
+              {adData.description}
+            </p>
+
+            {/* CTA Button */}
+            <button
+              style={{
+                marginTop: '16px',
+                width: '100%',
+                padding: '12px',
+                backgroundColor: '#F59E0B',
+                color: '#000',
+                fontWeight: 'bold',
+                fontSize: '14px',
+                border: 'none',
+                borderRadius: '12px',
+                cursor: 'pointer',
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleAdClick();
+              }}
+            >
+              Learn More →
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+
+  return createPortal(content, document.body);
+};

package/src/react/index.ts

@@ -1 +1,2 @@
 export * from './AdTogetherBanner';
+export * from './AdTogetherInterstitial';

package/dist/chunk-IDJUJZAL.mjs

@@ -1,57 +0,0 @@
-// src/core/AdTogether.ts
-var AdTogether = class _AdTogether {
-  constructor() {
-    this.baseUrl = "https://adtogether.com";
-  }
-  static get shared() {
-    if (!_AdTogether.instance) {
-      _AdTogether.instance = new _AdTogether();
-    }
-    return _AdTogether.instance;
-  }
-  static initialize(options) {
-    const sdk = _AdTogether.shared;
-    sdk.appId = options.appId;
-    if (options.baseUrl) {
-      sdk.baseUrl = options.baseUrl;
-    }
-    console.log(`AdTogether SDK Initialized with App ID: ${options.appId}`);
-  }
-  assertInitialized() {
-    if (!this.appId) {
-      console.error("AdTogether Error: SDK has not been initialized. Please call AdTogether.initialize() before displaying ads.");
-      return false;
-    }
-    return true;
-  }
-  static async fetchAd(adUnitId) {
-    if (!_AdTogether.shared.assertInitialized()) {
-      throw new Error("AdTogether not initialized");
-    }
-    const response = await fetch(`${_AdTogether.shared.baseUrl}/api/ads/serve?country=global&adUnitId=${adUnitId}`);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch ad. Status: ${response.status}`);
-    }
-    return response.json();
-  }
-  static trackImpression(adId) {
-    this.trackEvent("/api/ads/impression", adId);
-  }
-  static trackClick(adId) {
-    this.trackEvent("/api/ads/click", adId);
-  }
-  static trackEvent(endpoint, adId) {
-    if (!_AdTogether.shared.assertInitialized()) return;
-    fetch(`${_AdTogether.shared.baseUrl}${endpoint}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ adId })
-    }).catch(console.error);
-  }
-};
-
-export {
-  AdTogether
-};