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

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, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import FastImage, {
   type ResizeMode,
@@ -16,12 +16,26 @@ 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';
+import { convertColorWithOpacity } from '../../../../utils/colorUtils';
 
-// Module-level cache to track successfully loaded images
-const loadedImageCache = new Set<string>();
+// 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 };
+
+// Vertical badge styling constants
+const VERTICAL_BADGE_TEXT_SIZE = RFValue(7.5);
 
 export type CardPosterProps = {
   content_offering_type?: IContentData['content_offering_type'];
+  contentType?: IContentData['type'];
   posterUri: string;
   theme: ITheme;
   isLoading?: boolean;
@@ -29,63 +43,58 @@ export type CardPosterProps = {
   posterWrapperStyle?: StyleProp<ViewStyle>;
   imageStyle?: ImageStyle;
   resizeMode?: ResizeMode;
+  showRankNumber?: boolean;
+  rankNumber?: number;
+};
+
+// ----------------------------------
+// Image Fallback
+// ----------------------------------
+type ImageFallbackProps = {
+  errorColor: string;
+  bg: string;
 };
 
+const ImageFallback = React.memo<ImageFallbackProps>(({ errorColor, bg }) => (
+  <View
+    style={[styles.absolute, styles.center, { backgroundColor: bg }]}
+    accessible
+    accessibilityRole="image"
+    accessibilityLabel="Image failed to load"
+  >
+    <ImageOff size={scale(18)} color={errorColor} />
+    <Text style={styles.fallbackText} color={errorColor}>
+      Image Failed
+    </Text>
+  </View>
+));
+
+ImageFallback.displayName = 'ImageFallback';
 const CardPoster: React.FC<CardPosterProps> = ({
   content_offering_type,
+  contentType,
   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]);
-
-  // Reset image loading state when isLoading prop changes
-  useEffect(() => {
-    if (isLoading) {
-      setImageLoading(true);
-      setImageError(false);
-    }
-  }, [isLoading]);
-
-  useEffect(() => {
-    if (hasValidPoster) {
-      // Check if this image was already loaded successfully before
-      const isAlreadyLoaded = loadedImageCache.has(posterUri);
-
-      if (isAlreadyLoaded) {
-        // Image was loaded before, skip loading state
-        setImageLoading(false);
-        setImageError(false);
-      } else {
-        // Image not loaded before, show loading
-        setImageLoading(true);
-        setImageError(false);
-        FastImage.preload([{ uri: posterUri }]);
-      }
-    } else {
-      setImageLoading(false);
-      setImageError(true);
-    }
-  }, [posterUri, hasValidPoster]);
-
-  const showSkeleton = useMemo(
-    () => isLoading || (imageLoading && !imageError && hasValidPoster),
-    [isLoading, imageLoading, imageError, hasValidPoster]
-  );
+  const {
+    showSkeleton,
+    showFallback,
+    hasValidImage,
+    imageSource,
+    imageLoading,
+    handleLoad,
+    handleError,
+  } = useImageLoader({
+    imageUri: posterUri,
+    isLoading,
+  });
 
   // Memoize theme colors
   const themeColors = useMemo(
@@ -95,141 +104,174 @@ const CardPoster: React.FC<CardPosterProps> = ({
       skeletonHighlightColor: theme.colors.skeletonHighlightColor,
       error: theme.colors.error,
       errorContainer: theme.colors.errorContainer,
+      border: theme.colors.border,
     }),
     [theme.colors]
   );
 
-  const fallbackImageStyle: ImageStyle = useMemo(
-    () => ({
-      width: '100%',
-      aspectRatio: 2 / 3,
-      borderRadius,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-    }),
-    [borderRadius]
-  );
-
-  // Memoize FastImage source
-  const imageSource = useMemo(
-    () => ({
-      uri: posterUri,
-      cache: FastImage.cacheControl.immutable,
-      priority: FastImage.priority.normal,
-    }),
-    [posterUri]
-  );
-
-  // Memoize callback handlers
-  const handleLoadStart = useCallback(() => {
-    // Only set loading if image is not already in cache
-    if (!loadedImageCache.has(posterUri)) {
-      setImageLoading(true);
-      setImageError(false);
-    }
-  }, [posterUri]);
-
-  const handleLoad = useCallback(() => {
-    setImageLoading(false);
-    setImageError(false);
-    // Add to cache when successfully loaded
-    loadedImageCache.add(posterUri);
-  }, [posterUri]);
-
-  const handleError = useCallback(() => {
-    setImageLoading(false);
-    setImageError(true);
-  }, []);
-
   // Memoize wrapper style
   const wrapperStyle = useMemo(
     () => [
       styles.posterWrapper,
-      { borderRadius, backgroundColor: themeColors.background },
+      {
+        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, posterWrapperStyle]
-  );
-
-  // Memoize skeleton wrapper style
-  const skeletonWrapperStyle = useMemo(
-    () => [styles.skeletonWrapper, { borderRadius }],
-    [borderRadius]
+    [
+      borderRadius,
+      themeColors.background,
+      themeColors.border,
+      themeColors.error,
+      showSkeleton,
+      showFallback,
+      posterWrapperStyle,
+    ]
   );
 
   // Memoize skeleton item style
-  const skeletonItemStyle = useMemo(
-    () => [styles.skeleton, { borderRadius }],
-    [borderRadius]
-  );
 
-  // Memoize image style array
+  // Memoize image style array - hide image until it successfully loads
   const imageStyleArray = useMemo(
     () => [
-      fallbackImageStyle,
-      showSkeleton ? styles.hidden : styles.visible,
+      styles.absolute,
+      // Hide image when skeleton is showing or image is still loading
+      showSkeleton || imageLoading ? styles.hidden : styles.visible,
       imageStyle,
     ],
-    [fallbackImageStyle, showSkeleton, imageStyle]
+    [showSkeleton, imageLoading, imageStyle]
   );
 
-  // Memoize fallback wrapper style
-  const fallbackWrapperStyle = useMemo(
-    () => [
-      styles.fallbackWrapper,
-      {
-        borderRadius,
-        backgroundColor: themeColors.background,
-        borderColor: themeColors.error,
-      },
-    ],
-    [borderRadius, themeColors.background, themeColors.error]
+  // Check if content type is vertical
+  const isVerticalContent = useMemo(
+    () => contentType === 'VERTICAL_STREAM',
+    [contentType]
   );
 
-  // Memoize fallback inner style
-  const fallbackInnerStyle = useMemo(
-    () => [styles.fallback, { backgroundColor: themeColors.errorContainer }],
-    [themeColors.errorContainer]
-  );
+  // Memoize vertical badge gradient colors using primary colors
+  const verticalBadgeColors = useMemo(() => {
+    const primary = theme.colors.primary;
+    const secondary = theme.colors.secondary || primary;
+
+    return [
+      convertColorWithOpacity(primary, 0.9),
+      convertColorWithOpacity(secondary, 0.9),
+    ];
+  }, [theme.colors.primary, theme.colors.secondary]);
+
+  // Derived visibility flags for clearer JSX conditions
+  const shouldShowRentOrBuyIcon =
+    !showSkeleton && !showFallback && !!content_offering_type;
+  const shouldShowVerticalBadge =
+    !showSkeleton && !showFallback && isVerticalContent;
+  const shouldShowFallback = !isLoading && !showSkeleton && showFallback;
+  const shouldShowRankNumber = !showSkeleton && !!showRankNumber;
 
   return (
     <View style={wrapperStyle}>
-      {!showSkeleton && content_offering_type && (
+      {/* Rent/Buy */}
+      {shouldShowRentOrBuyIcon && (
         <RentOrBuyIcon
-          theme={theme}
           key={posterUri}
           content_offering_type={content_offering_type}
+          theme={theme}
         />
       )}
+
+      {/* Vertical Badge */}
+      {shouldShowVerticalBadge && (
+        <View
+          style={[
+            styles.verticalBadgeContainer,
+            showRankNumber && styles.verticalBadgeContainerRight,
+          ]}
+          accessible
+          accessibilityRole="text"
+          accessibilityLabel="Vertical video"
+        >
+          <LinearGradient
+            colors={verticalBadgeColors}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={[
+              styles.verticalBadge,
+              showRankNumber && styles.verticalBadgeRight,
+            ]}
+          >
+            <Text style={styles.verticalBadgeText} color="#FFFFFF">
+              VERTICAL
+            </Text>
+          </LinearGradient>
+        </View>
+      )}
+
+      {/* Skeleton */}
       {showSkeleton && (
-        <View style={skeletonWrapperStyle}>
+        <View style={[styles.absolute]}>
           <SkeletonPlaceholder
             backgroundColor={themeColors.skeletonBaseColor}
             highlightColor={themeColors.skeletonHighlightColor}
           >
-            <SkeletonPlaceholder.Item style={skeletonItemStyle} />
+            <SkeletonPlaceholder.Item width="100%" height="100%" />
           </SkeletonPlaceholder>
         </View>
       )}
-      {hasValidPoster && (
+
+      {/* Valid Image - Render when has valid image, but keep hidden until loaded */}
+      {hasValidImage && !showFallback && (
         <FastImage
+          key={`${posterUri}-image`}
           source={imageSource}
           style={imageStyleArray}
           resizeMode={resizeMode}
-          onLoadStart={handleLoadStart}
           onLoad={handleLoad}
           onError={handleError}
         />
       )}
-      {!showSkeleton && (!hasValidPoster || imageError) && (
-        <View style={fallbackWrapperStyle}>
-          <View style={fallbackInnerStyle}>
-            <ImageOff size={scale(18)} color={themeColors.error} />
-            <Text style={styles.fallbackText} color={themeColors.error}>
-              Image Failed
+
+      {/* Fallback */}
+      {shouldShowFallback && (
+        <ImageFallback
+          key={`${posterUri}-fallback`}
+          errorColor={themeColors.error}
+          bg={themeColors.errorContainer}
+        />
+      )}
+
+      {/* Rank Number */}
+      {shouldShowRankNumber && (
+        <View
+          style={styles.numberContainer}
+          accessible
+          accessibilityRole="text"
+          accessibilityLabel={
+            typeof rankNumber === 'number'
+              ? `Rank ${rankNumber}`
+              : 'Rank number'
+          }
+        >
+          <LinearGradient
+            colors={theme.colors.backgroundLayoutGradient}
+            start={GRADIENT_START}
+            end={GRADIENT_END}
+            style={[styles.rankNumberBox]}
+          >
+            <Text
+              style={styles.rankNumberText}
+              color={theme.colors.textPrimary}
+            >
+              {rankNumber ?? ''}
             </Text>
-          </View>
+          </LinearGradient>
         </View>
       )}
     </View>
@@ -240,27 +282,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',
@@ -269,10 +307,71 @@ 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,
+  },
+  verticalBadgeContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 15,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 6,
+  },
+  verticalBadgeContainerRight: {
+    left: 'auto',
+    right: 0,
+    width: 'auto',
+  },
+  verticalBadge: {
+    width: '100%',
+    paddingHorizontal: scale(8),
+    paddingVertical: scale(4),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 0,
+  },
+  verticalBadgeRight: {
+    width: 'auto',
+    paddingHorizontal: scale(10),
+    borderTopLeftRadius: scale(4),
+  },
+  verticalBadgeText: {
+    fontSize: VERTICAL_BADGE_TEXT_SIZE,
+    fontWeight: '700',
+    letterSpacing: scale(0.5),
+    textAlign: 'center',
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+    includeFontPadding: false,
+  },
 });

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

@@ -11,10 +11,13 @@ import {
   type TextStyle,
   type ViewStyle,
 } from 'react-native';
-import { verticalScale } from 'react-native-size-matters';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import ShowAllButton, { type ShowAllButtonProps } from './ShowAllButton';
 import { Text } from '../../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../../theme/themes';
 
 interface IProps {
   title: string;
@@ -22,6 +25,8 @@ interface IProps {
   titleStyle?: StyleProp<TextStyle>;
   containerStyle?: StyleProp<ViewStyle>;
   showAllProps?: Partial<ShowAllButtonProps>;
+  isLoading?: boolean;
+  theme?: ThemeOverride;
 }
 
 const NavigateToMore: React.FC<IProps> = ({
@@ -30,7 +35,30 @@ const NavigateToMore: React.FC<IProps> = ({
   titleStyle,
   containerStyle,
   showAllProps,
+  isLoading = false,
+  theme,
 }): React.ReactElement => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
+
+  if (isLoading) {
+    return (
+      <SkeletonPlaceholder
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+      >
+        <View style={[styles.container, containerStyle]}>
+          <View style={styles.titleWrapper}>
+            <SkeletonPlaceholder.Item
+              width={moderateScale(100)}
+              height={verticalScale(14)}
+              borderRadius={moderateScale(4)}
+            />
+          </View>
+        </View>
+      </SkeletonPlaceholder>
+    );
+  }
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={styles.titleWrapper}>

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

@@ -0,0 +1 @@
+export * from './AdsPoster';