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

package/src/VideoPlayer/utils/player/useWatchReporter.ts

@@ -1,105 +0,0 @@
-import { useCallback } from 'react';
-import { useVideoPlayerStore, mmkvStorage } from '../../store/videoPlayerStore';
-import type { MediaTrack } from '../../store/videoPlayer.type';
-
-export type WatchEventType =
-  | 'VIEW_COUNT'
-  | 'COMPLETED'
-  | 'PROGRESS'
-  | 'EPISODE_CHANGE'
-  | 'VIDEO_CLOSE';
-
-export interface WatchProgressDetails {
-  contentId: string | null;
-  episodeId?: string | null;
-  contentType?: MediaTrack['type'];
-  currentTime: number;
-  totalWatchTime: number;
-  duration: number;
-  isVideoCompleted: boolean;
-  activeTrack: MediaTrack | null;
-}
-
-export interface ExtendedWatchProgress extends WatchProgressDetails {
-  event?: WatchEventType;
-}
-
-// Internal function - not exported to avoid conflict with videoControl.countWatchTime
-const countWatchTime = (
-  forceFlush = false
-): {
-  totalWatchTime: number;
-  completed: boolean;
-  currentTime: number;
-} => {
-  const { duration, setStartWatchTime, startWatchTime } =
-    useVideoPlayerStore.getState();
-
-  const currentTimeFromStorage = Number(
-    mmkvStorage.getItem('currentTime') || 0
-  );
-  const prevWatchTime = Number(mmkvStorage.getItem('current_watch_time') || 0);
-
-  const completed =
-    duration > 0 && Math.round(currentTimeFromStorage / duration) >= 0.95;
-
-  let totalTimeWatched = prevWatchTime;
-
-  if (startWatchTime) {
-    const elapsedTime = (Date.now() - startWatchTime) / 1000;
-    totalTimeWatched = prevWatchTime + elapsedTime;
-    mmkvStorage.setItem('current_watch_time', totalTimeWatched.toString());
-
-    setStartWatchTime(null);
-  }
-
-  if (forceFlush) {
-    const latest = Number(mmkvStorage.getItem('current_watch_time') || '0');
-    return {
-      totalWatchTime: latest,
-      completed,
-      currentTime: currentTimeFromStorage,
-    };
-  }
-
-  return {
-    totalWatchTime: totalTimeWatched,
-    completed,
-    currentTime: currentTimeFromStorage,
-  };
-};
-
-export const useWatchReporter = ({
-  onWatchProgress,
-}: {
-  onWatchProgress?: (progress: ExtendedWatchProgress) => void;
-}) => {
-  const reportProgress = useCallback(
-    (event: WatchEventType = 'PROGRESS', forcedCurrentTime?: number) => {
-      const { activeTrack, duration } = useVideoPlayerStore.getState();
-      if (!activeTrack) return;
-
-      const { totalWatchTime, completed, currentTime } = countWatchTime(
-        event === 'VIDEO_CLOSE' ||
-          event === 'EPISODE_CHANGE' ||
-          event === 'COMPLETED'
-      );
-
-      const progress: WatchProgressDetails = {
-        contentId: activeTrack?.contentId || null,
-        episodeId: activeTrack?.episodeId || null,
-        contentType: activeTrack?.type,
-        currentTime: forcedCurrentTime ?? currentTime,
-        totalWatchTime,
-        duration: duration || 0,
-        isVideoCompleted: completed,
-        activeTrack,
-      };
-
-      onWatchProgress?.({ ...progress, event });
-    },
-    [onWatchProgress]
-  );
-
-  return { reportProgress };
-};

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

@@ -1,5 +0,0 @@
-export * from './videoRef';
-export * from './videoSource';
-export * from './videoControl';
-export * from './videoResume';
-export { adVideoRef } from './videoRef';

package/src/VideoPlayer/utils/video/videoControl.ts

@@ -1,185 +0,0 @@
-import { mmkvStorage, useVideoPlayerStore } from '../../store/videoPlayerStore';
-import type { MediaEpisode } from '../../store/videoPlayer.type';
-
-export const handlePause = () => {
-  const { setIsPaused, startWatchTime, setStartWatchTime } =
-    useVideoPlayerStore.getState();
-
-  setIsPaused(true);
-
-  if (!startWatchTime) return;
-
-  const elapsedTime = (Date.now() - startWatchTime) / 1000;
-  const storedTime = Number(mmkvStorage.getItem('current_watch_time') ?? 0);
-
-  mmkvStorage.setItem(
-    'current_watch_time',
-    (storedTime + elapsedTime).toString()
-  );
-
-  setStartWatchTime(null);
-};
-
-interface HandleNextOptions {
-  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
-  autoNext?: boolean;
-}
-export const handleNext = async ({
-  onPressEpisode,
-  autoNext,
-}: HandleNextOptions): Promise<number | null> => {
-  const {
-    playList: playlist,
-    currentTrackIndex,
-    setCurrentTrackIndex,
-    setActiveTrack,
-    setCurrentTime,
-    setIsPaused,
-    setActiveSubtitle,
-    setPlayBackRate,
-    contentSeasons,
-    setActiveSeason,
-    setControlsVisible,
-    setSelectedSubtitleTrack,
-    setSelectedVideoTrack,
-    setMaxBitRate,
-    setDuration,
-  } = useVideoPlayerStore.getState();
-
-  if (!playlist?.length) return null;
-
-  if (!autoNext) {
-    setIsPaused(true);
-    setControlsVisible(true);
-    return currentTrackIndex;
-  }
-
-  let nextIndex = currentTrackIndex + 1;
-
-  if (nextIndex >= playlist.length) {
-    setIsPaused(true);
-    setControlsVisible(true);
-    return currentTrackIndex;
-  }
-
-  const nextTrack = playlist[nextIndex];
-  if (!nextTrack) return currentTrackIndex;
-
-  let isSuccess = true;
-  if (onPressEpisode) {
-    isSuccess = await onPressEpisode({
-      episode: {
-        id: nextTrack.episodeId || '',
-        title: nextTrack.episodeName ?? '',
-        contentId: nextTrack.contentId || '',
-        sourceLink: nextTrack.sourceLink,
-        thumbnail: nextTrack.thumbnail,
-        nextEpisodeAt: nextTrack.nextEpisodeAt,
-        publishDate: nextTrack.publishDate,
-        skipIntro: nextTrack.skipIntro,
-        description: nextTrack?.description || '',
-        duration: nextTrack?.duration || 0,
-        sourceType: nextTrack?.sourceType || 'HLS',
-        episodeNumber: nextTrack?.episodeNumber || 0,
-        subtitles: nextTrack?.subtitles ?? [],
-      },
-    });
-  }
-
-  if (!isSuccess) {
-    setIsPaused(true);
-    setControlsVisible(true);
-    return currentTrackIndex;
-  }
-
-  setIsPaused(false);
-  setCurrentTime(0);
-  setDuration(0);
-  setCurrentTrackIndex(nextIndex);
-  setActiveTrack(nextTrack);
-  setActiveSubtitle(null);
-  setSelectedVideoTrack(null);
-  setMaxBitRate(null);
-  setPlayBackRate(1, 'Normal');
-  setSelectedSubtitleTrack(null);
-
-  if (nextTrack.seasonId) {
-    const activeSeason = contentSeasons?.find(
-      (s) => s.id === nextTrack.seasonId
-    );
-    if (activeSeason) {
-      setActiveSeason(activeSeason);
-    }
-  }
-
-  return nextIndex;
-};
-
-export const viewCount = (): boolean => {
-  const { isViewCounted, setIsViewCounted, activeTrack } =
-    useVideoPlayerStore.getState();
-  if (!isViewCounted) {
-    if (activeTrack?.id) {
-      setIsViewCounted(true);
-      return true;
-    }
-  } else {
-    return false;
-  }
-  return false;
-};
-
-export const countWatchTime = (): {
-  totalWatchTime: number;
-  completed: boolean;
-  currentTime: number;
-} => {
-  const { activeTrack, duration, setStartWatchTime, startWatchTime } =
-    useVideoPlayerStore.getState();
-
-  const currentTimeFromStorage = Number(
-    mmkvStorage.getItem('currentTime') || 0
-  );
-  const prevWatchTime = Number(mmkvStorage.getItem('current_watch_time') || 0);
-
-  const completed =
-    duration > 0 && Math.round(currentTimeFromStorage / duration) >= 0.95;
-
-  if (!startWatchTime) {
-    return {
-      totalWatchTime: prevWatchTime,
-      completed,
-      currentTime: currentTimeFromStorage,
-    };
-  }
-
-  const elapsedTime = (Date.now() - startWatchTime) / 1000;
-
-  const totalTimeWatched = prevWatchTime + elapsedTime;
-  mmkvStorage.setItem('current_watch_time', totalTimeWatched.toString());
-
-  setStartWatchTime(null);
-
-  if (totalTimeWatched < 30) {
-    return {
-      totalWatchTime: 0,
-      completed: false,
-      currentTime: currentTimeFromStorage,
-    };
-  }
-
-  if (activeTrack?.id) {
-    return {
-      totalWatchTime: totalTimeWatched,
-      completed,
-      currentTime: currentTimeFromStorage,
-    };
-  }
-
-  mmkvStorage.setItem('current_watch_time', '0');
-  return {
-    totalWatchTime: 0,
-    completed: false,
-    currentTime: 0,
-  };
-};

package/src/VideoPlayer/utils/video/videoRef.ts

@@ -1,21 +0,0 @@
-import { createRef } from 'react';
-import type { VideoRef } from 'react-native-video';
-import type { AdsPlayerRef } from '../../../AdsPlayer/AdsPlayer';
-
-export const hideControlsStyles = {
-  hideForward: true,
-  hideDuration: true,
-  hideFullscreen: true,
-  hidePlayPause: true,
-  hideNavigationBarOnFullScreenMode: true,
-  hideNotificationBarOnFullScreenMode: true,
-  hideNext: true,
-  hidePosition: true,
-  hidePrevious: true,
-  hideRewind: true,
-  hideSeekBar: true,
-  hideSettingButton: true,
-};
-
-export const videoRef = createRef<VideoRef>();
-export const adVideoRef = createRef<AdsPlayerRef>();

package/src/VideoPlayer/utils/video/videoResume.ts

@@ -1,23 +0,0 @@
-import { videoRef } from './videoRef';
-import { useVideoPlayerStore } from '../../store/videoPlayerStore';
-import { useAdsPlayerStore } from '../../../AdsPlayer/store/adsPlayerStore';
-
-/**
- * Reusable function to resume video from ad
- * Handles seeking to resume time and unpausing the video
- */
-export const resumeVideoFromAd = (resumeTimeValue: number | null) => {
-  const { setIsPaused } = useVideoPlayerStore.getState();
-  const { setResumeTime } = useAdsPlayerStore.getState();
-
-  if (videoRef.current && resumeTimeValue !== null && resumeTimeValue > 0) {
-    setTimeout(() => {
-      videoRef.current?.seek(resumeTimeValue);
-      setIsPaused(false);
-      setResumeTime(null);
-    }, 100);
-  } else {
-    setIsPaused(false);
-    setResumeTime(null);
-  }
-};

package/src/VideoPlayer/utils/video/videoSource.ts

@@ -1,23 +0,0 @@
-import type { MediaTrack } from '../../store/videoPlayer.type';
-import type { ReactVideoSource } from 'react-native-video';
-
-interface UrlHandlerProps {
-  playList: MediaTrack[];
-  currentTrackIndex: number;
-}
-
-export const getVideoSource = ({
-  playList,
-  currentTrackIndex,
-}: UrlHandlerProps): ReactVideoSource => {
-  const track = playList?.[currentTrackIndex];
-  if (!track) return { uri: '' };
-
-  const uri = track.isTrailer ? track.trailerSource : track.sourceLink;
-  return { uri: encodeURI(uri?.trim() || '') ?? '' };
-};
-
-export const getEpisodeIndex = (
-  playList: MediaTrack[],
-  episodeId: string
-): number => playList.findIndex((item) => item.episodeId === episodeId);

package/src/VideoPlayer.tsx

@@ -1,181 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { type EdgeInsets } from 'react-native-safe-area-context';
-
-import VideoPlayerCore from './VideoPlayer/VideoPlayerCore';
-import { AdsPlayer, useAdsManager } from './AdsPlayer';
-import { useVideoPlayerStore } from './VideoPlayer/store/videoPlayerStore';
-import { useAdsPlayerStore } from './AdsPlayer/store/adsPlayerStore';
-import type {
-  MediaEpisode,
-  VideoAd,
-} from './VideoPlayer/store/videoPlayer.type';
-import type { VideoPlayerTheme } from './VideoPlayer/context';
-import {
-  createPlayerEvents,
-  useWatchReporter,
-  adVideoRef,
-  useAdEventHandler,
-  usePauseVideoOnAd,
-  useOrientationLock,
-  resumeVideoFromAd as resumeVideoFromAdUtil,
-  type ExtendedWatchProgress,
-} from './VideoPlayer/utils';
-
-export interface VideoPlayerProps {
-  onClose?: () => void;
-  isFocused?: boolean;
-  seekTime?: number | null;
-  mode?: 'fullscreen' | 'normal';
-  autoNext?: boolean;
-  event?: {
-    onPressEpisode?: ({
-      episode,
-    }: {
-      episode: MediaEpisode;
-    }) => Promise<boolean>;
-  };
-  theme?: Partial<VideoPlayerTheme>;
-  onWatchProgress?: (progress: ExtendedWatchProgress) => void;
-  ads?: VideoAd[];
-  onAdEnd?: (ad: VideoAd) => void;
-  onAdError?: (error: Error, ad: VideoAd) => void;
-  onAdTracking?: ({
-    ad,
-    trackingUrl,
-    event,
-  }: {
-    ad: VideoAd;
-    trackingUrl: string;
-    event: string;
-  }) => void;
-  insets: EdgeInsets;
-}
-
-const VideoPlayer: React.FC<VideoPlayerProps> = ({
-  onClose,
-  isFocused = true,
-  mode = 'fullscreen',
-  seekTime,
-  event,
-  autoNext = true,
-  theme,
-  onWatchProgress,
-  ads = [],
-  onAdEnd,
-  onAdError,
-  onAdTracking,
-  insets,
-}) => {
-  const isPaused = useVideoPlayerStore((state) => state.isPaused);
-  const activeTrack = useVideoPlayerStore((state) => state.activeTrack);
-  const currentAd = useAdsPlayerStore((state) => state.currentAd);
-  const isAdPlaying = useAdsPlayerStore((state) => state.isAdPlaying);
-  const resumeTime = useAdsPlayerStore((state) => state.resumeTime);
-
-  const playerEvents = useMemo(() => createPlayerEvents(), []);
-  const { reportProgress } = useWatchReporter({ onWatchProgress });
-  const { checkPostRollAds } = useAdsManager(ads, onAdTracking);
-
-  // Handle orientation locking
-  useOrientationLock({ isFocused, mode });
-
-  // Pause main video when ads start playing
-  usePauseVideoOnAd();
-
-  const { handleAdEnd, handleAdSkip, handleAdError } = useAdEventHandler({
-    resumeVideoFromAd: resumeVideoFromAdUtil,
-    resumeTime,
-    playerEvents,
-    reportProgress,
-    onPressEpisode: event?.onPressEpisode,
-    autoNext,
-    onAdEnd,
-    onAdError,
-  });
-
-  const handleVideoEnd = useCallback(() => {
-    // Don't show ads if it's a trailer
-    if (activeTrack?.isTrailer) {
-      return;
-    }
-    if (checkPostRollAds()) {
-      return;
-    }
-  }, [checkPostRollAds, activeTrack?.isTrailer]);
-
-  // Handle ad player close - reset both stores
-  const handleAdClose = useCallback(() => {
-    // Reset ads store
-    const { resetAdsStore } = useAdsPlayerStore.getState();
-    resetAdsStore();
-
-    // Reset video player store
-    const { resetStore } = useVideoPlayerStore.getState();
-    resetStore();
-
-    // Call the original onClose if provided
-    onClose?.();
-  }, [onClose]);
-
-  const showAdsOverlay =
-    ads.length > 0 && isAdPlaying && currentAd && !activeTrack?.isTrailer;
-
-  return (
-    <View style={styles.container}>
-      <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>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  mainPlayerWrapper: {
-    flex: 1,
-  },
-  mainPlayerHidden: {
-    opacity: 0,
-  },
-  adsOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1000,
-    backgroundColor: 'black',
-  },
-});
-
-export default React.memo(VideoPlayer);

package/src/index.tsx

@@ -1,3 +0,0 @@
-export * from './VideoPlayer/store';
-export * from './VideoPlayer/utils';
-export { default as VideoPlayer } from './VideoPlayer';