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

package/src/components/Content/Card/NowWatching/NowWatching.tsx

@@ -1,624 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 28 Jun 2025 at 12:45 PM
- */
-
-import React, { memo, useCallback, useMemo, useRef, useEffect } from 'react';
-import {
-  View,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-  type ListRenderItem,
-  type TextStyle,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import LinearGradient from 'react-native-linear-gradient';
-import FastImage from 'react-native-fast-image';
-import { Play } from 'lucide-react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import NavigateToMore from '../components/NavigateToMore';
-import type { IGetSectionData, MoreFetchData } from '../../../../types';
-import type { ITheme, ThemeOverride } from '../../../../theme/themes';
-import { Text } from '../../../Text';
-import { RFValue } from 'react-native-responsive-fontsize';
-import RentOrBuyIcon from '../components/RentOrBuyIcon';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-// ============================================================================
-// Constants
-// ============================================================================
-const ITEM_WIDTH = moderateScale(230);
-const BORDER_RADIUS = moderateScale(8);
-const DEFAULT_SKELETON_COUNT = 4;
-const ASPECT_RATIO = 9 / 16;
-const PROGRESS_ANIMATION_DURATION = 500;
-const TOUCH_OPACITY = 0.9;
-const END_REACHED_THRESHOLD = 0.5;
-const ITEM_MARGIN_RIGHT = moderateScale(12);
-const FIRST_ITEM_MARGIN_LEFT = moderateScale(10);
-const LIST_PADDING_RIGHT = moderateScale(15);
-const GRADIENT_COLORS = ['rgba(0,0,0,0.95)', 'transparent'];
-const GRADIENT_START = { x: 0, y: 1 };
-const GRADIENT_END = { x: 0, y: 0 };
-const PROGRESS_BG_COLOR = '#4F4E4E';
-const PROGRESS_BORDER_RADIUS = 6;
-const SKELETON_TITLE_WIDTH = '80%';
-const SKELETON_SUBTITLE_WIDTH = '60%';
-const SKELETON_BORDER_RADIUS = 4;
-const SHADOW_COLOR = '#000';
-const SHADOW_OFFSET = { width: 0, height: 2 };
-const SHADOW_OPACITY = 0.08;
-const SHADOW_RADIUS = 4;
-const ELEVATION = 2;
-const PLAY_ICON_SIZE = moderateScale(20);
-const PLAY_ICON_CONTAINER_SIZE = moderateScale(32);
-const PLAY_ICON_CONTAINER_RADIUS = moderateScale(16);
-const SKELETON_TITLE_HEIGHT = verticalScale(10);
-const SKELETON_SUBTITLE_HEIGHT = verticalScale(8);
-const SKELETON_HEADER_WIDTH = moderateScale(100);
-const SKELETON_HEADER_HEIGHT = verticalScale(14);
-const SKELETON_HEADER_BORDER_RADIUS = moderateScale(4);
-const SKELETON_HEADER_MARGIN_LEFT = moderateScale(12);
-const SKELETON_HEADER_MARGIN_BOTTOM = verticalScale(6);
-const INFO_CONTAINER_BOTTOM = 6;
-const INFO_CONTAINER_HORIZONTAL = 8;
-const TEXT_SECTION_PADDING_RIGHT = 8;
-const SUBTITLE_OPACITY = 0.85;
-
-// ============================================================================
-// Types
-// ============================================================================
-export interface IHistoryItem {
-  _id: string;
-  content: IContentData;
-  content_type: 'movie' | 'series' | 'live_stream';
-  currentTime: number;
-  duration: number;
-  season_number?: number;
-  episode_number?: number;
-  completed: boolean;
-  current_season?: any;
-  current_episode?: any;
-}
-
-type Props = {
-  section_id: string;
-  title: string;
-  historyData?: IHistoryItem[];
-  type: IGetSectionData['type'];
-  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-  theme?: ThemeOverride;
-  onPressItem?: (item: IContentData) => void;
-  onPressMore?: (params: {
-    section_id: IGetSectionData['_id'];
-    name: IGetSectionData['name'];
-    type: IGetSectionData['type'];
-  }) => void;
-  renderItemImage?: (params: {
-    item: IContentData;
-    index: number;
-  }) => React.ReactNode;
-  itemWidth?: number;
-  borderRadius?: number;
-  skeletonCount?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  itemStyle?: StyleProp<ViewStyle>;
-  isLoading?: boolean;
-  isLoadingHistory?: boolean;
-};
-
-type NowWatchingItemProps = {
-  item: IHistoryItem;
-  index: number;
-  isLast: boolean;
-  appliedTheme: ITheme;
-  onPressItem?: (item: IContentData) => void;
-  renderItemImage?: (params: {
-    item: IContentData;
-    index: number;
-  }) => React.ReactNode;
-  itemStyle?: StyleProp<ViewStyle>;
-  itemWidth: number;
-  borderRadius: number;
-};
-
-// ============================================================================
-// Helper Components
-// ============================================================================
-const NowWatchingItem = memo<NowWatchingItemProps>(
-  ({
-    item,
-    index,
-    isLast,
-    appliedTheme,
-    onPressItem,
-    renderItemImage,
-    itemStyle,
-    itemWidth,
-    borderRadius,
-  }) => {
-    // ========================================================================
-    // Progress Calculation
-    // ========================================================================
-    const percentage = useMemo(() => {
-      if (!item.duration || item.duration === 0) return 0;
-      return Math.max(
-        0,
-        Math.min(100, Math.round((item.currentTime / item.duration) * 100))
-      );
-    }, [item.currentTime, item.duration]);
-
-    // ========================================================================
-    // Animation
-    // ========================================================================
-    const progress = useSharedValue(0);
-
-    useEffect(() => {
-      progress.value = withTiming(percentage, {
-        duration: PROGRESS_ANIMATION_DURATION,
-      });
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [percentage]);
-
-    const animatedProgressStyle = useAnimatedStyle(() => ({
-      width: `${progress.value}%`,
-    }));
-
-    // ========================================================================
-    // Styles
-    // ========================================================================
-    const styles = useMemo(
-      () => getStyles(appliedTheme, itemWidth, borderRadius),
-      [appliedTheme, itemWidth, borderRadius]
-    );
-
-    const isFirstItem = index === 0;
-    const itemMarginStyle = isLast ? { marginRight: ITEM_MARGIN_RIGHT } : null;
-
-    // ========================================================================
-    // Render
-    // ========================================================================
-    return (
-      <TouchableOpacity
-        style={[
-          styles.item,
-          itemStyle,
-          isFirstItem && styles.firstItem,
-          itemMarginStyle,
-        ]}
-        activeOpacity={TOUCH_OPACITY}
-        onPress={() => onPressItem?.(item.content)}
-      >
-        <View style={styles.cardWrapper}>
-          {renderItemImage ? (
-            renderItemImage({ item: item.content, index })
-          ) : (
-            <FastImage
-              source={{
-                uri: item.content?.thumbnail || item.content?.poster,
-                cache: FastImage.cacheControl.immutable,
-                priority: FastImage.priority.normal,
-              }}
-              style={styles.poster}
-            >
-              <RentOrBuyIcon
-                theme={appliedTheme}
-                content_offering_type={item.content.content_offering_type}
-              />
-              <LinearGradient
-                colors={GRADIENT_COLORS}
-                start={GRADIENT_START}
-                end={GRADIENT_END}
-                style={styles.gradientOverlay}
-              />
-            </FastImage>
-          )}
-          <View style={styles.infoContainer}>
-            <View style={styles.textSection}>
-              <Text style={styles.titleText} numberOfLines={1}>
-                {item.content?.name}
-              </Text>
-              {item.content?.type === 'series' && (
-                <Text style={styles.subTitleText}>
-                  {item.season_number ? `S${item.season_number}` : ''}
-                  {item.episode_number ? ` E${item.episode_number}` : ''}
-                </Text>
-              )}
-              <View style={styles.progressBackground}>
-                <Animated.View
-                  style={[styles.progressForeground, animatedProgressStyle]}
-                />
-              </View>
-            </View>
-            <View style={styles.playIconWrapper}>
-              <Play
-                size={PLAY_ICON_SIZE}
-                color={appliedTheme.colors.primary}
-                fill={appliedTheme.colors.primary}
-              />
-            </View>
-          </View>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-);
-
-NowWatchingItem.displayName = 'NowWatchingItem';
-
-// ============================================================================
-// Main Component
-// ============================================================================
-const NowWatching: React.FC<Props> = ({
-  section_id,
-  title,
-  type,
-  historyData: initialData,
-  moreFetchDataHistory,
-  isLoading = false,
-  theme,
-  titleStyle,
-  onPressItem,
-  onPressMore,
-  renderItemImage,
-  itemWidth = ITEM_WIDTH,
-  borderRadius = BORDER_RADIUS,
-  skeletonCount = DEFAULT_SKELETON_COUNT,
-  containerStyle,
-  itemStyle,
-  isLoadingHistory,
-}) => {
-  // ========================================================================
-  // Refs & Hooks
-  // ========================================================================
-  const flatListRef = useRef<FlatList<IHistoryItem | number>>(null);
-  const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  // ========================================================================
-  // Data Processing
-  // ========================================================================
-  const isLoadingState = isLoading || isLoadingHistory;
-
-  const { data, loadMoreData, pagination, isPaginating } =
-    usePaginatedSection<IHistoryItem>(
-      section_id,
-      moreFetchDataHistory,
-      initialData,
-      isLoadingState
-    );
-
-  const listData = useMemo(() => data ?? [], [data]);
-
-  // ========================================================================
-  // Styles
-  // ========================================================================
-  const styles = useMemo(
-    () => getStyles(appliedTheme, itemWidth, borderRadius),
-    [appliedTheme, itemWidth, borderRadius]
-  );
-
-  // ========================================================================
-  // Event Handlers
-  // ========================================================================
-  const handlePressMore = useCallback(() => {
-    onPressMore?.({ section_id, name: title, type });
-  }, [onPressMore, section_id, title, type]);
-
-  const handleEndReached = useCallback(() => {
-    const canLoadMore =
-      !onEndReachedCalledDuringMomentum.current &&
-      pagination?.hasNextPage &&
-      pagination?.nextPage;
-
-    if (canLoadMore) {
-      onEndReachedCalledDuringMomentum.current = true;
-      loadMoreData(pagination.nextPage);
-    }
-  }, [loadMoreData, pagination]);
-
-  const handleMomentumScrollBegin = useCallback(() => {
-    onEndReachedCalledDuringMomentum.current = false;
-  }, []);
-
-  // ========================================================================
-  // Render Functions
-  // ========================================================================
-  const renderItem: ListRenderItem<IHistoryItem> = useCallback(
-    ({ item, index }) => {
-      const isLast = index === listData.length - 1;
-      return (
-        <NowWatchingItem
-          item={item}
-          index={index}
-          isLast={isLast}
-          appliedTheme={appliedTheme}
-          onPressItem={onPressItem}
-          renderItemImage={renderItemImage}
-          itemStyle={itemStyle}
-          itemWidth={itemWidth}
-          borderRadius={borderRadius}
-        />
-      );
-    },
-    [
-      listData.length,
-      appliedTheme,
-      onPressItem,
-      renderItemImage,
-      itemStyle,
-      itemWidth,
-      borderRadius,
-    ]
-  );
-
-  const renderSkeletonItem = useCallback(
-    (index: number) => {
-      const isFirstItem = index === 0;
-      return (
-        <View
-          key={index}
-          style={[
-            styles.item,
-            itemStyle,
-            isFirstItem && styles.firstItem,
-            { marginRight: ITEM_MARGIN_RIGHT },
-          ]}
-        >
-          <SkeletonPlaceholder
-            backgroundColor={appliedTheme.colors.skeletonBaseColor}
-            highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          >
-            <View style={styles.cardWrapper}>
-              <View style={styles.poster} />
-              <View style={styles.infoContainer}>
-                <View style={styles.textSection}>
-                  <View style={styles.skeletonTitle} />
-                  <View style={styles.skeletonSubTitle} />
-                  <View style={styles.progressBackground} />
-                </View>
-                <View style={styles.playIconSkeleton} />
-              </View>
-            </View>
-          </SkeletonPlaceholder>
-        </View>
-      );
-    },
-    [
-      styles.item,
-      styles.firstItem,
-      styles.cardWrapper,
-      styles.poster,
-      styles.infoContainer,
-      styles.textSection,
-      styles.skeletonTitle,
-      styles.skeletonSubTitle,
-      styles.progressBackground,
-      styles.playIconSkeleton,
-      itemStyle,
-      appliedTheme.colors,
-    ]
-  );
-
-  // ========================================================================
-  // FlatList Helpers
-  // ========================================================================
-  const flatListData = isLoadingState ? Array(skeletonCount).fill(0) : listData;
-
-  const keyExtractor = useCallback(
-    (item: IHistoryItem | number, index: number) =>
-      isLoadingState
-        ? `skeleton-${index}`
-        : (item as IHistoryItem)._id || index.toString(),
-    [isLoadingState]
-  );
-
-  const renderFlatListItem = useCallback(
-    ({ item, index }: { item: IHistoryItem | number; index: number }) => {
-      if (isLoadingState) {
-        return renderSkeletonItem(index);
-      }
-      return renderItem({
-        item: item as IHistoryItem,
-        index,
-        separators: {
-          highlight: () => {},
-          unhighlight: () => {},
-          updateProps: () => {},
-        },
-      });
-    },
-    [isLoadingState, renderSkeletonItem, renderItem]
-  );
-
-  // ========================================================================
-  // Early Returns
-  // ========================================================================
-  const hasNoData =
-    !isLoadingState &&
-    (!initialData || initialData.length === 0) &&
-    listData.length === 0 &&
-    !moreFetchDataHistory;
-
-  if (hasNoData) {
-    return null;
-  }
-
-  // ========================================================================
-  // Computed Values
-  // ========================================================================
-  const shouldShowTitle = !isLoadingState && title;
-  const shouldShowSkeletonHeader = isLoadingState;
-
-  // ========================================================================
-  // Render
-  // ========================================================================
-  return (
-    <View style={[styles.container, containerStyle]}>
-      {shouldShowTitle && (
-        <NavigateToMore
-          title={title}
-          onPress={handlePressMore}
-          titleStyle={[
-            styles.title,
-            { color: appliedTheme.colors.textPrimary },
-            titleStyle,
-          ]}
-          containerStyle={styles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
-        />
-      )}
-      {shouldShowSkeletonHeader && (
-        <SkeletonPlaceholder
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        >
-          <SkeletonPlaceholder.Item
-            width={SKELETON_HEADER_WIDTH}
-            height={SKELETON_HEADER_HEIGHT}
-            borderRadius={SKELETON_HEADER_BORDER_RADIUS}
-            marginLeft={SKELETON_HEADER_MARGIN_LEFT}
-            marginBottom={SKELETON_HEADER_MARGIN_BOTTOM}
-          />
-        </SkeletonPlaceholder>
-      )}
-      <FlatList
-        ref={flatListRef}
-        horizontal
-        data={flatListData}
-        keyExtractor={keyExtractor}
-        renderItem={renderFlatListItem}
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.listContent}
-        onEndReached={handleEndReached}
-        onEndReachedThreshold={END_REACHED_THRESHOLD}
-        onMomentumScrollBegin={handleMomentumScrollBegin}
-        ListFooterComponent={isPaginating ? renderSkeletonItem(0) : null}
-      />
-    </View>
-  );
-};
-
-// ============================================================================
-// Styles
-// ============================================================================
-const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
-  StyleSheet.create({
-    container: {
-      marginVertical: verticalScale(6),
-    },
-    listContent: {
-      paddingRight: LIST_PADDING_RIGHT,
-    },
-    item: {
-      marginRight: ITEM_MARGIN_RIGHT,
-    },
-    firstItem: {
-      marginLeft: FIRST_ITEM_MARGIN_LEFT,
-    },
-    navigateToMoreContainer: {
-      paddingHorizontal: FIRST_ITEM_MARGIN_LEFT,
-      marginBottom: verticalScale(8),
-    },
-    title: {
-      fontSize: RFValue(13),
-      fontWeight: '600',
-    },
-    cardWrapper: {
-      width: itemWidth,
-      borderRadius,
-      overflow: 'hidden',
-      backgroundColor: theme.colors.surfaceVariant,
-      shadowColor: SHADOW_COLOR,
-      shadowOffset: SHADOW_OFFSET,
-      shadowOpacity: SHADOW_OPACITY,
-      shadowRadius: SHADOW_RADIUS,
-      elevation: ELEVATION,
-    },
-    poster: {
-      width: '100%',
-      height: itemWidth * ASPECT_RATIO,
-      borderRadius,
-      overflow: 'hidden',
-      backgroundColor: theme.colors.surfaceVariant,
-    },
-    gradientOverlay: {
-      ...StyleSheet.absoluteFillObject,
-      borderRadius,
-    },
-    infoContainer: {
-      position: 'absolute',
-      bottom: INFO_CONTAINER_BOTTOM,
-      left: INFO_CONTAINER_HORIZONTAL,
-      right: INFO_CONTAINER_HORIZONTAL,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    textSection: {
-      flex: 1,
-      paddingRight: TEXT_SECTION_PADDING_RIGHT,
-    },
-    titleText: {
-      color: theme.colors.white,
-      fontWeight: '600',
-      fontSize: RFValue(11),
-    },
-    subTitleText: {
-      color: theme.colors.white,
-      fontSize: RFValue(10),
-      opacity: SUBTITLE_OPACITY,
-      marginTop: verticalScale(2),
-    },
-    progressBackground: {
-      marginTop: verticalScale(4),
-      height: verticalScale(4),
-      backgroundColor: PROGRESS_BG_COLOR,
-      borderRadius: PROGRESS_BORDER_RADIUS,
-      width: '100%',
-    },
-    progressForeground: {
-      height: '100%',
-      borderRadius: PROGRESS_BORDER_RADIUS,
-      backgroundColor: theme.colors.primary,
-    },
-    playIconWrapper: {
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: PLAY_ICON_CONTAINER_SIZE,
-      height: PLAY_ICON_CONTAINER_SIZE,
-      borderRadius: PLAY_ICON_CONTAINER_RADIUS,
-      backgroundColor: theme.colors.blueBackground,
-    },
-    skeletonTitle: {
-      width: SKELETON_TITLE_WIDTH,
-      height: SKELETON_TITLE_HEIGHT,
-      borderRadius: SKELETON_BORDER_RADIUS,
-      marginBottom: verticalScale(4),
-    },
-    skeletonSubTitle: {
-      width: SKELETON_SUBTITLE_WIDTH,
-      height: SKELETON_SUBTITLE_HEIGHT,
-      borderRadius: SKELETON_BORDER_RADIUS,
-      marginBottom: verticalScale(6),
-    },
-    playIconSkeleton: {
-      width: PLAY_ICON_CONTAINER_SIZE,
-      height: PLAY_ICON_CONTAINER_SIZE,
-      borderRadius: PLAY_ICON_CONTAINER_RADIUS,
-    },
-  });
-
-export default memo(NowWatching);