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

package/src/AdsPlayer/MediaControls/AdTopControls.tsx

@@ -23,8 +23,14 @@ 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(
     () => [
@@ -58,7 +64,7 @@ const AdTopControls: React.FC<AdTopControlsProps> = ({ onClose }) => {
               <Text style={styles.adLabelText}>Ad</Text>
             </View>
             <View style={styles.separator} />
-            <Text style={styles.adTimeText}>{formatTime(adCurrentTime)}</Text>
+            <Text style={styles.adTimeText}>{formatTime(adTimeRemaining)}</Text>
           </View>
         </Animated.View>
       )}
@@ -81,7 +87,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     marginTop: moderateScale(8),
     paddingHorizontal: moderateScale(10),
     paddingBottom: 0,
@@ -179,17 +185,6 @@ const styles = StyleSheet.create({
     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,
-      },
-    }),
   },
 });
 

package/src/VideoPlayer/MediaControls/BottomControls.tsx

@@ -109,7 +109,7 @@ const BottomControls = () => {
   );
 
   return (
-    <View>
+    <View style={styles.root}>
       {/* Progress Bar Section */}
       <View style={styles.sliderContainer}>
         <View style={styles.sliderWrapper}>
@@ -121,7 +121,7 @@ const BottomControls = () => {
             adMarkers={adMarkers}
           />
         </View>
-        <Text style={timeTextStyle}>
+        <Text style={timeTextStyle} numberOfLines={1}>
           {getRemainingTime(duration, currentTime)}
         </Text>
       </View>
@@ -166,35 +166,41 @@ const BottomControls = () => {
 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: {
-    width: scale(50),
+    minWidth: scale(52),
+    maxWidth: scale(56),
     textAlign: 'right',
-    marginLeft: scale(4),
+    marginLeft: scale(6),
     fontSize: RFValue(12),
     fontWeight: '500',
   },
   buttonsContainer: {
     flexDirection: 'row',
-    justifyContent: 'center',
     flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignContent: 'center',
     paddingHorizontal: scale(10),
+    gap: scale(4),
   },
   button: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: scale(12),
     paddingVertical: verticalScale(6),
-    marginHorizontal: scale(6),
-    marginVertical: verticalScale(4),
     borderRadius: moderateScale(8),
   },
   buttonText: {

package/src/VideoPlayer/MediaControls/MediaControls.tsx

@@ -1,6 +1,5 @@
 import { memo } from 'react';
-import { StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { StyleSheet, View } from 'react-native';
 import TopControls from './TopControls';
 import MiddleControls from './MiddleControls';
 import BottomControls from './BottomControls';
@@ -11,11 +10,11 @@ export type MediaControlsProps = {
 
 const MediaControls: React.FC<MediaControlsProps> = ({ onClose }) => {
   return (
-    <SafeAreaView style={styles.container} edges={['top']}>
+    <View style={styles.container}>
       <TopControls onClose={onClose} />
       <MiddleControls />
       <BottomControls />
-    </SafeAreaView>
+    </View>
   );
 };
 
@@ -26,5 +25,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'space-between',
+    minHeight: 0,
   },
 });

package/src/VideoPlayer/MediaControls/MediaControlsProvider.tsx

@@ -11,6 +11,10 @@ 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>;
@@ -34,13 +38,13 @@ const MediaControlsProvider: React.FC<MediaControlsProviderProps> = ({
   const timeoutId = React.useRef<NodeJS.Timeout | null>(null);
   const fadeAnim = useRef(new Animated.Value(0)).current;
 
-  // Memoize container padding to avoid recalculation on every render
+  // Safe-area padding: never negative, single source of truth (MediaControls uses View, not SafeAreaView)
   const containerPadding: ViewStyle = useMemo(
     () => ({
-      paddingTop: top,
-      paddingBottom: bottom + moderateScale(5),
-      paddingLeft: left + moderateScale(10),
-      paddingRight: right + moderateScale(10),
+      paddingTop: top - MIN_TOP_PADDING,
+      paddingBottom: bottom + BOTTOM_PADDING_EXTRA,
+      paddingLeft: left + HORIZONTAL_PADDING,
+      paddingRight: right + HORIZONTAL_PADDING,
     }),
     [top, bottom, left, right]
   );

package/src/VideoPlayer/MediaControls/TopControls.tsx

@@ -1,10 +1,9 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 import { moderateScale } from 'react-native-size-matters';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { X } from 'lucide-react-native';
 import { lockToPortrait } from '../utils';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useVideoPlayerConfig } from '../context';
 import { useVideoPlayerStore } from '../store/videoPlayerStore';
 
@@ -14,7 +13,6 @@ interface TopControlsProps {
 
 const TopControls: React.FC<TopControlsProps> = ({ onClose }) => {
   const { activeTrack } = useVideoPlayerStore();
-  const { top } = useSafeAreaInsets();
   const { colors } = useVideoPlayerConfig();
   const handleClose = () => {
     // onClose already handles reportProgress and store reset in VideoPlayerCore
@@ -27,14 +25,8 @@ const TopControls: React.FC<TopControlsProps> = ({ onClose }) => {
     activeTrack?.seasonNumber !== undefined ||
     activeTrack?.episodeNumber !== undefined;
 
-  // Memoize container style to avoid recalculation
-  const containerStyle = useMemo(
-    () => [styles.container, { paddingTop: top + moderateScale(10) }],
-    [top]
-  );
-
   return (
-    <View style={containerStyle}>
+    <View style={styles.container}>
       <View style={styles.textContainer}>
         <Text
           numberOfLines={1}
@@ -81,10 +73,12 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: moderateScale(16),
+    paddingVertical: moderateScale(8),
     zIndex: 51,
   },
   textContainer: {
     flex: 1,
+    minWidth: 0,
     paddingRight: moderateScale(10),
   },
   title: {

package/src/VideoPlayer/components/ProgressBar.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useEffect, useMemo, useCallback, useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Slider } from 'react-native-awesome-slider';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
+import { useSharedValue, withTiming, Easing } from 'react-native-reanimated';
 import { moderateScale } from 'react-native-size-matters';
 import { useVideoPlayerConfig } from '../context';
 
@@ -17,6 +17,11 @@ interface Props {
   adMarkers?: number[];
 }
 
+const SEEK_COOLDOWN_MS = 400;
+const PROGRESS_ANIM_DURATION = 220;
+const CACHE_ANIM_DURATION = 280;
+const SMOOTH_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
+
 const ProgressBar: React.FC<Props> = React.memo(
   ({
     duration,
@@ -39,12 +44,26 @@ const ProgressBar: React.FC<Props> = React.memo(
     const min = useSharedValue(0);
     const max = useSharedValue(duration);
 
+    const isSlidingRef = useRef(false);
+    const seekCooldownUntilRef = useRef(0);
+    const seekCooldownTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+      null
+    );
+
     useEffect(() => {
-      progress.value = withTiming(currentTime, { duration: 160 });
+      if (isSlidingRef.current) return;
+      if (Date.now() < seekCooldownUntilRef.current) return;
+      progress.value = withTiming(currentTime, {
+        duration: PROGRESS_ANIM_DURATION,
+        easing: SMOOTH_EASING,
+      });
     }, [currentTime]);
 
     useEffect(() => {
-      cache.value = withTiming(bufferedTime, { duration: 180 });
+      cache.value = withTiming(bufferedTime, {
+        duration: CACHE_ANIM_DURATION,
+        easing: SMOOTH_EASING,
+      });
     }, [bufferedTime]);
 
     useEffect(() => {
@@ -63,6 +82,34 @@ const ProgressBar: React.FC<Props> = React.memo(
       [onSeek, disabled]
     );
 
+    const handleSlidingStart = useCallback(() => {
+      isSlidingRef.current = true;
+      if (seekCooldownTimeoutRef.current) {
+        clearTimeout(seekCooldownTimeoutRef.current);
+        seekCooldownTimeoutRef.current = null;
+      }
+    }, []);
+
+    const handleSlidingComplete = useCallback(
+      (value: number) => {
+        progress.value = value;
+        seekCooldownUntilRef.current = Date.now() + SEEK_COOLDOWN_MS;
+        seekCooldownTimeoutRef.current = setTimeout(() => {
+          isSlidingRef.current = false;
+          seekCooldownTimeoutRef.current = null;
+        }, SEEK_COOLDOWN_MS);
+      },
+      [progress]
+    );
+
+    useEffect(() => {
+      return () => {
+        if (seekCooldownTimeoutRef.current) {
+          clearTimeout(seekCooldownTimeoutRef.current);
+        }
+      };
+    }, []);
+
     return (
       <View style={[styles.container, { height: thumbSize }]}>
         <Slider
@@ -71,6 +118,8 @@ const ProgressBar: React.FC<Props> = React.memo(
           maximumValue={max}
           cache={cache}
           disable={disabled}
+          onSlidingStart={handleSlidingStart}
+          onSlidingComplete={handleSlidingComplete}
           onValueChange={handleSeek}
           containerStyle={[
             styles.sliderContainer,

package/src/VideoPlayer/utils/hooks/useVideoResolutions.ts

@@ -9,12 +9,15 @@ export interface StreamInfo {
 }
 
 async function getHLSBandwidthAndResolutions(
-  m3u8Url: string
+  m3u8Url: string,
+  headers?: Record<string, string>
 ): Promise<StreamInfo[]> {
   try {
     if (!m3u8Url?.endsWith('.m3u8')) return [];
 
-    const { data } = await axios.get<string>(m3u8Url);
+    const { data } = await axios.get<string>(m3u8Url, {
+      headers: headers ?? undefined,
+    });
     if (!data) return [];
 
     const lines = data.split('\n');
@@ -58,8 +61,7 @@ async function getHLSBandwidthAndResolutions(
     };
 
     return [autoStream, ...streams];
-  } catch (error) {
-    console.error('Error fetching or parsing HLS stream:', error);
+  } catch {
     return [];
   }
 }
@@ -87,30 +89,36 @@ export const useVideoResolutions = (track: MediaTrack | null) => {
       return;
     }
 
+    let cancelled = false;
+
     const fetchResolutions = async () => {
       try {
         const data = await getHLSBandwidthAndResolutions(source);
+        if (cancelled) return;
 
         const filteredData = data.filter(
-          (item) => typeof item.height === 'number'
+          (item): item is StreamInfo & { height: number } =>
+            typeof item.height === 'number'
         );
 
         const newResolutions: Resolution[] = [
           { height: 'auto', bandwidth: null },
           ...filteredData.map((item) => ({
-            height: item.height as number,
+            height: item.height,
             bandwidth: item.bandwidth,
           })),
         ];
 
         resolutionCache[source] = newResolutions;
         setResolutions(newResolutions);
-      } catch (error) {
-        console.error('Failed to fetch video resolutions', error);
-      }
+      } catch {}
     };
 
     fetchResolutions();
+
+    return () => {
+      cancelled = true;
+    };
   }, [track]);
 
   return resolutions;

package/src/VideoPlayer.tsx

@@ -118,37 +118,45 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     onClose?.();
   }, [onClose]);
 
+  const showAdsOverlay =
+    ads.length > 0 && isAdPlaying && currentAd && !activeTrack?.isTrailer;
+
   return (
     <View style={styles.container}>
-      <VideoPlayerCore
-        onClose={onClose}
-        isFocused={isFocused}
-        mode={mode}
-        seekTime={seekTime}
-        event={event}
-        autoNext={autoNext}
-        theme={theme}
-        onWatchProgress={onWatchProgress}
-        insets={insets}
-        isPausedOverride={isAdPlaying ? true : isPaused}
-        onVideoEnd={handleVideoEnd}
-      />
-      {ads.length > 0 &&
-        isAdPlaying &&
-        currentAd &&
-        !activeTrack?.isTrailer && (
-          <View style={styles.adsOverlay}>
-            <AdsPlayer
-              ref={adVideoRef}
-              insets={insets}
-              onAdEnd={handleAdEnd}
-              onAdSkip={handleAdSkip}
-              onAdError={handleAdError}
-              onAdTracking={onAdTracking}
-              onClose={handleAdClose}
-            />
-          </View>
-        )}
+      <View
+        style={[
+          styles.mainPlayerWrapper,
+          showAdsOverlay && styles.mainPlayerHidden,
+        ]}
+        pointerEvents={showAdsOverlay ? 'none' : 'auto'}
+      >
+        <VideoPlayerCore
+          onClose={onClose}
+          isFocused={isFocused}
+          mode={mode}
+          seekTime={seekTime}
+          event={event}
+          autoNext={autoNext}
+          theme={theme}
+          onWatchProgress={onWatchProgress}
+          insets={insets}
+          isPausedOverride={isAdPlaying ? true : isPaused}
+          onVideoEnd={handleVideoEnd}
+        />
+      </View>
+      {showAdsOverlay && (
+        <View style={styles.adsOverlay}>
+          <AdsPlayer
+            ref={adVideoRef}
+            insets={insets}
+            onAdEnd={handleAdEnd}
+            onAdSkip={handleAdSkip}
+            onAdError={handleAdError}
+            onAdTracking={onAdTracking}
+            onClose={handleAdClose}
+          />
+        </View>
+      )}
     </View>
   );
 };
@@ -157,9 +165,16 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  mainPlayerWrapper: {
+    flex: 1,
+  },
+  mainPlayerHidden: {
+    opacity: 0,
+  },
   adsOverlay: {
     ...StyleSheet.absoluteFillObject,
     zIndex: 1000,
+    backgroundColor: 'black',
   },
 });