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

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

@@ -4,6 +4,7 @@
  */
 
 import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useSkeletonItems } from '../../../../../hooks/useSkeletonItems';
 import {
   View,
   TouchableOpacity,
@@ -22,16 +23,35 @@ import type { ISectionContent } from '../../../../../types';
 import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../components/RentOrBuyIcon';
+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_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;
@@ -42,28 +62,34 @@ type SliderOneProps = {
   theme?: ThemeOverride;
 } & AccessibilityProps;
 
-// ImageTouchable component
 type ImageTouchableProps = {
   children: React.ReactNode;
   onImagePress?: () => void;
 };
 
-const ImageTouchable: React.FC<ImageTouchableProps> = ({
-  children,
-  onImagePress,
-}) => (
-  <TouchableOpacity
-    activeOpacity={0.8}
-    style={styles.imageWrapper}
-    onPress={onImagePress}
-    accessibilityRole="button"
-    accessibilityLabel="View content"
-  >
-    {children}
-  </TouchableOpacity>
+// ============================================================================
+// Helper Components
+// ============================================================================
+
+const ImageTouchable = memo<ImageTouchableProps>(
+  ({ children, onImagePress }) => (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      style={styles.imageWrapper}
+      onPress={onImagePress}
+      accessibilityRole="button"
+      accessibilityLabel="View content"
+    >
+      {children}
+    </TouchableOpacity>
+  )
 );
 
-// Main component
+ImageTouchable.displayName = 'ImageTouchable';
+
+// ============================================================================
+// Main Component
+// ============================================================================
 const SliderOne: React.FC<SliderOneProps> = ({
   index,
   data,
@@ -75,85 +101,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);
 
+  // ========================================================================
+  // Data Processing
+  // ========================================================================
+  const contentData = useMemo(
+    () =>
+      (data?.data ?? []).filter(
+        (item): item is IContentData => !('type' in item && item.type === 'ads')
+      ),
+    [data]
+  );
+
+  const skeletonItems = useSkeletonItems(skeletonCount);
+
+  const indicatorArray = useMemo(
+    () =>
+      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]
   );
 
+  const playIconStyle = useMemo(
+    () => [styles.playIcon, { backgroundColor: appliedTheme.colors.button }],
+    [appliedTheme.colors.button]
+  );
+
+  const playTextStyle = useMemo(
+    () => [styles.playText, { color: appliedTheme.colors.white }],
+    [appliedTheme.colors.white]
+  );
+
+  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), []);
 
-  // Render carousel item
+  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}
-          />
-          <FastImage
-            source={{
-              uri: item.thumbnail,
-              priority: FastImage.priority.normal,
-              cache: FastImage.cacheControl.immutable,
-            }}
-            style={styles.sliderImage}
-            resizeMode={FastImage.resizeMode.cover}
-            accessibilityLabel={`Image of ${item.name || 'content'}`}
-          />
-          {showPlayIcon && (
-            <LinearGradient
-              colors={['transparent', 'rgba(0,0,0,0.6)']}
-              style={styles.gradientOverlay}
-            >
-              <View style={styles.playOverlay}>
-                <TouchableOpacity
-                  onPress={() => onPressItem?.(item)}
-                  style={[
-                    styles.playIcon,
-                    { backgroundColor: appliedTheme.colors.button },
-                  ]}
-                  activeOpacity={0.8}
-                  accessibilityRole="button"
-                  accessibilityLabel="Play content"
-                >
-                  <Play
-                    size={scale(25)}
-                    color={appliedTheme.colors.black}
-                    fill={appliedTheme.colors.black}
-                  />
-                </TouchableOpacity>
-                <Text
-                  style={[
-                    styles.playText,
-                    { color: appliedTheme.colors.white },
-                  ]}
-                  numberOfLines={1}
-                  accessibilityLabel={item.name}
-                >
-                  {item.name}
-                </Text>
-              </View>
-            </LinearGradient>
-          )}
-        </ImageTouchable>
-      </View>
-    ),
-    [appliedTheme, showPlayIcon, onPressItem]
+    ({ 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}
@@ -163,42 +266,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,
@@ -209,20 +318,21 @@ const SliderOne: React.FC<SliderOneProps> = ({
     ]
   );
 
-  // Common carousel props
-  const carouselProps = {
-    width: CAROUSEL_WIDTH,
-    height: CAROUSEL_HEIGHT,
-    autoPlay: !isLoading && contentData.length > 1,
-    loop: true,
-    scrollAnimationDuration: 1000,
-    autoPlayInterval: 2500,
-    style: styles.carousel,
-  };
-  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}
@@ -231,31 +341,37 @@ const SliderOne: React.FC<SliderOneProps> = ({
       >
         <Carousel
           {...carouselProps}
-          data={Array.from({ length: skeletonCount })}
+          data={skeletonItems}
           renderItem={renderSkeletonItem}
           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}>
-            {Array.from(
-              { length: isLoading ? skeletonCount : contentData.length },
-              renderIndicator
-            )}
+        {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}
@@ -268,18 +384,13 @@ 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}>
-            {Array.from({ length: contentData.length }, renderIndicator)}
+            {indicatorArray.map((i) => renderIndicator(0, i))}
           </View>
         </View>
       )}
@@ -287,7 +398,9 @@ const SliderOne: React.FC<SliderOneProps> = ({
   );
 };
 
+// ============================================================================
 // Styles
+// ============================================================================
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -312,7 +425,6 @@ const styles = StyleSheet.create({
     width: '100%',
     aspectRatio: 16 / 9,
     borderRadius: BORDER_RADIUS,
-    backgroundColor: '#444',
   },
   gradientOverlay: {
     ...StyleSheet.absoluteFillObject,
@@ -326,16 +438,16 @@ 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: {
     alignItems: 'center',
@@ -353,14 +465,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),