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

package/src/AdsPlayer/MediaControls/AdBottomControls.tsx

@@ -0,0 +1,191 @@
+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,
+    overflow: 'hidden',
+  },
+  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),
+    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

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

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

@@ -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,191 @@
+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

@@ -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';