@zezosoft/zezo-ott-react-native-video-player 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zezosoft/zezo-ott-react-native-video-player",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Production-ready React Native OTT video player library for Android & iOS. Features: playlists, seasons, auto-next playback, subtitles (SRT/VTT), custom theming, analytics tracking, fullscreen mode, gesture controls, ads player (pre-roll/mid-roll/post-roll), TypeScript support, and centralized state management. Perfect for streaming apps, video platforms, and OTT services.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -19,7 +19,6 @@
     "ios",
     "lib",
     "react-native.config.js",
-    "src",
     "!android/build",
     "!android/gradle",
     "!android/gradlew",

package/src/AdsPlayer/AdsPlayer.tsx

@@ -1,311 +0,0 @@
-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 (no scale to avoid layout overflow)
-    const videoStyle = useMemo(() => globalStyles.absoluteFill, []);
-
-    // Memoize container style — overflow hidden to prevent layout glitches
-    const containerStyle = useMemo(
-      () => [
-        globalStyles.absoluteFill,
-        { backgroundColor: '#000', overflow: 'hidden' as const },
-      ],
-      []
-    );
-
-    if (!currentAd || !isAdPlaying) {
-      return null;
-    }
-
-    return (
-      <GestureDetector gesture={tapGesture}>
-        <View
-          style={containerStyle}
-          collapsable={false}
-          pointerEvents="box-none"
-        >
-          <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="cover"
-              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

@@ -1,191 +0,0 @@
-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',
-    width: '100%',
-    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(32),
-    backgroundColor: 'rgba(21, 21, 21, 0.95)',
-    paddingHorizontal: moderateScale(15),
-    paddingVertical: moderateScale(7),
-    borderRadius: moderateScale(14),
-    zIndex: 10,
-    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

@@ -1,104 +0,0 @@
-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 HORIZONTAL_PADDING = moderateScale(12);
-const BOTTOM_PADDING_EXTRA = moderateScale(8);
-const MIN_TOP_PADDING = moderateScale(10);
-
-const AdMediaControls: React.FC<AdMediaControlsProps> = ({
-  onClose,
-  insets,
-}) => {
-  const { top, bottom, left, right } = insets;
-  const fadeAnim = useAdControlsAutoHide();
-
-  // Safe-area aware padding: never negative, consistent touch targets
-  const containerStyle: ViewStyle = useMemo(
-    () => ({
-      ...styles.container,
-      paddingTop: top - MIN_TOP_PADDING,
-      paddingBottom: bottom + BOTTOM_PADDING_EXTRA,
-      paddingLeft: left + HORIZONTAL_PADDING,
-      paddingRight: right + HORIZONTAL_PADDING,
-    }),
-    [top, bottom, left, right]
-  );
-
-  // Memoize gradient overlay styles — consistent positioning, no negative glitches
-  const topGradientStyle = useMemo(
-    () => [styles.topGradientOverlay, { opacity: fadeAnim, top: -top }],
-    [fadeAnim, top]
-  );
-
-  const bottomGradientStyle = useMemo(
-    () => [
-      styles.bottomGradientOverlay,
-      { opacity: fadeAnim, bottom: -bottom },
-    ],
-    [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,
-    width: '100%',
-    height: moderateScale(150),
-    zIndex: 0,
-  },
-  bottomGradientOverlay: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    width: '100%',
-    height: moderateScale(150),
-    zIndex: 0,
-  },
-});

package/src/AdsPlayer/MediaControls/AdMediaControlsProvider.tsx

@@ -1,62 +0,0 @@
-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;