@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.3

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

@@ -35,6 +35,50 @@ 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;
@@ -61,7 +105,6 @@ type Props = {
     name: IGetSectionData['name'];
     type: IGetSectionData['type'];
   }) => void;
-
   renderItemImage?: (params: {
     item: IContentData;
     index: number;
@@ -76,10 +119,25 @@ type Props = {
   isLoadingHistory?: boolean;
 };
 
-const ITEM_WIDTH = moderateScale(230);
-const BORDER_RADIUS = moderateScale(8);
+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;
+};
 
-const NowWatchingItem = memo(
+// ============================================================================
+// Helper Components
+// ============================================================================
+const NowWatchingItem = memo<NowWatchingItemProps>(
   ({
     item,
     index,
@@ -90,48 +148,57 @@ const NowWatchingItem = memo(
     itemStyle,
     itemWidth,
     borderRadius,
-  }: {
-    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;
   }) => {
-    const percentage = Math.max(
-      0,
-      Math.min(100, Math.round((item.currentTime / item.duration) * 100))
-    );
+    // ========================================================================
+    // 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: 500 });
-    }, [percentage, progress]);
+      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,
-          index === 0 && styles.firstItem,
-          isLast && { marginRight: moderateScale(12) },
+          isFirstItem && styles.firstItem,
+          itemMarginStyle,
         ]}
-        activeOpacity={0.9}
+        activeOpacity={TOUCH_OPACITY}
         onPress={() => onPressItem?.(item.content)}
       >
         <View style={styles.cardWrapper}>
@@ -151,9 +218,9 @@ const NowWatchingItem = memo(
                 content_offering_type={item.content.content_offering_type}
               />
               <LinearGradient
-                colors={['rgba(0,0,0,0.95)', 'transparent']}
-                start={{ x: 0, y: 1 }}
-                end={{ x: 0, y: 0 }}
+                colors={GRADIENT_COLORS}
+                start={GRADIENT_START}
+                end={GRADIENT_END}
                 style={styles.gradientOverlay}
               />
             </FastImage>
@@ -177,7 +244,7 @@ const NowWatchingItem = memo(
             </View>
             <View style={styles.playIconWrapper}>
               <Play
-                size={moderateScale(20)}
+                size={PLAY_ICON_SIZE}
                 color={appliedTheme.colors.primary}
                 fill={appliedTheme.colors.primary}
               />
@@ -189,6 +256,11 @@ const NowWatchingItem = memo(
   }
 );
 
+NowWatchingItem.displayName = 'NowWatchingItem';
+
+// ============================================================================
+// Main Component
+// ============================================================================
 const NowWatching: React.FC<Props> = ({
   section_id,
   title,
@@ -203,48 +275,67 @@ const NowWatching: React.FC<Props> = ({
   renderItemImage,
   itemWidth = ITEM_WIDTH,
   borderRadius = BORDER_RADIUS,
-  skeletonCount = 4,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
   containerStyle,
   itemStyle,
   isLoadingHistory,
 }) => {
-  const flatListRef = useRef<FlatList<IHistoryItem>>(null);
+  // ========================================================================
+  // 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]
   );
 
-  const {
-    data,
-    loadMoreData,
-    pagination,
-    loading: isPaginating,
-  } = usePaginatedSection<IHistoryItem>(
-    section_id,
-    moreFetchDataHistory,
-    initialData,
-    isLoading || isLoadingHistory
-  );
-
+  // ========================================================================
+  // Event Handlers
+  // ========================================================================
   const handlePressMore = useCallback(() => {
     onPressMore?.({ section_id, name: title, type });
   }, [onPressMore, section_id, title, type]);
 
-  const listData = useMemo(() => data ?? [], [data]);
-
   const handleEndReached = useCallback(() => {
-    if (
+    const canLoadMore =
       !onEndReachedCalledDuringMomentum.current &&
       pagination?.hasNextPage &&
-      pagination?.nextPage
-    ) {
+      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;
@@ -273,41 +364,110 @@ const NowWatching: React.FC<Props> = ({
     ]
   );
 
-  const renderSkeletonItem = (index: number) => (
-    <View
-      key={index}
-      style={[
-        styles.item,
-        itemStyle,
-        index === 0 && styles.firstItem,
-        { marginRight: moderateScale(12) },
-      ]}
-    >
-      <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} />
+  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>
-            <View style={styles.playIconSkeleton} />
-          </View>
+          </SkeletonPlaceholder>
         </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]
   );
-  if (!isLoadingHistory && !isLoading && initialData?.length === 0) return null;
 
-  if (!isLoading && !isLoadingHistory && listData.length === 0) return null;
+  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]}>
-      {!isLoading && !isLoadingHistory && title && (
+      {shouldShowTitle && (
         <NavigateToMore
           title={title}
           onPress={handlePressMore}
@@ -320,71 +480,56 @@ const NowWatching: React.FC<Props> = ({
           showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
         />
       )}
-      {(isLoading || isLoadingHistory) && (
+      {shouldShowSkeletonHeader && (
         <SkeletonPlaceholder
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
         >
           <SkeletonPlaceholder.Item
-            width={moderateScale(100)}
-            height={verticalScale(14)}
-            borderRadius={moderateScale(4)}
-            marginLeft={moderateScale(12)}
-            marginBottom={verticalScale(6)}
+            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={
-          isLoading || isLoadingHistory
-            ? Array(skeletonCount).fill(0)
-            : listData
-        }
-        keyExtractor={(_, index) => index.toString()}
-        renderItem={({ item, index }) =>
-          isLoading || isLoadingHistory
-            ? renderSkeletonItem(index)
-            : renderItem({
-                item,
-                index,
-                separators: {
-                  highlight: () => {},
-                  unhighlight: () => {},
-                  updateProps: () => {},
-                },
-              })
-        }
+        data={flatListData}
+        keyExtractor={keyExtractor}
+        renderItem={renderFlatListItem}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.listContent}
         onEndReached={handleEndReached}
-        onEndReachedThreshold={0.5}
-        onMomentumScrollBegin={() => {
-          onEndReachedCalledDuringMomentum.current = false;
-        }}
+        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: moderateScale(15),
+      paddingRight: LIST_PADDING_RIGHT,
     },
     item: {
-      marginRight: moderateScale(12),
+      marginRight: ITEM_MARGIN_RIGHT,
     },
     firstItem: {
-      marginLeft: moderateScale(10),
+      marginLeft: FIRST_ITEM_MARGIN_LEFT,
     },
     navigateToMoreContainer: {
-      paddingHorizontal: moderateScale(10),
+      paddingHorizontal: FIRST_ITEM_MARGIN_LEFT,
       marginBottom: verticalScale(8),
     },
     title: {
@@ -396,15 +541,15 @@ const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
       borderRadius,
       overflow: 'hidden',
       backgroundColor: theme.colors.surfaceVariant,
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.08,
-      shadowRadius: 4,
-      elevation: 2,
+      shadowColor: SHADOW_COLOR,
+      shadowOffset: SHADOW_OFFSET,
+      shadowOpacity: SHADOW_OPACITY,
+      shadowRadius: SHADOW_RADIUS,
+      elevation: ELEVATION,
     },
     poster: {
       width: '100%',
-      height: itemWidth * (9 / 16),
+      height: itemWidth * ASPECT_RATIO,
       borderRadius,
       overflow: 'hidden',
       backgroundColor: theme.colors.surfaceVariant,
@@ -415,16 +560,16 @@ const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
     },
     infoContainer: {
       position: 'absolute',
-      bottom: 6,
-      left: 8,
-      right: 8,
+      bottom: INFO_CONTAINER_BOTTOM,
+      left: INFO_CONTAINER_HORIZONTAL,
+      right: INFO_CONTAINER_HORIZONTAL,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
     },
     textSection: {
       flex: 1,
-      paddingRight: 8,
+      paddingRight: TEXT_SECTION_PADDING_RIGHT,
     },
     titleText: {
       color: theme.colors.white,
@@ -434,45 +579,45 @@ const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
     subTitleText: {
       color: theme.colors.white,
       fontSize: RFValue(10),
-      opacity: 0.85,
+      opacity: SUBTITLE_OPACITY,
       marginTop: verticalScale(2),
     },
     progressBackground: {
       marginTop: verticalScale(4),
       height: verticalScale(4),
-      backgroundColor: '#4F4E4E',
-      borderRadius: 6,
+      backgroundColor: PROGRESS_BG_COLOR,
+      borderRadius: PROGRESS_BORDER_RADIUS,
       width: '100%',
     },
     progressForeground: {
       height: '100%',
-      borderRadius: 6,
+      borderRadius: PROGRESS_BORDER_RADIUS,
       backgroundColor: theme.colors.primary,
     },
     playIconWrapper: {
       justifyContent: 'center',
       alignItems: 'center',
-      width: moderateScale(32),
-      height: moderateScale(32),
-      borderRadius: moderateScale(16),
+      width: PLAY_ICON_CONTAINER_SIZE,
+      height: PLAY_ICON_CONTAINER_SIZE,
+      borderRadius: PLAY_ICON_CONTAINER_RADIUS,
       backgroundColor: theme.colors.blueBackground,
     },
     skeletonTitle: {
-      width: '80%',
-      height: verticalScale(10),
-      borderRadius: 4,
+      width: SKELETON_TITLE_WIDTH,
+      height: SKELETON_TITLE_HEIGHT,
+      borderRadius: SKELETON_BORDER_RADIUS,
       marginBottom: verticalScale(4),
     },
     skeletonSubTitle: {
-      width: '60%',
-      height: verticalScale(8),
-      borderRadius: 4,
+      width: SKELETON_SUBTITLE_WIDTH,
+      height: SKELETON_SUBTITLE_HEIGHT,
+      borderRadius: SKELETON_BORDER_RADIUS,
       marginBottom: verticalScale(6),
     },
     playIconSkeleton: {
-      width: moderateScale(32),
-      height: moderateScale(32),
-      borderRadius: moderateScale(16),
+      width: PLAY_ICON_CONTAINER_SIZE,
+      height: PLAY_ICON_CONTAINER_SIZE,
+      borderRadius: PLAY_ICON_CONTAINER_RADIUS,
     },
   });