@zezosoft/zezo-ott-react-native-ui-kit 1.0.5 → 1.0.7

package/src/components/ContentView/components/HeroBanner.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useState, useMemo, useCallback } from 'react';
-import { View, StyleSheet, Animated, Text } from 'react-native';
+import { View, StyleSheet, Animated } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
@@ -17,6 +17,8 @@ import MenuBtn from '../../Button/MenuBtn';
 import type { HeroBannerProps } from '../../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../theme/hook';
+import { Text } from '../../Text';
 
 const SKELETON_CIRCLE_SIZE = scale(50);
 const BANNER_HEIGHT = verticalScale(200);
@@ -26,7 +28,7 @@ const BACK_BTN_SIZE = scale(35);
 export const HeroBanner = ({
   backgroundImage,
   title,
-  theme,
+  theme: themeOverride,
   isLoading = false,
   onPressPlay,
   onBackPress,
@@ -36,6 +38,7 @@ export const HeroBanner = ({
   menuActions,
   content_offering_type,
 }: HeroBannerProps) => {
+  const { theme } = useInternalTheme(themeOverride);
   const [hasImageLoaded, setHasImageLoaded] = useState(false);
   const [imageLoadError, setImageLoadError] = useState(false);
 
@@ -128,6 +131,14 @@ export const HeroBanner = ({
           zIndex: 4,
           backgroundColor: theme.colors.background,
         },
+        badge: {
+          position: 'absolute',
+          bottom: verticalScale(20),
+          left: scale(10),
+          paddingHorizontal: scale(8),
+          paddingVertical: scale(4),
+          borderRadius: scale(8),
+        },
       }),
     [theme]
   );
@@ -154,7 +165,7 @@ export const HeroBanner = ({
         : (renderButtons?.back?.() ??
           (onBackPress && (
             <BackBtn
-              theme={theme}
+              theme={themeOverride}
               onPress={onBackPress}
               style={styles.defaultBackBtn}
               size={scale(20)}
@@ -181,7 +192,7 @@ export const HeroBanner = ({
         : menuActions &&
           (renderButtons?.menu?.() ?? (
             <MenuBtn
-              theme={theme}
+              theme={themeOverride}
               style={styles.defaultMenuBtn}
               actions={menuActions}
             />
@@ -190,33 +201,53 @@ export const HeroBanner = ({
       {/* Gradient Overlay */}
       <LinearGradient
         colors={theme.colors.heroBannerGradient}
-        style={[StyleSheet.absoluteFill, { zIndex: 3 }]}
+        style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
         locations={GRADIENT_LOCATIONS}
       />
 
       {/* Background Image */}
       {!isLoading && (
-        <View style={styles.imageContainer}>
+        <>
+          <View style={styles.imageContainer}>
+            <FastImage
+              style={StyleSheet.absoluteFillObject}
+              source={{
+                uri: backgroundImage,
+                cache: FastImage.cacheControl.immutable,
+              }}
+              resizeMode={FastImage.resizeMode.cover}
+              onLoad={() => setHasImageLoaded(true)}
+              onError={() => setImageLoadError(true)}
+              accessibilityLabel={`Background image for ${title}`}
+            />
+          </View>
+          {/* Badge above gradient */}
+          {content_offering_type && content_offering_type === 'FREE' && (
+            <View
+              style={[
+                styles.badge,
+                { backgroundColor: theme.colors.primary, zIndex: 2 },
+              ]}
+            >
+              <Text
+                type="caption"
+                style={{ color: theme.colors.onPrimary, fontWeight: '600' }}
+                theme={themeOverride}
+              >
+                {content_offering_type}
+              </Text>
+            </View>
+          )}
+
           {content_offering_type && (
             <RentOrBuyIcon
               size={30}
-              style={styles.rentOrBuyIcon}
+              theme={theme}
+              style={[styles.rentOrBuyIcon, { zIndex: 2 }]}
               content_offering_type={content_offering_type}
             />
           )}
-
-          <FastImage
-            style={StyleSheet.absoluteFillObject}
-            source={{
-              uri: backgroundImage,
-              cache: FastImage.cacheControl.immutable,
-            }}
-            resizeMode={FastImage.resizeMode.cover}
-            onLoad={() => setHasImageLoaded(true)}
-            onError={() => setImageLoadError(true)}
-            accessibilityLabel={`Background image for ${title}`}
-          />
-        </View>
+        </>
       )}
 
       {/* Skeleton UI */}
@@ -269,6 +300,8 @@ export const HeroBanner = ({
           <Animated.View style={styles.centeredContent}>
             {renderButtons?.play?.() ?? (
               <PlayButton
+                color={theme.colors.buttonText}
+                backgroundColor={theme.colors.button}
                 onPress={() => handlePressPlay({ is_trailer: false })}
               />
             )}
@@ -277,6 +310,8 @@ export const HeroBanner = ({
           <Animated.View style={styles.trailerButtonWrapper}>
             {renderButtons?.trailer?.() ?? (
               <TrailerButton
+                color={theme.colors.buttonText}
+                backgroundColor={theme.colors.button}
                 onPress={() => handlePressPlay({ is_trailer: true })}
               />
             )}

package/src/components/ContentView/components/MiniInfo.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { Text } from '../../Text';
+import type { IContentData } from '../../../types';
+import type { ThemeOverride } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { useInternalTheme } from '../../../theme/hook';
+
+type Props = {
+  content?: IContentData;
+  theme?: ThemeOverride;
+  isLoading?: boolean;
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    row?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    subTitle?: StyleProp<TextStyle>;
+    badge?: StyleProp<ViewStyle>;
+    price?: StyleProp<TextStyle>;
+    rating?: StyleProp<TextStyle>;
+  };
+};
+
+export function formatCurrency(
+  amount: number,
+  currency: string = 'INR'
+): string {
+  return new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(amount);
+}
+
+export const MiniInfo = ({
+  content,
+  theme,
+  isLoading = false,
+  style,
+}: Props): React.ReactElement | null => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
+
+  if (isLoading) {
+    // Skeleton Placeholder
+    return (
+      <View
+        style={[
+          styles.container,
+          style?.container,
+          {
+            backgroundColor: appliedTheme.colors.background,
+            borderColor: appliedTheme.colors.border,
+          },
+        ]}
+      >
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        >
+          <SkeletonPlaceholder.Item
+            flexDirection="row"
+            alignItems="center"
+            marginBottom={scale(6)}
+          >
+            <SkeletonPlaceholder.Item
+              width={scale(100)}
+              height={scale(20)}
+              borderRadius={scale(4)}
+            />
+            <SkeletonPlaceholder.Item
+              width={scale(60)}
+              height={scale(20)}
+              borderRadius={scale(4)}
+              marginLeft={scale(8)}
+            />
+          </SkeletonPlaceholder.Item>
+          <SkeletonPlaceholder.Item
+            width={scale(120)}
+            height={scale(16)}
+            borderRadius={scale(4)}
+            marginBottom={scale(4)}
+          />
+          <SkeletonPlaceholder.Item
+            width={scale(80)}
+            height={scale(14)}
+            borderRadius={scale(4)}
+          />
+        </SkeletonPlaceholder>
+      </View>
+    );
+  }
+
+  if (!content) return null;
+
+  const { content_offering_type, price, is_buy_or_rent, rent_duration } =
+    content;
+
+  if (content_offering_type !== 'BUY_OR_RENT') return null;
+
+  const renderBadge = () => (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: appliedTheme.colors.primary,
+          shadowColor: appliedTheme.colors.textPrimary,
+        },
+        style?.badge,
+      ]}
+    >
+      <Text
+        type="caption"
+        style={{ color: appliedTheme.colors.onPrimary, fontWeight: '600' }}
+        theme={theme}
+      >
+        {content_offering_type === 'BUY_OR_RENT' ? 'BUY OR RENT' : 'BUY'}
+      </Text>
+    </View>
+  );
+
+  const renderPriceInfo = () => {
+    if (!price) return null;
+    const text =
+      is_buy_or_rent === 'BUY'
+        ? `Price: ${formatCurrency(price)}`
+        : `Rent: ${formatCurrency(price)} for ${rent_duration ?? 1} day(s)`;
+
+    return (
+      <Text
+        type="subtitle"
+        style={[
+          styles.subTitle,
+          { color: appliedTheme.colors.textPrimary },
+          style?.price,
+        ]}
+        theme={theme}
+      >
+        {text}
+      </Text>
+    );
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        style?.container,
+        {
+          backgroundColor: appliedTheme.colors.background,
+          borderColor: appliedTheme.colors.border,
+        },
+      ]}
+    >
+      <View style={styles.headerRow}>{renderBadge()}</View>
+      {renderPriceInfo()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderRadius: scale(14),
+    padding: scale(10),
+    marginHorizontal: scale(6),
+    marginVertical: scale(6),
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: scale(6),
+  },
+  badge: {
+    paddingHorizontal: scale(10),
+    paddingVertical: scale(5),
+    borderRadius: scale(10),
+  },
+  subTitle: {
+    fontSize: RFValue(12),
+    marginTop: scale(3),
+    fontWeight: '500',
+  },
+});

package/src/components/ContentView/components/Title.tsx

@@ -78,26 +78,26 @@ export const Title = ({
 
   return (
     <View style={StyleSheet.flatten([styles.container, style?.container])}>
-      <View style={styles.row}>
+      <View>
         <Text
           color={theme.colors.textPrimary}
           style={StyleSheet.flatten([styles.title, style?.title])}
-          numberOfLines={1}
+          // numberOfLines={1}
           ellipsizeMode="tail"
         >
           {title}
+          {!!subtitle && (
+            <Text
+              color={theme.colors.textSecondary}
+              style={StyleSheet.flatten([styles.subTitle, style?.subTitle])}
+              // numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {' '}
+              {`: ${subtitle}`}
+            </Text>
+          )}
         </Text>
-
-        {!!subtitle && (
-          <Text
-            color={theme.colors.textSecondary}
-            style={StyleSheet.flatten([styles.subTitle, style?.subTitle])}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {`: ${subtitle}`}
-          </Text>
-        )}
       </View>
 
       {!!rating && (
@@ -117,25 +117,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(12),
     marginTop: scale(5),
   },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    maxWidth: '100%',
-  },
   title: {
-    fontSize: RFValue(17),
+    fontSize: RFValue(15),
     fontWeight: 'bold',
-    flexShrink: 1,
-    maxWidth: '60%',
   },
   subTitle: {
-    fontSize: RFValue(17),
-    marginLeft: scale(4),
-    flexShrink: 1,
-    maxWidth: '40%',
+    fontSize: RFValue(15),
+    marginLeft: scale(6),
   },
   rating: {
-    fontSize: RFValue(13),
+    fontSize: RFValue(12),
     marginTop: scale(4),
   },
 });

package/src/components/ContentView/components/TrailerButton.tsx

@@ -18,7 +18,7 @@ interface Props {
   onPress?: (event: GestureResponderEvent) => void;
   label?: string;
   iconSize?: number;
-  iconColor?: string;
+  color?: string;
   backgroundColor?: string;
   textStyle?: TextStyle;
   style?: ViewStyle;
@@ -28,7 +28,7 @@ export const TrailerButton = ({
   onPress,
   label = 'Watch Trailer',
   iconSize = scale(18),
-  iconColor = '#000',
+  color = '#000',
   backgroundColor = '#FFD700',
   textStyle,
   style,
@@ -39,8 +39,10 @@ export const TrailerButton = ({
       activeOpacity={0.8}
       style={[styles.button, { backgroundColor }, style]}
     >
-      <PlayCircle size={iconSize} color={iconColor} />
-      <Text style={[styles.text, textStyle]}> {label}</Text>
+      <PlayCircle size={iconSize} color={color} />
+      <Text style={[styles.text, textStyle]} color={color}>
+        {label}
+      </Text>
     </TouchableOpacity>
   );
 };
@@ -54,7 +56,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   text: {
-    color: '#000',
     fontWeight: '600',
     fontSize: scale(12),
     marginLeft: scale(2),

package/src/components/Fallbacks/NoContentFallback.tsx

@@ -0,0 +1,172 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 25 Oct 2025 at 11:15 AM
+ */
+
+import { useCallback } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Text } from '../Text';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { AlertCircle } from 'lucide-react-native';
+
+export type NoContentFallbackProps = {
+  message?: string;
+  retryText?: string;
+  onRetry?: () => void;
+  isLoading?: boolean;
+  theme?: ThemeOverride;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const NoContentFallback = ({
+  message = 'No content available right now.\nPlease check back later.',
+  retryText = 'Try Again',
+  onRetry,
+  isLoading = false,
+  theme,
+  style,
+}: NoContentFallbackProps) => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
+  const scaleValue = useSharedValue(1);
+
+  const handlePressIn = useCallback(() => {
+    if (isLoading) return; // disable press animation during loading
+    scaleValue.value = withSpring(0.95, { damping: 15, stiffness: 200 });
+  }, [scaleValue, isLoading]);
+
+  const handlePressOut = useCallback(() => {
+    if (isLoading) return;
+    scaleValue.value = withSpring(1, { damping: 15, stiffness: 200 });
+  }, [scaleValue, isLoading]);
+
+  const animatedButtonStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scaleValue.value }],
+  }));
+
+  return (
+    <Animated.View
+      style={[styles.container, style]}
+      accessibilityLabel="No content available"
+      accessibilityHint="Check back later or try again"
+    >
+      <AlertCircle
+        size={RFValue(63)}
+        color={
+          appliedTheme?.colors?.textPrimary ??
+          appliedTheme?.colors?.textSecondary ??
+          '#999'
+        }
+        style={{ marginBottom: scale(20) }}
+      />
+
+      <Text
+        style={[styles.message, { color: appliedTheme.colors.textSecondary }]}
+      >
+        {message}
+      </Text>
+
+      {onRetry && (
+        <TouchableOpacity
+          onPress={!isLoading ? onRetry : undefined}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          activeOpacity={0.7}
+          disabled={isLoading}
+          style={[
+            styles.retryButton,
+            {
+              backgroundColor: isLoading
+                ? appliedTheme.colors.surfaceDisabled
+                : appliedTheme.colors.primary,
+              borderColor: appliedTheme.colors.outline,
+              opacity: isLoading ? 0.8 : 1,
+            },
+          ]}
+          accessibilityLabel={retryText}
+          accessibilityRole="button"
+        >
+          <Animated.View
+            style={[
+              animatedButtonStyle,
+              {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+              },
+            ]}
+          >
+            {isLoading ? (
+              <>
+                <ActivityIndicator
+                  size="small"
+                  color={appliedTheme.colors.onPrimary}
+                  style={{ marginRight: scale(8) }}
+                />
+                <Text
+                  style={[
+                    styles.retryText,
+                    { color: appliedTheme.colors.onPrimary },
+                  ]}
+                >
+                  Loading...
+                </Text>
+              </>
+            ) : (
+              <Text
+                style={[
+                  styles.retryText,
+                  { color: appliedTheme.colors.onPrimary },
+                ]}
+              >
+                {retryText}
+              </Text>
+            )}
+          </Animated.View>
+        </TouchableOpacity>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: scale(20),
+    paddingVertical: verticalScale(40),
+  },
+  message: {
+    fontSize: RFValue(15),
+    textAlign: 'center',
+    fontWeight: '500',
+    lineHeight: verticalScale(22),
+    marginBottom: verticalScale(20),
+  },
+  retryButton: {
+    paddingHorizontal: scale(18),
+    paddingVertical: verticalScale(10),
+    borderRadius: scale(8),
+    borderWidth: scale(1),
+    alignItems: 'center',
+  },
+  retryText: {
+    fontSize: RFValue(13),
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

package/src/components/Fallbacks/NotFoundFallback.tsx

@@ -0,0 +1,86 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { Button } from '../Button';
+import type { ThemeOverride } from '../../theme';
+import { View } from '../View';
+import { Text } from '../Text';
+import { AlertCircle } from 'lucide-react-native';
+import { useInternalTheme } from '../../theme/hook';
+
+interface NotFoundFallbackProps {
+  title?: string;
+  subtitle?: string;
+  content?: React.ReactNode;
+  onPressBack?: () => void;
+  backButtonText?: string;
+  theme?: ThemeOverride;
+  iconSize?: number;
+  iconColor?: string;
+}
+
+export const NotFoundFallback: React.FC<NotFoundFallbackProps> = ({
+  title = 'Content Not Found',
+  subtitle = 'We couldn’t find anything to show here. Please check back later.',
+  content,
+  onPressBack,
+  backButtonText = 'Go Back',
+  theme,
+  iconSize = scale(60),
+  iconColor,
+}) => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
+  if (content) return <>{content}</>;
+
+  return (
+    <View style={styles.container}>
+      <AlertCircle
+        size={iconSize}
+        color={iconColor ?? appliedTheme?.colors?.textSecondary ?? '#999'}
+        style={{ marginBottom: scale(20) }}
+      />
+
+      <Text style={styles.title} type="title" theme={theme}>
+        {title}
+      </Text>
+      <Text style={styles.subtitle} type="subtitle" theme={theme}>
+        {subtitle}
+      </Text>
+
+      {onPressBack && (
+        <Button.Primary
+          theme={theme}
+          title={backButtonText}
+          onPress={onPressBack}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: scale(30),
+    paddingBottom: scale(30),
+    backgroundColor: 'transparent',
+  },
+  title: {
+    fontSize: scale(18),
+    fontWeight: '700',
+    marginBottom: scale(8),
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: scale(14),
+    textAlign: 'center',
+    marginBottom: scale(20),
+  },
+});