@zezosoft/zezo-ott-react-native-video-player 1.0.0

package/src/VideoPlayer/Styles/fonts.ts

@@ -0,0 +1,106 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 08 Aug 2025 at 06:55 PM
+ */
+
+interface IFonts {
+  // inter font
+  inter: {
+    black: string;
+    bold: string;
+    extraBold: string;
+    extraLight: string;
+    light: string;
+    medium: string;
+    regular: string;
+    semiBold: string;
+    thin: string;
+  };
+  // poppins font
+  poppins: {
+    black: string;
+    blackItalic: string;
+    bold: string;
+    boldItalic: string;
+    extraBold: string;
+    extraBoldItalic: string;
+    extraLight: string;
+    extraLightItalic: string;
+    italic: string;
+    light: string;
+    lightItalic: string;
+    medium: string;
+    mediumItalic: string;
+    regular: string;
+    semiBold: string;
+    semiBoldItalic: string;
+    thin: string;
+    thinItalic: string;
+  };
+  // roboto font
+  roboto: {
+    black: string;
+    blackItalic: string;
+    bold: string;
+    boldItalic: string;
+    italic: string;
+    light: string;
+    lightItalic: string;
+    medium: string;
+    mediumItalic: string;
+    regular: string;
+    thin: string;
+    thinItalic: string;
+  };
+}
+
+export const Fonts: IFonts = {
+  // inter font
+  inter: {
+    black: 'Inter-Black',
+    bold: 'Inter-Bold',
+    extraBold: 'Inter-ExtraBold',
+    extraLight: 'Inter-ExtraLight',
+    light: 'Inter-Light',
+    medium: 'Inter-Medium',
+    regular: 'Inter-Regular',
+    semiBold: 'Inter-SemiBold',
+    thin: 'Inter-Thin',
+  },
+  // poppins font
+  poppins: {
+    black: 'Poppins-Black',
+    blackItalic: 'Poppins-BlackItalic',
+    bold: 'Poppins-Bold',
+    boldItalic: 'Poppins-BoldItalic',
+    extraBold: 'Poppins-ExtraBold',
+    extraBoldItalic: 'Poppins-ExtraBoldItalic',
+    extraLight: 'Poppins-ExtraLight',
+    extraLightItalic: 'Poppins-ExtraLightItalic',
+    italic: 'Poppins-Italic',
+    light: 'Poppins-Light',
+    lightItalic: 'Poppins-LightItalic',
+    medium: 'Poppins-Medium',
+    mediumItalic: 'Poppins-MediumItalic',
+    regular: 'Poppins-Regular',
+    semiBold: 'Poppins-SemiBold',
+    semiBoldItalic: 'Poppins-SemiBoldItalic',
+    thin: 'Poppins-Thin',
+    thinItalic: 'Poppins-ThinItalic',
+  },
+  // roboto font
+  roboto: {
+    black: 'Roboto-Black',
+    blackItalic: 'Roboto-BlackItalic',
+    bold: 'Roboto-Bold',
+    boldItalic: 'Roboto-BoldItalic',
+    italic: 'Roboto-Italic',
+    light: 'Roboto-Light',
+    lightItalic: 'Roboto-LightItalic',
+    medium: 'Roboto-Medium',
+    mediumItalic: 'Roboto-MediumItalic',
+    regular: 'Roboto-Regular',
+    thin: 'Roboto-Thin',
+    thinItalic: 'Roboto-ThinItalic',
+  },
+};

package/src/VideoPlayer/Styles/globalStyles.ts

@@ -0,0 +1,74 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 08 Aug 2025 at 06:53 PM
+ */
+
+import { StyleSheet } from 'react-native';
+
+const globalStyles = StyleSheet.create({
+  centerContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    flex: 1,
+  },
+  newContainer: {
+    flex: 1,
+  },
+  // new styles
+  flexOneJustifyContentAndAlignItemsCenter: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  flexOneJustifyContentCenterAndAlignItemsCenter: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  hundredPercentWidth: {
+    width: '100%',
+  },
+  hundredPercentHeight: {
+    height: '100%',
+  },
+  marginZeroAndPaddingZero: {
+    margin: 0,
+    padding: 0,
+  },
+  overflowHidden: {
+    overflow: 'hidden',
+  },
+  flexOne: {
+    flex: 1,
+  },
+  flexZero: {
+    flex: 0,
+  },
+  positionAbsolute: {
+    position: 'absolute',
+  },
+  twentyPercentWidth: {
+    width: '20%',
+  },
+  alignItemsCenterAndJustifyContentCenter: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textAlignCenter: {
+    textAlign: 'center',
+  },
+  flexRow_alignCenter_justifyBetween: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  flexOneWithBlackBackground: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+});
+
+export default globalStyles;

package/src/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,217 @@
+import React, { useCallback, useEffect } from 'react';
+import { AppState, StyleSheet, View, type AppStateStatus } from 'react-native';
+import Video, {
+  type OnProgressData,
+  type SelectedTrack,
+} from 'react-native-video';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+
+import { videoRef } from './utils/videoRef';
+import { lockToLandscape, lockToPortrait } from './utils/lockOrientation';
+import { getVideoSource, handlePause } from './utils';
+import MediaControlsProvider from './MediaControls/MediaControlsProvider';
+import { useVideoPlayerStore } from './store/videoPlayerStore';
+import { createPlayerEvents } from './utils/playerEvents';
+import type { MediaEpisode } from './store/videoPlayer.type';
+import globalStyles from './Styles/globalStyles';
+import { VideoPlayerConfigProvider, type VideoPlayerTheme } from './context';
+import {
+  useWatchReporter,
+  type ExtendedWatchProgress,
+} from './utils/useWatchReporter';
+
+export interface VideoPlayerProps {
+  onClose?: () => void;
+  isFocused?: boolean;
+  seekTime?: number | null;
+  mode?: 'fullscreen' | 'normal';
+  onSeek?: (time: number) => void;
+  autoNext?: boolean;
+  event?: {
+    onPressEpisode?: ({
+      episode,
+    }: {
+      episode: MediaEpisode;
+    }) => Promise<boolean>;
+  };
+  theme?: Partial<VideoPlayerTheme>;
+  onWatchProgress?: (progress: ExtendedWatchProgress) => void;
+}
+
+const controlsStyles = {
+  hideForward: true,
+  hideDuration: true,
+  hideFullscreen: true,
+  hidePlayPause: true,
+  hideNavigationBarOnFullScreenMode: true,
+  hideNotificationBarOnFullScreenMode: true,
+  hideNext: true,
+  hidePosition: true,
+  hidePrevious: true,
+  hideRewind: true,
+  hideSeekBar: true,
+  hideSettingButton: true,
+};
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({
+  onClose,
+  isFocused = true,
+  mode = 'fullscreen',
+  seekTime,
+  event,
+  autoNext = true,
+  theme,
+  onWatchProgress,
+}) => {
+  const {
+    isPaused,
+    resizeMode,
+    setResizeMode,
+    setControlsVisible,
+    controlsVisible,
+    playBackRate,
+    selectedAudioTrack,
+    selectedSubtitleTrack,
+    maxBitRate,
+    selectedVideoTrack,
+    setIsPaused,
+    playList,
+    currentTrackIndex,
+    activeTrack,
+    setError,
+  } = useVideoPlayerStore();
+
+  const playerEvents = createPlayerEvents();
+  const { reportProgress } = useWatchReporter({ onWatchProgress });
+
+  useEffect(() => {
+    if (isFocused) {
+      if (mode === 'fullscreen') {
+        lockToLandscape();
+      } else {
+        lockToPortrait();
+      }
+    } else {
+      lockToPortrait();
+    }
+  }, [isFocused, mode]);
+
+  const handleCombinedProgress = useCallback(
+    (progressEvent: OnProgressData) => {
+      playerEvents.onProgress(progressEvent);
+    },
+    [playerEvents]
+  );
+
+  useEffect(() => {
+    if (seekTime && !activeTrack?.isTrailer && videoRef?.current) {
+      videoRef.current?.seek(seekTime);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [seekTime, videoRef?.current]);
+
+  useEffect(() => {
+    const handleAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState === 'inactive' || nextState === 'background') {
+        handlePause();
+        setIsPaused(true);
+        reportProgress('PROGRESS');
+      }
+    };
+    const sub = AppState.addEventListener('change', handleAppStateChange);
+    return () => sub.remove();
+  }, [reportProgress, setIsPaused]);
+
+  const trigger = (type: 'Pinch' | 'Tap') => {
+    switch (type) {
+      case 'Pinch':
+        if (resizeMode === 'cover') {
+          setResizeMode('contain');
+        } else {
+          setResizeMode('cover');
+        }
+        break;
+      case 'Tap': {
+        setControlsVisible(!controlsVisible);
+      }
+    }
+  };
+  const composedGestures = Gesture.Race(
+    Gesture.Pinch().onEnd(() => runOnJS(trigger)('Pinch')),
+    Gesture.Tap().onEnd(() => runOnJS(trigger)('Tap'))
+  );
+
+  return (
+    <VideoPlayerConfigProvider theme={theme}>
+      <SafeAreaProvider style={globalStyles.flexOne}>
+        <GestureHandlerRootView style={globalStyles.flexOne}>
+          <MediaControlsProvider
+            onClose={() => {
+              reportProgress('VIDEO_CLOSE');
+              onClose?.();
+            }}
+            onPressEpisode={async ({ episode }) => {
+              if (event?.onPressEpisode) {
+                return await event.onPressEpisode({ episode });
+              }
+              return Promise.resolve(true);
+            }}
+            reportProgress={reportProgress}
+          >
+            <GestureDetector gesture={composedGestures}>
+              <View style={globalStyles.flexOneWithBlackBackground}>
+                <Video
+                  ref={videoRef}
+                  source={getVideoSource({ playList, currentTrackIndex })}
+                  paused={isPaused}
+                  onProgress={handleCombinedProgress}
+                  onLoad={playerEvents.onLoad}
+                  onBuffer={playerEvents.onBuffer}
+                  onEnd={() => {
+                    playerEvents.onEnd({
+                      reportProgress,
+                      onPressEpisode:
+                        event?.onPressEpisode ?? (async () => true),
+                      autoNext,
+                    });
+                  }}
+                  onLoadStart={playerEvents.onLoadStart}
+                  onError={() => setError("Video couldn't be loaded")}
+                  controls={false}
+                  resizeMode={resizeMode || 'contain'}
+                  rate={playBackRate || 1}
+                  selectedAudioTrack={selectedAudioTrack as SelectedTrack}
+                  selectedTextTrack={
+                    selectedSubtitleTrack?.value === 'Off'
+                      ? undefined
+                      : (selectedSubtitleTrack as SelectedTrack)
+                  }
+                  selectedVideoTrack={
+                    selectedVideoTrack
+                      ? {
+                          type: selectedVideoTrack.type,
+                          value: selectedVideoTrack.value,
+                        }
+                      : undefined
+                  }
+                  maxBitRate={maxBitRate ?? undefined}
+                  style={StyleSheet.absoluteFillObject}
+                  controlsStyles={controlsStyles}
+                />
+              </View>
+            </GestureDetector>
+          </MediaControlsProvider>
+        </GestureHandlerRootView>
+      </SafeAreaProvider>
+    </VideoPlayerConfigProvider>
+  );
+};
+
+export default VideoPlayer;

package/src/VideoPlayer/components/ProgressBar.tsx

@@ -0,0 +1,98 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Slider } from 'react-native-awesome-slider';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+import { verticalScale } from 'react-native-size-matters';
+import { useVideoPlayerConfig } from '../context';
+
+interface Props {
+  duration: number;
+  currentTime: number;
+  bufferedTime: number;
+  onSeek: (time: number) => void;
+  showThumb?: boolean;
+  height?: number;
+}
+
+const ProgressBar: React.FC<Props> = React.memo(
+  ({ duration, currentTime, bufferedTime, onSeek, showThumb = true }) => {
+    const { colors, metrics } = useVideoPlayerConfig();
+    const progress = useSharedValue(currentTime);
+    const cache = useSharedValue(bufferedTime);
+    const min = useSharedValue(0);
+    const max = useSharedValue(duration);
+
+    // Smoothly animate progress
+    useEffect(() => {
+      progress.value = withTiming(currentTime, { duration: 200 });
+    }, [currentTime]);
+
+    useEffect(() => {
+      cache.value = withTiming(bufferedTime, { duration: 200 });
+    }, [bufferedTime]);
+
+    useEffect(() => {
+      max.value = duration;
+    }, [duration]);
+
+    return (
+      <View style={styles.container}>
+        <Slider
+          progress={progress}
+          minimumValue={min}
+          maximumValue={max}
+          cache={cache}
+          onValueChange={onSeek}
+          containerStyle={[
+            styles.sliderContainer,
+            {
+              borderRadius: metrics.sliderHeight / 2,
+              height: metrics.sliderHeight,
+            },
+          ]}
+          renderThumb={
+            showThumb
+              ? () => (
+                  <View
+                    style={{
+                      backgroundColor: colors.primary,
+                      width: metrics.thumbSize,
+                      height: metrics.thumbSize,
+                      borderRadius: metrics.thumbSize / 2,
+                    }}
+                  />
+                )
+              : () => null
+          }
+          renderBubble={() => null}
+          thumbWidth={metrics.thumbSize}
+          theme={{
+            minimumTrackTintColor: colors.primary,
+            bubbleBackgroundColor: colors.white,
+            maximumTrackTintColor: colors.secondary,
+            cacheTrackTintColor: colors.buffer,
+          }}
+        />
+      </View>
+    );
+  },
+  (prevProps, nextProps) =>
+    prevProps.currentTime === nextProps.currentTime &&
+    prevProps.bufferedTime === nextProps.bufferedTime &&
+    prevProps.duration === nextProps.duration
+);
+
+export default ProgressBar;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+    height: verticalScale(20),
+    justifyContent: 'center',
+  },
+  sliderContainer: {
+    overflow: 'hidden',
+  },
+});

package/src/VideoPlayer/components/SkipAndNextControls.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  Text,
+  type TextStyle,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+import { scale } from 'react-native-size-matters';
+import { useVideoPlayerStore } from '../store/videoPlayerStore';
+import { videoRef } from '../utils/videoRef';
+import Display from '../utils/Display';
+import { handleNext } from '../utils';
+import type { MediaEpisode } from '../store/videoPlayer.type';
+import { useVideoPlayerConfig } from '../context';
+import type { ExtendedWatchProgress } from '../utils/useWatchReporter';
+
+type SkipAndNextControlsProps = {
+  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
+  reportProgress: (event: ExtendedWatchProgress['event']) => void;
+};
+
+const SkipAndNextControls: React.FC<SkipAndNextControlsProps> = ({
+  onPressEpisode,
+  reportProgress,
+}) => {
+  const {
+    activeTrack,
+    currentTime,
+    isSkipIntroVisible,
+    isNextEpisodeVisible,
+    setIsNextEpisodeVisible,
+    setIsSkipIntroVisible,
+    settingsModal,
+    controlsVisible,
+  } = useVideoPlayerStore();
+  const { colors } = useVideoPlayerConfig();
+
+  if (activeTrack?.type !== 'series') return null;
+
+  const showSkipIntro =
+    isSkipIntroVisible &&
+    !settingsModal.isVisible &&
+    activeTrack.skipIntro &&
+    activeTrack.skipIntro.start < currentTime &&
+    currentTime < activeTrack.skipIntro.end;
+
+  const showNextEpisode =
+    isNextEpisodeVisible &&
+    !settingsModal.isVisible &&
+    activeTrack.nextEpisodeAt &&
+    activeTrack.nextEpisodeAt < currentTime;
+
+  return (
+    <>
+      {showSkipIntro && (
+        <ActionButton
+          label="Skip intro"
+          onPress={() => {
+            if (activeTrack.skipIntro?.end) {
+              videoRef?.current?.seek(activeTrack.skipIntro.end);
+            }
+          }}
+          onCancel={() => setIsSkipIntroVisible(false)}
+          position="left"
+          colors={{ text: colors.black, onBackground: colors.onBackground }}
+          controlsVisible={controlsVisible}
+        />
+      )}
+
+      {showNextEpisode && (
+        <ActionButton
+          label="Next episode"
+          onPress={() => {
+            reportProgress('EPISODE_CHANGE');
+            handleNext({ onPressEpisode, autoNext: true });
+          }}
+          onCancel={() => setIsNextEpisodeVisible(false)}
+          position="right"
+          colors={{ text: colors.black, onBackground: colors.onBackground }}
+          controlsVisible={controlsVisible}
+        />
+      )}
+    </>
+  );
+};
+
+export default SkipAndNextControls;
+
+type ActionButtonColors = {
+  text: string;
+  onBackground: string;
+};
+
+type ActionButtonProps = {
+  label: string;
+  onPress: () => void;
+  onCancel: () => void;
+  position: 'left' | 'right';
+  colors: ActionButtonColors;
+  controlsVisible: boolean;
+};
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  label,
+  onPress,
+  onCancel,
+  position,
+  colors,
+  controlsVisible,
+}) => {
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(10);
+  const bottom = useSharedValue(
+    controlsVisible ? Display.setHeight(12) : Display.setHeight(10)
+  );
+
+  // Animate show
+  useEffect(() => {
+    opacity.value = withTiming(1, { duration: 100 });
+    translateY.value = withTiming(0, { duration: 100 });
+  }, [opacity, translateY]);
+
+  // Animate bottom when controls toggle
+  useEffect(() => {
+    bottom.value = withTiming(
+      controlsVisible ? Display.setHeight(12) : Display.setHeight(10),
+      { duration: 100 }
+    );
+  }, [bottom, controlsVisible]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }],
+    bottom: bottom.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.overlayButton,
+        animatedStyle,
+        position === 'left' ? { left: scale(58) } : { right: scale(58) },
+      ]}
+    >
+      <View style={styles.buttonRow}>
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            { backgroundColor: colors.onBackground },
+          ]}
+          onPress={onPress}
+        >
+          <Text style={makeTextStyle(colors.text)}>{label}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            { backgroundColor: colors.onBackground },
+          ]}
+          onPress={onCancel}
+        >
+          <Text style={makeTextStyle(colors.text)}>Cancel</Text>
+        </TouchableOpacity>
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlayButton: {
+    position: 'absolute', // fixed, not animated
+    zIndex: 10,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: scale(10),
+  },
+  actionButton: {
+    paddingHorizontal: scale(20),
+    paddingVertical: scale(8),
+    borderRadius: scale(8),
+    alignSelf: 'flex-start',
+  },
+});
+
+const makeTextStyle = (color: string): TextStyle => ({
+  color,
+  fontWeight: '600',
+});