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

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

@@ -0,0 +1,377 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import FastImage, {
+  type ResizeMode,
+  type ImageStyle,
+} from 'react-native-fast-image';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { Text } from '../../../Text';
+import { ImageOff } from 'lucide-react-native';
+import type { ITheme } from '../../../../theme/themes';
+import RentOrBuyIcon from './RentOrBuyIcon';
+import LiveBadge from './LiveBadge';
+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';
+
+// 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);
+
+export type CardPosterProps = {
+  content_offering_type?: IContentData['content_offering_type'];
+  contentType?: IContentData['type'];
+  posterUri: string;
+  theme: ITheme;
+  isLoading?: boolean;
+  borderRadius?: number;
+  posterWrapperStyle?: StyleProp<ViewStyle>;
+  imageStyle?: StyleProp<ImageStyle>;
+  resizeMode?: ResizeMode;
+  showRankNumber?: boolean;
+  rankNumber?: number;
+  isLive?: boolean;
+};
+
+// ----------------------------------
+// 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,
+  borderRadius = scale(6),
+  posterWrapperStyle,
+  imageStyle,
+  isLoading = false,
+  resizeMode = FastImage.resizeMode.cover,
+  showRankNumber = false,
+  rankNumber,
+  isLive = false,
+}) => {
+  const { showSkeleton, showFallback, imageSource, handleLoad, handleError } =
+    useImageLoader({
+      imageUri: posterUri,
+      isLoading,
+    });
+
+  // Memoize theme colors
+  const themeColors = useMemo(
+    () => ({
+      background: theme.colors.background,
+      skeletonBaseColor: theme.colors.skeletonBaseColor,
+      skeletonHighlightColor: theme.colors.skeletonHighlightColor,
+      error: theme.colors.error,
+      errorContainer: theme.colors.errorContainer,
+      border: theme.colors.border,
+    }),
+    [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
+  const imageStyleArray = useMemo(
+    () => [styles.absolute, imageStyle],
+    [imageStyle]
+  );
+
+  // Check if content type is vertical
+  const isVerticalContent = useMemo(
+    () => contentType === 'VERTICAL_STREAM',
+    [contentType]
+  );
+
+  // 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;
+  const shouldShowLiveBadge =
+    !showSkeleton && !showFallback && (isLive || contentType === 'live_stream');
+
+  return (
+    <View style={wrapperStyle}>
+      {/* Rent/Buy */}
+      {shouldShowRentOrBuyIcon && (
+        <RentOrBuyIcon
+          key={posterUri}
+          content_offering_type={content_offering_type}
+          theme={theme}
+        />
+      )}
+
+      {/* Live Badge */}
+      {shouldShowLiveBadge && (
+        <LiveBadge
+          key={`${posterUri}-live`}
+          theme={theme}
+          position={shouldShowRentOrBuyIcon ? 'topRight' : 'topLeft'}
+        />
+      )}
+
+      {/* 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>
+      )}
+
+      {/* Valid Image - Render when not showing fallback */}
+      {!showFallback && (
+        <FastImage
+          key={`${posterUri}-image`}
+          source={imageSource}
+          style={imageStyleArray as ImageStyle}
+          resizeMode={resizeMode}
+          onLoad={handleLoad}
+          onError={handleError}
+        />
+      )}
+
+      {/* Skeleton */}
+      {showSkeleton && (
+        <View style={[styles.absolute]} pointerEvents="none">
+          <SkeletonPlaceholder
+            backgroundColor={themeColors.skeletonBaseColor}
+            highlightColor={themeColors.skeletonHighlightColor}
+          >
+            <SkeletonPlaceholder.Item width="100%" height="100%" />
+          </SkeletonPlaceholder>
+        </View>
+      )}
+
+      {/* 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>
+          </LinearGradient>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(CardPoster);
+
+const styles = StyleSheet.create({
+  posterWrapper: {
+    overflow: 'hidden',
+    position: 'relative',
+  },
+
+  absolute: {
+    ...StyleSheet.absoluteFill,
+  },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fallbackWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderWidth: scale(1),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fallback: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    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%',
+    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,
+    paddingHorizontal: scale(8),
+    paddingVertical: scale(1),
+  },
+});

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

@@ -0,0 +1,125 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Tue 14 Jul 2026 at 11:48 AM
+ */
+
+import React, { useEffect, useRef, useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  Animated,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Text } from '../../../Text';
+import type { ITheme } from '../../../../theme/themes';
+import { toRgba } from '../../../../theme/utils/toRgba';
+
+interface LiveBadgeProps {
+  theme?: ITheme;
+  position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+  style?: StyleProp<ViewStyle>;
+  size?: 'small' | 'large';
+}
+
+const LiveBadge: React.FC<LiveBadgeProps> = ({
+  theme,
+  position = 'topRight',
+  style,
+  size = 'small',
+}) => {
+  const pulseAnimation = useRef(new Animated.Value(0.4)).current;
+  const isLargeSize = size === 'large';
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnimation, {
+          toValue: 1,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulseAnimation, {
+          toValue: 0.4,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [pulseAnimation]);
+
+  const badgePositionStyle = useMemo<ViewStyle>(() => {
+    const isTop = position.startsWith('top');
+    const isLeft = position.endsWith('Left');
+    return {
+      [isTop ? 'top' : 'bottom']: scale(6),
+      [isLeft ? 'left' : 'right']: scale(6),
+    };
+  }, [position]);
+
+  const badgeContainerStyle = useMemo(
+    () => [
+      styles.container,
+      isLargeSize && {
+        paddingHorizontal: scale(7),
+        paddingVertical: scale(2),
+        borderRadius: scale(4.5),
+      },
+      { backgroundColor: toRgba(theme?.colors.alert.error || '#FF3B30', 0.85) },
+      badgePositionStyle,
+      style,
+    ],
+    [theme?.colors.alert.error, isLargeSize, badgePositionStyle, style]
+  );
+
+  return (
+    <View style={badgeContainerStyle}>
+      <Animated.View
+        style={[
+          styles.dot,
+          isLargeSize && {
+            width: scale(6),
+            height: scale(6),
+            borderRadius: scale(3),
+            marginRight: scale(5),
+          },
+          { opacity: pulseAnimation },
+        ]}
+      />
+      <Text
+        style={[styles.text, isLargeSize && { fontSize: RFValue(9.5) }]}
+        color="#FFFFFF"
+      >
+        LIVE
+      </Text>
+    </View>
+  );
+};
+
+export default React.memo(LiveBadge);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: scale(5),
+    paddingVertical: scale(1.5),
+    borderRadius: scale(3.5),
+  },
+  dot: {
+    width: scale(4.2),
+    height: scale(4.2),
+    borderRadius: scale(2.1),
+    marginRight: scale(3.5),
+    backgroundColor: '#FFFFFF',
+  },
+  text: {
+    fontSize: RFValue(7.2),
+    fontWeight: '800',
+    letterSpacing: 0.5,
+  },
+});

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

@@ -0,0 +1,97 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+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 { useTheme } from '../../../../theme';
+import type { ThemeOverride } from '../../../../theme/themes';
+
+interface IProps {
+  title: string;
+  onPress: () => void;
+  titleStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  showAllProps?: Partial<ShowAllButtonProps>;
+  isLoading?: boolean;
+  theme?: ThemeOverride;
+}
+
+const NavigateToMore: React.FC<IProps> = ({
+  onPress,
+  title,
+  titleStyle,
+  containerStyle,
+  showAllProps,
+  isLoading = false,
+  theme,
+}): React.ReactElement => {
+  const { theme: appliedTheme } = useTheme(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}>
+        <Text
+          style={[styles.title, titleStyle]}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {title}
+        </Text>
+      </View>
+      <ShowAllButton onPress={onPress} {...showAllProps} />
+    </View>
+  );
+};
+
+export default NavigateToMore;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: verticalScale(6),
+    marginTop: verticalScale(1),
+  },
+  titleWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: RFValue(13),
+    fontWeight: '500',
+    textTransform: 'capitalize',
+  },
+});