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

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

@@ -0,0 +1,134 @@
+/**
+ * @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

@@ -0,0 +1,92 @@
+/**
+ * @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

@@ -0,0 +1,219 @@
+/**
+ * @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

@@ -0,0 +1,12 @@
+/**
+ * @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

@@ -0,0 +1,31 @@
+/**
+ * @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;