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

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

@@ -1,569 +0,0 @@
-/**
- * @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,
-  },
-});