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

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

@@ -1,391 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 30 Jun 2025 at 11:30 PM
- */
-import React, { memo, useCallback, useMemo, useState, useRef } from 'react';
-import { InteractionManager } from 'react-native';
-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 { Text } from '../../../../Text';
-import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
-import Display from '../../../../../utils/Display';
-import { ThumbnailCard } from '../../components/ThumbnailCard';
-import type { ISectionContent } from '../../../../../types';
-import { RFValue } from 'react-native-responsive-fontsize';
-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 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;
-  onPressItem?: (item: IContentData) => void;
-  isLoading?: boolean;
-  skeletonCount?: number;
-  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 = DEFAULT_SKELETON_COUNT,
-  accessibilityLabel = 'Full Width Slider',
-  accessibilityHint = 'Swipe to view content',
-  theme,
-}) => {
-  // ========================================================================
-  // Hooks & State
-  // ========================================================================
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  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 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.skeletonBaseColor,
-      appliedTheme.colors.skeletonHighlightColor,
-    ]
-  );
-
-  const renderCarouselItem = useCallback(
-    ({ item }: { item: IContentData }) => (
-      <CarouselItem
-        item={item}
-        onPressItem={onPressItem}
-        appliedTheme={appliedTheme}
-        gradientConfig={gradientConfig}
-      />
-    ),
-    [appliedTheme, onPressItem, gradientConfig]
-  );
-
-  const renderItem = useMemo(
-    () => (isLoading ? renderSkeletonItem : renderCarouselItem),
-    [isLoading, renderSkeletonItem, renderCarouselItem]
-  );
-
-  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={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}
-            />
-          ) : (
-            <View style={inactiveIndicatorStyle} />
-          )}
-        </View>
-      );
-    },
-    [
-      isLoading,
-      appliedTheme.colors.skeletonBaseColor,
-      appliedTheme.colors.skeletonHighlightColor,
-      inactiveIndicatorStyle,
-      activeIndex,
-      gradientColors,
-    ]
-  );
-
-  // ========================================================================
-  // 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>
-      </View>
-    );
-  }
-
-  // ========================================================================
-  // Render Main Content
-  // ========================================================================
-  return (
-    <View
-      style={styles.container}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-    >
-      <Carousel
-        {...carouselProps}
-        data={carouselData}
-        renderItem={renderItem}
-        onSnapToItem={handleSnapToItem}
-        onConfigurePanGesture={configurePanGesture}
-      />
-      {indicatorArray.length > 0 && (
-        <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,
-    marginVertical: verticalScale(6),
-  },
-  itemWrapper: {
-    overflow: 'hidden',
-  },
-  image: {
-    width: FULL_WIDTH,
-    height: FULL_HEIGHT,
-  },
-  gradientBottomOverlay: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: verticalScale(120),
-    zIndex: 2,
-  },
-  indicatorContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    marginTop: verticalScale(10),
-  },
-  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(SliderTwo);

package/src/components/Content/Card/Sliders/index.ts

@@ -1,15 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 09 Jun 2025 at 03:12 PM
- */
-import SliderOne from './Styles/One';
-import SliderTwo from './Styles/Two';
-
-const Sliders = {
-  Styles: {
-    One: SliderOne,
-    Two: SliderTwo,
-  },
-};
-
-export default Sliders;