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

package/src/AdsPlayer/MediaControls/AdMiddleControls.tsx

@@ -0,0 +1,63 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { Play, Pause } from 'lucide-react-native';
+import { useAdsPlayerStore } from '../store/adsPlayerStore';
+import { useAdControlsAutoHide } from '../utils/useAdControlsAutoHide';
+import RotatingLoader from '../components/RotatingLoader';
+import globalStyles from '../../VideoPlayer/styles/globalStyles';
+
+const AdMiddleControls: React.FC = () => {
+  const { isAdPaused, isAdBuffering, setIsAdPaused } = useAdsPlayerStore();
+  const fadeAnim = useAdControlsAutoHide();
+
+  const handlePlayPause = useCallback(() => {
+    setIsAdPaused(!isAdPaused);
+  }, [isAdPaused, setIsAdPaused]);
+
+  // Memoize container style
+  const containerStyle = useMemo(
+    () => [styles.container, { opacity: fadeAnim }],
+    [fadeAnim]
+  );
+
+  return (
+    <Animated.View style={containerStyle} pointerEvents="box-none">
+      {isAdBuffering ? (
+        <RotatingLoader
+          color="#fff"
+          autoRotate={isAdBuffering}
+          size={scale(50)}
+        />
+      ) : (
+        <View pointerEvents="auto">
+          <TouchableOpacity
+            onPress={handlePlayPause}
+            style={styles.button}
+            activeOpacity={0.7}
+          >
+            {isAdPaused ? (
+              <Play size={scale(40)} color="#fff" fill="#fff" />
+            ) : (
+              <Pause size={scale(40)} color="#fff" fill="#fff" />
+            )}
+          </TouchableOpacity>
+        </View>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    ...globalStyles.absoluteFill,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default memo(AdMiddleControls);

package/src/AdsPlayer/MediaControls/AdTopControls.tsx

@@ -0,0 +1,196 @@
+import React, { memo, useMemo } from 'react';
+import {
+  Animated,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Platform,
+} from 'react-native';
+import { moderateScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { X } from 'lucide-react-native';
+import { useVideoPlayerStore } from '../../VideoPlayer/store/videoPlayerStore';
+import { useAdsPlayerStore } from '../store/adsPlayerStore';
+import { useAdControlsAutoHide } from '../utils/useAdControlsAutoHide';
+import { formatTime } from '../../VideoPlayer/utils';
+
+interface AdTopControlsProps {
+  onClose?: () => void;
+}
+
+const AdTopControls: React.FC<AdTopControlsProps> = ({ onClose }) => {
+  const controlsVisible = useVideoPlayerStore((state) => state.controlsVisible);
+  const currentAd = useAdsPlayerStore((state) => state.currentAd);
+  const adCurrentTime = useAdsPlayerStore((state) => state.adCurrentTime);
+  const fadeAnim = useAdControlsAutoHide();
+
+  // Memoize styles to avoid recalculation
+  const adLabelContainerStyle = useMemo(
+    () => [
+      styles.adLabelContainer,
+      controlsVisible
+        ? styles.adLabelContainerVisible
+        : styles.adLabelContainerHidden,
+    ],
+    [controlsVisible]
+  );
+
+  const adBadgeStyle = useMemo(
+    () => [
+      styles.adBadge,
+      controlsVisible ? styles.adBadgeVisible : styles.adBadgeHidden,
+    ],
+    [controlsVisible]
+  );
+
+  const closeButtonStyle = useMemo(
+    () => [styles.closeButtonContainer, { opacity: fadeAnim }],
+    [fadeAnim]
+  );
+
+  return (
+    <View style={styles.container}>
+      {currentAd && (
+        <Animated.View style={adLabelContainerStyle}>
+          <View style={adBadgeStyle}>
+            <View style={styles.adLabelWrapper}>
+              <Text style={styles.adLabelText}>Ad</Text>
+            </View>
+            <View style={styles.separator} />
+            <Text style={styles.adTimeText}>{formatTime(adCurrentTime)}</Text>
+          </View>
+        </Animated.View>
+      )}
+      <Animated.View style={closeButtonStyle}>
+        <TouchableOpacity
+          onPress={onClose}
+          style={styles.closeButton}
+          activeOpacity={0.7}
+        >
+          <View style={styles.closeButtonBackground}>
+            <X size={moderateScale(22)} color="#fff" strokeWidth={2.5} />
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginTop: moderateScale(8),
+    paddingHorizontal: moderateScale(10),
+    paddingBottom: 0,
+  },
+  adLabelContainer: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  adLabelContainerVisible: {
+    opacity: 1,
+  },
+  adLabelContainerHidden: {
+    opacity: 0.95,
+  },
+  adBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: moderateScale(8),
+    paddingHorizontal: moderateScale(5),
+    paddingVertical: moderateScale(3),
+    borderWidth: 1,
+  },
+  adBadgeVisible: {
+    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.4,
+        shadowRadius: 5,
+      },
+      android: {
+        elevation: 5,
+      },
+    }),
+  },
+  adBadgeHidden: {
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    borderColor: 'rgba(255, 255, 255, 0.15)',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+      },
+      android: {
+        elevation: 4,
+      },
+    }),
+  },
+  adLabelWrapper: {
+    backgroundColor: 'rgb(255, 255, 255)',
+    borderRadius: moderateScale(3),
+    paddingHorizontal: moderateScale(5),
+    paddingVertical: moderateScale(1),
+  },
+  adLabelText: {
+    color: 'red',
+    fontSize: RFValue(10),
+    fontWeight: '700',
+    letterSpacing: 0.1,
+    textTransform: 'uppercase',
+  },
+  separator: {
+    width: 1,
+    height: moderateScale(12),
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    marginHorizontal: moderateScale(5),
+  },
+  adTimeText: {
+    color: '#fff',
+    fontSize: RFValue(13),
+    fontWeight: '700',
+    fontVariant: ['tabular-nums'],
+    letterSpacing: 0.3,
+    minWidth: moderateScale(40),
+  },
+  closeButtonContainer: {
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+  },
+  closeButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: moderateScale(2),
+  },
+  closeButtonBackground: {
+    width: moderateScale(32),
+    height: moderateScale(32),
+    borderRadius: moderateScale(16),
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3,
+      },
+      android: {
+        elevation: 3,
+      },
+    }),
+  },
+});
+
+export default memo(AdTopControls);

package/src/AdsPlayer/MediaControls/index.ts

@@ -0,0 +1,5 @@
+export { default as AdMediaControls } from './AdMediaControls';
+export { default as AdMediaControlsProvider } from './AdMediaControlsProvider';
+export { default as AdTopControls } from './AdTopControls';
+export { default as AdMiddleControls } from './AdMiddleControls';
+export { default as AdBottomControls } from './AdBottomControls';

package/src/AdsPlayer/components/RotatingLoader.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  StyleSheet,
+  Animated,
+  Easing,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Loader } from 'lucide-react-native';
+import { moderateScale } from 'react-native-size-matters';
+
+interface RotatingLoaderProps {
+  size?: number;
+  color?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  rotationDuration?: number;
+  autoRotate?: boolean; // Whether to auto-rotate (default: true)
+}
+
+const RotatingLoader: React.FC<RotatingLoaderProps> = ({
+  size = moderateScale(35),
+  color = '#fff',
+  containerStyle,
+  rotationDuration = 1300,
+  autoRotate = true,
+}) => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (autoRotate) {
+      rotateAnim.setValue(0);
+      const animation = Animated.loop(
+        Animated.timing(rotateAnim, {
+          toValue: 1,
+          duration: rotationDuration,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
+      );
+      animation.start();
+
+      return () => {
+        animation.stop();
+        rotateAnim.stopAnimation();
+      };
+    }
+    return undefined;
+  }, [autoRotate, rotationDuration, rotateAnim]);
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        containerStyle,
+        {
+          transform: [
+            {
+              rotate: rotateAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['0deg', '360deg'],
+              }),
+            },
+          ],
+        },
+      ]}
+    >
+      <Loader size={size} color={color} />
+    </Animated.View>
+  );
+};
+
+export default RotatingLoader;
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/AdsPlayer/index.ts

@@ -0,0 +1,4 @@
+export { default as AdsPlayer } from './AdsPlayer';
+export type { AdsPlayerProps, AdsPlayerRef } from './AdsPlayer';
+export { useAdsManager } from './utils/useAdsManager';
+export * from './store';

package/src/AdsPlayer/store/adsPlayer.type.ts

@@ -0,0 +1,29 @@
+import type { VideoAd } from '../../VideoPlayer/store/videoPlayer.type';
+
+export interface AdState {
+  currentAd: VideoAd | null;
+  isAdPlaying: boolean;
+  isAdPaused: boolean;
+  isAdMuted: boolean;
+  isAdBuffering: boolean;
+  adCurrentTime: number;
+  adDuration: number;
+  pendingMidRollAds: VideoAd[];
+  showSkipButton: boolean;
+  resumeTime: number | null;
+}
+
+export interface AdsPlayerStore extends AdState {
+  setCurrentAd: (ad: VideoAd | null) => void;
+  setIsAdPlaying: (isPlaying: boolean) => void;
+  setIsAdPaused: (isPaused: boolean) => void;
+  setIsAdMuted: (isMuted: boolean) => void;
+  setIsAdBuffering: (isBuffering: boolean) => void;
+  setAdCurrentTime: (time: number) => void;
+  setAdDuration: (duration: number) => void;
+  setShowSkipButton: (show: boolean) => void;
+  addPendingMidRollAd: (ad: VideoAd) => void;
+  clearPendingMidRollAds: () => void;
+  setResumeTime: (time: number | null) => void;
+  resetAdsStore: () => void;
+}

package/src/AdsPlayer/store/adsPlayerStore.ts

@@ -0,0 +1,59 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { MMKV } from 'react-native-mmkv';
+import type { AdsPlayerStore, AdState } from './adsPlayer.type';
+
+export const adsStorage = new MMKV({
+  id: 'adsPlayerStorage',
+  encryptionKey: 'adsPlayerKey',
+});
+
+export const adsMmkvStorage = {
+  setItem: (key: string, value: string) => adsStorage.set(key, value),
+  getItem: (key: string) => adsStorage.getString(key) ?? null,
+  removeItem: (key: string) => adsStorage.delete(key),
+};
+
+const adsStoreDataDefaults: AdState = {
+  currentAd: null,
+  isAdPlaying: false,
+  isAdPaused: false,
+  isAdMuted: false,
+  isAdBuffering: false,
+  adCurrentTime: 0,
+  adDuration: 0,
+  pendingMidRollAds: [],
+  showSkipButton: false,
+  resumeTime: null,
+};
+
+export const useAdsPlayerStore = create<AdsPlayerStore>()(
+  persist(
+    (set) => ({
+      ...adsStoreDataDefaults,
+
+      setCurrentAd: (currentAd) => set({ currentAd }),
+      setIsAdPlaying: (isAdPlaying) => set({ isAdPlaying }),
+      setIsAdPaused: (isAdPaused) => set({ isAdPaused }),
+      setIsAdMuted: (isAdMuted) => set({ isAdMuted }),
+      setIsAdBuffering: (isAdBuffering) => set({ isAdBuffering }),
+      setAdCurrentTime: (adCurrentTime) => set({ adCurrentTime }),
+      setAdDuration: (adDuration) => set({ adDuration }),
+      setShowSkipButton: (showSkipButton) => set({ showSkipButton }),
+      setResumeTime: (resumeTime) => set({ resumeTime }),
+      addPendingMidRollAd: (ad) =>
+        set((state) => ({
+          pendingMidRollAds: [...state.pendingMidRollAds, ad],
+        })),
+      clearPendingMidRollAds: () => set({ pendingMidRollAds: [] }),
+      resetAdsStore: () => {
+        set(adsStoreDataDefaults);
+        adsStorage.clearAll();
+      },
+    }),
+    {
+      name: 'AdsPlayerStorage',
+      storage: createJSONStorage(() => adsMmkvStorage),
+    }
+  )
+);

package/src/AdsPlayer/store/index.ts

@@ -0,0 +1,2 @@
+export * from './adsPlayerStore';
+export * from './adsPlayer.type';

package/src/AdsPlayer/utils/adStateReset.ts

@@ -0,0 +1,29 @@
+import { useAdsPlayerStore } from '../store/adsPlayerStore';
+
+/**
+ * Reusable function to reset ad state
+ * Consolidates duplicate logic for resetting ad state across components
+ */
+export const resetAdState = () => {
+  try {
+    const {
+      setIsAdPlaying,
+      setCurrentAd,
+      setAdCurrentTime,
+      setAdDuration,
+      setShowSkipButton,
+      setIsAdPaused,
+      setIsAdBuffering,
+    } = useAdsPlayerStore.getState();
+
+    setIsAdPlaying(false);
+    setCurrentAd(null);
+    setAdCurrentTime(0);
+    setAdDuration(0);
+    setShowSkipButton(false);
+    setIsAdPaused(false);
+    setIsAdBuffering(false);
+  } catch (error) {
+    console.error('Error resetting ad state:', error);
+  }
+};

package/src/AdsPlayer/utils/controls.ts

@@ -0,0 +1,69 @@
+import { Linking } from 'react-native';
+import type { VideoAd } from '../../VideoPlayer/store/videoPlayer.type';
+import { useVideoPlayerStore } from '../../VideoPlayer/store/videoPlayerStore';
+import { useAdsPlayerStore } from '../store/adsPlayerStore';
+import { createRef } from 'react';
+import type { AdsPlayerRef } from '../AdsPlayer';
+export const adVideoRef = createRef<AdsPlayerRef>();
+
+export const getDomainFromUrl = (url: string | undefined): string => {
+  if (!url) return '';
+  const domain = url.replace(/^https?:\/\//, '').split('/')[0];
+  return domain || '';
+};
+
+export const handleAdClickThrough = async (
+  ad: VideoAd,
+  onAdTracking?: ({
+    ad,
+    trackingUrl,
+    event,
+  }: {
+    ad: VideoAd;
+    trackingUrl: string;
+    event: string;
+  }) => void
+): Promise<void> => {
+  if (!ad.clickThroughUrl) return;
+
+  try {
+    const canOpen = await Linking.canOpenURL(ad.clickThroughUrl);
+    if (canOpen) {
+      await Linking.openURL(ad.clickThroughUrl);
+      if (ad.tracking?.click && onAdTracking) {
+        onAdTracking({
+          ad,
+          trackingUrl: ad.tracking.click,
+          event: 'click',
+        });
+      }
+    }
+  } catch (error) {
+    console.error('Error opening ad URL:', error);
+  }
+};
+
+export const hideAdControls = (): void => {
+  const { setControlsVisible } = useVideoPlayerStore.getState();
+  const { isAdPaused } = useAdsPlayerStore.getState();
+  if (isAdPaused) {
+    return;
+  }
+  setControlsVisible(false);
+};
+
+export const showAdControls = (): void => {
+  const { setControlsVisible } = useVideoPlayerStore.getState();
+  setControlsVisible(true);
+};
+
+export const toggleAdControls = (): void => {
+  const { controlsVisible, setControlsVisible } =
+    useVideoPlayerStore.getState();
+  const { isAdPaused } = useAdsPlayerStore.getState();
+  if (isAdPaused) {
+    setControlsVisible(true);
+  } else {
+    setControlsVisible(!controlsVisible);
+  }
+};

package/src/AdsPlayer/utils/useAdControlsAutoHide.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { useVideoPlayerStore } from '../../VideoPlayer/store/videoPlayerStore';
+import { useAdsPlayerStore } from '../store/adsPlayerStore';
+import { hideAdControls } from './controls';
+
+export const useAdControlsAutoHide = (): Animated.Value => {
+  const { controlsVisible, controlsTimer } = useVideoPlayerStore();
+  const { isAdPaused } = useAdsPlayerStore();
+  const timeoutId = useRef<NodeJS.Timeout | null>(null);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: controlsVisible ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+
+    if (controlsVisible && !isAdPaused) {
+      timeoutId.current = setTimeout(() => {
+        hideAdControls();
+      }, controlsTimer * 1000);
+    }
+
+    return () => {
+      if (timeoutId.current) clearTimeout(timeoutId.current);
+    };
+  }, [controlsVisible, controlsTimer, fadeAnim, isAdPaused]);
+
+  return fadeAnim;
+};

package/src/AdsPlayer/utils/useAdInitialization.ts

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