@zezosoft/zezo-ott-react-native-video-player 1.0.0 → 1.0.2

package/src/AdsPlayer/AdsPlayer.tsx

@@ -0,0 +1,312 @@
+import {
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+  useCallback,
+  useMemo,
+} from 'react';
+import { View } from 'react-native';
+import globalStyles from '../VideoPlayer/styles/globalStyles';
+import Video, {
+  type OnBufferData,
+  type OnLoadStartData,
+  type OnProgressData,
+  type VideoRef,
+} from 'react-native-video';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+import { useAdsPlayerStore } from './store/adsPlayerStore';
+import type { VideoAd } from '../VideoPlayer/store/videoPlayer.type';
+import { AdMediaControlsProvider } from './MediaControls';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+import { toggleAdControls, showAdControls } from './utils/controls';
+import { resetAdState } from './utils/adStateReset';
+import { useAdTracking } from './utils/useAdTracking';
+
+export interface AdsPlayerProps {
+  onAdEnd: (ad: VideoAd) => void;
+  onAdSkip?: (ad: VideoAd) => void;
+  onAdError?: (error: Error, ad: VideoAd) => void;
+  onAdTracking?: ({
+    ad,
+    trackingUrl,
+    event,
+  }: {
+    ad: VideoAd;
+    trackingUrl: string;
+    event: string;
+  }) => void;
+  onClose?: () => void;
+  insets: EdgeInsets;
+}
+
+export interface AdsPlayerRef {
+  seek: (time: number) => void;
+  getCurrentTime: () => number;
+  getDuration: () => number;
+}
+
+const AdsPlayer = forwardRef<AdsPlayerRef, AdsPlayerProps>(
+  ({ onAdEnd, onAdSkip, onAdError, onAdTracking, onClose, insets }, ref) => {
+    const {
+      currentAd,
+      adDuration,
+      adCurrentTime,
+      isAdPaused,
+      isAdMuted,
+      isAdPlaying,
+      setIsAdPaused,
+      setAdCurrentTime,
+      setAdDuration,
+      setShowSkipButton,
+      setIsAdBuffering,
+    } = useAdsPlayerStore();
+    const adVideoRef = useRef<VideoRef>(null);
+    const trackedQuartilesRef = useRef({
+      firstQuartile: false,
+      midpoint: false,
+      thirdQuartile: false,
+    });
+    const trackedImpressionRef = useRef<string | null>(null);
+    const {
+      trackAdImpression,
+      trackAdStart,
+      trackAdComplete,
+      trackAdQuartile,
+    } = useAdTracking({ onAdTracking });
+
+    const trigger = useCallback(() => {
+      toggleAdControls();
+    }, []);
+
+    const tapGesture = useMemo(
+      () =>
+        Gesture.Tap()
+          .onEnd(() => {
+            runOnJS(trigger)();
+          })
+          .maxDuration(250),
+      [trigger]
+    );
+
+    useImperativeHandle(ref, () => ({
+      seek: (time: number) => {
+        adVideoRef.current?.seek(time);
+      },
+      getCurrentTime: () => adCurrentTime,
+      getDuration: () => adDuration,
+    }));
+
+    // Track impression only once per ad
+    useEffect(() => {
+      if (
+        currentAd &&
+        isAdPlaying &&
+        trackedImpressionRef.current !== currentAd.id
+      ) {
+        try {
+          trackedImpressionRef.current = currentAd.id;
+          trackAdImpression(currentAd);
+        } catch (error) {
+          console.error('Error in ad impression tracking:', error);
+        }
+      }
+    }, [currentAd, isAdPlaying, trackAdImpression]);
+
+    // Separate effect for ensuring ad is not paused
+    useEffect(() => {
+      if (currentAd && isAdPlaying) {
+        setIsAdPaused(false);
+        showAdControls();
+      }
+    }, [currentAd, isAdPlaying, setIsAdPaused]);
+
+    useEffect(() => {
+      if (currentAd?.skippable) {
+        if (currentAd.skipAfter > 0) {
+          const timer = setTimeout(() => {
+            setShowSkipButton(true);
+          }, currentAd.skipAfter * 1000);
+          return () => clearTimeout(timer);
+        }
+        setShowSkipButton(true);
+        return undefined;
+      }
+      setShowSkipButton(false);
+      return undefined;
+    }, [currentAd, setShowSkipButton]);
+
+    const handleAdProgress = (data: OnProgressData) => {
+      setAdCurrentTime(data.currentTime);
+      setAdDuration(data.seekableDuration || 0);
+
+      // Reset buffering state when progress updates (playback has resumed)
+      const { isAdBuffering } = useAdsPlayerStore.getState();
+      if (isAdBuffering) {
+        setIsAdBuffering(false);
+      }
+
+      if (currentAd && adDuration > 0) {
+        const progress = data.currentTime / adDuration;
+        if (progress >= 0.25 && !trackedQuartilesRef.current.firstQuartile) {
+          trackedQuartilesRef.current.firstQuartile = true;
+          trackAdQuartile(currentAd, 'firstQuartile');
+        }
+        if (progress >= 0.5 && !trackedQuartilesRef.current.midpoint) {
+          trackedQuartilesRef.current.midpoint = true;
+          trackAdQuartile(currentAd, 'midpoint');
+        }
+        if (progress >= 0.75 && !trackedQuartilesRef.current.thirdQuartile) {
+          trackedQuartilesRef.current.thirdQuartile = true;
+          trackAdQuartile(currentAd, 'thirdQuartile');
+        }
+      }
+    };
+
+    const handleAdLoadStart = (_: OnLoadStartData) => {
+      setIsAdBuffering(true);
+    };
+
+    const handleAdLoad = () => {
+      try {
+        setIsAdBuffering(false);
+        if (currentAd) {
+          setAdDuration(currentAd.duration);
+          trackAdStart(currentAd);
+        }
+      } catch (error) {
+        console.error('Error in handleAdLoad:', error);
+        if (currentAd && onAdError) {
+          onAdError(
+            error instanceof Error ? error : new Error('Ad load failed'),
+            currentAd
+          );
+        }
+      }
+    };
+
+    const handleAdEnd = () => {
+      if (!currentAd) return;
+
+      try {
+        trackAdComplete(currentAd);
+        resetAdState();
+        trackedQuartilesRef.current = {
+          firstQuartile: false,
+          midpoint: false,
+          thirdQuartile: false,
+        };
+        // Reset impression tracking for next ad
+        trackedImpressionRef.current = null;
+        onAdEnd(currentAd);
+      } catch (error) {
+        console.error('Error in handleAdEnd:', error);
+        resetAdState();
+        trackedImpressionRef.current = null;
+        onAdEnd(currentAd);
+      }
+    };
+
+    const handleAdError = (error: {
+      error: {
+        code?: string;
+        localizedDescription?: string;
+        errorString?: string;
+      };
+    }) => {
+      if (!currentAd) return;
+
+      try {
+        const errorMessage =
+          error.error?.localizedDescription ||
+          error.error?.errorString ||
+          'Ad playback failed';
+        console.error('Ad playback error:', errorMessage, error);
+
+        resetAdState();
+        // Reset impression tracking on error
+        trackedImpressionRef.current = null;
+
+        if (onAdError) {
+          onAdError(new Error(errorMessage), currentAd);
+        } else {
+          // Fallback: treat error as ad end
+          onAdEnd(currentAd);
+        }
+      } catch (err) {
+        console.error('Error in handleAdError:', err);
+        resetAdState();
+        trackedImpressionRef.current = null;
+        if (currentAd && onAdEnd) {
+          onAdEnd(currentAd);
+        }
+      }
+    };
+
+    // Memoize video style for performance
+    const videoStyle = useMemo(
+      () => [
+        globalStyles.absoluteFill,
+        {
+          transform: [{ scaleX: 1.24 }, { scaleY: 1.15 }],
+        },
+      ],
+      []
+    );
+
+    // Memoize container style
+    const containerStyle = useMemo(
+      () => [globalStyles.absoluteFill, { backgroundColor: '#000' }],
+      []
+    );
+
+    if (!currentAd || !isAdPlaying) {
+      return null;
+    }
+
+    return (
+      <GestureDetector gesture={tapGesture}>
+        <View style={containerStyle} collapsable={false}>
+          <AdMediaControlsProvider
+            onAdSkip={onAdSkip}
+            onAdTracking={onAdTracking}
+            onClose={onClose}
+            insets={insets}
+          >
+            <Video
+              ref={adVideoRef}
+              source={{ uri: currentAd.source }}
+              paused={isAdPaused}
+              muted={isAdMuted}
+              onProgress={handleAdProgress}
+              onLoad={handleAdLoad}
+              onEnd={handleAdEnd}
+              onError={handleAdError}
+              onBuffer={({ isBuffering }: OnBufferData) => {
+                if (isBuffering) {
+                  setIsAdBuffering(true);
+                } else {
+                  setTimeout(() => setIsAdBuffering(false), 150);
+                }
+              }}
+              onLoadStart={handleAdLoadStart}
+              resizeMode="contain"
+              style={videoStyle}
+              controls={false}
+              playInBackground={false}
+              playWhenInactive={false}
+              pointerEvents="box-none"
+              ignoreSilentSwitch="ignore"
+              progressUpdateInterval={250}
+            />
+          </AdMediaControlsProvider>
+        </View>
+      </GestureDetector>
+    );
+  }
+);
+
+AdsPlayer.displayName = 'AdsPlayer';
+
+export default AdsPlayer;

package/src/AdsPlayer/MediaControls/AdBottomControls.tsx

@@ -0,0 +1,189 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import {
+  Animated,
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+import { scale, moderateScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { ExternalLink } from 'lucide-react-native';
+import { useAdsPlayerStore } from '../store/adsPlayerStore';
+import { useAdControls } from './AdMediaControlsProvider';
+import { useAdControlsAutoHide } from '../utils/useAdControlsAutoHide';
+import ProgressBar from '../../VideoPlayer/components/ProgressBar';
+import { handleAdClickThrough } from '../utils/controls';
+import { resetAdState } from '../utils/adStateReset';
+import { useAdTracking } from '../utils/useAdTracking';
+
+const AdBottomControls: React.FC = () => {
+  const currentAd = useAdsPlayerStore((state) => state.currentAd);
+  const adCurrentTime = useAdsPlayerStore((state) => state.adCurrentTime);
+  const adDuration = useAdsPlayerStore((state) => state.adDuration);
+  const { onAdSkip, onAdTracking } = useAdControls();
+  const fadeAnim = useAdControlsAutoHide();
+  const { trackAdSkip, trackAdClick } = useAdTracking({ onAdTracking });
+
+  const shouldShowSkipButton = useMemo(
+    () =>
+      currentAd?.skippable &&
+      currentAd.skipAfter > 0 &&
+      adCurrentTime >= currentAd.skipAfter,
+    [currentAd?.skippable, currentAd?.skipAfter, adCurrentTime]
+  );
+
+  // Memoize animated style
+  const animatedOpacityStyle = useMemo(
+    () => ({ opacity: fadeAnim }),
+    [fadeAnim]
+  );
+
+  const handleSkip = useCallback(() => {
+    if (!currentAd) return;
+
+    trackAdSkip(currentAd);
+    onAdSkip?.(currentAd);
+    resetAdState();
+  }, [currentAd, onAdSkip, trackAdSkip]);
+
+  const handleClickThrough = useCallback(() => {
+    if (currentAd) {
+      trackAdClick(currentAd);
+      handleAdClickThrough(currentAd, onAdTracking);
+    }
+  }, [currentAd, onAdTracking, trackAdClick]);
+
+  if (!currentAd) {
+    return null;
+  }
+
+  return (
+    <View style={bottomControlsStyles.container}>
+      {/* Ad Metadata */}
+      {currentAd.clickThroughUrl && (
+        <Animated.View style={animatedOpacityStyle} pointerEvents="box-none">
+          <View pointerEvents="auto">
+            <TouchableOpacity
+              style={bottomControlsStyles.metadataContainer}
+              onPress={handleClickThrough}
+              activeOpacity={0.7}
+            >
+              <View style={bottomControlsStyles.metadataContent}>
+                <View style={bottomControlsStyles.metadataTextContainer}>
+                  {currentAd.title && (
+                    <Text
+                      style={bottomControlsStyles.metadataTitle}
+                      numberOfLines={1}
+                      ellipsizeMode="tail"
+                    >
+                      {currentAd.title}
+                    </Text>
+                  )}
+                  {currentAd.description && (
+                    <Text
+                      style={bottomControlsStyles.metadataDesc}
+                      numberOfLines={2}
+                      ellipsizeMode="tail"
+                    >
+                      {currentAd.description}
+                    </Text>
+                  )}
+                </View>
+                <View style={bottomControlsStyles.clickIndicator}>
+                  <ExternalLink size={scale(14)} color="#fff" />
+                </View>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </Animated.View>
+      )}
+
+      <Animated.View style={animatedOpacityStyle}>
+        <ProgressBar
+          duration={adDuration}
+          currentTime={adCurrentTime}
+          bufferedTime={adDuration}
+          disabled={true}
+          height={moderateScale(3)}
+        />
+      </Animated.View>
+      {shouldShowSkipButton && (
+        <View pointerEvents="auto">
+          <TouchableOpacity
+            onPress={handleSkip}
+            style={bottomControlsStyles.skipButton}
+            activeOpacity={0.7}
+          >
+            <Text style={bottomControlsStyles.skipButtonText}>Skip Ad</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const bottomControlsStyles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    bottom: 0,
+    zIndex: 1,
+  },
+  metadataContainer: {
+    backgroundColor: 'rgba(21, 21, 21, 0.95)',
+    borderRadius: moderateScale(6),
+    overflow: 'hidden',
+    marginBottom: moderateScale(5),
+    maxWidth: moderateScale(200),
+    borderWidth: 1,
+    borderColor: 'rgba(174, 174, 174, 0.12)',
+  },
+  metadataContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: moderateScale(5),
+  },
+  metadataTextContainer: {
+    flex: 1,
+    marginRight: moderateScale(4),
+    minWidth: 0,
+  },
+  metadataTitle: {
+    color: '#FFFFFF',
+    fontSize: RFValue(10),
+    fontWeight: '400',
+    marginBottom: moderateScale(0.5),
+    letterSpacing: 0.1,
+  },
+  metadataDesc: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontSize: RFValue(9),
+    lineHeight: RFValue(12),
+  },
+  clickIndicator: {
+    width: moderateScale(20),
+    height: moderateScale(20),
+    borderRadius: moderateScale(10),
+    backgroundColor: 'rgba(255, 255, 255, 0.20)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  skipButton: {
+    position: 'absolute',
+    right: moderateScale(2),
+    bottom: moderateScale(25),
+    backgroundColor: 'rgba(21, 21, 21, 0.95)',
+    paddingHorizontal: moderateScale(15),
+    paddingVertical: moderateScale(7),
+    borderRadius: moderateScale(14),
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.20)',
+  },
+  skipButtonText: {
+    color: '#fff',
+    fontSize: RFValue(12),
+    fontWeight: '600',
+  },
+});
+
+export default memo(AdBottomControls);

package/src/AdsPlayer/MediaControls/AdMediaControls.tsx

@@ -0,0 +1,98 @@
+import { memo, useMemo } from 'react';
+import { Animated, StyleSheet, View, type ViewStyle } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { moderateScale } from 'react-native-size-matters';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+import { useAdControlsAutoHide } from '../utils/useAdControlsAutoHide';
+import AdTopControls from './AdTopControls';
+import AdMiddleControls from './AdMiddleControls';
+import AdBottomControls from './AdBottomControls';
+import globalStyles from '../../VideoPlayer/styles/globalStyles';
+
+interface AdMediaControlsProps {
+  onClose?: () => void;
+  insets: EdgeInsets;
+}
+
+const AdMediaControls: React.FC<AdMediaControlsProps> = ({
+  onClose,
+  insets,
+}) => {
+  const { top, bottom, left, right } = insets;
+  const fadeAnim = useAdControlsAutoHide();
+
+  // Memoize container style to avoid recalculation
+  const containerStyle: ViewStyle = useMemo(
+    () => ({
+      ...styles.container,
+      paddingTop: top,
+      paddingBottom: bottom - moderateScale(5),
+      paddingLeft: left + moderateScale(15),
+      paddingRight: right + moderateScale(15),
+    }),
+    [top, bottom, left, right]
+  );
+
+  // Memoize gradient overlay styles
+  const topGradientStyle = useMemo(
+    () => [styles.topGradientOverlay, { opacity: fadeAnim, top: -top }],
+    [fadeAnim, top]
+  );
+
+  const bottomGradientStyle = useMemo(
+    () => [
+      styles.bottomGradientOverlay,
+      { opacity: fadeAnim, bottom: -(bottom - moderateScale(5)) },
+    ],
+    [fadeAnim, bottom]
+  );
+
+  return (
+    <>
+      <Animated.View style={topGradientStyle} pointerEvents="none">
+        <LinearGradient
+          colors={['rgba(0, 0, 0, 0.4)', 'transparent', 'transparent']}
+          locations={[0, 0.4, 1]}
+          style={globalStyles.absoluteFill}
+          pointerEvents="none"
+        />
+      </Animated.View>
+      <View style={containerStyle}>
+        <AdTopControls onClose={onClose} />
+        <AdMiddleControls />
+        <AdBottomControls />
+      </View>
+      <Animated.View style={bottomGradientStyle} pointerEvents="none">
+        <LinearGradient
+          colors={['transparent', 'transparent', 'rgba(0, 0, 0, 0.5)']}
+          locations={[0, 0.4, 1]}
+          style={globalStyles.absoluteFill}
+          pointerEvents="none"
+        />
+      </Animated.View>
+    </>
+  );
+};
+
+export default memo(AdMediaControls);
+
+const styles = StyleSheet.create({
+  container: {
+    ...globalStyles.absoluteFill,
+    justifyContent: 'space-between',
+  },
+  topGradientOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: moderateScale(150),
+    zIndex: 0,
+  },
+  bottomGradientOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: moderateScale(150),
+    zIndex: 0,
+  },
+});

package/src/AdsPlayer/MediaControls/AdMediaControlsProvider.tsx

@@ -0,0 +1,62 @@
+import React, { createContext, useContext } from 'react';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+
+import { useAdsPlayerStore } from '../store/adsPlayerStore';
+import type { VideoAd } from '../../VideoPlayer/store/videoPlayer.type';
+import AdMediaControls from './AdMediaControls';
+
+interface AdControlsContextType {
+  onAdSkip?: (ad: VideoAd) => void;
+  onAdTracking?: ({
+    ad,
+    trackingUrl,
+    event,
+  }: {
+    ad: VideoAd;
+    trackingUrl: string;
+    event: string;
+  }) => void;
+}
+
+const AdControlsContext = createContext<AdControlsContextType>({});
+
+export const useAdControls = () => useContext(AdControlsContext);
+
+interface AdMediaControlsProviderProps {
+  children: React.ReactNode;
+  onAdSkip?: (ad: VideoAd) => void;
+  onAdTracking?: ({
+    ad,
+    trackingUrl,
+    event,
+  }: {
+    ad: VideoAd;
+    trackingUrl: string;
+    event: string;
+  }) => void;
+  onClose?: () => void;
+  insets: EdgeInsets;
+}
+
+const AdMediaControlsProvider: React.FC<AdMediaControlsProviderProps> = ({
+  children,
+  onAdSkip,
+  onAdTracking,
+  onClose,
+  insets,
+}) => {
+  const isAdPlaying = useAdsPlayerStore((state) => state.isAdPlaying);
+
+  if (!isAdPlaying) {
+    return <>{children}</>;
+  }
+
+  return (
+    <AdControlsContext.Provider value={{ onAdSkip, onAdTracking }}>
+      {children}
+      <AdMediaControls onClose={onClose} insets={insets} />
+    </AdControlsContext.Provider>
+  );
+};
+
+export default AdMediaControlsProvider;