@zezosoft/zezo-ott-react-native-ui-kit 1.0.4 → 1.0.6

package/src/components/Content/Card/Sliders/Styles/One.tsx

@@ -19,9 +19,10 @@ import { Play } from 'lucide-react-native';
 import { Text } from '../../../../Text';
 import Display from '../../../../../utils/Display';
 import type { IContentData, ISectionContent } from '../../../../../types';
-import type { AppTheme } from '../../../../../theme/themes';
-import { useTheme } from '../../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../components/RentOrBuyIcon';
+import type { ThemeOverride } from '../../../../../theme/themes';
 
 // Constants
 const DEFAULT_SKELETON_COUNT = 3;
@@ -37,7 +38,7 @@ type SliderOneProps = {
   showPlayIcon?: boolean;
   isLoading?: boolean;
   skeletonCount?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 // ImageTouchable component
@@ -73,7 +74,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
   accessibilityLabel = 'Content carousel',
   accessibilityHint = 'Swipe to view content',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const contentData = useMemo(() => data?.data ?? [], [data]);
   const [activeIndex, setActiveIndex] = useState<number>(0);
 
@@ -89,6 +90,10 @@ const SliderOne: React.FC<SliderOneProps> = ({
     ({ item }: { item: IContentData }) => (
       <View style={styles.sliderContainer}>
         <ImageTouchable onImagePress={() => onPressItem?.(item)}>
+          <RentOrBuyIcon
+            theme={appliedTheme}
+            content_offering_type={item.content_offering_type}
+          />
           <FastImage
             source={{
               uri: item.thumbnail,
@@ -137,7 +142,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
         </ImageTouchable>
       </View>
     ),
-    [onPressItem, showPlayIcon, appliedTheme.colors]
+    [appliedTheme, showPlayIcon, onPressItem]
   );
 
   // Render skeleton item

package/src/components/Content/Card/Sliders/Styles/Two.tsx

@@ -15,12 +15,13 @@ import FastImage from 'react-native-fast-image';
 import LinearGradient from 'react-native-linear-gradient';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { Text } from '../../../../Text';
-import { useTheme } from '../../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
 import Display from '../../../../../utils/Display';
 import { ThumbnailCard } from '../../components/ThumbnailCard';
 import type { IContentData, ISectionContent } from '../../../../../types';
-import type { AppTheme } from '../../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../components/RentOrBuyIcon';
+import type { ThemeOverride } from '../../../../../theme/themes';
 
 const FULL_WIDTH = Display.fullWidth;
 const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
@@ -30,7 +31,7 @@ type SliderTwoProps = {
   onPressItem?: (item: IContentData) => void;
   isLoading?: boolean;
   skeletonCount?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const SliderTwo: React.FC<SliderTwoProps> = ({
@@ -42,7 +43,7 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
   accessibilityHint = 'Swipe to view content',
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const contentData = useMemo(() => data?.data ?? [], [data]);
   const [activeIndex, setActiveIndex] = useState(0);
   const gradientColors = useMemo(
@@ -74,6 +75,10 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
         accessibilityRole="button"
         accessibilityLabel={`View ${item.name}`}
       >
+        <RentOrBuyIcon
+          theme={appliedTheme}
+          content_offering_type={item.content_offering_type}
+        />
         <ThumbnailCard
           thumbnailUri={item.thumbnail}
           theme={appliedTheme}

package/src/components/Content/Card/Styles/Five.tsx

@@ -23,8 +23,8 @@ import FastImage from 'react-native-fast-image';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import { useTheme } from '../../../../theme/hook/useTheme';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import type {
   IContentData,
   IGetSectionData,
@@ -38,7 +38,7 @@ const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
 
 type MovieCardFiveProps = {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   title: string;
   section_id: string;
   type: IGetSectionData['type'];
@@ -83,7 +83,7 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
   accessibilityLabel,
   accessibilityHint,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
   const styles = useMemo(
@@ -134,6 +134,7 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}
@@ -219,7 +220,7 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
               titleStyle,
             ]}
             containerStyle={styles.navigateToMoreContainer}
-            showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
           />
           <FlatList
             ref={flatListRef}

package/src/components/Content/Card/Styles/Four.tsx

@@ -20,7 +20,7 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import NavigateToMore from '../components/NavigateToMore';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import FastImage from 'react-native-fast-image';
 import type {
@@ -29,7 +29,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 // default values
@@ -62,7 +62,7 @@ type MovieCardFourProps = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const MovieCardFour: React.FC<MovieCardFourProps> = ({
@@ -88,7 +88,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
@@ -139,6 +139,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}
@@ -227,7 +228,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
               titleStyle,
             ]}
             containerStyle={styles.navigateToMoreContainer}
-            showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
           />
           <FlatList
             ref={flatListRef}

package/src/components/Content/Card/Styles/One.tsx

@@ -18,7 +18,7 @@ import {
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
@@ -28,7 +28,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 // Constants
@@ -61,7 +61,7 @@ type MovieCardProps = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const MovieCard: React.FC<MovieCardProps> = ({
@@ -87,7 +87,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
@@ -130,6 +130,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
     ({ item, index }: ListRenderItemInfo<IContentData>) => {
       return (
         <TouchableOpacity
+          key={item._id}
           style={[styles.item, itemStyle]}
           onPress={() => handleItemPress(item)}
           activeOpacity={0.8}
@@ -138,6 +139,8 @@ const MovieCard: React.FC<MovieCardProps> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              key={item._id}
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}
@@ -227,13 +230,13 @@ const MovieCard: React.FC<MovieCardProps> = ({
           titleStyle,
         ]}
         containerStyle={styles.navigateToMoreContainer}
-        showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
       />
       <FlatList
         ref={flatListRef}
         data={data}
         horizontal
-        keyExtractor={(item, index) => `${item._id}-${index}`}
+        keyExtractor={(item, index) => (item._id ? item._id : `item-${index}`)}
         renderItem={renderItem}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.listContent}
@@ -273,6 +276,9 @@ const getStyles = (
       borderRadius: radius,
       backgroundColor: theme.colors.surfaceVariant,
     },
+    imageWrapper: {
+      position: 'relative',
+    },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(10),
       marginBottom: verticalScale(8),

package/src/components/Content/Card/Styles/RotateInOut.tsx

@@ -19,7 +19,7 @@ import Carousel from 'react-native-snap-carousel';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { debounce } from 'lodash';
 
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 
@@ -30,7 +30,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme } from '../../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 const { width, height } = Dimensions.get('window');
@@ -80,7 +80,7 @@ type Props = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const RotateCarousel: React.FC<Props> = ({
@@ -102,7 +102,7 @@ const RotateCarousel: React.FC<Props> = ({
   isLoading = false,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const carouselRef = useRef<any>(null);
 
   // Memoized dynamic styles
@@ -229,6 +229,7 @@ const RotateCarousel: React.FC<Props> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}
@@ -288,7 +289,7 @@ const RotateCarousel: React.FC<Props> = ({
             titleStyle,
           ]}
           containerStyle={staticStyles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
         />
       )}
       <Carousel

package/src/components/Content/Card/Styles/Six.tsx

@@ -20,12 +20,12 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import FastImage from 'react-native-fast-image';
 
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { ThumbnailCard } from '../components/ThumbnailCard';
 import { Text } from '../../../Text';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import type { AppTheme } from '../../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
 import type {
   IContentData,
   IGetSectionData,
@@ -33,12 +33,13 @@ import type {
   MoreFetchData,
 } from '../../../../types';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../components/RentOrBuyIcon';
 const DEFAULT_ITEM_WIDTH = moderateScale(160);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
 
 type MovieCardSixProps = {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   title: string;
   section_id: string;
   type: IGetSectionData['type'];
@@ -80,7 +81,7 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const paginated = usePaginatedSection(
     section_id,
@@ -123,6 +124,10 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
         onPress={() => handleItemPress(item)}
         activeOpacity={0.8}
       >
+        <RentOrBuyIcon
+          theme={appliedTheme}
+          content_offering_type={item.content_offering_type}
+        />
         <ThumbnailCard
           thumbnailUri={item.thumbnail}
           theme={appliedTheme}
@@ -226,7 +231,7 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
               titleStyle,
             ]}
             containerStyle={styles.navigateToMoreContainer}
-            showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
           />
           <FlatList
             ref={flatListRef}

package/src/components/Content/Card/Styles/Three.tsx

@@ -21,7 +21,7 @@ import { debounce } from 'lodash';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import type {
@@ -30,7 +30,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme } from '../../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 const { width, height } = Dimensions.get('window');
@@ -80,7 +80,7 @@ type Props = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const MovieCardThree: React.FC<Props> = ({
@@ -102,7 +102,7 @@ const MovieCardThree: React.FC<Props> = ({
   isLoading = false,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const carouselRef = useRef<any>(null);
 
@@ -230,6 +230,7 @@ const MovieCardThree: React.FC<Props> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}
@@ -287,7 +288,7 @@ const MovieCardThree: React.FC<Props> = ({
             titleStyle,
           ]}
           containerStyle={staticStyles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
         />
       )}
       <Carousel

package/src/components/Content/Card/Styles/TopTen.tsx

@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type {
@@ -26,7 +26,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import FastImage from 'react-native-fast-image';
 import LinearGradient from 'react-native-linear-gradient';
 import { Text } from '../../../Text';
@@ -58,7 +58,7 @@ type TopTenCardProps = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const TopTenCard: React.FC<TopTenCardProps> = ({
@@ -83,7 +83,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
     [appliedTheme, itemWidth, itemHeight, borderRadius]
@@ -132,6 +132,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
             style={styles.imageOverlay}
           >
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               isLoading={isLoading}
               borderRadius={borderRadius}
@@ -239,7 +240,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
         }
         titleStyle={[styles.title, titleStyle]}
         containerStyle={styles.navigateToMoreContainer}
-        showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
       />
       <FlatList
         ref={flatListRef}

package/src/components/Content/Card/Styles/Two.tsx

@@ -27,8 +27,8 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import CardPoster from '../components/CardPoster';
 import { RFValue } from 'react-native-responsive-fontsize';
@@ -61,7 +61,7 @@ type MovieCardTwoProps = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
@@ -87,7 +87,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
   const flatListRef = useRef<FlatList<IContentData>>(null);
 
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, borderRadius),
@@ -144,6 +144,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}
@@ -237,7 +238,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
           { color: appliedTheme.colors.textPrimary },
           titleStyle,
         ]}
-        showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
       />
       <FlatList
         ref={flatListRef}