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

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

@@ -0,0 +1,607 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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 { useTheme } from '../../../../theme';
+import NavigateToMore from '../components/NavigateToMore';
+import type {
+  IGetSectionData,
+  MoreFetchData,
+  IHistoryV1,
+} 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
+// ============================================================================
+
+type Props = {
+  section_id: string;
+  title: string;
+  historyData?: IHistoryV1[];
+  type: IGetSectionData['type'];
+  moreFetchDataHistory?: MoreFetchData<IHistoryV1>;
+  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: IHistoryV1;
+  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 as IContentData['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';
+
+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,
+}) => {
+  const flatListRef = useRef<FlatList<IHistoryV1 | number>>(null);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const isLoadingState = isLoading || isLoadingHistory;
+
+  const { data, loadMoreData, pagination, isPaginating } =
+    usePaginatedSection<IHistoryV1>(
+      section_id,
+      moreFetchDataHistory,
+      initialData,
+      isLoadingState
+    );
+
+  const listData = useMemo(() => data ?? [], [data]);
+
+  const styles = useMemo(
+    () => getStyles(appliedTheme, itemWidth, borderRadius),
+    [appliedTheme, itemWidth, borderRadius]
+  );
+
+  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<IHistoryV1> = 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: IHistoryV1 | number, index: number) =>
+      isLoadingState
+        ? `skeleton-${index}`
+        : (item as IHistoryV1)._id || index.toString(),
+    [isLoadingState]
+  );
+
+  const renderFlatListItem = useCallback(
+    ({ item, index }: { item: IHistoryV1 | number; index: number }) => {
+      if (isLoadingState) {
+        return renderSkeletonItem(index);
+      }
+      return renderItem({
+        item: item as IHistoryV1,
+        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) : undefined}
+      />
+    </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.absoluteFill,
+      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);