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

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

@@ -27,13 +27,32 @@ import { ThumbnailCard } from '../../components/ThumbnailCard';
 import type { ThemeOverride } from '../../../../../theme/themes';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
+// ============================================================================
 // Constants
+// ============================================================================
 const DEFAULT_SKELETON_COUNT = 3;
 const CAROUSEL_WIDTH = Display.fullWidth;
 const CAROUSEL_HEIGHT = verticalScale(180);
 const BORDER_RADIUS = scale(10);
+const SCROLL_ANIMATION_DURATION = 1000;
+const AUTO_PLAY_INTERVAL = 2500;
+const PARALLAX_SCROLLING_OFFSET = 48;
+const PARALLAX_SCROLLING_SCALE = 0.9;
+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.6)'];
+const INDICATOR_GAP = scale(10);
+const INDICATOR_WIDTH_ACTIVE = scale(18);
+const INDICATOR_WIDTH_INACTIVE = scale(8);
+const INDICATOR_HEIGHT = scale(8);
+const INDICATOR_BORDER_RADIUS = scale(50);
+const PLAY_ICON_SIZE = scale(25);
+const PLAY_ICON_CONTAINER_SIZE = scale(40);
+const PLAY_TEXT_MAX_WIDTH = scale(220);
 
-// Define props
+// ============================================================================
+// Types
+// ============================================================================
 type SliderOneProps = {
   index: number;
   data: ISectionContent | null;
@@ -44,12 +63,15 @@ type SliderOneProps = {
   theme?: ThemeOverride;
 } & AccessibilityProps;
 
-// ImageTouchable component
 type ImageTouchableProps = {
   children: React.ReactNode;
   onImagePress?: () => void;
 };
 
+// ============================================================================
+// Helper Components
+// ============================================================================
+
 const ImageTouchable = memo<ImageTouchableProps>(
   ({ children, onImagePress }) => (
     <TouchableOpacity
@@ -64,7 +86,11 @@ const ImageTouchable = memo<ImageTouchableProps>(
   )
 );
 
-// Main component
+ImageTouchable.displayName = 'ImageTouchable';
+
+// ============================================================================
+// Main Component
+// ============================================================================
 const SliderOne: React.FC<SliderOneProps> = ({
   index,
   data,
@@ -76,99 +102,162 @@ const SliderOne: React.FC<SliderOneProps> = ({
   accessibilityLabel = 'Content carousel',
   accessibilityHint = 'Swipe to view content',
 }) => {
+  // ========================================================================
+  // Hooks & State
+  // ========================================================================
   const { theme: appliedTheme } = useInternalTheme(theme);
-  const contentData = useMemo(() => data?.data ?? [], [data]);
   const [activeIndex, setActiveIndex] = useState<number>(0);
 
-  const gradientColors = useMemo(
-    () => [appliedTheme.colors.primary, appliedTheme.colors.primary],
-    [appliedTheme.colors.primary]
+  // ========================================================================
+  // Data Processing
+  // ========================================================================
+  const contentData = useMemo(
+    () =>
+      (data?.data ?? []).filter(
+        (item): item is IContentData => !('type' in item && item.type === 'ads')
+      ),
+    [data]
   );
 
-  const handleSnapToItem = useCallback((i: number) => setActiveIndex(i), []);
-
-  // Memoize skeleton items
   const skeletonItems = useSkeletonItems(skeletonCount);
 
-  // Memoize indicator array
   const indicatorArray = useMemo(
-    () => Array.from({ length: contentData.length }, (_, i) => i),
-    [contentData.length]
+    () =>
+      Array.from(
+        { length: isLoading ? skeletonItems.length : contentData.length },
+        (_, i) => i
+      ),
+    [isLoading, skeletonItems.length, contentData.length]
+  );
+
+  // ========================================================================
+  // Memoized Values
+  // ========================================================================
+  const gradientColors = useMemo(
+    () => [appliedTheme.colors.primary, appliedTheme.colors.primary],
+    [appliedTheme.colors.primary]
   );
 
-  // Memoize play icon style
   const playIconStyle = useMemo(
     () => [styles.playIcon, { backgroundColor: appliedTheme.colors.button }],
     [appliedTheme.colors.button]
   );
 
-  // Memoize play text style
   const playTextStyle = useMemo(
     () => [styles.playText, { color: appliedTheme.colors.white }],
     [appliedTheme.colors.white]
   );
 
-  // Render carousel item
+  const carouselProps = useMemo(
+    () => ({
+      width: CAROUSEL_WIDTH,
+      height: CAROUSEL_HEIGHT,
+      autoPlay: !isLoading && contentData.length > 1,
+      loop: !isLoading && contentData.length > 1,
+      scrollAnimationDuration: SCROLL_ANIMATION_DURATION,
+      autoPlayInterval: AUTO_PLAY_INTERVAL,
+      style: styles.carousel,
+      // Optimize rendering
+      windowSize: 3,
+      enabled: true,
+    }),
+    [isLoading, contentData.length]
+  );
+
+  const parallaxConfig = useMemo(
+    () => ({
+      parallaxScrollingOffset: PARALLAX_SCROLLING_OFFSET,
+      parallaxScrollingScale: PARALLAX_SCROLLING_SCALE,
+    }),
+    []
+  );
+
+  const panGestureConfig = useCallback(
+    (gesture: any) =>
+      gesture
+        .activeOffsetX(PAN_GESTURE_ACTIVE_OFFSET_X)
+        .failOffsetY(PAN_GESTURE_FAIL_OFFSET_Y),
+    []
+  );
+
+  // ========================================================================
+  // Event Handlers
+  // ========================================================================
+  const handleSnapToItem = useCallback((i: number) => setActiveIndex(i), []);
+
+  const handleItemPress = useCallback(
+    (item: IContentData) => {
+      onPressItem?.(item);
+    },
+    [onPressItem]
+  );
+
+  // ========================================================================
+  // Render Functions
+  // ========================================================================
   const renderCarouselItem = useCallback(
-    ({ item }: { item: IContentData }) => (
-      <View style={styles.sliderContainer}>
-        <ImageTouchable onImagePress={() => onPressItem?.(item)}>
-          <RentOrBuyIcon
-            theme={appliedTheme}
-            content_offering_type={item.content_offering_type}
-          />
-          <ThumbnailCard
-            thumbnailUri={item.thumbnail}
-            theme={appliedTheme}
-            isLoading={false}
-            borderRadius={BORDER_RADIUS}
-            wrapperStyle={styles.imageWrapper}
-            imageStyle={styles.sliderImage}
-            resizeMode={FastImage.resizeMode.cover}
-          />
-          {showPlayIcon && (
-            <LinearGradient
-              colors={['transparent', 'rgba(0,0,0,0.6)']}
-              style={styles.gradientOverlay}
-            >
-              <View style={styles.playOverlay}>
-                <TouchableOpacity
-                  onPress={() => onPressItem?.(item)}
-                  style={playIconStyle}
-                  activeOpacity={0.8}
-                  accessibilityRole="button"
-                  accessibilityLabel="Play content"
-                >
-                  <Play
-                    size={scale(25)}
-                    color={appliedTheme.colors.black}
-                    fill={appliedTheme.colors.black}
-                  />
-                </TouchableOpacity>
-                <Text
-                  style={playTextStyle}
-                  numberOfLines={1}
-                  accessibilityLabel={item.name}
-                >
-                  {item.name}
-                </Text>
-              </View>
-            </LinearGradient>
-          )}
-        </ImageTouchable>
-      </View>
-    ),
-    [appliedTheme, showPlayIcon, onPressItem, playIconStyle, playTextStyle]
+    ({ item }: { item: IContentData }) => {
+      const handlePress = () => handleItemPress(item);
+
+      return (
+        <View style={styles.sliderContainer}>
+          <ImageTouchable onImagePress={handlePress}>
+            <RentOrBuyIcon
+              theme={appliedTheme}
+              content_offering_type={item.content_offering_type}
+            />
+            <ThumbnailCard
+              thumbnailUri={item.thumbnail}
+              theme={appliedTheme}
+              isLoading={false}
+              borderRadius={BORDER_RADIUS}
+              wrapperStyle={styles.imageWrapper}
+              imageStyle={styles.sliderImage}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+            {showPlayIcon && (
+              <LinearGradient
+                colors={GRADIENT_OVERLAY_COLORS}
+                style={styles.gradientOverlay}
+              >
+                <View style={styles.playOverlay}>
+                  <TouchableOpacity
+                    onPress={handlePress}
+                    style={playIconStyle}
+                    activeOpacity={0.8}
+                    accessibilityRole="button"
+                    accessibilityLabel="Play content"
+                  >
+                    <Play
+                      size={PLAY_ICON_SIZE}
+                      color={appliedTheme.colors.black}
+                      fill={appliedTheme.colors.black}
+                    />
+                  </TouchableOpacity>
+                  <Text
+                    style={playTextStyle}
+                    numberOfLines={1}
+                    accessibilityLabel={item.name}
+                  >
+                    {item.name}
+                  </Text>
+                </View>
+              </LinearGradient>
+            )}
+          </ImageTouchable>
+        </View>
+      );
+    },
+    [appliedTheme, showPlayIcon, handleItemPress, playIconStyle, playTextStyle]
   );
 
-  // Render skeleton item
   const renderSkeletonItem = useCallback(
-    () => (
+    ({ item: _item }: { item: any }) => (
       <View style={styles.sliderContainer}>
         <SkeletonPlaceholder
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          speed={1000}
+          speed={SCROLL_ANIMATION_DURATION}
         >
           <SkeletonPlaceholder.Item
             width={CAROUSEL_WIDTH}
@@ -178,42 +267,48 @@ const SliderOne: React.FC<SliderOneProps> = ({
         </SkeletonPlaceholder>
       </View>
     ),
-    [appliedTheme.colors]
+    [
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+    ]
   );
 
-  // Render indicator
   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={AUTO_PLAY_INTERVAL}
+            >
+              <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={[
+                styles.inactiveIndicator,
+                { backgroundColor: appliedTheme.colors.onSurface },
+              ]}
+            />
+          )}
+        </View>
+      );
+    },
     [
       isLoading,
       appliedTheme.colors.skeletonBaseColor,
@@ -224,23 +319,21 @@ const SliderOne: React.FC<SliderOneProps> = ({
     ]
   );
 
-  // Common carousel props - memoized
-  const carouselProps = useMemo(
-    () => ({
-      width: CAROUSEL_WIDTH,
-      height: CAROUSEL_HEIGHT,
-      autoPlay: !isLoading && contentData.length > 1,
-      loop: true,
-      scrollAnimationDuration: 1000,
-      autoPlayInterval: 2500,
-      style: styles.carousel,
-    }),
-    [isLoading, contentData.length]
-  );
-  if (!data) {
-    return null;
-  }
-  if (isLoading) {
+  // ========================================================================
+  // Early Returns & Loading State
+  // ========================================================================
+  // Show skeleton immediately if:
+  // 1. Loading is true, OR
+  // 2. Data is null/undefined (initial state), OR
+  // 3. No content data available
+  const shouldShowSkeleton =
+    isLoading ||
+    !data ||
+    !contentData.length ||
+    (skeletonItems.length > 0 && !contentData.length);
+
+  // Show skeleton immediately while data is loading or not available
+  if (shouldShowSkeleton && skeletonItems.length > 0) {
     return (
       <View
         style={styles.container}
@@ -251,28 +344,36 @@ const SliderOne: React.FC<SliderOneProps> = ({
           {...carouselProps}
           data={skeletonItems}
           renderItem={renderSkeletonItem}
+          onSnapToItem={handleSnapToItem}
           mode="parallax"
-          modeConfig={{
-            parallaxScrollingOffset: 48,
-            parallaxScrollingScale: 0.9,
-          }}
-          onConfigurePanGesture={(gesture) =>
-            gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])
-          }
+          modeConfig={parallaxConfig}
+          onConfigurePanGesture={panGestureConfig}
         />
-        <View style={styles.indicatorContainer}>
-          <View style={styles.indicator}>
-            {isLoading
-              ? skeletonItems.map((_, i) => renderIndicator(0, i))
-              : indicatorArray.map((i) => renderIndicator(0, i))}
+        {indicatorArray.length > 0 && (
+          <View style={styles.indicatorContainer}>
+            <View style={styles.indicator}>
+              {indicatorArray.map((i) => renderIndicator(0, i))}
+            </View>
           </View>
-        </View>
+        )}
       </View>
     );
   }
+
+  // If not loading and no data, return null
+  if (!isLoading && !data) {
+    return null;
+  }
+
   if (!isLoading && !contentData.length) {
     return null;
   }
+
+  // ========================================================================
+  // Render Main Content
+  // ========================================================================
+  const shouldShowIndicators = index === 0;
+
   return (
     <View
       style={styles.container}
@@ -285,15 +386,10 @@ const SliderOne: React.FC<SliderOneProps> = ({
         renderItem={renderCarouselItem}
         onSnapToItem={handleSnapToItem}
         mode="parallax"
-        modeConfig={{
-          parallaxScrollingOffset: 48,
-          parallaxScrollingScale: 0.9,
-        }}
-        onConfigurePanGesture={(gesture) =>
-          gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])
-        }
+        modeConfig={parallaxConfig}
+        onConfigurePanGesture={panGestureConfig}
       />
-      {index === 0 && (
+      {shouldShowIndicators && (
         <View style={styles.indicatorContainer}>
           <View style={styles.indicator}>
             {indicatorArray.map((i) => renderIndicator(0, i))}
@@ -304,12 +400,13 @@ const SliderOne: React.FC<SliderOneProps> = ({
   );
 };
 
+// ============================================================================
 // Styles
+// ============================================================================
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    marginTop: verticalScale(6),
     marginBottom: verticalScale(1),
   },
   carousel: {
@@ -318,7 +415,6 @@ const styles = StyleSheet.create({
   sliderContainer: {
     flex: 1,
     justifyContent: 'center',
-    marginTop: verticalScale(-15),
   },
   imageWrapper: {
     borderRadius: BORDER_RADIUS,
@@ -342,41 +438,41 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(12),
   },
   playIcon: {
-    width: scale(40),
-    height: scale(40),
-    borderRadius: scale(50),
+    width: PLAY_ICON_CONTAINER_SIZE,
+    height: PLAY_ICON_CONTAINER_SIZE,
+    borderRadius: INDICATOR_BORDER_RADIUS,
     alignItems: 'center',
     justifyContent: 'center',
   },
   playText: {
     fontSize: RFValue(15),
     fontWeight: 'bold',
-    maxWidth: scale(220),
+    maxWidth: PLAY_TEXT_MAX_WIDTH,
   },
   indicatorContainer: {
+    paddingTop: verticalScale(5),
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
-    marginTop: verticalScale(-7),
   },
   indicator: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: scale(6),
+    gap: INDICATOR_GAP,
   },
   indicatorWrapper: {
     alignItems: 'center',
     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),