@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

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

@@ -1,494 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useMemo,
-  memo,
-} from 'react';
-import { View, Dimensions, StyleSheet } from 'react-native';
-import { Video } from 'react-native-video';
-import {
-  GestureDetector,
-  GestureHandlerRootView,
-} from 'react-native-gesture-handler';
-
-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';
-import type { IReelsWatchProgress } from './types';
-
-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;
-}
-
-const ReelItem: React.FC<IReelItemProps> = ({
-  reel,
-  data,
-  autoScroll,
-  videoHeight,
-  onLikePress,
-  onSharePress,
-  onBackPress,
-  isVisible,
-  isFullScreen,
-  preload,
-  activeEpisodeIndex,
-  onEpisodeSelect,
-  onSearchPress,
-  onLikeMorePress,
-  onEpisodeUnlockPress,
-  onViewCount,
-  theme,
-  onWatchProgress,
-  onAutoScrollNext,
-}) => {
-  // 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('Auto');
-  const [isLiked, setIsLiked] = useState(() => Boolean(data.isLiked));
-  const [likesCount, setLikesCount] = useState(() => Number(data.likes) || 0);
-  const [hasError, setHasError] = useState(false);
-
-  // 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 state when episode changes
-  useEffect(() => {
-    setCurrentTime(0);
-    setDuration(0);
-    setBuffering(true);
-    setHasError(false);
-  }, [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 createTapGesture = useCreateTapGesture(
-    isInOverlay,
-    isLocked,
-    handleLockedTap
-  );
-
-  const singleTap = useMemo(
-    () => createTapGesture(handleTogglePlay),
-    [createTapGesture, handleTogglePlay]
-  );
-
-  const doubleTap = useMemo(
-    () => createTapGesture(handleLikePress, 2),
-    [createTapGesture, handleLikePress]
-  );
-
-  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,
-      onPlaybackRateChange: setPlaybackRate,
-      onQualityChange: setVideoQuality,
-    }),
-    [playbackRate, videoQuality]
-  );
-
-  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={{ 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}
-                />
-              )}
-              {(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);
-                  }}
-                  onProgress={(p) => {
-                    setCurrentTime(p.currentTime);
-                    if (isVisible) {
-                      const safeDuration =
-                        duration > 0
-                          ? duration
-                          : Number((p as any).seekableDuration) || 0;
-                      const totalWatchTime = p.currentTime;
-                      const isVideoCompleted =
-                        safeDuration > 0 &&
-                        totalWatchTime >= safeDuration - 0.5;
-
-                      onWatchProgress?.({
-                        series: data,
-                        episode: reel,
-                        currentTime: p.currentTime,
-                        duration: safeDuration,
-                        isVideoCompleted,
-                        totalWatchTime,
-                      });
-
-                      if (
-                        p.currentTime >= MIN_VIEW_DURATION_SEC &&
-                        !viewCountedRef.current
-                      ) {
-                        viewCountedRef.current = true;
-                        onViewCount?.({ id: reel.episodeId });
-                      }
-                    }
-                  }}
-                  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>
-  );
-};
-
-// 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',
-  },
-});

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

@@ -1,184 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { View, StyleSheet, Animated, Easing } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import Svg, { Rect } from 'react-native-svg';
-
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
-
-interface AnimatedThreeLinesProps {
-  isActive: boolean;
-  size?: number;
-  color?: string;
-  style?: StyleProp<ViewStyle>;
-  animationDuration?: number;
-  delayBetweenLines?: number;
-}
-
-const AnimatedThreeLines: React.FC<AnimatedThreeLinesProps> = ({
-  isActive,
-  size = 16,
-  color = 'white',
-  style,
-  animationDuration = 600,
-  delayBetweenLines = 200,
-}) => {
-  const line1Anim = useRef(new Animated.Value(0)).current;
-  const line2Anim = useRef(new Animated.Value(0)).current;
-  const line3Anim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (isActive) {
-      // Custom bezier easing for ultra-smooth animation
-      const smoothEasing = Easing.bezier(0.4, 0.0, 0.2, 1); // Material Design easing
-
-      // Start continuous smooth animation
-      const createAnimation = (animValue: Animated.Value, delay: number) => {
-        return Animated.loop(
-          Animated.sequence([
-            Animated.delay(delay),
-            Animated.timing(animValue, {
-              toValue: 1,
-              duration: animationDuration,
-              easing: smoothEasing,
-              useNativeDriver: false, // SVG doesn't support native driver
-            }),
-            Animated.timing(animValue, {
-              toValue: 0,
-              duration: animationDuration,
-              easing: smoothEasing,
-              useNativeDriver: false, // SVG doesn't support native driver
-            }),
-          ]),
-          { iterations: -1 } // Infinite loop
-        );
-      };
-
-      const anim1 = createAnimation(line1Anim, 0);
-      const anim2 = createAnimation(line2Anim, delayBetweenLines);
-      const anim3 = createAnimation(line3Anim, delayBetweenLines * 2);
-
-      // Start all animations
-      anim1.start();
-      anim2.start();
-      anim3.start();
-
-      return () => {
-        anim1.stop();
-        anim2.stop();
-        anim3.stop();
-        // Reset values on cleanup
-        line1Anim.setValue(0);
-        line2Anim.setValue(0);
-        line3Anim.setValue(0);
-      };
-    } else {
-      // Smoothly reset to initial state when not active
-      Animated.parallel([
-        Animated.timing(line1Anim, {
-          toValue: 0,
-          duration: 200,
-          easing: Easing.out(Easing.ease),
-          useNativeDriver: false,
-        }),
-        Animated.timing(line2Anim, {
-          toValue: 0,
-          duration: 200,
-          easing: Easing.out(Easing.ease),
-          useNativeDriver: false,
-        }),
-        Animated.timing(line3Anim, {
-          toValue: 0,
-          duration: 200,
-          easing: Easing.out(Easing.ease),
-          useNativeDriver: false,
-        }),
-      ]).start();
-    }
-    return undefined;
-  }, [
-    isActive,
-    line1Anim,
-    line2Anim,
-    line3Anim,
-    animationDuration,
-    delayBetweenLines,
-  ]);
-
-  // Animate height and Y position for ultra-smooth up/down movement
-  // Using extended input range for smoother interpolation
-  const line1Height = line1Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [4, 7, 10],
-    extrapolate: 'clamp',
-  });
-
-  const line1Y = line1Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [12, 9, 6], // Move up as height increases
-    extrapolate: 'clamp',
-  });
-
-  const line2Height = line2Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [6, 9, 12],
-    extrapolate: 'clamp',
-  });
-
-  const line2Y = line2Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [10, 7, 4], // Move up as height increases
-    extrapolate: 'clamp',
-  });
-
-  const line3Height = line3Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [4, 6, 8],
-    extrapolate: 'clamp',
-  });
-
-  const line3Y = line3Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [12, 10, 8], // Move up as height increases
-    extrapolate: 'clamp',
-  });
-
-  return (
-    <View style={[styles.container, style]}>
-      <Svg width={size} height={size} viewBox="0 0 16 16">
-        <AnimatedRect
-          x={1}
-          y={line1Y}
-          width={2.5}
-          height={line1Height}
-          rx={1.25}
-          fill={color}
-        />
-        <AnimatedRect
-          x={6}
-          y={line2Y}
-          width={2.5}
-          height={line2Height}
-          rx={1.25}
-          fill={color}
-        />
-        <AnimatedRect
-          x={11}
-          y={line3Y}
-          width={2.5}
-          height={line3Height}
-          rx={1.25}
-          fill={color}
-        />
-      </Svg>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AnimatedThreeLines;