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

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

@@ -1,377 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 24 Dec 2025 at 04:01 PM
- */
-
-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 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.5);
-
-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?: 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,
-  borderRadius = scale(6),
-  posterWrapperStyle,
-  imageStyle,
-  isLoading = false,
-  resizeMode = FastImage.resizeMode.cover,
-  showRankNumber = false,
-  rankNumber,
-}) => {
-  const {
-    showSkeleton,
-    showFallback,
-    hasValidImage,
-    imageSource,
-    imageLoading,
-    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 - 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]
-  );
-
-  // 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;
-
-  return (
-    <View style={wrapperStyle}>
-      {/* Rent/Buy */}
-      {shouldShowRentOrBuyIcon && (
-        <RentOrBuyIcon
-          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={[styles.absolute]}>
-          <SkeletonPlaceholder
-            backgroundColor={themeColors.skeletonBaseColor}
-            highlightColor={themeColors.skeletonHighlightColor}
-          >
-            <SkeletonPlaceholder.Item width="100%" height="100%" />
-          </SkeletonPlaceholder>
-        </View>
-      )}
-
-      {/* Valid Image - Render when has valid image, but keep hidden until loaded */}
-      {hasValidImage && !showFallback && (
-        <FastImage
-          key={`${posterUri}-image`}
-          source={imageSource}
-          style={imageStyleArray}
-          resizeMode={resizeMode}
-          onLoad={handleLoad}
-          onError={handleError}
-        />
-      )}
-
-      {/* 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.absoluteFillObject,
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  visible: { opacity: 1 },
-  hidden: { opacity: 0 },
-  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%',
-    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

@@ -1,97 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 25 Jun 2025 at 11:59 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 { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-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 } = 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}>
-        <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',
-  },
-});

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

@@ -1,129 +0,0 @@
-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';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-import type { ITheme } from '../../../../theme/themes';
-
-interface RentOrBuyIconProps {
-  theme?: ITheme;
-  content_offering_type: IContentData['content_offering_type'];
-  position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-  style?: StyleProp<ViewStyle>;
-  size?: number;
-}
-
-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 }> = 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> = ({
-  theme,
-  content_offering_type,
-  style,
-  position = 'topLeft',
-  size = 22,
-}) => {
-  const typeUpper = useMemo(
-    () => content_offering_type?.toUpperCase(),
-    [content_offering_type]
-  );
-
-  const isValidType = useMemo(
-    () => typeUpper && ['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper),
-    [typeUpper]
-  );
-
-  const fillColor = useMemo(
-    () => theme?.colors.premiumIcon || '#CA091E',
-    [theme?.colors.premiumIcon]
-  );
-
-  const positionStyle = useMemo<ViewStyle>(() => {
-    switch (position) {
-      case 'topLeft':
-        return { top: 6, left: 6 };
-      case 'topRight':
-        return { top: 6, right: 6 };
-      case 'bottomLeft':
-        return { bottom: 6, left: 6 };
-      case 'bottomRight':
-        return { bottom: 6, right: 6 };
-      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]
-  );
-
-  if (!content_offering_type || !isValidType) return null;
-
-  return (
-    <View style={containerStyle}>
-      <View style={styles.iconWrapper}>
-        <IconComponent fillColor={fillColor} />
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(RentOrBuyIcon);
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    zIndex: 10,
-  },
-  iconWrapper: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    padding: scale(3),
-    borderRadius: 40,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    overflow: 'hidden',
-    elevation: 3,
-  },
-});

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

@@ -1,92 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 25 Jun 2025 at 11:58 AM
- **/
-
-import React from 'react';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  type GestureResponderEvent,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-import { moderateScale, scale } from 'react-native-size-matters';
-import { Text } from '../../../Text';
-import { ChevronRight } from 'lucide-react-native';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ThemeOverride } from '../../../../theme/themes';
-export type ShowAllButtonProps = {
-  text?: string;
-  onPress?: (event: GestureResponderEvent) => void;
-  iconSize?: number;
-  gap?: number;
-  iconColor?: string;
-  textStyle?: StyleProp<TextStyle>;
-  containerStyle?: StyleProp<ViewStyle>;
-  iconPosition?: 'left' | 'right';
-  IconComponent?: React.ReactNode;
-  theme?: ThemeOverride;
-};
-
-const ShowAllButton: React.FC<ShowAllButtonProps> = ({
-  text = 'Show All',
-  onPress,
-  iconSize = scale(14),
-  gap = 3,
-  iconColor = '#ffffff',
-  iconPosition = 'right',
-  IconComponent,
-  textStyle,
-  containerStyle,
-  theme: overrideTheme,
-}): React.ReactElement => {
-  const icon = IconComponent ?? (
-    <View style={styles.iconWrapper}>
-      <ChevronRight size={iconSize} color={iconColor} />
-    </View>
-  );
-
-  return (
-    <TouchableOpacity
-      style={[styles.buttonContainer, containerStyle]}
-      onPress={onPress}
-      activeOpacity={0.7}
-    >
-      <View style={[styles.innerRow, { columnGap: moderateScale(gap) }]}>
-        {iconPosition === 'left' && icon}
-        <Text style={[styles.text, textStyle]} theme={overrideTheme}>
-          {text}
-        </Text>
-        {iconPosition === 'right' && icon}
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-export default ShowAllButton;
-
-const styles = StyleSheet.create({
-  buttonContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  innerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  iconWrapper: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'center',
-  },
-  text: {
-    fontSize: RFValue(9),
-    fontWeight: '400',
-    textTransform: 'capitalize',
-    letterSpacing: 0.3,
-  },
-});