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

package/src/components/Content/Card/Sliders/Styles/Two.tsx

@@ -2,7 +2,9 @@
  * @author Naresh Dhamu
  * @LastModified Mon 30 Jun 2025 at 11:30 PM
  */
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState, useRef } from 'react';
+import { InteractionManager } from 'react-native';
+import { useSkeletonItems } from '../../../../../hooks/useSkeletonItems';
 import {
   View,
   TouchableOpacity,
@@ -24,8 +26,45 @@ import RentOrBuyIcon from '../../components/RentOrBuyIcon';
 import type { ThemeOverride } from '../../../../../theme/themes';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
+// ============================================================================
+// Constants
+// ============================================================================
 const FULL_WIDTH = Display.fullWidth;
-const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
+const ASPECT_RATIO = 9 / 16;
+const FULL_HEIGHT = FULL_WIDTH * ASPECT_RATIO;
+const DEFAULT_SKELETON_COUNT = 3;
+const SCROLL_ANIMATION_DURATION = 300;
+const AUTO_PLAY_INTERVAL = 3000;
+const CAROUSEL_WINDOW_SIZE = 2;
+const SNAP_DEBOUNCE_DELAY = 50;
+const SKELETON_SPEED = 2000;
+const PAN_GESTURE_ACTIVE_OFFSET_X = [-10, 10];
+const PAN_GESTURE_FAIL_OFFSET_Y = [-5, 5];
+const GRADIENT_OVERLAY_COLORS = ['transparent', 'rgba(0,0,0,0.7)'] as [
+  string,
+  string,
+];
+const GRADIENT_START = { x: 0.5, y: 0 };
+const GRADIENT_END = { x: 0.5, y: 1 };
+const INDICATOR_WIDTH_ACTIVE = scale(18);
+const INDICATOR_WIDTH_INACTIVE = scale(8);
+const INDICATOR_HEIGHT = scale(8);
+const INDICATOR_BORDER_RADIUS = scale(50);
+const TOUCH_OPACITY = 0.85;
+
+// ============================================================================
+// Types
+// ============================================================================
+type CarouselItemProps = {
+  item: IContentData;
+  onPressItem?: (item: IContentData) => void;
+  appliedTheme: any;
+  gradientConfig: {
+    colors: [string, string];
+    start: { x: number; y: number };
+    end: { x: number; y: number };
+  };
+};
 
 type SliderTwoProps = {
   data: ISectionContent | null;
@@ -35,112 +74,225 @@ type SliderTwoProps = {
   theme?: ThemeOverride;
 } & AccessibilityProps;
 
+// ============================================================================
+// Helper Components
+// ============================================================================
+const CarouselItem = memo<CarouselItemProps>(
+  ({ item, onPressItem, appliedTheme, gradientConfig }) => (
+    <TouchableOpacity
+      activeOpacity={TOUCH_OPACITY}
+      onPress={() => onPressItem?.(item)}
+      style={styles.itemWrapper}
+      accessibilityRole="button"
+      accessibilityLabel={`View ${item.name}`}
+    >
+      <RentOrBuyIcon
+        theme={appliedTheme}
+        content_offering_type={item.content_offering_type}
+      />
+      <ThumbnailCard
+        thumbnailUri={item.thumbnail}
+        theme={appliedTheme}
+        isLoading={false}
+        wrapperStyle={styles.image}
+        resizeMode={FastImage.resizeMode.cover}
+      />
+      <LinearGradient
+        colors={gradientConfig.colors}
+        start={gradientConfig.start}
+        end={gradientConfig.end}
+        style={styles.gradientBottomOverlay}
+      />
+    </TouchableOpacity>
+  )
+);
+
+CarouselItem.displayName = 'CarouselItem';
+
+// ============================================================================
+// Main Component
+// ============================================================================
 const SliderTwo: React.FC<SliderTwoProps> = ({
   data,
   onPressItem,
   isLoading = true,
-  skeletonCount = 3,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
   accessibilityLabel = 'Full Width Slider',
   accessibilityHint = 'Swipe to view content',
   theme,
 }) => {
+  // ========================================================================
+  // Hooks & State
+  // ========================================================================
   const { theme: appliedTheme } = useInternalTheme(theme);
-  const contentData = useMemo(() => data?.data ?? [], [data]);
   const [activeIndex, setActiveIndex] = useState(0);
+  const snapTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // ========================================================================
+  // Data Processing
+  // ========================================================================
+  const contentData = useMemo(() => data?.data ?? [], [data]);
+  const skeletonItems = useSkeletonItems(skeletonCount);
+
+  const indicatorArray = useMemo(
+    () =>
+      Array.from(
+        { length: isLoading ? skeletonItems.length : contentData.length },
+        (_, i) => i
+      ),
+    [isLoading, skeletonItems.length, contentData.length]
+  );
+
+  const carouselData = useMemo(
+    () => (isLoading ? skeletonItems : contentData),
+    [isLoading, skeletonItems, contentData]
+  );
+
+  // ========================================================================
+  // Memoized Values
+  // ========================================================================
   const gradientColors = useMemo(
     () => [appliedTheme.colors.primary, appliedTheme.colors.primary],
     [appliedTheme.colors.primary]
   );
-  const handleSnapToItem = useCallback((i: number) => setActiveIndex(i), []);
 
+  const gradientConfig = useMemo(
+    () => ({
+      colors: GRADIENT_OVERLAY_COLORS,
+      start: GRADIENT_START,
+      end: GRADIENT_END,
+    }),
+    []
+  );
+
+  const carouselProps = useMemo(
+    () => ({
+      width: FULL_WIDTH,
+      height: FULL_HEIGHT,
+      autoPlay: !isLoading && contentData.length > 1,
+      loop: !isLoading && contentData.length > 1,
+      scrollAnimationDuration: SCROLL_ANIMATION_DURATION,
+      autoPlayInterval: AUTO_PLAY_INTERVAL,
+      windowSize: CAROUSEL_WINDOW_SIZE,
+      enabled: true,
+    }),
+    [isLoading, contentData.length]
+  );
+
+  const inactiveIndicatorStyle = useMemo(
+    () => [
+      styles.inactiveIndicator,
+      { backgroundColor: appliedTheme.colors.onSurface },
+    ],
+    [appliedTheme.colors.onSurface]
+  );
+
+  // ========================================================================
+  // Event Handlers
+  // ========================================================================
+  const handleSnapToItem = useCallback((i: number) => {
+    if (snapTimeoutRef.current) {
+      clearTimeout(snapTimeoutRef.current);
+    }
+    snapTimeoutRef.current = setTimeout(() => {
+      InteractionManager.runAfterInteractions(() => {
+        setActiveIndex(i);
+      });
+    }, SNAP_DEBOUNCE_DELAY);
+  }, []);
+
+  const configurePanGesture = useCallback(
+    (gesture: any) =>
+      gesture
+        .activeOffsetX(PAN_GESTURE_ACTIVE_OFFSET_X)
+        .failOffsetY(PAN_GESTURE_FAIL_OFFSET_Y),
+    []
+  );
+
+  // ========================================================================
+  // Render Functions
+  // ========================================================================
   const renderSkeletonItem = useCallback(
-    () => (
+    ({ item: _item }: { item: any }) => (
       <View style={styles.itemWrapper}>
         <SkeletonPlaceholder
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          speed={SKELETON_SPEED}
         >
           <SkeletonPlaceholder.Item width={FULL_WIDTH} height={FULL_HEIGHT} />
         </SkeletonPlaceholder>
       </View>
     ),
-    [appliedTheme.colors]
+    [
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+    ]
   );
 
   const renderCarouselItem = useCallback(
     ({ item }: { item: IContentData }) => (
-      <TouchableOpacity
-        activeOpacity={0.85}
-        onPress={() => onPressItem?.(item)}
-        style={styles.itemWrapper}
-        accessibilityRole="button"
-        accessibilityLabel={`View ${item.name}`}
-      >
-        <RentOrBuyIcon
-          theme={appliedTheme}
-          content_offering_type={item.content_offering_type}
-        />
-        <ThumbnailCard
-          thumbnailUri={item.thumbnail}
-          theme={appliedTheme}
-          isLoading={isLoading}
-          wrapperStyle={styles.image}
-          resizeMode={FastImage.resizeMode.cover}
-        />
-        <LinearGradient
-          colors={['transparent', 'rgba(0,0,0,0.7)']}
-          start={{ x: 0.5, y: 0 }}
-          end={{ x: 0.5, y: 1 }}
-          style={styles.gradientBottomOverlay}
-        />
-      </TouchableOpacity>
+      <CarouselItem
+        item={item}
+        onPressItem={onPressItem}
+        appliedTheme={appliedTheme}
+        gradientConfig={gradientConfig}
+      />
     ),
-    [appliedTheme, isLoading, onPressItem]
+    [appliedTheme, onPressItem, gradientConfig]
+  );
+
+  const renderItem = useMemo(
+    () => (isLoading ? renderSkeletonItem : renderCarouselItem),
+    [isLoading, renderSkeletonItem, renderCarouselItem]
   );
 
   const renderIndicator = useCallback(
-    (_: number, i: number) => (
-      <View key={i} style={styles.indicatorWrapper}>
-        {isLoading ? (
-          <SkeletonPlaceholder
-            backgroundColor={appliedTheme.colors.skeletonBaseColor}
-            highlightColor={appliedTheme.colors.skeletonHighlightColor}
-            speed={2000}
-          >
-            <SkeletonPlaceholder.Item
-              width={scale(18)}
-              height={scale(8)}
-              borderRadius={scale(50)}
+    (_: number, i: number) => {
+      const isActive = i === activeIndex;
+
+      return (
+        <View key={i} style={styles.indicatorWrapper}>
+          {isLoading ? (
+            <SkeletonPlaceholder
+              backgroundColor={appliedTheme.colors.skeletonBaseColor}
+              highlightColor={appliedTheme.colors.skeletonHighlightColor}
+              speed={SKELETON_SPEED}
+            >
+              <SkeletonPlaceholder.Item
+                width={INDICATOR_WIDTH_ACTIVE}
+                height={INDICATOR_HEIGHT}
+                borderRadius={INDICATOR_BORDER_RADIUS}
+              />
+            </SkeletonPlaceholder>
+          ) : isActive ? (
+            <LinearGradient
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              colors={gradientColors}
+              style={styles.activeIndicator}
             />
-          </SkeletonPlaceholder>
-        ) : i === activeIndex ? (
-          <LinearGradient
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            colors={gradientColors}
-            style={styles.activeIndicator}
-          />
-        ) : (
-          <View
-            style={[
-              styles.inactiveIndicator,
-              { backgroundColor: appliedTheme.colors.onSurface },
-            ]}
-          />
-        )}
-      </View>
-    ),
+          ) : (
+            <View style={inactiveIndicatorStyle} />
+          )}
+        </View>
+      );
+    },
     [
       isLoading,
       appliedTheme.colors.skeletonBaseColor,
       appliedTheme.colors.skeletonHighlightColor,
-      appliedTheme.colors.onSurface,
+      inactiveIndicatorStyle,
       activeIndex,
       gradientColors,
     ]
   );
 
-  if (!data || (!isLoading && contentData.length === 0)) {
+  // ========================================================================
+  // Early Returns
+  // ========================================================================
+  // Don't return early if loading - we need to show skeleton
+  if (!isLoading && (!data || contentData.length === 0)) {
     return (
       <View style={[styles.container, styles.emptyState]}>
         <Text style={styles.emptyText}>No content available</Text>
@@ -148,6 +300,9 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
     );
   }
 
+  // ========================================================================
+  // Render Main Content
+  // ========================================================================
   return (
     <View
       style={styles.container}
@@ -155,32 +310,26 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
       accessibilityHint={accessibilityHint}
     >
       <Carousel
-        width={FULL_WIDTH}
-        height={FULL_HEIGHT}
-        autoPlay={!isLoading && contentData.length > 1}
-        loop={!isLoading && contentData.length > 1}
-        scrollAnimationDuration={1000}
-        autoPlayInterval={3000}
-        data={
-          isLoading
-            ? (Array.from({ length: skeletonCount }) as IContentData[])
-            : contentData
-        }
-        renderItem={isLoading ? renderSkeletonItem : renderCarouselItem}
+        {...carouselProps}
+        data={carouselData}
+        renderItem={renderItem}
         onSnapToItem={handleSnapToItem}
-        onConfigurePanGesture={(gesture: any) =>
-          gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])
-        }
+        onConfigurePanGesture={configurePanGesture}
       />
-      <View style={styles.indicatorContainer}>
-        <View style={styles.indicator}>
-          {Array.from({ length: contentData.length }, renderIndicator)}
+      {indicatorArray.length > 0 && (
+        <View style={styles.indicatorContainer}>
+          <View style={styles.indicator}>
+            {indicatorArray.map((i) => renderIndicator(0, i))}
+          </View>
         </View>
-      </View>
+      )}
     </View>
   );
 };
 
+// ============================================================================
+// Styles
+// ============================================================================
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -217,14 +366,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   activeIndicator: {
-    width: scale(18),
-    height: scale(8),
-    borderRadius: scale(50),
+    width: INDICATOR_WIDTH_ACTIVE,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS,
   },
   inactiveIndicator: {
-    width: scale(8),
-    height: scale(8),
-    borderRadius: scale(50),
+    width: INDICATOR_WIDTH_INACTIVE,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS,
   },
   emptyState: {
     padding: scale(12),