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

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

@@ -0,0 +1,404 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 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 { useTheme } from '../../../../theme';
+
+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);
+
+  // Theme
+  const { theme: appliedTheme } = useTheme(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 (isPaginating || !pagination?.hasNextPage || !pagination?.nextPage) {
+      return;
+    }
+
+    loadMore(pagination.nextPage);
+  }, [pagination, loadMore, isPaginating]);
+
+  // 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
+            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
+          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
+        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 undefined;
+
+    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}
+        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

@@ -0,0 +1,207 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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',
+  },
+});