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

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

@@ -1,9 +1,9 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sat 25 Oct 2025 at 04:01 PM
+ * @lastModified Wed 24 Dec 2025 at 04:01 PM
  */
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import FastImage, {
   type ResizeMode,
@@ -16,6 +16,18 @@ import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
 import RentOrBuyIcon from './RentOrBuyIcon';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { useImageLoader } from '../../../../hooks';
+import LinearGradient from 'react-native-linear-gradient';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+// Rank number styling constants
+const RANK_NUMBER_SIZE = scale(40);
+const RANK_NUMBER_BORDER_RADIUS = scale(30);
+const RANK_NUMBER_TEXT_SIZE = RFValue(25);
+const RANK_NUMBER_TEXT_MARGIN_TOP = scale(2);
+const RANK_NUMBER_TEXT_MARGIN_RIGHT = scale(6);
+const GRADIENT_START = { x: 1, y: 0.5 };
+const GRADIENT_END = { x: 0.5, y: 1 };
 
 export type CardPosterProps = {
   content_offering_type?: IContentData['content_offering_type'];
@@ -26,129 +38,161 @@ export type CardPosterProps = {
   posterWrapperStyle?: StyleProp<ViewStyle>;
   imageStyle?: ImageStyle;
   resizeMode?: ResizeMode;
+  showRankNumber?: boolean;
+  rankNumber?: number;
 };
 
+// ----------------------------------
+// Image Fallback
+// ----------------------------------
+const ImageFallback = React.memo(({ errorColor, bg }: any) => (
+  <View style={[styles.absolute, styles.center, { backgroundColor: bg }]}>
+    <ImageOff size={scale(18)} color={errorColor} />
+    <Text style={styles.fallbackText} color={errorColor}>
+      Image Failed
+    </Text>
+  </View>
+));
 const CardPoster: React.FC<CardPosterProps> = ({
   content_offering_type,
   posterUri,
   theme,
-  isLoading = false,
   borderRadius = scale(6),
   posterWrapperStyle,
   imageStyle,
+  isLoading = false,
   resizeMode = FastImage.resizeMode.cover,
+  showRankNumber = false,
+  rankNumber,
 }) => {
-  const [imageLoading, setImageLoading] = useState(true);
-  const [imageError, setImageError] = useState(false);
-
-  const hasValidPoster = useMemo(() => {
-    if (!posterUri || typeof posterUri !== 'string') return false;
-    const cleaned = posterUri.trim();
-    return (
-      (cleaned.startsWith('http://') || cleaned.startsWith('https://')) &&
-      /\.(jpg|jpeg|png|webp|gif|bmp)$/i.test(cleaned)
-    );
-  }, [posterUri]);
-
-  useEffect(() => {
-    if (hasValidPoster) {
-      setImageLoading(true);
-      setImageError(false);
-      FastImage.preload([{ uri: posterUri }]);
-    } else {
-      setImageLoading(false);
-      setImageError(true);
-    }
-  }, [posterUri, hasValidPoster]);
-
-  const showSkeleton =
-    isLoading || (imageLoading && !imageError && hasValidPoster);
-
-  const fallbackImageStyle: ImageStyle = useMemo(
+  const {
+    showSkeleton,
+    showFallback,
+    hasValidImage,
+    imageSource,
+    imageLoading,
+    handleLoad,
+    handleError,
+  } = useImageLoader({
+    imageUri: posterUri,
+    isLoading,
+  });
+
+  // Memoize theme colors
+  const themeColors = useMemo(
     () => ({
-      width: '100%',
-      aspectRatio: 2 / 3,
-      borderRadius,
-      position: 'absolute',
-      top: 0,
-      left: 0,
+      background: theme.colors.background,
+      skeletonBaseColor: theme.colors.skeletonBaseColor,
+      skeletonHighlightColor: theme.colors.skeletonHighlightColor,
+      error: theme.colors.error,
+      errorContainer: theme.colors.errorContainer,
+      border: theme.colors.border,
     }),
-    [borderRadius]
+    [theme.colors]
+  );
+
+  // Memoize wrapper style
+  const wrapperStyle = useMemo(
+    () => [
+      styles.posterWrapper,
+      {
+        width: '100%' as const,
+        aspectRatio: 2 / 3,
+        borderRadius,
+        backgroundColor: themeColors.background,
+        borderWidth: showSkeleton ? scale(0.5) : showFallback ? scale(0.3) : 0,
+        borderColor: showSkeleton
+          ? themeColors.border
+          : showFallback
+            ? themeColors.error
+            : 'transparent',
+      } as ViewStyle,
+      posterWrapperStyle,
+    ],
+    [
+      borderRadius,
+      themeColors.background,
+      themeColors.border,
+      themeColors.error,
+      showSkeleton,
+      showFallback,
+      posterWrapperStyle,
+    ]
+  );
+
+  // Memoize skeleton item style
+
+  // Memoize image style array - hide image until it successfully loads
+  const imageStyleArray = useMemo(
+    () => [
+      styles.absolute,
+      // Hide image when skeleton is showing or image is still loading
+      showSkeleton || imageLoading ? styles.hidden : styles.visible,
+      imageStyle,
+    ],
+    [showSkeleton, imageLoading, imageStyle]
   );
 
   return (
-    <View
-      style={[
-        styles.posterWrapper,
-        { borderRadius, backgroundColor: theme.colors.background },
-        posterWrapperStyle,
-      ]}
-    >
-      {!showSkeleton && content_offering_type && (
+    <View style={wrapperStyle}>
+      {/* Rent/Buy */}
+      {!showSkeleton && !showFallback && content_offering_type && (
         <RentOrBuyIcon
-          theme={theme}
           key={posterUri}
           content_offering_type={content_offering_type}
+          theme={theme}
         />
       )}
+
+      {/* Skeleton */}
       {showSkeleton && (
-        <View style={[styles.skeletonWrapper, { borderRadius }]}>
+        <View style={[styles.absolute]}>
           <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
+            backgroundColor={themeColors.skeletonBaseColor}
+            highlightColor={themeColors.skeletonHighlightColor}
           >
-            <SkeletonPlaceholder.Item
-              style={[styles.skeleton, { borderRadius }]}
-            />
+            <SkeletonPlaceholder.Item width="100%" height="100%" />
           </SkeletonPlaceholder>
         </View>
       )}
-      {hasValidPoster && (
+
+      {/* Valid Image - Render when has valid image, but keep hidden until loaded */}
+      {hasValidImage && !showFallback && (
         <FastImage
-          source={{
-            uri: posterUri,
-            cache: FastImage.cacheControl.immutable,
-            priority: FastImage.priority.normal,
-          }}
-          style={[
-            fallbackImageStyle,
-            showSkeleton ? styles.hidden : styles.visible,
-            imageStyle,
-          ]}
+          key={`${posterUri}-image`}
+          source={imageSource}
+          style={imageStyleArray}
           resizeMode={resizeMode}
-          onLoadStart={() => {
-            setImageLoading(true);
-            setImageError(false);
-          }}
-          onLoad={() => setImageLoading(false)}
-          onError={() => {
-            setImageLoading(false);
-            setImageError(true);
-          }}
+          onLoad={handleLoad}
+          onError={handleError}
         />
       )}
-      {!showSkeleton && (!hasValidPoster || imageError) && (
-        <View
-          style={[
-            styles.fallbackWrapper,
-            {
-              borderRadius,
-              backgroundColor: theme.colors.background,
-              borderColor: theme.colors.error,
-            },
-          ]}
-        >
-          <View
-            style={[
-              styles.fallback,
-              { backgroundColor: theme.colors.errorContainer },
-            ]}
+
+      {/* Fallback */}
+      {!isLoading && !showSkeleton && showFallback && (
+        <ImageFallback
+          key={`${posterUri}-fallback`}
+          errorColor={themeColors.error}
+          bg={themeColors.errorContainer}
+        />
+      )}
+
+      {/* Rank Number */}
+      {!showSkeleton && showRankNumber && (
+        <View style={styles.numberContainer}>
+          <LinearGradient
+            colors={theme.colors.backgroundLayoutGradient}
+            start={GRADIENT_START}
+            end={GRADIENT_END}
+            style={[styles.rankNumberBox]}
           >
-            <ImageOff size={scale(18)} color={theme.colors.error} />
-            <Text style={styles.fallbackText} color={theme.colors.error}>
-              Image Failed
+            <Text
+              style={styles.rankNumberText}
+              color={theme.colors.textPrimary}
+            >
+              {rankNumber ?? ''}
             </Text>
-          </View>
+          </LinearGradient>
         </View>
       )}
     </View>
@@ -159,27 +203,23 @@ export default React.memo(CardPoster);
 
 const styles = StyleSheet.create({
   posterWrapper: {
-    width: '100%',
-    aspectRatio: 2 / 3,
     overflow: 'hidden',
     position: 'relative',
   },
-  skeletonWrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3,
+
+  absolute: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  skeleton: { width: '100%', aspectRatio: 2 / 3 },
   visible: { opacity: 1 },
   hidden: { opacity: 0 },
   fallbackWrapper: {
     position: 'absolute',
     top: 0,
     left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3,
     borderWidth: scale(1),
     alignItems: 'center',
     justifyContent: 'center',
@@ -188,10 +228,31 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3,
     alignItems: 'center',
     justifyContent: 'center',
   },
   fallbackText: { marginTop: scale(4), fontSize: 10 },
+  numberContainer: {
+    position: 'absolute',
+    bottom: -1,
+    left: 0,
+    zIndex: 10,
+  },
+  rankNumberBox: {
+    width: RANK_NUMBER_SIZE,
+    height: RANK_NUMBER_SIZE,
+    borderTopRightRadius: RANK_NUMBER_BORDER_RADIUS,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rankNumberText: {
+    fontSize: RANK_NUMBER_TEXT_SIZE,
+    fontWeight: '900',
+    textShadowColor: 'rgba(0, 0, 0, 0.6)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 3,
+    marginTop: RANK_NUMBER_TEXT_MARGIN_TOP,
+    marginRight: RANK_NUMBER_TEXT_MARGIN_RIGHT,
+    letterSpacing: 0.5,
+  },
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { scale } from 'react-native-size-matters';
@@ -13,30 +13,34 @@ interface RentOrBuyIconProps {
   size?: number;
 }
 
-const PremiumIcon: React.FC<{ fillColor: string }> = ({ fillColor }) => (
-  <Svg viewBox="0 0 1024 1024" width="100%" height="100%">
-    <Path
-      transform="translate(507,81)"
-      d="M0 0l19 1 15 3 15 6 11 6 13 10 11 11 9 13 8 15 5 17 2 14v15l-3 17-5 15-7 14-9 12-9 10-15 11-16 8-10 4h-3l13 49 12 36 9 24 14 30 9 17 13 21 10 13 11 13 7 8 11 9 10 8 12 7 16 7 21 5h28l16-4 15-5 22-12 12-9 10-8 10-9 9-9 2-3h2l2-4 8-9 13-18 7-10 9-15 11-19 13-27 5-13-5-2-13-12-7-8-7-11-6-15-2-11v-22l5-19 8-15 11-13 10-9 14-8 15-5 14-2h10l14 2 15 5 12 7 11 9 9 10 8 13 5 12 3 7v37l-2 2-4 11-7 13-9 11-7 7-16 10-16 6-10 2-4 16-10 53-11 57-22 115-14 73-11 56-7 37-3 4h-719l-3-9-14-72-23-120-17-88-23-120-1-2-14-3-12-5-10-6-11-9-11-13-9-17-4-12v-35h2l2-9 8-16 4-6 9-10 10-9 15-8 17-5 19-1 15 2 15 5 15 9 13 12 10 14 5 11 4 13 1 6v18l-3 16-7 16-6 9-11 13-13 9 4 10 17 35 10 17 12 19 13 17 8 10 14 15 11 11 14 11 13 9 21 11 19 6 10 2h27l25-6 17-9 9-5 13-11 8-7 5-5 9-10 13-17 13-22 9-16 13-28 8-21 12-35 11-41 3-13-19-8-12-7-10-8-13-13-10-15-7-16-4-15-1-8v-18l3-18 6-16 8-15 9-11 7-8 13-10 12-7 16-6 15-3z"
-      fill={fillColor}
-    />
-    <Path
-      transform="translate(785,818)"
-      d="M0 0l64 1 15 4 13 8 9 8 9 13 5 13 2 15-2 16-5 12-6 10-9 10-11 7-12 5-10 2h-672l-15-4-12-7-10-9-9-13-5-13-2-11v-9l3-15 8-16 11-12 10-7 11-5 10-2z"
-      fill={fillColor}
-    />
-  </Svg>
+const PremiumIcon: React.FC<{ fillColor: string }> = React.memo(
+  ({ fillColor }) => (
+    <Svg viewBox="0 0 1024 1024" width="100%" height="100%">
+      <Path
+        transform="translate(507,81)"
+        d="M0 0l19 1 15 3 15 6 11 6 13 10 11 11 9 13 8 15 5 17 2 14v15l-3 17-5 15-7 14-9 12-9 10-15 11-16 8-10 4h-3l13 49 12 36 9 24 14 30 9 17 13 21 10 13 11 13 7 8 11 9 10 8 12 7 16 7 21 5h28l16-4 15-5 22-12 12-9 10-8 10-9 9-9 2-3h2l2-4 8-9 13-18 7-10 9-15 11-19 13-27 5-13-5-2-13-12-7-8-7-11-6-15-2-11v-22l5-19 8-15 11-13 10-9 14-8 15-5 14-2h10l14 2 15 5 12 7 11 9 9 10 8 13 5 12 3 7v37l-2 2-4 11-7 13-9 11-7 7-16 10-16 6-10 2-4 16-10 53-11 57-22 115-14 73-11 56-7 37-3 4h-719l-3-9-14-72-23-120-17-88-23-120-1-2-14-3-12-5-10-6-11-9-11-13-9-17-4-12v-35h2l2-9 8-16 4-6 9-10 10-9 15-8 17-5 19-1 15 2 15 5 15 9 13 12 10 14 5 11 4 13 1 6v18l-3 16-7 16-6 9-11 13-13 9 4 10 17 35 10 17 12 19 13 17 8 10 14 15 11 11 14 11 13 9 21 11 19 6 10 2h27l25-6 17-9 9-5 13-11 8-7 5-5 9-10 13-17 13-22 9-16 13-28 8-21 12-35 11-41 3-13-19-8-12-7-10-8-13-13-10-15-7-16-4-15-1-8v-18l3-18 6-16 8-15 9-11 7-8 13-10 12-7 16-6 15-3z"
+        fill={fillColor}
+      />
+      <Path
+        transform="translate(785,818)"
+        d="M0 0l64 1 15 4 13 8 9 8 9 13 5 13 2 15-2 16-5 12-6 10-9 10-11 7-12 5-10 2h-672l-15-4-12-7-10-9-9-13-5-13-2-11v-9l3-15 8-16 11-12 10-7 11-5 10-2z"
+        fill={fillColor}
+      />
+    </Svg>
+  )
 );
 
-const BuyOrRentIcon: React.FC<{ fillColor: string }> = ({ fillColor }) => (
-  <Svg fill="none" viewBox="5 5 18 18" width="100%" height="100%">
-    <Path
-      fill={fillColor}
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.834 9.835H11.2c0-.108-.002-.215-.003-.319-.014-1.424-.024-2.412 2.734-2.412 2.504 0 2.732.453 2.732 2.73l1.365.001c0-3.871-.91-4.099-4.097-4.099h-.21c-3.225-.002-3.709-.002-3.887 4.1zm-.153-.001H7.712a1.976 1.976 0 00-1.976 1.976v6.064a4.252 4.252 0 004.252 4.252h7.886a4.252 4.252 0 004.252-4.252V11.81a1.976 1.976 0 00-1.976-1.976H18.18a.153.153 0 00-.153.153v3.716a.683.683 0 01-1.365 0V9.987a.153.153 0 00-.153-.153h-5.158a.153.153 0 00-.152.153v3.716a.683.683 0 01-1.366 0V9.987a.153.153 0 00-.153-.153z"
-    />
-  </Svg>
+const BuyOrRentIcon: React.FC<{ fillColor: string }> = React.memo(
+  ({ fillColor }) => (
+    <Svg fill="none" viewBox="5 5 18 18" width="100%" height="100%">
+      <Path
+        fill={fillColor}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.834 9.835H11.2c0-.108-.002-.215-.003-.319-.014-1.424-.024-2.412 2.734-2.412 2.504 0 2.732.453 2.732 2.73l1.365.001c0-3.871-.91-4.099-4.097-4.099h-.21c-3.225-.002-3.709-.002-3.887 4.1zm-.153-.001H7.712a1.976 1.976 0 00-1.976 1.976v6.064a4.252 4.252 0 004.252 4.252h7.886a4.252 4.252 0 004.252-4.252V11.81a1.976 1.976 0 00-1.976-1.976H18.18a.153.153 0 00-.153.153v3.716a.683.683 0 01-1.365 0V9.987a.153.153 0 00-.153-.153h-5.158a.153.153 0 00-.152.153v3.716a.683.683 0 01-1.366 0V9.987a.153.153 0 00-.153-.153z"
+      />
+    </Svg>
+  )
 );
 
 const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
@@ -46,14 +50,22 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
   position = 'topLeft',
   size = 22,
 }) => {
-  if (!content_offering_type) return null;
+  const typeUpper = useMemo(
+    () => content_offering_type?.toUpperCase(),
+    [content_offering_type]
+  );
 
-  const typeUpper = content_offering_type.toUpperCase();
-  if (!['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper)) return null;
+  const isValidType = useMemo(
+    () => typeUpper && ['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper),
+    [typeUpper]
+  );
 
-  const fillColor = theme?.colors.premiumIcon || '#CA091E';
+  const fillColor = useMemo(
+    () => theme?.colors.premiumIcon || '#CA091E',
+    [theme?.colors.premiumIcon]
+  );
 
-  const positionStyle: ViewStyle = (() => {
+  const positionStyle = useMemo<ViewStyle>(() => {
     switch (position) {
       case 'topLeft':
         return { top: 6, left: 6 };
@@ -66,18 +78,26 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
       default:
         return { top: 6, left: 6 };
     }
-  })();
+  }, [position]);
+
+  const IconComponent = useMemo(
+    () => (typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon),
+    [typeUpper]
+  );
+
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      { width: size, height: size },
+      style || positionStyle,
+    ],
+    [size, style, positionStyle]
+  );
 
-  const IconComponent = typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon;
+  if (!content_offering_type || !isValidType) return null;
 
   return (
-    <View
-      style={[
-        styles.container,
-        { width: size, height: size },
-        style || positionStyle,
-      ]}
-    >
+    <View style={containerStyle}>
       <View style={styles.iconWrapper}>
         <IconComponent fillColor={fillColor} />
       </View>
@@ -85,7 +105,7 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
   );
 };
 
-export default RentOrBuyIcon;
+export default React.memo(RentOrBuyIcon);
 
 const styles = StyleSheet.create({
   container: {