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

package/src/VideoPlayer/utils/useWatchReporter.ts

@@ -0,0 +1,104 @@
+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;
+}
+
+export 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/videoControl.ts

@@ -0,0 +1,192 @@
+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;
+
+  // 👉 Check autoNext
+  if (!autoNext) {
+    // Just pause at the end, don’t go next
+    setIsPaused(true);
+    setControlsVisible(true);
+    return currentTrackIndex;
+  }
+
+  let nextIndex = currentTrackIndex + 1;
+
+  // 👉 No next episode? stop here
+  if (nextIndex >= playlist.length) {
+    setIsPaused(true);
+    setControlsVisible(true);
+    return currentTrackIndex;
+  }
+
+  const nextTrack = playlist[nextIndex];
+  if (!nextTrack) return currentTrackIndex;
+
+  // 👉 Trigger hook
+  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;
+  }
+
+  // 👉 Play next episode
+  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);
+
+  // ✅ Completed check (>= 95%)
+  const completed =
+    duration > 0 && Math.round(currentTimeFromStorage / duration) >= 0.95;
+
+  // ⏱ If no start time (pause/close before resuming)
+  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/videoRef.ts

@@ -0,0 +1,4 @@
+import { createRef } from 'react';
+import type { VideoRef } from 'react-native-video';
+
+export const videoRef = createRef<VideoRef>();

package/src/VideoPlayer/utils/videoSource.ts

@@ -0,0 +1,23 @@
+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/index.tsx

@@ -0,0 +1 @@
+export * from './VideoPlayer';