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

package/src/AdsPlayer/utils/useAdTracking.ts

@@ -1,89 +0,0 @@
-import { useCallback } from 'react';
-import type { VideoAd } from '../../VideoPlayer/store/videoPlayer.type';
-
-interface UseAdTrackingParams {
-  onAdTracking?: ({
-    ad,
-    trackingUrl,
-    event,
-  }: {
-    ad: VideoAd;
-    trackingUrl: string;
-    event: string;
-  }) => void;
-}
-
-/**
- * Reusable hook for ad tracking
- * Consolidates ad tracking logic across components
- */
-export const useAdTracking = ({ onAdTracking }: UseAdTrackingParams = {}) => {
-  const trackAdEvent = useCallback(
-    (ad: VideoAd, event: string, trackingUrl?: string) => {
-      if (!onAdTracking) return;
-
-      const url =
-        trackingUrl || ad.tracking?.[event as keyof typeof ad.tracking];
-      if (url) {
-        onAdTracking({
-          ad,
-          trackingUrl: url,
-          event,
-        });
-      }
-    },
-    [onAdTracking]
-  );
-
-  const trackAdImpression = useCallback(
-    (ad: VideoAd) => {
-      trackAdEvent(ad, 'impression', ad.tracking?.impression);
-    },
-    [trackAdEvent]
-  );
-
-  const trackAdStart = useCallback(
-    (ad: VideoAd) => {
-      trackAdEvent(ad, 'start', ad.tracking?.start);
-    },
-    [trackAdEvent]
-  );
-
-  const trackAdComplete = useCallback(
-    (ad: VideoAd) => {
-      trackAdEvent(ad, 'complete', ad.tracking?.complete);
-    },
-    [trackAdEvent]
-  );
-
-  const trackAdSkip = useCallback(
-    (ad: VideoAd) => {
-      trackAdEvent(ad, 'skip', ad.tracking?.skip);
-    },
-    [trackAdEvent]
-  );
-
-  const trackAdQuartile = useCallback(
-    (ad: VideoAd, quartile: 'firstQuartile' | 'midpoint' | 'thirdQuartile') => {
-      trackAdEvent(ad, quartile, ad.tracking?.[quartile]);
-    },
-    [trackAdEvent]
-  );
-
-  const trackAdClick = useCallback(
-    (ad: VideoAd) => {
-      trackAdEvent(ad, 'click', ad.tracking?.click);
-    },
-    [trackAdEvent]
-  );
-
-  return {
-    trackAdEvent,
-    trackAdImpression,
-    trackAdStart,
-    trackAdComplete,
-    trackAdSkip,
-    trackAdQuartile,
-    trackAdClick,
-  };
-};

package/src/AdsPlayer/utils/useAdsManager.ts

@@ -1,215 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useVideoPlayerStore } from '../../VideoPlayer/store/videoPlayerStore';
-import { useAdsPlayerStore } from '../store/adsPlayerStore';
-import type { VideoAd } from '../../VideoPlayer/store/videoPlayer.type';
-import { useAdInitialization } from './useAdInitialization';
-
-export const useAdsManager = (
-  ads: VideoAd[] = [],
-  onAdTracking?: ({
-    ad,
-    trackingUrl,
-    event,
-  }: {
-    ad: VideoAd;
-    trackingUrl: string;
-    event: string;
-  }) => void
-) => {
-  const { currentTime, activeTrack } = useVideoPlayerStore();
-
-  const {
-    currentAd,
-    isAdPlaying,
-    pendingMidRollAds,
-    addPendingMidRollAd,
-    clearPendingMidRollAds,
-  } = useAdsPlayerStore();
-
-  const { startAd } = useAdInitialization({ onAdTracking });
-
-  const adsInitializedRef = useRef(false);
-  const previousAdsRef = useRef<string>('');
-  const playedMidRollAdsRef = useRef<Set<string>>(new Set());
-  const playedPreRollAdsRef = useRef<Set<string>>(new Set());
-  const playedPostRollAdsRef = useRef<Set<string>>(new Set());
-  const previousTimeRef = useRef<number>(0);
-  const isResettingRef = useRef(false);
-
-  useEffect(() => {
-    // Prevent infinite loops
-    if (isResettingRef.current) {
-      return;
-    }
-
-    const adsKey = JSON.stringify(ads?.map((ad) => ad.id) || []);
-    const hadAds = previousAdsRef.current !== '';
-    const hasAds = ads && ads.length > 0;
-
-    if (hasAds && adsKey !== previousAdsRef.current) {
-      previousAdsRef.current = adsKey;
-
-      // Don't initialize ads if it's a trailer
-      if (activeTrack?.isTrailer) {
-        return;
-      }
-
-      const preRollAds = ads.filter((ad) => ad.position === 'pre');
-      const midRollAds = ads.filter((ad) => ad.position === 'mid');
-
-      if (preRollAds.length > 0 && preRollAds[0] && !currentAd) {
-        try {
-          playedPreRollAdsRef.current.add(preRollAds[0].id);
-          startAd(preRollAds[0], { trackImpression: false }); // Impression tracked in AdsPlayer
-        } catch (error) {
-          console.error('Error starting pre-roll ad:', error);
-        }
-      }
-
-      if (!adsInitializedRef.current) {
-        midRollAds.forEach((ad) => {
-          if (ad.time !== undefined) {
-            addPendingMidRollAd(ad);
-          }
-        });
-        adsInitializedRef.current = true;
-      }
-    } else if (!hasAds && hadAds) {
-      // Only reset when ads change from non-empty to empty
-      isResettingRef.current = true;
-
-      // Clear all ad state when ads array becomes empty
-      adsInitializedRef.current = false;
-      previousAdsRef.current = '';
-      clearPendingMidRollAds();
-
-      // Reset played ads tracking
-      playedMidRollAdsRef.current.clear();
-      playedPreRollAdsRef.current.clear();
-      playedPostRollAdsRef.current.clear();
-
-      // If an ad is currently playing, stop it
-      const {
-        isAdPlaying: currentIsAdPlaying,
-        currentAd: currentAdState,
-        resetAdsStore,
-      } = useAdsPlayerStore.getState();
-      if (currentIsAdPlaying || currentAdState) {
-        resetAdsStore();
-      }
-
-      // Reset the flag after a short delay to allow state to settle
-      setTimeout(() => {
-        isResettingRef.current = false;
-      }, 0);
-    } else if (!hasAds) {
-      // If ads are empty and were already empty, just update the ref
-      previousAdsRef.current = '';
-    }
-  }, [
-    ads,
-    currentAd,
-    addPendingMidRollAd,
-    clearPendingMidRollAds,
-    startAd,
-    activeTrack?.isTrailer,
-  ]);
-
-  useEffect(() => {
-    // Don't trigger mid-roll ads if it's a trailer
-    if (activeTrack?.isTrailer) {
-      return;
-    }
-
-    if (
-      !isAdPlaying &&
-      pendingMidRollAds.length > 0 &&
-      currentTime > 0 &&
-      !currentAd
-    ) {
-      const previousTime = previousTimeRef.current;
-      const timeDifference = Math.abs(currentTime - previousTime);
-      const isSeeking = timeDifference > 2; // If time jumps more than 2 seconds, it's a seek
-
-      // Check for ads that should be triggered
-      let nextMidRollAd = pendingMidRollAds.find(
-        (ad) =>
-          ad.time &&
-          !playedMidRollAdsRef.current.has(ad.id) &&
-          currentTime >= ad.time - 1 &&
-          currentTime <= ad.time + 1
-      );
-
-      // If seeking, check if we skipped past any ads
-      if (!nextMidRollAd && isSeeking && previousTime < currentTime) {
-        const skippedAd = pendingMidRollAds.find(
-          (ad) =>
-            ad.time &&
-            !playedMidRollAdsRef.current.has(ad.id) &&
-            ad.time > previousTime &&
-            ad.time <= currentTime
-        );
-        if (skippedAd) {
-          nextMidRollAd = skippedAd;
-        }
-      }
-
-      if (nextMidRollAd) {
-        try {
-          playedMidRollAdsRef.current.add(nextMidRollAd.id);
-          const timeBeforeAd = isSeeking
-            ? nextMidRollAd.time || currentTime
-            : currentTime;
-          startAd(nextMidRollAd, {
-            resumeTime: timeBeforeAd,
-            trackImpression: false, // Impression tracked in AdsPlayer
-          });
-          const remainingAds = pendingMidRollAds.filter(
-            (ad) => ad.id !== nextMidRollAd.id
-          );
-          clearPendingMidRollAds();
-          remainingAds.forEach((ad) => addPendingMidRollAd(ad));
-        } catch (error) {
-          console.error('Error starting mid-roll ad:', error);
-        }
-      }
-
-      // Update previous time
-      previousTimeRef.current = currentTime;
-    } else if (currentTime > 0) {
-      // Update previous time even if conditions aren't met
-      previousTimeRef.current = currentTime;
-    }
-  }, [
-    currentTime,
-    isAdPlaying,
-    pendingMidRollAds,
-    currentAd,
-    ads,
-    addPendingMidRollAd,
-    clearPendingMidRollAds,
-    startAd,
-    activeTrack?.isTrailer,
-  ]);
-
-  return {
-    checkPostRollAds: () => {
-      try {
-        // Don't show post-roll ads if it's a trailer
-        if (activeTrack?.isTrailer) {
-          return false;
-        }
-        const postRollAds = ads.filter((ad) => ad.position === 'post');
-        if (postRollAds.length > 0 && postRollAds[0]) {
-          playedPostRollAdsRef.current.add(postRollAds[0].id);
-          startAd(postRollAds[0], { trackImpression: false }); // Impression tracked in AdsPlayer
-          return true;
-        }
-        return false;
-      } catch (error) {
-        console.error('Error checking post-roll ads:', error);
-        return false;
-      }
-    },
-  };
-};

package/src/VideoPlayer/MediaControls/BottomControls.tsx

@@ -1,210 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  type GestureResponderEvent,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-import {
-  Settings as SettingsIcon,
-  SlidersHorizontal as SpeedIcon,
-  Subtitles as SubtitlesIcon,
-  ListChecks as EpisodesIcon,
-} from 'lucide-react-native';
-
-import { useVideoPlayerStore } from '../store/videoPlayerStore';
-import { useAdsPlayerStore } from '../../AdsPlayer/store/adsPlayerStore';
-import { videoRef } from '../utils';
-import type { SettingsAction } from '../store/videoPlayer.type';
-import { formatTime } from '../utils';
-import ProgressBar from '../components/ProgressBar';
-import { useVideoPlayerConfig } from '../context';
-
-type ControlButtonProps = {
-  onPress: (event: GestureResponderEvent) => void;
-  icon: React.ReactNode;
-  label: string;
-  accessibilityLabel?: string;
-  buttonStyle?: ViewStyle;
-  labelStyle?: TextStyle;
-  colors: {
-    text: string;
-  };
-};
-
-const ControlButton: React.FC<ControlButtonProps> = ({
-  onPress,
-  icon,
-  label,
-  accessibilityLabel,
-  buttonStyle,
-  labelStyle,
-  colors,
-}) => (
-  <TouchableOpacity
-    onPress={onPress}
-    style={[styles.button, buttonStyle]}
-    activeOpacity={0.8}
-    accessibilityLabel={accessibilityLabel ?? label}
-  >
-    {icon}
-    <Text style={[styles.buttonText, labelStyle, { color: colors.text }]}>
-      {label}
-    </Text>
-  </TouchableOpacity>
-);
-
-const BottomControls = () => {
-  const {
-    duration,
-    currentTime,
-    activeTrack,
-    playableDuration,
-    setSettingsModal,
-    setIsPaused,
-    setControlsVisible,
-    playBackRateLabel,
-  } = useVideoPlayerStore();
-
-  const { pendingMidRollAds } = useAdsPlayerStore();
-  const { colors } = useVideoPlayerConfig();
-  const getRemainingTime = useCallback(
-    (totalDuration: number, currentPos: number) => {
-      const remainingTime = totalDuration - currentPos;
-      return formatTime(Math.max(remainingTime, 0));
-    },
-    []
-  );
-
-  const onSeek = (value: number) => {
-    videoRef.current?.seek(value);
-  };
-
-  const onOpenSettings = (type: SettingsAction) => {
-    setSettingsModal({ action: type, isVisible: true });
-    setIsPaused(true);
-    setControlsVisible(false);
-  };
-
-  // Memoize ad markers to avoid recalculation on every render
-  const adMarkers = useMemo(
-    () =>
-      pendingMidRollAds
-        .filter((ad) => ad.time !== undefined && ad.time > 0)
-        .map((ad) => ad.time as number)
-        .sort((a, b) => a - b),
-    [pendingMidRollAds]
-  );
-
-  // Memoize time text style
-  const timeTextStyle = useMemo(
-    () => [styles.timeText, { color: colors.text }],
-    [colors.text]
-  );
-
-  return (
-    <View style={styles.root}>
-      {/* Progress Bar Section */}
-      <View style={styles.sliderContainer}>
-        <View style={styles.sliderWrapper}>
-          <ProgressBar
-            duration={duration}
-            currentTime={currentTime}
-            bufferedTime={playableDuration}
-            onSeek={onSeek}
-            adMarkers={adMarkers}
-          />
-        </View>
-        <Text style={timeTextStyle} numberOfLines={1}>
-          {getRemainingTime(duration, currentTime)}
-        </Text>
-      </View>
-
-      {/* Action Buttons */}
-      <View style={styles.buttonsContainer}>
-        <ControlButton
-          onPress={() => onOpenSettings('speed')}
-          icon={<SpeedIcon size={moderateScale(18)} color={colors.text} />}
-          label={
-            playBackRateLabel && playBackRateLabel !== 'Normal'
-              ? `Speed (${playBackRateLabel})`
-              : 'Speed'
-          }
-          colors={colors}
-        />
-        <ControlButton
-          onPress={() => onOpenSettings('audioOrSubtitle')}
-          icon={<SubtitlesIcon size={moderateScale(19)} color={colors.text} />}
-          label="Audio & Subtitles"
-          colors={colors}
-        />
-        <ControlButton
-          onPress={() => onOpenSettings('settings')}
-          icon={<SettingsIcon size={moderateScale(18)} color={colors.text} />}
-          label="Settings"
-          colors={colors}
-        />
-        {!activeTrack?.isTrailer && activeTrack?.type === 'series' && (
-          <ControlButton
-            onPress={() => onOpenSettings('episodes')}
-            icon={<EpisodesIcon size={moderateScale(17)} color={colors.text} />}
-            label="Episodes"
-            colors={colors}
-          />
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default BottomControls;
-
-const styles = StyleSheet.create({
-  root: {
-    paddingTop: verticalScale(8),
-    paddingBottom: verticalScale(4),
-  },
-  sliderContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: scale(12),
-    marginBottom: verticalScale(4),
-  },
-  sliderWrapper: {
-    flex: 1,
-    minWidth: 0,
-  },
-  timeText: {
-    minWidth: scale(52),
-    maxWidth: scale(56),
-    textAlign: 'right',
-    marginLeft: scale(6),
-    fontSize: RFValue(12),
-    fontWeight: '500',
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignContent: 'center',
-    paddingHorizontal: scale(10),
-    gap: scale(4),
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: scale(12),
-    paddingVertical: verticalScale(6),
-    borderRadius: moderateScale(8),
-  },
-  buttonText: {
-    fontSize: RFValue(13),
-    marginLeft: scale(6),
-  },
-});

package/src/VideoPlayer/MediaControls/MediaControls.tsx

@@ -1,30 +0,0 @@
-import { memo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import TopControls from './TopControls';
-import MiddleControls from './MiddleControls';
-import BottomControls from './BottomControls';
-
-export type MediaControlsProps = {
-  onClose?: () => void;
-};
-
-const MediaControls: React.FC<MediaControlsProps> = ({ onClose }) => {
-  return (
-    <View style={styles.container}>
-      <TopControls onClose={onClose} />
-      <MiddleControls />
-      <BottomControls />
-    </View>
-  );
-};
-
-export default memo(MediaControls);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    minHeight: 0,
-  },
-});

package/src/VideoPlayer/MediaControls/MediaControlsProvider.tsx

@@ -1,104 +0,0 @@
-import React, { useEffect, useRef, useMemo } from 'react';
-import { TouchableOpacity, View, type ViewStyle, Animated } from 'react-native';
-import { type EdgeInsets } from 'react-native-safe-area-context';
-import { moderateScale } from 'react-native-size-matters';
-import MediaControls, { type MediaControlsProps } from './MediaControls';
-import SettingModal from '../Settings/SettingModal';
-import { useVideoPlayerStore } from '../store/videoPlayerStore';
-import SkipAndNextControls from '../components/SkipAndNextControls';
-import type { MediaEpisode } from '../store/videoPlayer.type';
-import globalStyles from '../styles/globalStyles';
-import type { ExtendedWatchProgress } from '../utils';
-import SubtitleView from '../components/SubtitleView';
-
-const HORIZONTAL_PADDING = moderateScale(12);
-const BOTTOM_PADDING_EXTRA = moderateScale(8);
-const MIN_TOP_PADDING = moderateScale(10);
-
-interface MediaControlsProviderProps extends MediaControlsProps {
-  children: React.ReactNode;
-  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
-  reportProgress: (event: ExtendedWatchProgress['event']) => void;
-  insets: EdgeInsets;
-}
-
-const MediaControlsProvider: React.FC<MediaControlsProviderProps> = ({
-  children,
-  onClose,
-  onPressEpisode,
-  reportProgress,
-  insets,
-}) => {
-  const { top, bottom, left, right } = insets;
-  const controlsVisible = useVideoPlayerStore((state) => state.controlsVisible);
-  const setControlsVisible = useVideoPlayerStore(
-    (state) => state.setControlsVisible
-  );
-  const controlsTimer = useVideoPlayerStore((state) => state.controlsTimer);
-  const timeoutId = React.useRef<NodeJS.Timeout | null>(null);
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-
-  // Safe-area padding: never negative, single source of truth (MediaControls uses View, not SafeAreaView)
-  const containerPadding: ViewStyle = useMemo(
-    () => ({
-      paddingTop: top - MIN_TOP_PADDING,
-      paddingBottom: bottom + BOTTOM_PADDING_EXTRA,
-      paddingLeft: left + HORIZONTAL_PADDING,
-      paddingRight: right + HORIZONTAL_PADDING,
-    }),
-    [top, bottom, left, right]
-  );
-
-  // Memoize animated style
-  const animatedStyle = useMemo(
-    () => [globalStyles.absoluteFill, { opacity: fadeAnim }],
-    [fadeAnim]
-  );
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: controlsVisible ? 1 : 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-
-    if (controlsVisible) {
-      timeoutId.current = setTimeout(() => {
-        setControlsVisible(false);
-      }, controlsTimer * 1000);
-    }
-
-    return () => {
-      if (timeoutId.current) clearTimeout(timeoutId.current);
-    };
-  }, [controlsVisible, controlsTimer, setControlsVisible, fadeAnim]);
-
-  return (
-    <View style={globalStyles.flexOne}>
-      {children}
-      <Animated.View
-        pointerEvents={controlsVisible ? 'auto' : 'none'}
-        style={animatedStyle}
-      >
-        <TouchableOpacity
-          onPress={() => setControlsVisible(false)}
-          style={[globalStyles.controlsContainer, containerPadding]}
-          activeOpacity={1}
-        >
-          <MediaControls onClose={onClose} />
-        </TouchableOpacity>
-      </Animated.View>
-      <SettingModal
-        onPressEpisode={onPressEpisode}
-        reportProgress={reportProgress}
-      />
-      <SubtitleView />
-      <SkipAndNextControls
-        onPressEpisode={onPressEpisode}
-        reportProgress={reportProgress}
-      />
-    </View>
-  );
-};
-
-export default MediaControlsProvider;