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

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

@@ -1,490 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Wed 25 Jun 2025 at 05:28 PM
- */
-
-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 { 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);
-
-// ============================================================================
-// 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 } = useInternalTheme(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}
-          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',
-    marginTop: verticalScale(6),
-    marginBottom: verticalScale(1),
-  },
-  carousel: {
-    borderRadius: BORDER_RADIUS,
-  },
-  sliderContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginTop: verticalScale(-15),
-  },
-  imageWrapper: {
-    borderRadius: BORDER_RADIUS,
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  sliderImage: {
-    width: '100%',
-    aspectRatio: 16 / 9,
-    borderRadius: BORDER_RADIUS,
-  },
-  gradientOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    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: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    marginTop: verticalScale(-7),
-  },
-  indicator: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: scale(6),
-  },
-  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);