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

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

@@ -1,134 +0,0 @@
-/**
- * @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 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 Mon 13 Jul 2026 at 10:13 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,
-  },
-});

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

@@ -1,219 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import type {
-  ImageStyle as FastImageStyle,
-  ResizeMode,
-} from 'react-native-fast-image';
-import FastImage 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 { RFValue } from 'react-native-responsive-fontsize';
-
-// Module-level cache to track successfully loaded images
-const loadedImageCache = new Set<string>();
-
-export type ThumbnailCardProps = {
-  thumbnailUri?: string;
-  theme: ITheme;
-  isLoading?: boolean;
-  borderRadius?: number;
-  wrapperStyle?: StyleProp<ViewStyle>;
-  imageStyle?: FastImageStyle;
-  resizeMode?: ResizeMode;
-};
-
-export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
-  thumbnailUri = '',
-  theme,
-  isLoading = false,
-  borderRadius = 0,
-  wrapperStyle,
-  imageStyle,
-  resizeMode = FastImage.resizeMode.cover,
-}) => {
-  const [imageLoading, setImageLoading] = useState(true);
-  const [imageError, setImageError] = useState(false);
-
-  const hasValidThumbnail = useMemo(
-    () => !!thumbnailUri && thumbnailUri.startsWith('http'),
-    [thumbnailUri]
-  );
-
-  // Reset image loading state when isLoading prop changes
-  useEffect(() => {
-    if (isLoading) {
-      setImageLoading(true);
-      setImageError(false);
-    }
-  }, [isLoading]);
-
-  // Reset when thumbnailUri changes
-  useEffect(() => {
-    if (hasValidThumbnail) {
-      // Check if this image was already loaded successfully before
-      const isAlreadyLoaded = loadedImageCache.has(thumbnailUri);
-
-      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: thumbnailUri }]);
-      }
-    } else {
-      setImageLoading(false);
-      setImageError(true);
-    }
-  }, [thumbnailUri, hasValidThumbnail]);
-
-  const showSkeleton = useMemo(
-    () => isLoading || (imageLoading && !imageError && hasValidThumbnail),
-    [isLoading, imageLoading, imageError, hasValidThumbnail]
-  );
-
-  const fallbackImageStyle = useMemo<FastImageStyle>(
-    () => ({
-      width: '100%',
-      aspectRatio: 16 / 9,
-      borderRadius,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-    }),
-    [borderRadius]
-  );
-
-  const wrapperStyleMemo = useMemo(
-    () => [
-      styles.thumbnailWrapper,
-      {
-        borderRadius,
-        backgroundColor: theme.colors.background,
-        shadowColor: theme.colors.shadow,
-      },
-      wrapperStyle,
-    ],
-    [borderRadius, theme.colors.background, theme.colors.shadow, wrapperStyle]
-  );
-
-  const skeletonWrapperStyle = useMemo(
-    () => [styles.skeletonWrapper, { borderRadius }],
-    [borderRadius]
-  );
-
-  const fallbackStyle = useMemo(
-    () => [
-      styles.fallback,
-      {
-        borderRadius,
-        backgroundColor: theme.colors.errorContainer,
-        borderColor: theme.colors.error,
-      },
-    ],
-    [borderRadius, theme.colors.errorContainer, theme.colors.error]
-  );
-
-  const handleLoadStart = useCallback(() => {
-    // Only set loading if image is not already in cache
-    if (!loadedImageCache.has(thumbnailUri)) {
-      setImageLoading(true);
-      setImageError(false);
-    }
-  }, [thumbnailUri]);
-
-  const handleLoadEnd = useCallback(() => {
-    setImageLoading(false);
-    setImageError(false);
-    // Add to cache when successfully loaded
-    loadedImageCache.add(thumbnailUri);
-  }, [thumbnailUri]);
-
-  const handleError = useCallback(() => {
-    setImageLoading(false);
-    setImageError(true);
-  }, []);
-
-  return (
-    <View style={wrapperStyleMemo}>
-      {hasValidThumbnail && (
-        <FastImage
-          source={{ uri: thumbnailUri }}
-          style={[fallbackImageStyle, imageStyle]}
-          resizeMode={resizeMode}
-          onLoadStart={handleLoadStart}
-          onLoadEnd={handleLoadEnd}
-          onError={handleError}
-        />
-      )}
-
-      {showSkeleton && (
-        <View style={skeletonWrapperStyle} pointerEvents="none">
-          <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
-          >
-            <SkeletonPlaceholder.Item
-              style={[styles.skeleton, { borderRadius }]}
-            />
-          </SkeletonPlaceholder>
-        </View>
-      )}
-
-      {!showSkeleton && (!hasValidThumbnail || imageError) && (
-        <View style={fallbackStyle}>
-          <ImageOff size={scale(18)} color={theme.colors.error} />
-          <Text style={styles.fallbackText} color={theme.colors.error}>
-            Image Failed
-          </Text>
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default React.memo(ThumbnailCard);
-
-const styles = StyleSheet.create({
-  thumbnailWrapper: {
-    width: '100%',
-    aspectRatio: 16 / 9,
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  skeletonWrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    aspectRatio: 16 / 9,
-    overflow: 'hidden',
-  },
-  skeleton: {
-    width: '100%',
-    aspectRatio: 16 / 9,
-  },
-  fallback: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    aspectRatio: 16 / 9,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  fallbackText: {
-    marginTop: scale(4),
-    fontSize: RFValue(9),
-  },
-});

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

@@ -1,12 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-export * from './AdsPoster';
-export * from './CardPoster';
-export * from './LiveBadge';
-export * from './NavigateToMore';
-export * from './RentOrBuyIcon';
-export * from './ShowAllButton';
-export * from './ThumbnailCard';

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

@@ -1,31 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import StyleOne from './Styles/One';
-import TopTen from './Styles/TopTen';
-import StyleTwo from './Styles/Two';
-import StyleThree from './Styles/Three';
-import StyleFour from './Styles/Four';
-import StyleFive from './Styles/Five';
-import StyleSix from './Styles/Six';
-import NowWatching from './NowWatching/NowWatching';
-import RotateCarousel from './Styles/RotateInOut';
-import CategoryCard from './Category/Category';
-const Cards = {
-  Styles: {
-    One: StyleOne,
-    Two: StyleTwo,
-    Three: StyleThree,
-    Four: StyleFour,
-    Five: StyleFive,
-    Six: StyleSix,
-    TopTen: TopTen,
-    RotateCarousel,
-    NowWatching,
-    Category: CategoryCard,
-  },
-};
-
-export default Cards;