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

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

@@ -0,0 +1,490 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useSkeletonItems } from '../../../../../hooks/useSkeletonItems';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  type AccessibilityProps,
+} from 'react-native';
+import Carousel from 'react-native-reanimated-carousel';
+import { scale, verticalScale } from 'react-native-size-matters';
+import FastImage from 'react-native-fast-image';
+import LinearGradient from 'react-native-linear-gradient';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { Play } from 'lucide-react-native';
+import { Text } from '../../../../Text';
+import Display from '../../../../../utils/Display';
+import type { ISectionContent } from '../../../../../types';
+import { useTheme } from '../../../../../theme';
+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_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);
+
+// ============================================================================
+// Types
+// ============================================================================
+type SliderOneProps = {
+  index: number;
+  data: ISectionContent | null;
+  onPressItem?: (item: IContentData) => void;
+  showPlayIcon?: boolean;
+  isLoading?: boolean;
+  skeletonCount?: number;
+  theme?: ThemeOverride;
+} & AccessibilityProps;
+
+type ImageTouchableProps = {
+  children: React.ReactNode;
+  onImagePress?: () => void;
+};
+
+// ============================================================================
+// Helper Components
+// ============================================================================
+
+const ImageTouchable = memo<ImageTouchableProps>(
+  ({ children, onImagePress }) => (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      style={styles.imageWrapper}
+      onPress={onImagePress}
+      accessibilityRole="button"
+      accessibilityLabel="View content"
+    >
+      {children}
+    </TouchableOpacity>
+  )
+);
+
+ImageTouchable.displayName = 'ImageTouchable';
+
+// ============================================================================
+// Main Component
+// ============================================================================
+const SliderOne: React.FC<SliderOneProps> = ({
+  index,
+  data,
+  onPressItem,
+  showPlayIcon = false,
+  isLoading = false,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  theme,
+  accessibilityLabel = 'Content carousel',
+  accessibilityHint = 'Swipe to view content',
+}) => {
+  // ========================================================================
+  // Hooks & State
+  // ========================================================================
+  const { theme: appliedTheme } = useTheme(theme);
+  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), []);
+
+  const handleItemPress = useCallback(
+    (item: IContentData) => {
+      onPressItem?.(item);
+    },
+    [onPressItem]
+  );
+
+  // ========================================================================
+  // Render Functions
+  // ========================================================================
+  const renderCarouselItem = useCallback(
+    ({ 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]
+  );
+
+  const renderSkeletonItem = useCallback(
+    ({ item: _item }: { item: any }) => (
+      <View style={styles.sliderContainer}>
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          speed={SCROLL_ANIMATION_DURATION}
+        >
+          <SkeletonPlaceholder.Item
+            width={CAROUSEL_WIDTH}
+            height={CAROUSEL_HEIGHT}
+            borderRadius={BORDER_RADIUS}
+          />
+        </SkeletonPlaceholder>
+      </View>
+    ),
+    [
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+    ]
+  );
+
+  const renderIndicator = useCallback(
+    (_: 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}
+            />
+          ) : (
+            <View
+              style={[
+                styles.inactiveIndicator,
+                { backgroundColor: appliedTheme.colors.onSurface },
+              ]}
+            />
+          )}
+        </View>
+      );
+    },
+    [
+      isLoading,
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+      appliedTheme.colors.onSurface,
+      activeIndex,
+      gradientColors,
+    ]
+  );
+
+  // ========================================================================
+  // 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}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+      >
+        <Carousel
+          {...carouselProps}
+          data={skeletonItems}
+          renderItem={renderSkeletonItem}
+          onSnapToItem={handleSnapToItem}
+          mode="parallax"
+          modeConfig={parallaxConfig}
+          onConfigurePanGesture={panGestureConfig}
+        />
+        {indicatorArray.length > 0 && (
+          <View style={styles.indicatorContainer}>
+            <View style={styles.indicator}>
+              {indicatorArray.map((i) => renderIndicator(0, i))}
+            </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}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+    >
+      <Carousel
+        {...carouselProps}
+        data={contentData}
+        renderItem={renderCarouselItem}
+        onSnapToItem={handleSnapToItem}
+        mode="parallax"
+        modeConfig={parallaxConfig}
+        onConfigurePanGesture={panGestureConfig}
+      />
+      {shouldShowIndicators && (
+        <View style={styles.indicatorContainer}>
+          <View style={styles.indicator}>
+            {indicatorArray.map((i) => renderIndicator(0, i))}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+// ============================================================================
+// Styles
+// ============================================================================
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginBottom: verticalScale(1),
+  },
+  carousel: {
+    borderRadius: BORDER_RADIUS,
+  },
+  sliderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  imageWrapper: {
+    borderRadius: BORDER_RADIUS,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  sliderImage: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+    borderRadius: BORDER_RADIUS,
+  },
+  gradientOverlay: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'flex-end',
+  },
+  playOverlay: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: scale(8),
+    paddingBottom: verticalScale(10),
+    paddingHorizontal: scale(12),
+  },
+  playIcon: {
+    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: PLAY_TEXT_MAX_WIDTH,
+  },
+  indicatorContainer: {
+    paddingTop: verticalScale(5),
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  indicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: INDICATOR_GAP,
+  },
+  indicatorWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  activeIndicator: {
+    width: INDICATOR_WIDTH_ACTIVE,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS,
+  },
+  inactiveIndicator: {
+    width: INDICATOR_WIDTH_INACTIVE,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS,
+  },
+  emptyState: {
+    padding: scale(12),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    fontSize: RFValue(13),
+    fontWeight: '500',
+    color: '#fff',
+    textAlign: 'center',
+  },
+});
+
+export default memo(SliderOne);