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

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

@@ -1,416 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Thu 26 Jun 2025 at 10:00 AM
- */
-
-import React, { memo, useCallback, useMemo, useRef } from 'react';
-import {
-  View,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-  type AccessibilityProps,
-  type ListRenderItem,
-} from 'react-native';
-
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import FastImage from 'react-native-fast-image';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-import type {
-  IAdItem,
-  IGetSectionData,
-  ISectionContent,
-  MoreFetchData,
-} from '../../../../types';
-
-import type { ITheme, ThemeOverride } from '../../../../theme/themes';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-
-import NavigateToMore from '../components/NavigateToMore';
-import CardPoster from '../components/CardPoster';
-import { AdsPoster } from '../components';
-import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
-import { useCards } from '../../../../hooks';
-
-// Constants
-const DEFAULT_WIDTH = moderateScale(172);
-const DEFAULT_BORDER_RADIUS = moderateScale(5);
-const DEFAULT_SKELETON_COUNT = 3;
-const END_REACHED_THRESHOLD = 0.5;
-const ITEM_ASPECT_RATIO = 0.67;
-const SKELETON_TITLE_WIDTH = moderateScale(100);
-const SKELETON_TITLE_HEIGHT = verticalScale(14);
-const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
-const SKELETON_ITEM_MARGIN = moderateScale(12);
-const ITEM_MARGIN_LEFT = moderateScale(10);
-const ITEM_MARGIN_RIGHT = moderateScale(12);
-const ITEM_ACTIVE_OPACITY = 0.8;
-const DEFAULT_BACKGROUND_COLOR = '#2c2c2c';
-const DEFAULT_IMAGE_BACKGROUND_COLOR = '#222';
-
-// Types
-type MovieCardTwoProps = {
-  title: string;
-  section_id: string;
-  type: IGetSectionData['type'];
-  data: ISectionContent | null;
-  moreFetchData?: MoreFetchData<IContentData>;
-  onPressItem?: (item: IContentData) => void;
-  onPressMore?: (params: {
-    section_id: IGetSectionData['_id'];
-    name: IGetSectionData['name'];
-    type: IGetSectionData['type'];
-  }) => void;
-  renderItemImage?: (params: {
-    item: IContentData;
-    index: number;
-  }) => React.ReactNode;
-  itemWidth?: number;
-  borderRadius?: number;
-  skeletonCount?: number;
-  paginationSkeletonCount?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  itemStyle?: StyleProp<ViewStyle>;
-  isLoading?: boolean;
-  theme?: ThemeOverride;
-  onDisplayAds?: (ad: IServeAd) => void;
-  screenDimensions?: { width: number; height: number };
-  viewportOffsets?: {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-  };
-} & AccessibilityProps;
-
-// Main Component
-const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
-  title,
-  section_id,
-  data: externalData,
-  moreFetchData,
-  onPressMore,
-  onPressItem,
-  type,
-  renderItemImage,
-  itemWidth = DEFAULT_WIDTH,
-  borderRadius = DEFAULT_BORDER_RADIUS,
-  skeletonCount = DEFAULT_SKELETON_COUNT,
-  paginationSkeletonCount,
-  containerStyle,
-  titleStyle,
-  itemStyle,
-  isLoading = false,
-  theme,
-  accessibilityLabel,
-  accessibilityHint,
-  onDisplayAds,
-  screenDimensions,
-  viewportOffsets,
-}) => {
-  // Refs
-  const flatListRef = useRef<FlatList<IContentData | IAdItem>>(null);
-  const onEndReachedCalledDuringMomentum = useRef(false);
-
-  // Theme
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  // Styles
-  const styles = useMemo(
-    () => getStyles(appliedTheme, itemWidth, borderRadius),
-    [appliedTheme, itemWidth, borderRadius]
-  );
-
-  // Data Management
-  const {
-    listData,
-    pagination,
-    loadMore,
-    isEmpty,
-    isPaging: isPaginating,
-  } = useCards({
-    sectionId: section_id,
-    data: externalData,
-    fetchMore: moreFetchData,
-    loading: isLoading,
-    initialSkeleton: skeletonCount,
-    pagingSkeleton: paginationSkeletonCount,
-    adsRender: false,
-  });
-
-  // Event Handlers
-  const handleItemPress = useCallback(
-    (item: IContentData) => onPressItem?.(item),
-    [onPressItem]
-  );
-
-  const handlePressMore = useCallback(() => {
-    onPressMore?.({
-      section_id,
-      name: title,
-      type,
-    });
-  }, [onPressMore, section_id, title, type]);
-
-  const handleEndReached = useCallback(() => {
-    if (
-      !onEndReachedCalledDuringMomentum.current &&
-      pagination?.hasNextPage &&
-      pagination?.nextPage
-    ) {
-      onEndReachedCalledDuringMomentum.current = true;
-      loadMore(pagination.nextPage);
-    }
-  }, [pagination, loadMore]);
-
-  const handleMomentumScrollBegin = useCallback(() => {
-    onEndReachedCalledDuringMomentum.current = false;
-  }, []);
-
-  // Render Functions
-
-  const renderItem = useCallback(
-    ({ item, index }: { item: IContentData | IAdItem; index: number }) => {
-      // Handle ads
-      if ('type' in item && item.type === 'ads') {
-        const adItem = item as IAdItem;
-        return (
-          <View
-            key={`ad-${adItem.tracking?.impression || index}`}
-            style={[styles.item, index === 0 && styles.firstAdItem, itemStyle]}
-          >
-            <AdsPoster
-              ad={adItem}
-              theme={appliedTheme}
-              isLoading={isLoading}
-              containerStyle={{
-                width: itemWidth,
-                height: itemWidth / ITEM_ASPECT_RATIO,
-              }}
-              imageStyle={styles.image}
-              borderRadius={borderRadius}
-              onDisplayAds={onDisplayAds}
-              screenDimensions={screenDimensions}
-              viewportOffsets={viewportOffsets}
-            />
-          </View>
-        );
-      }
-
-      // Handle content items
-      const contentItem = item as IContentData;
-      const isSkeleton =
-        contentItem._id?.startsWith?.('pagination-skeleton') ?? false;
-
-      return (
-        <TouchableOpacity
-          key={contentItem._id}
-          style={[
-            styles.item,
-            index === 0 && styles.firstContentItem,
-            itemStyle,
-          ]}
-          activeOpacity={ITEM_ACTIVE_OPACITY}
-          onPress={() => {
-            if (!isSkeleton && !isLoading) {
-              handleItemPress(contentItem);
-            }
-          }}
-        >
-          {renderItemImage ? (
-            renderItemImage({ item, index })
-          ) : (
-            <CardPoster
-              posterUri={contentItem.poster}
-              content_offering_type={contentItem.content_offering_type}
-              contentType={contentItem.type}
-              theme={appliedTheme}
-              borderRadius={borderRadius}
-              posterWrapperStyle={styles.image}
-              resizeMode={FastImage.resizeMode.cover}
-              isLoading={isSkeleton || isLoading}
-            />
-          )}
-        </TouchableOpacity>
-      );
-    },
-    [
-      styles.item,
-      styles.firstContentItem,
-      styles.image,
-      styles.firstAdItem,
-      itemStyle,
-      renderItemImage,
-      appliedTheme,
-      borderRadius,
-      isLoading,
-      itemWidth,
-      onDisplayAds,
-      screenDimensions,
-      viewportOffsets,
-      handleItemPress,
-    ]
-  );
-
-  const renderSkeletonItem: ListRenderItem<null> = useCallback(
-    ({ index }) => (
-      <SkeletonPlaceholder
-        key={`skeleton-${index}`}
-        highlightColor={appliedTheme.colors.skeletonHighlightColor}
-        backgroundColor={appliedTheme.colors.skeletonBaseColor}
-      >
-        <SkeletonPlaceholder.Item
-          width={itemWidth}
-          height={itemWidth / ITEM_ASPECT_RATIO}
-          borderRadius={borderRadius}
-          marginRight={SKELETON_ITEM_MARGIN}
-          marginLeft={index === 0 ? SKELETON_ITEM_MARGIN : 0}
-        />
-      </SkeletonPlaceholder>
-    ),
-    [appliedTheme, itemWidth, borderRadius]
-  );
-
-  const keyExtractor = useCallback(
-    (item: IContentData | IAdItem, index: number) => {
-      return '_id' in item ? item._id : `ad-${index}`;
-    },
-    []
-  );
-
-  const renderPaginationFooter = useCallback(() => {
-    if (!isPaginating) return null;
-
-    return (
-      <SkeletonPlaceholder
-        highlightColor={appliedTheme.colors.skeletonHighlightColor}
-        backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        borderRadius={borderRadius}
-      >
-        <SkeletonPlaceholder.Item
-          width={itemWidth}
-          height={itemWidth / ITEM_ASPECT_RATIO}
-          borderRadius={borderRadius}
-          marginRight={SKELETON_ITEM_MARGIN}
-        />
-      </SkeletonPlaceholder>
-    );
-  }, [isPaginating, appliedTheme, borderRadius, itemWidth]);
-
-  // Early Returns
-  if (!externalData) return null;
-  if (!isLoading && listData.length === 0 && !isEmpty) return null;
-
-  // Loading State
-  if (isLoading) {
-    return (
-      <View style={[styles.root, containerStyle]}>
-        <SkeletonPlaceholder
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        >
-          <SkeletonPlaceholder.Item
-            width={SKELETON_TITLE_WIDTH}
-            height={SKELETON_TITLE_HEIGHT}
-            borderRadius={SKELETON_TITLE_BORDER_RADIUS}
-            marginLeft={SKELETON_ITEM_MARGIN}
-            marginBottom={verticalScale(6)}
-          />
-        </SkeletonPlaceholder>
-
-        <FlatList
-          data={Array.from({ length: skeletonCount }, () => null)}
-          horizontal
-          keyExtractor={(_, index) => `skeleton-${index}`}
-          renderItem={renderSkeletonItem}
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.listContent}
-        />
-      </View>
-    );
-  }
-
-  // Main Render
-  return (
-    <View
-      style={[styles.root, containerStyle]}
-      testID={`movie-card-two-${section_id}`}
-      accessibilityLabel={accessibilityLabel || `CardTwo section: ${title}`}
-      accessibilityHint={accessibilityHint || 'Scroll to view content'}
-    >
-      <NavigateToMore
-        title={title}
-        onPress={handlePressMore}
-        containerStyle={styles.navigateToMoreContainer}
-        titleStyle={[
-          styles.title,
-          { color: appliedTheme.colors.textPrimary },
-          titleStyle,
-        ]}
-        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
-      />
-
-      <FlatList
-        ref={flatListRef}
-        data={listData}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        keyExtractor={keyExtractor}
-        renderItem={renderItem}
-        contentContainerStyle={styles.listContent}
-        onEndReached={handleEndReached}
-        onEndReachedThreshold={END_REACHED_THRESHOLD}
-        onMomentumScrollBegin={handleMomentumScrollBegin}
-        ListFooterComponent={renderPaginationFooter()}
-      />
-    </View>
-  );
-};
-
-// Styles
-const getStyles = (theme: ITheme, width: number, radius: number) =>
-  StyleSheet.create({
-    root: {
-      marginVertical: verticalScale(6),
-    },
-    item: {
-      width,
-      height: width / ITEM_ASPECT_RATIO,
-      marginRight: ITEM_MARGIN_RIGHT,
-      borderRadius: radius,
-      overflow: 'hidden',
-      backgroundColor: theme.colors.background ?? DEFAULT_BACKGROUND_COLOR,
-    },
-    firstContentItem: {
-      marginLeft: ITEM_MARGIN_LEFT,
-    },
-    firstAdItem: {
-      marginLeft: ITEM_MARGIN_LEFT,
-    },
-    image: {
-      width: '100%',
-      height: '100%',
-      borderRadius: radius,
-      backgroundColor:
-        theme.colors.background ?? DEFAULT_IMAGE_BACKGROUND_COLOR,
-    },
-    navigateToMoreContainer: {
-      paddingHorizontal: moderateScale(10),
-      marginBottom: verticalScale(8),
-    },
-    title: {
-      fontSize: RFValue(13),
-      fontWeight: '600',
-    },
-    listContent: {
-      paddingRight: moderateScale(15),
-    },
-  });
-
-export default memo(MovieCardTwo);

package/src/components/Content/Card/components/AdsPoster.tsx

@@ -1,202 +0,0 @@
-import { memo, useMemo } from 'react';
-import {
-  TouchableOpacity,
-  View,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { scale } from 'react-native-size-matters';
-import type { IServeAd } from '@zezosoft/zezo-ott-api-client';
-import CardPoster from './CardPoster';
-import { Text } from '../../../Text';
-import type { ITheme } from '../../../../theme';
-import { useAdTracking } from '../../../../hooks';
-
-type Props = {
-  ad: IServeAd;
-  theme: ITheme;
-  isLoading?: boolean;
-  containerStyle?: StyleProp<ViewStyle>;
-  imageStyle?: StyleProp<ViewStyle>;
-  onPress?: (item: IServeAd) => void;
-  borderRadius?: number;
-  onDisplayAds?: (ad: IServeAd) => void;
-  screenDimensions?: { width: number; height: number };
-  viewportOffsets?: {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-  };
-};
-
-// Constants
-const DEFAULT_BORDER_RADIUS = scale(6);
-const DEFAULT_AD_COLOR = '#CA091E';
-const TOUCHABLE_OPACITY = 0.85;
-
-// Badge styling constants
-const BADGE_POSITION = scale(4);
-const BADGE_MIN_WIDTH = scale(28);
-const BADGE_HEIGHT = scale(19);
-const BADGE_PADDING_HORIZONTAL = scale(8);
-const BADGE_BORDER_RADIUS = scale(12);
-const BADGE_FONT_SIZE = scale(9);
-const BADGE_LETTER_SPACING = 1.2;
-const BADGE_LINE_HEIGHT = scale(12);
-
-// Badge background with semi-transparent white for better visibility
-const BADGE_BACKGROUND = 'rgba(255, 255, 255, 0.95)';
-const BADGE_BORDER_WIDTH = scale(0.5);
-const BADGE_BORDER_COLOR = 'rgba(0, 0, 0, 0.08)';
-
-// Enhanced shadow for better depth and visibility
-const BADGE_SHADOW = {
-  shadowColor: '#000',
-  shadowOffset: { width: 0, height: scale(2) },
-  shadowOpacity: 0.25,
-  shadowRadius: scale(4),
-  elevation: 5,
-};
-
-export const AdsPoster = memo(
-  ({
-    ad,
-    theme,
-    isLoading = false,
-    containerStyle,
-    imageStyle,
-    borderRadius = DEFAULT_BORDER_RADIUS,
-    onPress,
-    onDisplayAds,
-    screenDimensions: propScreenDimensions,
-    viewportOffsets: propViewportOffsets,
-  }: Props) => {
-    const { colors } = theme;
-
-    const { viewRef, handleLayout } = useAdTracking({
-      ad,
-      onDisplayAds,
-      isLoading,
-      screenDimensions: propScreenDimensions,
-      viewportOffsets: propViewportOffsets,
-    });
-
-    // Memoize badge styles with dynamic positioning
-    const badgeStyle = useMemo(
-      () => [
-        styles.badge,
-        {
-          top: BADGE_POSITION,
-          left: BADGE_POSITION,
-          minWidth: BADGE_MIN_WIDTH,
-          height: BADGE_HEIGHT,
-          paddingHorizontal: BADGE_PADDING_HORIZONTAL,
-          borderRadius: BADGE_BORDER_RADIUS,
-        },
-        isLoading && styles.badgeSkeleton,
-      ],
-      [isLoading]
-    );
-
-    // Memoize badge text style with better typography
-    const badgeTextStyle = useMemo(
-      () => [
-        styles.badgeText,
-        {
-          color: colors.premiumIcon || DEFAULT_AD_COLOR,
-          lineHeight: BADGE_LINE_HEIGHT,
-        },
-      ],
-      [colors.premiumIcon]
-    );
-
-    // Memoize skeleton item style matching badge dimensions
-    const skeletonItemStyle = useMemo(
-      () => ({
-        width: BADGE_MIN_WIDTH,
-        height: BADGE_HEIGHT,
-        borderRadius: BADGE_BORDER_RADIUS,
-      }),
-      []
-    );
-
-    // Early return if no media URL
-    if (!ad?.mediaUrl) {
-      return null;
-    }
-
-    return (
-      <TouchableOpacity
-        ref={viewRef}
-        activeOpacity={TOUCHABLE_OPACITY}
-        disabled={isLoading}
-        onPress={() => onPress?.(ad)}
-        style={[styles.wrapper, containerStyle]}
-        accessibilityRole="button"
-        accessibilityLabel="Advertisement"
-        onLayout={handleLayout}
-      >
-        <View style={[styles.posterWrapper, { borderRadius }]}>
-          <CardPoster
-            posterUri={ad.mediaUrl}
-            theme={theme}
-            isLoading={isLoading}
-            posterWrapperStyle={imageStyle}
-            borderRadius={borderRadius}
-          />
-
-          {/* AD Badge */}
-          <View style={badgeStyle}>
-            {isLoading ? (
-              <SkeletonPlaceholder
-                backgroundColor={colors.skeletonBaseColor}
-                highlightColor={colors.skeletonHighlightColor}
-              >
-                <SkeletonPlaceholder.Item style={skeletonItemStyle} />
-              </SkeletonPlaceholder>
-            ) : (
-              <Text type="caption" weight="700" style={badgeTextStyle}>
-                AD
-              </Text>
-            )}
-          </View>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-);
-
-AdsPoster.displayName = 'AdsPoster';
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'relative',
-  },
-  posterWrapper: {
-    position: 'relative',
-  },
-  badge: {
-    position: 'absolute',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 10,
-    backgroundColor: BADGE_BACKGROUND,
-    borderWidth: BADGE_BORDER_WIDTH,
-    borderColor: BADGE_BORDER_COLOR,
-    ...BADGE_SHADOW,
-  },
-  badgeSkeleton: {
-    backgroundColor: 'transparent',
-    borderWidth: 0,
-    shadowOpacity: 0,
-    elevation: 0,
-  },
-  badgeText: {
-    fontSize: BADGE_FONT_SIZE,
-    letterSpacing: BADGE_LETTER_SPACING,
-    fontWeight: '700',
-  },
-});