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

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;

package/src/AdsPlayer/MediaControls/AdMiddleControls.tsx

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

@@ -1,191 +0,0 @@
-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 adDuration = useAdsPlayerStore((state) => state.adDuration);
-  const fadeAnim = useAdControlsAutoHide();
-
-  const adTimeRemaining = useMemo(
-    () => Math.max(0, (currentAd?.duration ?? adDuration) - adCurrentTime),
-    [currentAd?.duration, adDuration, adCurrentTime]
-  );
-
-  // 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(adTimeRemaining)}</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: 'center',
-    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)',
-  },
-});
-
-export default memo(AdTopControls);

package/src/AdsPlayer/MediaControls/index.ts

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

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

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

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

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

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

package/src/AdsPlayer/utils/adStateReset.ts

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

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

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