@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

package/src/components/Reels/ReelsSeries/ReelsSeriesItem.tsx

@@ -0,0 +1,569 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  memo,
+} from 'react';
+import { View, Dimensions, StyleSheet } from 'react-native';
+import {
+  SelectedVideoTrackType,
+  Video,
+  type OnProgressData,
+} from 'react-native-video';
+import {
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+
+import type {
+  ILikeMoreData,
+  IReelsWatchProgress,
+  ISeriesEpisode,
+  ISeriesItem,
+  ModalState,
+  OnVideoProgress,
+  OnVideoProgressCurrentTrack,
+} from './types';
+import type { ITheme } from '../../../theme';
+import {
+  videoRef,
+  videoControlsStyles,
+  PAUSE_ICON_TIMEOUT,
+  LIKE_ANIM_TIMEOUT,
+  UNLOCK_MODAL_DELAY,
+  useOverlayThresholds,
+  useIsInOverlay,
+  useCreateTapGesture,
+  useCombinedGesture,
+} from '../utils/Controls';
+import { clearTimeoutSafely, setTimeoutSafely } from '../utils';
+import MediaControlsProvider from './MediaControls/MediaControlsProvider';
+import FastImage, { type ImageStyle } from 'react-native-fast-image';
+import type { QualityOption } from './utils/quality';
+
+const INITIAL_MODAL_STATE: ModalState = {
+  type: 'none',
+  isVisible: false,
+};
+
+const MIN_VIEW_DURATION_SEC = 5;
+
+interface IReelItemProps {
+  reel: ISeriesEpisode;
+  data: ISeriesItem;
+  autoScroll?: boolean;
+  videoHeight: number;
+  onLikePress?: (data: { id: string; liked: boolean }) => void;
+  onEpisodesPress?: () => void;
+  onSharePress?: () => void;
+  isVisible: boolean;
+  preload: boolean;
+  activeEpisodeIndex: number;
+  isFullScreen: boolean;
+  onEpisodeSelect: (episode: ISeriesEpisode) => void;
+  theme: ITheme;
+  onBackPress?: () => void;
+  onSearchPress?: () => void;
+  onLikeMorePress?: (item: ILikeMoreData) => void;
+  onEpisodeUnlockPress?: (episode: ISeriesEpisode) => void;
+  onViewCount?: (data: { id: string }) => void;
+  onWatchProgress?: (data: IReelsWatchProgress) => void;
+  onAutoScrollNext?: () => void;
+  onVideoProgress?: (progress: OnVideoProgress) => void;
+}
+
+const ReelItem: React.FC<IReelItemProps> = ({
+  reel,
+  data,
+  autoScroll,
+  videoHeight,
+  onLikePress,
+  onSharePress,
+  onBackPress,
+  isVisible,
+  isFullScreen,
+  preload,
+  activeEpisodeIndex,
+  onEpisodeSelect,
+  onSearchPress,
+  onLikeMorePress,
+  onEpisodeUnlockPress,
+  onViewCount,
+  theme,
+  onWatchProgress,
+  onAutoScrollNext,
+  onVideoProgress,
+}) => {
+  // State
+  const [buffering, setBuffering] = useState(true);
+  const [isPaused, setIsPaused] = useState(false);
+  const [showPauseIcon, setShowPauseIcon] = useState<boolean | null>(null);
+  const [modal, setModal] = useState<ModalState>(INITIAL_MODAL_STATE);
+  const [unlockModalVisible, setUnlockModalVisible] = useState(false);
+  const [unlockModalDismissed, setUnlockModalDismissed] = useState(false);
+  const [showLikeAnim, setShowLikeAnim] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const [videoQuality, setVideoQuality] = useState<QualityOption>({
+    quality: 'Auto',
+    url: '',
+  });
+  const [isLiked, setIsLiked] = useState(() => Boolean(data.isLiked));
+  const [likesCount, setLikesCount] = useState(() => Number(data.likes) || 0);
+  const [hasError, setHasError] = useState(false);
+  const [activeResolution, setActiveResolution] = useState<string>('');
+
+  // Refs
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const likeAnimTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const viewCountedRef = useRef(false);
+  const autoScrolledRef = useRef(false);
+
+  // Constants
+  const isLocked = reel.isLocked;
+  const videoUri = useMemo(() => reel.videoUrl || '', [reel.videoUrl]);
+  const thumbnail = data.thumbnail;
+
+  // Overlay thresholds
+  const { rightThreshold, bottomThreshold } = useOverlayThresholds(videoHeight);
+
+  // Computed values
+  const finalPause = useMemo(
+    () => isLocked || !isVisible || modal.isVisible || isPaused || hasError,
+    [isLocked, isVisible, modal.isVisible, isPaused, hasError]
+  );
+
+  const showCenterControls = useMemo(
+    () => showPauseIcon || buffering || isLocked || hasError,
+    [showPauseIcon, buffering, isLocked, hasError]
+  );
+
+  // Handlers
+  const closeUnlockModal = useCallback(() => {
+    setUnlockModalVisible(false);
+    setUnlockModalDismissed(true); // Prevent auto-open after manual close
+  }, []);
+
+  const closeAllModals = useCallback(() => {
+    setModal(INITIAL_MODAL_STATE);
+    closeUnlockModal();
+  }, [closeUnlockModal]);
+
+  const openUnlockModal = useCallback(() => {
+    setUnlockModalVisible(true);
+  }, []);
+
+  // Reset view-counted flag when episode changes
+  useEffect(() => {
+    viewCountedRef.current = false;
+    autoScrolledRef.current = false;
+  }, [reel.episodeId]);
+
+  // Reset video timing and quality state when episode changes
+  useEffect(() => {
+    setCurrentTime(0);
+    setDuration(0);
+    setBuffering(true);
+    setHasError(false);
+    setVideoQuality({
+      quality: 'Auto',
+      url: '',
+    });
+    setActiveResolution('');
+  }, [reel.episodeId]);
+
+  // Sync like state from parent when episode changes or parent updates data
+  useEffect(() => {
+    setIsLiked(Boolean(data.isLiked));
+    setLikesCount(Number(data.likes) || 0);
+  }, [reel.episodeId, data.isLiked, data.likes]);
+
+  useEffect(() => {
+    if (!isVisible) {
+      setShowPauseIcon(null);
+      setModal((prev) =>
+        prev.isVisible ? { ...prev, isVisible: false } : prev
+      );
+      setUnlockModalVisible(false);
+      setUnlockModalDismissed(false);
+      setHasError(false);
+    }
+  }, [isVisible]);
+
+  useEffect(() => {
+    if (isVisible && isLocked && !unlockModalVisible && !unlockModalDismissed) {
+      setIsPaused(true);
+      setUnlockModalDismissed(true);
+    }
+  }, [isVisible, isLocked, unlockModalVisible, unlockModalDismissed]);
+
+  useEffect(() => {
+    return () => {
+      clearTimeoutSafely(timeoutRef);
+      clearTimeoutSafely(likeAnimTimeoutRef);
+    };
+  }, []);
+
+  const handleLikePress = useCallback(() => {
+    const newLiked = !isLiked;
+    const count = Number(likesCount) || 0;
+    const newCount = newLiked ? count + 1 : Math.max(0, count - 1);
+
+    setIsLiked(newLiked);
+    setLikesCount(newCount);
+
+    if (newLiked) {
+      setShowLikeAnim(true);
+      setTimeoutSafely(
+        likeAnimTimeoutRef,
+        () => setShowLikeAnim(false),
+        LIKE_ANIM_TIMEOUT
+      );
+    }
+
+    // Parent should update its data (e.g. in onLikePress) so that like state
+    // persists across scroll and re-mounts
+    onLikePress?.({ id: reel.episodeId, liked: newLiked });
+  }, [isLiked, likesCount, onLikePress, reel.episodeId]);
+
+  const handleTogglePlay = useCallback(() => {
+    setIsPaused((prev) => !prev);
+    setShowPauseIcon(true);
+    if (isPaused) {
+      setTimeoutSafely(
+        timeoutRef,
+        () => setShowPauseIcon(false),
+        PAUSE_ICON_TIMEOUT
+      );
+    } else {
+      setShowPauseIcon(true);
+    }
+  }, [isPaused]);
+
+  const handleEpisodeSelect = useCallback(
+    (episode: ISeriesEpisode) => {
+      closeAllModals();
+      if (episode.isLocked) {
+        setTimeout(() => openUnlockModal(), UNLOCK_MODAL_DELAY);
+      } else {
+        onEpisodeSelect(episode);
+      }
+    },
+    [closeAllModals, onEpisodeSelect, openUnlockModal]
+  );
+
+  // Gestures
+  const handleLockedTap = useCallback(() => {
+    closeAllModals();
+    openUnlockModal();
+  }, [closeAllModals, openUnlockModal]);
+
+  const isInOverlay = useIsInOverlay(rightThreshold, bottomThreshold);
+  const singleTap = useCreateTapGesture(
+    handleTogglePlay,
+    1,
+    isInOverlay,
+    isLocked,
+    handleLockedTap
+  );
+
+  const doubleTap = useCreateTapGesture(
+    handleLikePress,
+    2,
+    isInOverlay,
+    isLocked,
+    handleLockedTap
+  );
+
+  const combinedGesture = useCombinedGesture(singleTap, doubleTap);
+
+  // Memoized props objects
+  const unlockProps = useMemo(
+    () => ({
+      isVisible: unlockModalVisible,
+      onClose: closeUnlockModal,
+    }),
+    [unlockModalVisible, closeUnlockModal]
+  );
+
+  const contentProps = useMemo(
+    () => ({
+      series: data,
+      episode: reel,
+      activeIndex: activeEpisodeIndex,
+    }),
+    [data, reel, activeEpisodeIndex]
+  );
+
+  const videoProps = useMemo(
+    () => ({
+      currentTime,
+      duration,
+      paused: finalPause,
+      buffering,
+      showCenterControls,
+      isLocked,
+      hasError,
+    }),
+    [
+      currentTime,
+      duration,
+      finalPause,
+      buffering,
+      showCenterControls,
+      isLocked,
+      hasError,
+    ]
+  );
+
+  const likesProps = useMemo(
+    () => ({
+      liked: isLiked,
+      count: likesCount,
+      showAnimation: showLikeAnim,
+    }),
+    [isLiked, likesCount, showLikeAnim]
+  );
+
+  const actionsProps = useMemo(
+    () => ({
+      onLike: handleLikePress,
+      onEpisodeSelect: handleEpisodeSelect,
+      onLikeMore: onLikeMorePress,
+      onShare: onSharePress,
+      onUnLock: openUnlockModal,
+      onUnlockPress: onEpisodeUnlockPress,
+    }),
+    [
+      handleLikePress,
+      handleEpisodeSelect,
+      onLikeMorePress,
+      onSharePress,
+      onEpisodeUnlockPress,
+      openUnlockModal,
+    ]
+  );
+
+  const navigationProps = useMemo(
+    () => ({
+      onBack: onBackPress,
+      onSearch: onSearchPress,
+    }),
+    [onBackPress, onSearchPress]
+  );
+
+  const settingsProps = useMemo(
+    () => ({
+      playbackRate,
+      quality: videoQuality,
+      currentQuality: activeResolution,
+      onPlaybackRateChange: setPlaybackRate,
+      onQualityChange: (quality: QualityOption) => {
+        setVideoQuality(quality);
+      },
+    }),
+    [playbackRate, videoQuality, activeResolution]
+  );
+
+  const handleVideoEnd = useCallback(() => {
+    if (!autoScroll || isLocked || autoScrolledRef.current) {
+      return;
+    }
+    autoScrolledRef.current = true;
+    onAutoScrollNext?.();
+  }, [autoScroll, isLocked, onAutoScrollNext]);
+
+  // ----------------------- RENDER -----------------------
+  return (
+    <View style={[styles.container, { height: videoHeight }]}>
+      <MediaControlsProvider
+        theme={theme}
+        modal={modal}
+        setModal={setModal}
+        unlock={unlockProps}
+        content={contentProps}
+        video={videoProps}
+        likes={likesProps}
+        actions={actionsProps}
+        isFullScreen={isFullScreen}
+        navigation={navigationProps}
+        settings={settingsProps}
+      >
+        <GestureHandlerRootView style={styles.flex1}>
+          <GestureDetector gesture={combinedGesture}>
+            <View style={styles.flex1}>
+              {(isVisible || preload) && (
+                <Video
+                  ref={isVisible ? videoRef : undefined}
+                  source={{ uri: videoUri }}
+                  paused={finalPause}
+                  repeat={!autoScroll}
+                  resizeMode="cover"
+                  poster={thumbnail}
+                  posterResizeMode="cover"
+                  rate={playbackRate}
+                  onLoadStart={() => {
+                    setBuffering(true);
+                    setHasError(false);
+                  }}
+                  onBuffer={({ isBuffering }) => setBuffering(isBuffering)}
+                  onReadyForDisplay={() => {
+                    setBuffering(false);
+                    setHasError(false);
+                  }}
+                  onLoad={(info) => {
+                    if (
+                      Number(info.duration) > 0 &&
+                      Number(info.duration) < 100000
+                    ) {
+                      setDuration(Number(info.duration));
+                    }
+                    setHasError(false);
+
+                    // Get initial selected quality
+                    const selectedTrack = info.videoTracks?.find(
+                      (t: any) => t.selected
+                    );
+                    if (selectedTrack?.height) {
+                      setActiveResolution(`${selectedTrack.height}p`);
+                    }
+                  }}
+                  onVideoTracks={(e) => {
+                    const selectedTrack = e.videoTracks?.find(
+                      (t) => t.selected
+                    );
+                    if (selectedTrack?.height) {
+                      setActiveResolution(`${selectedTrack.height}p`);
+                    }
+                  }}
+                  onProgress={(p: OnProgressData) => {
+                    const safeDuration =
+                      duration > 0 ? duration : Number(p.seekableDuration) || 0;
+
+                    if (isVisible) {
+                      const currentTrack: OnVideoProgressCurrentTrack | null =
+                        safeDuration > 0
+                          ? {
+                              seriesId: data.id,
+                              seriesTitle: data.title,
+                              episodeId: reel.episodeId,
+                              episodeNumber: reel.episodeNumber,
+                              episodeName: reel.episodeName,
+                              videoDuration: safeDuration,
+                            }
+                          : null;
+
+                      const progress: OnVideoProgress = {
+                        ...p,
+                        currentTrack,
+                      };
+                      onVideoProgress?.(progress);
+                    }
+                    setCurrentTime(p.currentTime);
+                    if (isVisible) {
+                      const totalWatchTime = p.currentTime;
+                      const isVideoCompleted =
+                        safeDuration > 0 &&
+                        totalWatchTime >= safeDuration - 0.5;
+
+                      onWatchProgress?.({
+                        series: data,
+                        episode: reel,
+                        currentTime: p.currentTime,
+                        duration: safeDuration,
+                        isVideoCompleted,
+                        totalWatchTime,
+                        currentQuality: activeResolution,
+                      });
+
+                      if (
+                        p.currentTime >= MIN_VIEW_DURATION_SEC &&
+                        !viewCountedRef.current
+                      ) {
+                        viewCountedRef.current = true;
+                        onViewCount?.({ id: reel.episodeId });
+                      }
+                    }
+                  }}
+                  onEnd={handleVideoEnd}
+                  style={StyleSheet.absoluteFill}
+                  controls={false}
+                  controlsStyles={videoControlsStyles}
+                  ignoreSilentSwitch="ignore"
+                  selectedVideoTrack={{
+                    type:
+                      videoQuality.quality === 'Auto'
+                        ? SelectedVideoTrackType.AUTO
+                        : SelectedVideoTrackType.RESOLUTION,
+                    value:
+                      videoQuality.quality === 'Auto'
+                        ? undefined
+                        : Number(videoQuality.quality.replace('p', '')),
+                  }}
+                  playInBackground={false}
+                  onError={() => {
+                    setBuffering(false);
+                    setHasError(true);
+                    setIsPaused(true);
+                  }}
+                />
+              )}
+              {/* Thumbnail rendered AFTER Video so it sits on top while buffering */}
+              {buffering && (
+                <FastImage
+                  source={{
+                    uri: thumbnail,
+                    priority: FastImage.priority.high,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                  defaultSource={require('../../../assets/img/play.png')}
+                  style={StyleSheet.absoluteFill as ImageStyle}
+                />
+              )}
+            </View>
+          </GestureDetector>
+        </GestureHandlerRootView>
+      </MediaControlsProvider>
+    </View>
+  );
+};
+
+// Memo comparison – compare likes numerically so string/number don't cause extra re-renders
+const areEqual = (prev: IReelItemProps, next: IReelItemProps) => {
+  const prevLikes = Number(prev.data.likes) || 0;
+  const nextLikes = Number(next.data.likes) || 0;
+  return (
+    prev.reel.episodeId === next.reel.episodeId &&
+    prev.isVisible === next.isVisible &&
+    prev.preload === next.preload &&
+    prev.activeEpisodeIndex === next.activeEpisodeIndex &&
+    prev.videoHeight === next.videoHeight &&
+    Boolean(prev.data.isLiked) === Boolean(next.data.isLiked) &&
+    prevLikes === nextLikes &&
+    prev.reel.isLocked === next.reel.isLocked &&
+    prev.reel.videoUrl === next.reel.videoUrl &&
+    prev.isVisible === next.isVisible
+  );
+};
+
+export default memo(ReelItem, areEqual);
+
+const { width } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    width,
+    overflow: 'hidden',
+  },
+  flex1: {
+    flex: 1,
+  },
+});