@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.1

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

@@ -1,21 +1,44 @@
-import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  memo,
+} from 'react';
 import { View, Dimensions, StyleSheet } from 'react-native';
-import ReelSeriesOverlay from './ReelSeriesOverlay';
-import ReelSeriesDetailsModal from './ReelSeriesDetailsModal';
-import type { ISeriesEpisode, ISeriesItem } from './types';
-import { Video, type VideoRef } from 'react-native-video';
-import FastImage from 'react-native-fast-image';
+import { Video } from 'react-native-video';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
-import { Pause, Play } from 'lucide-react-native';
-import { moderateScale } from 'react-native-size-matters';
-import LottieView from 'lottie-react-native';
-import DoubleTapAnim from '../../../assets/animations/heart.json';
 
-const { width } = Dimensions.get('window');
+import type {
+  ILikeMoreData,
+  ISeriesEpisode,
+  ISeriesItem,
+  ModalState,
+} 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 from 'react-native-fast-image';
+
+const INITIAL_MODAL_STATE: ModalState = {
+  type: 'none',
+  isVisible: false,
+};
 
 interface IReelItemProps {
   reel: ISeriesEpisode;
@@ -28,7 +51,12 @@ interface IReelItemProps {
   isVisible: boolean;
   preload: boolean;
   activeEpisodeIndex: number;
-  onEpisodeSelect: (index: number) => void;
+  onEpisodeSelect: (episode: ISeriesEpisode) => void;
+  theme: ITheme;
+  onBackPress?: () => void;
+  onSearchPress?: () => void;
+  onLikeMorePress?: (item: ILikeMoreData) => void;
+  onEpisodeUnlockPress?: (episode: ISeriesEpisode) => void;
 }
 
 const ReelItem: React.FC<IReelItemProps> = ({
@@ -38,296 +66,367 @@ const ReelItem: React.FC<IReelItemProps> = ({
   videoHeight,
   onLikePress,
   onSharePress,
+  onBackPress,
   isVisible,
   preload,
   activeEpisodeIndex,
   onEpisodeSelect,
+  onSearchPress,
+  onLikeMorePress,
+  onEpisodeUnlockPress,
+  theme,
 }) => {
-  const videoRef = useRef<VideoRef>(null);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const [isPaused, setIsPaused] = useState<boolean>(false);
-  const [paused, setPaused] = useState<string | null>(null);
-  const [modalVisible, setModalVisible] = useState(false);
+  // 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 [videoLoaded, setVideoLoaded] = useState(false);
-  const [showLikeAnim, setShowLikeAnim] = useState<boolean>(false);
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const [videoQuality, setVideoQuality] = useState('Auto');
+  const [isLiked, setIsLiked] = useState(data.isLiked);
+  const [likesCount, setLikesCount] = useState(data.likes);
+  const [hasError, setHasError] = useState(false);
+
+  // Refs
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const likeAnimTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 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);
+  }, []);
+
+  // Effects
+  useEffect(() => {
+    setIsLiked(data.isLiked);
+    setLikesCount(data.likes);
+  }, [data.isLiked, data.likes]);
 
   useEffect(() => {
-    setIsPaused(!isVisible);
     if (!isVisible) {
-      setPaused(null);
-      setVideoLoaded(false);
+      setShowPauseIcon(null);
+      setModal((prev) =>
+        prev.isVisible ? { ...prev, isVisible: false } : prev
+      );
+      setUnlockModalVisible(false);
+      setUnlockModalDismissed(false);
+      setHasError(false);
     }
   }, [isVisible]);
 
-  // Cleanup timeout on unmount
+  useEffect(() => {
+    if (isVisible && isLocked && !unlockModalVisible && !unlockModalDismissed) {
+      setIsPaused(true);
+      setUnlockModalDismissed(true);
+    }
+  }, [isVisible, isLocked, unlockModalVisible, unlockModalDismissed]);
+
   useEffect(() => {
     return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
+      clearTimeoutSafely(timeoutRef);
+      clearTimeoutSafely(likeAnimTimeoutRef);
     };
   }, []);
 
-  const videoUri = reel.videoUrl || '';
-  // Handle like
   const handleLikePress = useCallback(() => {
-    const newLiked = !data.isLiked;
+    const newLiked = !isLiked;
+    const newCount = newLiked ? likesCount + 1 : Math.max(0, likesCount - 1);
+
+    setIsLiked(newLiked);
+    setLikesCount(newCount);
+
+    // Update data object for parent component
     data.isLiked = newLiked;
-    data.likes += newLiked ? 1 : -1;
+    data.likes = newCount;
+
     if (newLiked) {
       setShowLikeAnim(true);
-      setTimeout(() => setShowLikeAnim(false), 1200);
+      setTimeoutSafely(
+        likeAnimTimeoutRef,
+        () => setShowLikeAnim(false),
+        LIKE_ANIM_TIMEOUT
+      );
     }
+
     onLikePress?.(reel.episodeId, newLiked);
-  }, [data, onLikePress, reel.episodeId]);
+  }, [isLiked, likesCount, data, onLikePress, reel.episodeId]);
 
-  const handleEpisodeSelect = (index: number) => {
-    if (data && index >= 0 && index < data.episodes.length) {
-      onEpisodeSelect(index);
-      setModalVisible(false);
+  const handleTogglePlay = useCallback(() => {
+    setIsPaused((prev) => !prev);
+    setShowPauseIcon(true);
+    if (isPaused) {
+      setTimeoutSafely(
+        timeoutRef,
+        () => setShowPauseIcon(false),
+        PAUSE_ICON_TIMEOUT
+      );
+    } else {
+      setShowPauseIcon(true);
     }
-  };
-
-  const handleVideoLoad = () => {
-    setVideoLoaded(true);
-  };
+  }, [isPaused]);
+
+  const handleEpisodeSelect = useCallback(
+    (episode: ISeriesEpisode) => {
+      closeAllModals();
+      if (episode.isLocked) {
+        setTimeout(() => openUnlockModal(), UNLOCK_MODAL_DELAY);
+      } else {
+        onEpisodeSelect(episode);
+      }
+    },
+    [closeAllModals, onEpisodeSelect, openUnlockModal]
+  );
 
-  const handleTogglePlay = useCallback(() => {
-    // Use functional updates to ensure we get the current state
-    setIsPaused((prevIsPaused) => {
-      const newIsPaused = !prevIsPaused;
-      const currentState = newIsPaused ? 'paused' : 'play';
+  const handleVideoEnd = useCallback(() => {
+    if (!autoScroll) return;
+    const nextEpisode = data.episodes?.[activeEpisodeIndex + 1];
+    if (nextEpisode) {
+      onEpisodeSelect(nextEpisode);
+    }
+  }, [autoScroll, data.episodes, activeEpisodeIndex, onEpisodeSelect]);
+
+  // Gestures
+  const handleLockedTap = useCallback(() => {
+    closeAllModals();
+    openUnlockModal();
+  }, [closeAllModals, openUnlockModal]);
+
+  const isInOverlay = useIsInOverlay(rightThreshold, bottomThreshold);
+  const createTapGesture = useCreateTapGesture(
+    isInOverlay,
+    isLocked,
+    handleLockedTap
+  );
 
-      setPaused(currentState);
+  const singleTap = useMemo(
+    () => createTapGesture(handleTogglePlay),
+    [createTapGesture, handleTogglePlay]
+  );
 
-      // Clear any existing timeout
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
+  const doubleTap = useMemo(
+    () => createTapGesture(handleLikePress, 2),
+    [createTapGesture, handleLikePress]
+  );
 
-      // Set new timeout
-      timeoutRef.current = setTimeout(() => {
-        if (currentState === 'play') {
-          setPaused(null);
-        }
-      }, 700);
+  const combinedGesture = useCombinedGesture(singleTap, doubleTap);
 
-      return newIsPaused;
-    });
-  }, []);
+  // Memoized props objects
+  const unlockProps = useMemo(
+    () => ({
+      isVisible: unlockModalVisible,
+      onClose: closeUnlockModal,
+    }),
+    [unlockModalVisible, closeUnlockModal]
+  );
 
-  const singleTap = Gesture.Tap()
-    .maxDuration(300)
-    .onStart((event) => {
-      // Check if the tap is in the overlay area (right side icons or bottom area)
-      const { x, y } = event;
-      const screenWidth = width;
-      const screenHeight = videoHeight;
+  const contentProps = useMemo(
+    () => ({
+      series: data,
+      episode: reel,
+      activeIndex: activeEpisodeIndex,
+    }),
+    [data, reel, activeEpisodeIndex]
+  );
 
-      // Right side icons area (right 80px)
-      const rightIconsArea = x > screenWidth - 80;
+  const videoProps = useMemo(
+    () => ({
+      currentTime,
+      duration,
+      paused: finalPause,
+      buffering,
+      showCenterControls,
+      isLocked,
+      hasError,
+    }),
+    [
+      currentTime,
+      duration,
+      finalPause,
+      buffering,
+      showCenterControls,
+      isLocked,
+      hasError,
+    ]
+  );
 
-      // Bottom area (bottom 150px)
-      const bottomArea = y > screenHeight - 150;
+  const likesProps = useMemo(
+    () => ({
+      liked: isLiked,
+      count: likesCount,
+      showAnimation: showLikeAnim,
+    }),
+    [isLiked, likesCount, showLikeAnim]
+  );
 
-      // If tap is in overlay area, don't trigger play/pause
-      if (rightIconsArea || bottomArea) {
-        return;
-      }
-      handleTogglePlay();
-    })
-    .runOnJS(true);
-
-  const doubleTap = Gesture.Tap()
-    .maxDuration(300)
-    .numberOfTaps(2)
-    .onStart((event) => {
-      // Check if the tap is in the overlay area (right side icons or bottom area)
-      const { x, y } = event;
-      const screenWidth = width;
-      const screenHeight = videoHeight;
-
-      // Right side icons area (right 80px)
-      const rightIconsArea = x > screenWidth - 80;
-
-      // Bottom area (bottom 150px)
-      const bottomArea = y > screenHeight - 150;
-
-      // If tap is in overlay area, don't trigger like
-      if (rightIconsArea || bottomArea) {
-        return;
-      }
+  const actionsProps = useMemo(
+    () => ({
+      onLike: handleLikePress,
+      onEpisodeSelect: handleEpisodeSelect,
+      onLikeMore: onLikeMorePress,
+      onShare: onSharePress,
+      onUnLock: openUnlockModal,
+      onUnlockPress: onEpisodeUnlockPress,
+    }),
+    [
+      handleLikePress,
+      handleEpisodeSelect,
+      onLikeMorePress,
+      onSharePress,
+      onEpisodeUnlockPress,
+      openUnlockModal,
+    ]
+  );
 
-      handleLikePress();
-    })
-    .runOnJS(true);
+  const navigationProps = useMemo(
+    () => ({
+      onBack: onBackPress,
+      onSearch: onSearchPress,
+    }),
+    [onBackPress, onSearchPress]
+  );
 
-  const combined = Gesture.Exclusive(doubleTap, singleTap);
+  const settingsProps = useMemo(
+    () => ({
+      playbackRate,
+      quality: videoQuality,
+      onPlaybackRateChange: setPlaybackRate,
+      onQualityChange: setVideoQuality,
+    }),
+    [playbackRate, videoQuality]
+  );
 
+  // ----------------------- RENDER -----------------------
   return (
-    <View
-      style={[
-        styles.container,
-        { height: videoHeight, backgroundColor: '#000' },
-      ]}
-    >
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <GestureDetector gesture={combined}>
-          <View style={{ flex: 1 }} collapsable={false}>
-            {/* Video Player */}
-            {!videoLoaded && (
-              <FastImage
-                source={{
-                  uri: data.thumbnail,
-                  priority: FastImage.priority.high,
-                }}
-                defaultSource={require('../../../assets/img/play.png')}
-                resizeMode={FastImage.resizeMode.cover}
-              />
-            )}
-
-            {isVisible || preload ? (
-              <Video
-                poster={data.thumbnail}
-                ref={videoRef}
-                source={{ uri: videoUri }}
-                style={StyleSheet.absoluteFillObject}
-                resizeMode="cover"
-                posterResizeMode="cover"
-                repeat
-                paused={isPaused}
-                onLoad={(e) => setDuration(e.duration)}
-                onProgress={({ currentTime: ct }) => setCurrentTime(ct)}
-                ignoreSilentSwitch="ignore"
-                playWhenInactive={false}
-                playInBackground={false}
-                controls={false}
-                controlsStyles={{
-                  hideForward: true,
-                  hideDuration: true,
-                  hideFullscreen: true,
-                  hidePlayPause: true,
-                  hideNavigationBarOnFullScreenMode: true,
-                  hideNotificationBarOnFullScreenMode: true,
-                  hideNext: true,
-                  hidePosition: true,
-                  hidePrevious: true,
-                  hideRewind: true,
-                  hideSeekBar: true,
-                  hideSettingButton: true,
-                }}
-                disableFocus={true}
-                shutterColor="transparent"
-                onReadyForDisplay={handleVideoLoad}
-                onEnd={() => {
-                  if (autoScroll) {
-                    onEpisodeSelect(activeEpisodeIndex + 1);
-                  }
-                }}
-              />
-            ) : null}
-
-            {showLikeAnim && (
-              <View style={styles.lottieContainer}>
-                <LottieView
-                  style={styles.lottie}
-                  source={DoubleTapAnim}
-                  autoPlay
-                  loop={false}
+    <View style={[styles.container, { height: videoHeight }]}>
+      <MediaControlsProvider
+        theme={theme}
+        modal={modal}
+        setModal={setModal}
+        unlock={unlockProps}
+        content={contentProps}
+        video={videoProps}
+        likes={likesProps}
+        actions={actionsProps}
+        navigation={navigationProps}
+        settings={settingsProps}
+      >
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <GestureDetector gesture={combinedGesture}>
+            <View style={{ flex: 1 }}>
+              {buffering && (
+                <FastImage
+                  source={{
+                    uri: thumbnail,
+                    priority: FastImage.priority.high,
+                  }}
+                  resizeMode={FastImage.resizeMode.cover}
+                  defaultSource={require('../../../assets/img/play.png')}
+                  style={StyleSheet.absoluteFillObject}
                 />
-              </View>
-            )}
-
-            {paused !== null && (
-              <View
-                style={[
-                  styles.playPauseButtonContainer,
-                  { height: videoHeight },
-                ]}
-              >
-                <View style={styles.shadow} pointerEvents="none">
-                  {paused === 'paused' ? (
-                    <Pause color={'#fff'} size={moderateScale(25)} />
-                  ) : (
-                    <Play color={'#fff'} size={moderateScale(25)} />
-                  )}
-                </View>
-              </View>
-            )}
-
-            {/* Overlay */}
-            <ReelSeriesOverlay
-              data={data}
-              reel={reel}
-              currentTime={currentTime}
-              duration={duration}
-              onLikePress={handleLikePress}
-              onPlayPausePress={() => setIsPaused((prev) => !prev)}
-              onEpisodesPress={() => {
-                setModalVisible(true);
-              }}
-              onSharePress={onSharePress}
-              activeEpisodeIndex={activeEpisodeIndex}
-            />
-
-            {/* Modal */}
-            <ReelSeriesDetailsModal
-              visible={modalVisible}
-              onClose={() => setModalVisible(false)}
-              reel={reel}
-              data={data}
-              activeEpisodeIndex={activeEpisodeIndex}
-              onEpisodeSelect={handleEpisodeSelect}
-            />
-          </View>
-        </GestureDetector>
-      </GestureHandlerRootView>
+              )}
+              {(isVisible || preload) && (
+                <Video
+                  ref={videoRef}
+                  source={{ uri: videoUri }}
+                  paused={finalPause}
+                  repeat
+                  resizeMode="cover"
+                  poster={thumbnail}
+                  posterResizeMode="cover"
+                  rate={playbackRate}
+                  onLoadStart={() => {
+                    setBuffering(true);
+                    setHasError(false);
+                  }}
+                  onBuffer={({ isBuffering }) => setBuffering(isBuffering)}
+                  onReadyForDisplay={() => {
+                    setBuffering(false);
+                    setHasError(false);
+                  }}
+                  onLoad={(info) => {
+                    setDuration(info.duration);
+                    setHasError(false);
+                  }}
+                  onProgress={(p) => setCurrentTime(p.currentTime)}
+                  onEnd={handleVideoEnd}
+                  style={StyleSheet.absoluteFillObject}
+                  controls={false}
+                  controlsStyles={videoControlsStyles}
+                  ignoreSilentSwitch="ignore"
+                  playInBackground={false}
+                  onError={() => {
+                    setBuffering(false);
+                    setHasError(true);
+                    setIsPaused(true);
+                  }}
+                />
+              )}
+            </View>
+          </GestureDetector>
+        </GestureHandlerRootView>
+      </MediaControlsProvider>
     </View>
   );
 };
 
-const areEqual = (prevProps: IReelItemProps, nextProps: IReelItemProps) => {
+// Memo comparison
+const areEqual = (prev: IReelItemProps, next: IReelItemProps) => {
   return (
-    prevProps?.reel?.episodeId === nextProps?.reel?.episodeId &&
-    prevProps?.isVisible === nextProps?.isVisible
+    prev.reel.episodeId === next.reel.episodeId &&
+    prev.isVisible === next.isVisible &&
+    prev.preload === next.preload &&
+    prev.activeEpisodeIndex === next.activeEpisodeIndex &&
+    prev.videoHeight === next.videoHeight &&
+    prev.data.isLiked === next.data.isLiked &&
+    prev.data.likes === next.data.likes &&
+    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,
-    position: 'relative',
     overflow: 'hidden',
-    flex: 1,
-    flexGrow: 1,
-  },
-  playPauseButtonContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  shadow: {
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    padding: moderateScale(10),
-    borderRadius: moderateScale(50),
-  },
-  lottieContainer: {
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  lottie: {
-    width: '100%',
-    height: '100%',
+    backgroundColor: '#000',
   },
 });