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

package/src/AdsPlayer/utils/useAdInitialization.ts

@@ -1,86 +0,0 @@
-import { useCallback } from 'react';
-import { useAdsPlayerStore } from '../store/adsPlayerStore';
-import { useVideoPlayerStore } from '../../VideoPlayer/store/videoPlayerStore';
-import { handlePause } from '../../VideoPlayer/utils';
-import type { VideoAd } from '../../VideoPlayer/store/videoPlayer.type';
-
-interface UseAdInitializationParams {
-  onAdTracking?: ({
-    ad,
-    trackingUrl,
-    event,
-  }: {
-    ad: VideoAd;
-    trackingUrl: string;
-    event: string;
-  }) => void;
-}
-
-/**
- * Reusable hook for initializing and starting ads
- * Consolidates duplicate ad initialization logic from useAdsManager
- */
-export const useAdInitialization = ({
-  onAdTracking,
-}: UseAdInitializationParams = {}) => {
-  const { setCurrentAd, setIsAdPlaying, setIsAdPaused, setResumeTime } =
-    useAdsPlayerStore();
-  const { setIsPaused } = useVideoPlayerStore();
-
-  const startAd = useCallback(
-    (
-      ad: VideoAd,
-      options: {
-        resumeTime?: number;
-        trackImpression?: boolean;
-      } = {}
-    ) => {
-      try {
-        // Always pause main video first before starting ad
-        // Use handlePause to properly pause video and save watch time
-        handlePause();
-        setIsPaused(true);
-
-        // Set ad state - ensure ad is ready to play
-        setCurrentAd(ad);
-        setIsAdPlaying(true);
-        setIsAdPaused(false);
-
-        if (options.resumeTime !== undefined) {
-          setResumeTime(options.resumeTime);
-        }
-
-        // Track impression is handled in AdsPlayer component to avoid duplication
-        // Only track here if explicitly requested
-        if (
-          options.trackImpression === true &&
-          ad.tracking?.impression &&
-          onAdTracking
-        ) {
-          onAdTracking({
-            ad,
-            trackingUrl: ad.tracking.impression,
-            event: 'impression',
-          });
-        }
-      } catch (error) {
-        console.error('Error starting ad:', error);
-        // Reset state on error
-        setCurrentAd(null);
-        setIsAdPlaying(false);
-        setIsAdPaused(false);
-        throw error;
-      }
-    },
-    [
-      setCurrentAd,
-      setIsAdPlaying,
-      setIsAdPaused,
-      setIsPaused,
-      setResumeTime,
-      onAdTracking,
-    ]
-  );
-
-  return { startAd };
-};

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,
-  },
-});