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

package/src/VideoPlayer/store/videoPlayer.type.ts

@@ -0,0 +1,192 @@
+/**
+ * @author Naresh
+ * @lastModified Sat 16 Aug 2025 at 12:15 PM
+ */
+
+import {
+  type EnumValues,
+  type OnLoadData,
+  ResizeMode,
+  SelectedVideoTrackType,
+} from 'react-native-video';
+
+export interface BaseEntity {
+  id: string;
+  title: string;
+  contentId: string;
+}
+
+export interface TimeRange {
+  start: number;
+  end: number;
+}
+
+export interface SubtitleTrack {
+  title?: string;
+  language?: string;
+  type:
+    | 'application/x-subrip'
+    | 'application/ttml+xml'
+    | 'text/vtt'
+    | 'application/octet-stream';
+  url: string;
+}
+
+export interface MediaEpisode extends BaseEntity {
+  description: string;
+  duration: number;
+  sourceLink: string;
+  sourceType: 'HLS' | 'MP4';
+  subtitles: SubtitleTrack[];
+  thumbnail: string;
+  episodeNumber: number;
+  skipIntro?: TimeRange | null;
+  nextEpisodeAt?: number | null;
+  publishDate?: string | null;
+}
+
+export interface MediaSeason extends BaseEntity {
+  order: number;
+  seasonNumber?: number;
+  episodes: MediaEpisode[] | null;
+  isActive: boolean;
+  createdBy: string;
+}
+
+export interface MediaTrack extends BaseEntity {
+  description: string;
+  duration: number;
+  thumbnail: string;
+  type: 'movie' | 'series' | 'live_stream';
+  isTrailer?: boolean;
+  sourceType: 'HLS' | 'MP4';
+  sourceLink: string;
+  trailerSource?: string | null;
+  episodeId?: string | null;
+  episodeName?: string | null;
+  episodeNumber?: number | null;
+  seasonId?: string | null;
+  seasonNumber?: number | null;
+  skipIntro?: TimeRange | null;
+  nextEpisodeAt?: number | null;
+  subtitles?: SubtitleTrack[] | null;
+  publishDate?: string | null;
+}
+
+export interface TrackSelection {
+  index?: number;
+  type: string;
+  value: string | number;
+  isExternal: boolean;
+  title?: string;
+  uri?: string;
+  language?: string;
+}
+
+export interface IosTrackResolution {
+  width: number | string | null;
+  height: number | string | null;
+  bandwidth: number;
+}
+
+export type SettingsAction =
+  | 'playbackRate'
+  | 'audioOrSubtitle'
+  | 'settings'
+  | 'episodes'
+  | 'speed'
+  | 'none';
+
+type StateSetter<T> = (value: T) => void;
+
+export interface VideoPlayerStore {
+  currentTime: number;
+  setCurrentTime: StateSetter<number>;
+
+  duration: number;
+  setDuration: StateSetter<number>;
+
+  isPaused: boolean;
+  setIsPaused: StateSetter<boolean>;
+
+  isBuffering: boolean;
+  setIsBuffering: StateSetter<boolean>;
+
+  resizeMode: EnumValues<ResizeMode>;
+  setResizeMode: StateSetter<EnumValues<ResizeMode>>;
+
+  playableDuration: number;
+  setPlayableDuration: StateSetter<number>;
+
+  onLoad: OnLoadData | null;
+  setOnLoad: StateSetter<OnLoadData>;
+
+  error: string | null;
+  setError: StateSetter<string | null>;
+
+  playBackRate: number;
+  playBackRateLabel: string | null;
+  setPlayBackRate: (rate: number, label: string) => void;
+
+  controlsVisible: boolean;
+  setControlsVisible: StateSetter<boolean>;
+
+  controlsTimer: number;
+  setControlsTimer: StateSetter<number>;
+
+  selectedAudioTrack: TrackSelection | null;
+  setSelectedAudioTrack: StateSetter<TrackSelection | null>;
+
+  selectedSubtitleTrack: TrackSelection | null;
+  setSelectedSubtitleTrack: StateSetter<TrackSelection | null>;
+
+  selectedVideoTrack: { type: SelectedVideoTrackType; value: number } | null;
+  setSelectedVideoTrack: StateSetter<{
+    type: SelectedVideoTrackType;
+    value: number;
+  } | null>;
+
+  activeSubtitle: SubtitleTrack | null;
+  setActiveSubtitle: StateSetter<SubtitleTrack | null>;
+
+  activeTrack: MediaTrack | null;
+  setActiveTrack: StateSetter<MediaTrack | null>;
+
+  playList: MediaTrack[];
+  setPlayList: StateSetter<MediaTrack[]>;
+
+  currentTrackIndex: number;
+  setCurrentTrackIndex: StateSetter<number>;
+
+  contentSeasons: MediaSeason[] | null;
+  setContentSeasons: StateSetter<MediaSeason[] | null>;
+
+  activeSeason: MediaSeason | null;
+  setActiveSeason: StateSetter<MediaSeason | null>;
+
+  settingsModal: {
+    isVisible: boolean;
+    action: SettingsAction;
+  };
+  setSettingsModal: StateSetter<{
+    isVisible: boolean;
+    action: SettingsAction;
+  }>;
+
+  maxBitRate: number | null;
+  setMaxBitRate: StateSetter<number | null>;
+
+  startWatchTime: number | null;
+  setStartWatchTime: StateSetter<number | null>;
+
+  isViewCounted: boolean;
+  setIsViewCounted: StateSetter<boolean>;
+
+  isSkipIntroVisible: boolean;
+  setIsSkipIntroVisible: StateSetter<boolean>;
+
+  isNextEpisodeVisible: boolean;
+  setIsNextEpisodeVisible: StateSetter<boolean>;
+
+  resetStore: () => void;
+}

package/src/VideoPlayer/store/videoPlayerStore.ts

@@ -0,0 +1,101 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 16 Aug 2025 at 10:26 AM
+ */
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { MMKV } from 'react-native-mmkv';
+import { ResizeMode, type EnumValues } from 'react-native-video';
+import type { SettingsAction, VideoPlayerStore } from './videoPlayer.type';
+
+export const storage = new MMKV({
+  id: 'videoPlayerStorage',
+  encryptionKey: 'videoPlayerKey',
+});
+
+export const mmkvStorage = {
+  setItem: (key: string, value: string) => storage.set(key, value),
+  getItem: (key: string) => storage.getString(key) ?? null,
+  removeItem: (key: string) => storage.delete(key),
+};
+
+const storeDataDefaults = {
+  currentTime: 0,
+  duration: 0,
+  isPaused: false,
+  isBuffering: false,
+  resizeMode: ResizeMode.CONTAIN,
+  controlsVisible: true,
+  controlsTimer: 6,
+  activeTrack: null,
+  playableDuration: 0,
+  settingsModal: { isVisible: false, action: 'none' as SettingsAction },
+  playBackRate: 1,
+  playBackRateLabel: null,
+  onLoad: null,
+  selectedAudioTrack: null,
+  selectedSubtitleTrack: null,
+  selectedVideoTrack: null,
+  activeSubtitle: null,
+  maxBitRate: null,
+  startWatchTime: null,
+  playList: [],
+  currentTrackIndex: 0,
+  contentSeasons: null,
+  activeSeason: null,
+  error: null,
+  isViewCounted: false,
+  isSkipIntroVisible: false,
+  isNextEpisodeVisible: false,
+};
+
+export const useVideoPlayerStore = create<VideoPlayerStore>()(
+  persist(
+    (set) => ({
+      ...storeDataDefaults,
+
+      setCurrentTime: (currentTime) => set({ currentTime }),
+      setDuration: (duration) => set({ duration }),
+      setIsPaused: (isPaused) => set({ isPaused }),
+      setIsBuffering: (isBuffering) => set({ isBuffering }),
+      setResizeMode: (resizeMode: EnumValues<ResizeMode>) =>
+        set({ resizeMode }),
+      setControlsVisible: (controlsVisible) => set({ controlsVisible }),
+      setControlsTimer: (controlsTimer) => set({ controlsTimer }),
+      setActiveTrack: (activeTrack) => set({ activeTrack }),
+      setPlayableDuration: (playableDuration) => set({ playableDuration }),
+      setSettingsModal: ({ isVisible, action }) =>
+        set({ settingsModal: { isVisible, action } }),
+      setPlayBackRate: (playBackRate, playBackRateLabel) =>
+        set({ playBackRate, playBackRateLabel }),
+      setOnLoad: (onLoad) => set({ onLoad }),
+      setSelectedAudioTrack: (selectedAudioTrack) =>
+        set({ selectedAudioTrack }),
+      setSelectedSubtitleTrack: (selectedSubtitleTrack: any) =>
+        set({ selectedSubtitleTrack }),
+      setSelectedVideoTrack: (selectedVideoTrack) =>
+        set({ selectedVideoTrack }),
+      setActiveSubtitle: (activeSubtitle) => set({ activeSubtitle }),
+      setMaxBitRate: (maxBitRate) => set({ maxBitRate }),
+      setStartWatchTime: (startWatchTime) => set({ startWatchTime }),
+      setPlayList: (playList) => set({ playList }),
+      setCurrentTrackIndex: (currentTrackIndex) => set({ currentTrackIndex }),
+      setContentSeasons: (contentSeasons) => set({ contentSeasons }),
+      setActiveSeason: (activeSeason) => set({ activeSeason }),
+      setError: (error) => set({ error }),
+      setIsViewCounted: (isViewCounted) => set({ isViewCounted }),
+      setIsSkipIntroVisible: (isSkipIntroVisible) =>
+        set({ isSkipIntroVisible }),
+      setIsNextEpisodeVisible: (isNextEpisodeVisible) =>
+        set({ isNextEpisodeVisible }),
+      resetStore: () => {
+        set(storeDataDefaults);
+        storage.clearAll();
+      },
+    }),
+    {
+      name: 'VideoPlayerStorage',
+      storage: createJSONStorage(() => mmkvStorage),
+    }
+  )
+);

package/src/VideoPlayer/utils/Display.ts

@@ -0,0 +1,14 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 14 Aug 2025 at 09:41 AM
+ */
+import { Dimensions } from 'react-native';
+
+const { height, width } = Dimensions.get('window');
+
+const setHeight = (h: number) => (height / 100) * h;
+const setWidth = (w: number) => (width / 100) * w;
+const fullWidth = Dimensions.get('window').width;
+const fullHeight = Dimensions.get('window').height;
+
+export default { setHeight, setWidth, fullWidth, fullHeight };

package/src/VideoPlayer/utils/PlatformSelector.ts

@@ -0,0 +1,18 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 08 Aug 2025 at 08:44 PM
+ */
+
+import { Platform } from 'react-native';
+
+class PlatformSelector {
+  public isAndroid(): boolean {
+    return Platform.OS === 'android';
+  }
+
+  public isIOS(): boolean {
+    return Platform.OS === 'ios';
+  }
+}
+
+export default new PlatformSelector();

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

@@ -0,0 +1,2 @@
+export * from './useVideoPlayerBack';
+export * from './useVideoResolutions';

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

@@ -0,0 +1,66 @@
+import { useEffect, useCallback, useRef } from 'react';
+import {
+  BackHandler,
+  Platform,
+  AppState,
+  type AppStateStatus,
+} from 'react-native';
+import { lockToPortrait } from '../lockOrientation';
+import { useVideoPlayerStore } from '../../store/videoPlayerStore';
+
+type UseVideoPlayerBackProps = {
+  navigation?: any;
+};
+
+export const useVideoPlayerBack = ({
+  navigation,
+}: UseVideoPlayerBackProps = {}) => {
+  const { resetStore } = useVideoPlayerStore();
+  const hasClosed = useRef(false); // prevent multiple calls
+
+  const handleClose = useCallback(() => {
+    if (hasClosed.current) return; // prevent loop
+    hasClosed.current = true;
+
+    resetStore();
+    lockToPortrait();
+
+    if (navigation?.canGoBack()) {
+      navigation.goBack();
+    }
+  }, [resetStore, navigation]);
+
+  useEffect(() => {
+    const backHandler =
+      Platform.OS === 'android'
+        ? BackHandler.addEventListener('hardwareBackPress', () => {
+            handleClose();
+            return true;
+          })
+        : undefined;
+
+    const unsubscribe = navigation?.addListener('beforeRemove', (e: any) => {
+      e.preventDefault();
+      handleClose();
+      navigation.dispatch(e.data.action);
+    });
+
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (nextAppState === 'inactive') {
+        handleClose();
+      }
+    };
+    const appStateListener = AppState.addEventListener(
+      'change',
+      handleAppStateChange
+    );
+
+    return () => {
+      backHandler?.remove();
+      unsubscribe?.();
+      appStateListener.remove();
+    };
+  }, [handleClose, navigation]);
+
+  return handleClose;
+};

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import type { MediaTrack } from '../../store/videoPlayer.type';
+
+export interface StreamInfo {
+  bandwidth: number;
+  width: number | string;
+  height: number | string;
+}
+
+async function getHLSBandwidthAndResolutions(
+  m3u8Url: string
+): Promise<StreamInfo[]> {
+  try {
+    if (!m3u8Url?.endsWith('.m3u8')) return [];
+
+    const { data } = await axios.get<string>(m3u8Url);
+    if (!data) return [];
+
+    const lines = data.split('\n');
+    const streams: StreamInfo[] = [];
+
+    let bandwidth: number | null = null;
+    let width: number | null = null;
+    let height: number | null = null;
+
+    for (const line of lines) {
+      if (line.startsWith('#EXT-X-STREAM-INF')) {
+        const bandwidthMatch = line.match(/BANDWIDTH=(\d+)/);
+        const resolutionMatch = line.match(/RESOLUTION=(\d+)x(\d+)/);
+
+        bandwidth = bandwidthMatch ? Number(bandwidthMatch[1]) : null;
+        if (resolutionMatch) {
+          width = Number(resolutionMatch[1]);
+          height = Number(resolutionMatch[2]);
+        }
+      }
+
+      if (
+        line.trim().endsWith('.m3u8') &&
+        bandwidth !== null &&
+        width !== null &&
+        height !== null
+      ) {
+        streams.push({ bandwidth, width, height });
+        bandwidth = null;
+        width = null;
+        height = null;
+      }
+    }
+
+    streams.sort((a, b) => (b.height as number) - (a.height as number));
+
+    const autoStream: StreamInfo = {
+      bandwidth: 0,
+      width: 'auto',
+      height: 'auto',
+    };
+
+    return [autoStream, ...streams];
+  } catch (error) {
+    console.error('Error fetching or parsing HLS stream:', error);
+    return [];
+  }
+}
+
+export interface Resolution {
+  height: number | 'auto';
+  bandwidth: number | null;
+}
+
+// Simple in-memory cache
+const resolutionCache: Record<string, Resolution[]> = {};
+
+export const useVideoResolutions = (track: MediaTrack | null) => {
+  const [resolutions, setResolutions] = useState<Resolution[]>([
+    { height: 'auto', bandwidth: null },
+  ]);
+
+  useEffect(() => {
+    if (!track) return;
+
+    const source = track.isTrailer ? track.trailerSource : track.sourceLink;
+    if (!source) return;
+
+    // Cache hit
+    if (resolutionCache[source]) {
+      setResolutions(resolutionCache[source]);
+      return;
+    }
+
+    const fetchResolutions = async () => {
+      try {
+        const data = await getHLSBandwidthAndResolutions(source);
+
+        const filteredData = data.filter(
+          (item) => typeof item.height === 'number'
+        );
+
+        const newResolutions: Resolution[] = [
+          { height: 'auto', bandwidth: null },
+          ...filteredData.map((item) => ({
+            height: item.height as number,
+            bandwidth: item.bandwidth,
+          })),
+        ];
+
+        resolutionCache[source] = newResolutions; // cache
+        setResolutions(newResolutions);
+      } catch (error) {
+        console.error('Failed to fetch video resolutions', error);
+      }
+    };
+
+    fetchResolutions();
+  }, [track]);
+
+  return resolutions;
+};

package/src/VideoPlayer/utils/index.ts

@@ -0,0 +1,7 @@
+export * from './lockOrientation';
+export * from './hooks';
+export * from './playerEvents';
+export * from './videoControl';
+export * from './videoSource';
+export * from './timeFormatter';
+export * from './videoRef';

package/src/VideoPlayer/utils/lockOrientation.ts

@@ -0,0 +1,34 @@
+import { StatusBar, Platform } from 'react-native';
+import Orientation from 'react-native-orientation-locker';
+import SystemNavigationBar from 'react-native-system-navigation-bar';
+import PlatformSelector from './PlatformSelector';
+
+export const lockToPortrait = () => {
+  try {
+    Orientation.lockToPortrait();
+    StatusBar.setHidden(false, 'fade');
+
+    if (PlatformSelector.isAndroid()) {
+      SystemNavigationBar.fullScreen(false);
+      SystemNavigationBar.navigationShow();
+    } else if (Platform.OS === 'ios') {
+    }
+  } catch (error) {
+    console.warn('Error locking to portrait:', error);
+  }
+};
+
+export const lockToLandscape = () => {
+  try {
+    Orientation.lockToLandscape();
+    StatusBar.setHidden(true, 'fade');
+
+    if (PlatformSelector.isAndroid()) {
+      SystemNavigationBar.fullScreen(true);
+      SystemNavigationBar.stickyImmersive();
+    } else if (Platform.OS === 'ios') {
+    }
+  } catch (error) {
+    console.warn('Error locking to landscape:', error);
+  }
+};

package/src/VideoPlayer/utils/playerEvents.ts

@@ -0,0 +1,97 @@
+import type {
+  OnBufferData,
+  OnLoadData,
+  OnLoadStartData,
+  OnProgressData,
+} from 'react-native-video';
+import { mmkvStorage, useVideoPlayerStore } from '../store/videoPlayerStore';
+
+import { handleNext } from '.';
+import type { MediaEpisode } from '../store/videoPlayer.type';
+import type { ExtendedWatchProgress } from './useWatchReporter';
+
+export const createPlayerEvents = () => {
+  const onProgress = ({
+    currentTime = 0,
+    playableDuration = 0,
+  }: OnProgressData) => {
+    const store = useVideoPlayerStore.getState(); // always fresh store
+    store.setCurrentTime(currentTime);
+    store.setPlayableDuration(playableDuration);
+
+    try {
+      mmkvStorage.setItem('currentTime', String(currentTime));
+    } catch (e) {
+      console.warn('MMKV save failed', e);
+    }
+
+    if (store.isBuffering) store.setIsBuffering(false);
+  };
+
+  const onLoad = (data: OnLoadData) => {
+    const store = useVideoPlayerStore.getState();
+    store.setDuration(data.duration || 0);
+    store.setOnLoad(data);
+
+    mmkvStorage.setItem('current_watch_time', '0');
+
+    store.setError(null);
+    store.setIsViewCounted(false);
+    store.setStartWatchTime(Date.now());
+    store.setIsNextEpisodeVisible(true);
+    store.setIsSkipIntroVisible(true);
+    store.setIsBuffering(false);
+  };
+
+  const onBuffer = ({ isBuffering }: OnBufferData) => {
+    const store = useVideoPlayerStore.getState();
+    if (isBuffering) store.setIsBuffering(true);
+    else setTimeout(() => store.setIsBuffering(false), 150);
+  };
+
+  const onEnd = ({
+    onPressEpisode,
+    reportProgress,
+    autoNext,
+  }: {
+    reportProgress: (event: ExtendedWatchProgress['event']) => void;
+    onPressEpisode: ({
+      episode,
+    }: {
+      episode: MediaEpisode;
+    }) => Promise<boolean>;
+    autoNext: boolean;
+  }) => {
+    reportProgress('COMPLETED');
+    const store = useVideoPlayerStore.getState();
+    if (!store.activeTrack?.isTrailer && store.activeTrack?.type === 'series') {
+      handleNext({ onPressEpisode, autoNext });
+    } else {
+      store.setIsPaused(true);
+    }
+  };
+
+  const onLoadStart = (_: OnLoadStartData) => {
+    const store = useVideoPlayerStore.getState();
+    store.setIsBuffering(true);
+  };
+
+  const LeaveVideoPlayer = () => {
+    const store = useVideoPlayerStore.getState();
+    store.setDuration(0);
+    store.setCurrentTime(0);
+    store.setPlayableDuration(0);
+    store.setIsPaused(false);
+    store.setSettingsModal({ isVisible: false, action: 'none' });
+    store.setIsBuffering(false);
+  };
+
+  return {
+    onProgress,
+    onLoad,
+    onBuffer,
+    onEnd,
+    onLoadStart,
+    LeaveVideoPlayer,
+  };
+};

package/src/VideoPlayer/utils/timeFormatter.ts

@@ -0,0 +1,47 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 16 Aug 2025 at 10:32 PM
+ * @description: Utility functions for formatting time
+ */
+
+export const formatDuration = (
+  totalSeconds: number,
+  hideSeconds = false,
+  addSpaces = false
+): string => {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const formatUnit = (value: number, label: string) =>
+    value ? `${value}${addSpaces ? ` ${label} ` : label}` : '';
+
+  const result =
+    formatUnit(hours, 'h') +
+    formatUnit(minutes, 'm') +
+    formatUnit(seconds, 's');
+
+  return hideSeconds
+    ? formatUnit(hours, 'h') + formatUnit(minutes, 'm')
+    : result;
+};
+
+export const formatTime = (seconds: number) => {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) {
+    return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+  }
+  return `${m}:${String(s).padStart(2, '0')}`;
+};
+
+export const formatTimeWithMs = (seconds: number): string => {
+  if (isNaN(seconds) || seconds < 0) return '00:00.000';
+  const totalMs = Math.floor(seconds * 1000);
+  const ms = totalMs % 1000;
+  const totalSec = Math.floor(totalMs / 1000);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  return `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}.${String(ms).padStart(3, '0')}`;
+};