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

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

@@ -1,357 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 02 Jul 2025 at 04:50 PM
- */
-
-import React, { useMemo, useCallback } from 'react';
-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';
-import FastImage from 'react-native-fast-image';
-import tinycolor from 'tinycolor2';
-
-import { PlayButton } from './PlayButton';
-import { TrailerButton } from './TrailerButton';
-import BackBtn from '../../../Button/BackBtn';
-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';
-import { useImageLoader } from '../../../../hooks/Images';
-
-const SKELETON_CIRCLE_SIZE = scale(50);
-const BANNER_HEIGHT = verticalScale(200);
-const BACK_BTN_SIZE = scale(35);
-
-export const HeroBanner = React.memo(
-  ({
-    backgroundImage,
-    title,
-    theme: themeOverride,
-    isLoading = false,
-    onPressPlay,
-    onBackPress,
-    style,
-    renderButtons,
-    renderSkeletons,
-    menuActions,
-    content_offering_type,
-  }: HeroBannerProps) => {
-    const { theme } = useInternalTheme(themeOverride);
-
-    // Use reusable image loading hook with caching support
-    const {
-      imageError,
-      showSkeleton: imageShowSkeleton,
-      imageSource,
-      handleLoad: handleImageLoad,
-      handleError: handleImageError,
-    } = useImageLoader({
-      imageUri: backgroundImage || '',
-      isLoading,
-    });
-
-    const handlePressPlay = useCallback(
-      ({ is_trailer }: { is_trailer: boolean }) => {
-        onPressPlay?.({ is_trailer });
-      },
-      [onPressPlay]
-    );
-
-    const showSkeleton = useMemo(
-      () => isLoading || (imageShowSkeleton && !!backgroundImage),
-      [isLoading, imageShowSkeleton, backgroundImage]
-    );
-
-    // Memoize gradient colors - use theme gradient with optimized transition
-    const gradientColors = useMemo(() => {
-      const bgColorBase = theme.colors.background;
-      return [
-        tinycolor(bgColorBase).toRgbString(), // Solid at bottom (100% opacity)
-        tinycolor(bgColorBase).setAlpha(0.66).toRgbString(), // 66% opacity
-        tinycolor(bgColorBase).setAlpha(0.2).toRgbString(), // 20% opacity
-        tinycolor(bgColorBase).setAlpha(0.1).toRgbString(), // 10% opacity
-        'rgba(0, 0, 0, 0)',
-      ];
-    }, [theme.colors.background]);
-
-    const styles = useMemo(
-      () =>
-        StyleSheet.create({
-          container: {
-            height: BANNER_HEIGHT,
-            width: '100%',
-            overflow: 'hidden',
-            position: 'relative',
-            backgroundColor: theme.colors.backgroundDisabled,
-          },
-          rentOrBuyIcon: {
-            position: 'absolute',
-            bottom: verticalScale(20),
-            zIndex: 4,
-            left: scale(10),
-          },
-          centeredContent: {
-            ...StyleSheet.absoluteFillObject,
-            justifyContent: 'center',
-            alignItems: 'center',
-            zIndex: 4,
-            pointerEvents: 'box-none',
-          },
-          skeletonContainer: {
-            ...StyleSheet.absoluteFillObject,
-            backgroundColor: theme.colors.backgroundDisabled,
-            justifyContent: 'center',
-            alignItems: 'center',
-            zIndex: 2,
-          },
-          errorContainer: {
-            ...StyleSheet.absoluteFillObject,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: theme.colors.backgroundDisabled,
-            zIndex: 1,
-          },
-          errorText: {
-            color: theme.colors.textSecondary,
-            fontSize: RFValue(15),
-            textAlign: 'center',
-          },
-          imageContainer: {
-            ...StyleSheet.absoluteFillObject,
-            zIndex: 0,
-          },
-          trailerButtonWrapper: {
-            ...StyleSheet.absoluteFillObject,
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            bottom: verticalScale(10),
-            zIndex: 4,
-            pointerEvents: 'box-none',
-          },
-          backBtnSkeleton: {
-            position: 'absolute',
-            top: scale(6),
-            left: scale(13),
-            zIndex: 4,
-          },
-          menuBtnSkeleton: {
-            position: 'absolute',
-            top: scale(6),
-            right: scale(13),
-            zIndex: 4,
-          },
-          defaultBackBtn: {
-            position: 'absolute',
-            top: scale(6),
-            left: scale(13),
-            zIndex: 4,
-            backgroundColor: theme.colors.background,
-          },
-          defaultMenuBtn: {
-            position: 'absolute',
-            top: scale(6),
-            right: scale(13),
-            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]
-    );
-
-    return (
-      <View style={[styles.container, style]} accessibilityLabel={title}>
-        {/* Back Button */}
-        {showSkeleton
-          ? (renderSkeletons?.back?.() ?? (
-              <View style={styles.backBtnSkeleton}>
-                <SkeletonPlaceholder
-                  backgroundColor={theme.colors.skeletonBaseColor}
-                  highlightColor={theme.colors.skeletonHighlightColor}
-                  speed={800}
-                >
-                  <SkeletonPlaceholder.Item
-                    width={BACK_BTN_SIZE}
-                    height={BACK_BTN_SIZE}
-                    borderRadius={BACK_BTN_SIZE / 2}
-                  />
-                </SkeletonPlaceholder>
-              </View>
-            ))
-          : (renderButtons?.back?.() ??
-            (onBackPress && (
-              <BackBtn
-                theme={themeOverride}
-                onPress={onBackPress}
-                style={styles.defaultBackBtn}
-                size={scale(20)}
-              />
-            )))}
-
-        {/* Menu Button */}
-        {showSkeleton && menuActions
-          ? (renderSkeletons?.menu?.() ?? (
-              <View style={styles.menuBtnSkeleton}>
-                <SkeletonPlaceholder
-                  backgroundColor={theme.colors.skeletonBaseColor}
-                  highlightColor={theme.colors.skeletonHighlightColor}
-                  speed={800}
-                >
-                  <SkeletonPlaceholder.Item
-                    width={BACK_BTN_SIZE}
-                    height={BACK_BTN_SIZE}
-                    borderRadius={BACK_BTN_SIZE / 2}
-                  />
-                </SkeletonPlaceholder>
-              </View>
-            ))
-          : menuActions &&
-            (renderButtons?.menu?.() ?? (
-              <MenuBtn
-                theme={themeOverride}
-                style={styles.defaultMenuBtn}
-                actions={menuActions}
-              />
-            ))}
-
-        {/* Gradient Overlay */}
-        {!showSkeleton && (
-          <LinearGradient
-            colors={gradientColors}
-            style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
-            start={{ x: 0, y: 1 }}
-            end={{ x: 0, y: 0 }}
-          />
-        )}
-        {/* Background Image */}
-        {!isLoading && (
-          <>
-            <View style={styles.imageContainer}>
-              <FastImage
-                style={StyleSheet.absoluteFillObject}
-                source={imageSource}
-                resizeMode={FastImage.resizeMode.cover}
-                onLoad={handleImageLoad}
-                onError={handleImageError}
-                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}
-                theme={theme}
-                style={[styles.rentOrBuyIcon, { zIndex: 2 }]}
-                content_offering_type={content_offering_type}
-              />
-            )}
-          </>
-        )}
-
-        {/* Skeleton UI */}
-        {showSkeleton && !imageError && onPressPlay && (
-          <>
-            <View style={styles.skeletonContainer}>
-              {renderSkeletons?.play?.() ?? (
-                <SkeletonPlaceholder
-                  backgroundColor={theme.colors.skeletonBaseColor}
-                  highlightColor={theme.colors.skeletonHighlightColor}
-                  speed={800}
-                >
-                  <SkeletonPlaceholder.Item
-                    width="100%"
-                    height="100%"
-                    justifyContent="center"
-                    alignItems="center"
-                  >
-                    <SkeletonPlaceholder.Item
-                      width={SKELETON_CIRCLE_SIZE}
-                      height={SKELETON_CIRCLE_SIZE}
-                      borderRadius={SKELETON_CIRCLE_SIZE / 2}
-                    />
-                  </SkeletonPlaceholder.Item>
-                </SkeletonPlaceholder>
-              )}
-            </View>
-
-            <View style={styles.trailerButtonWrapper}>
-              {renderSkeletons?.trailer?.() ?? (
-                <SkeletonPlaceholder
-                  backgroundColor={theme.colors.skeletonBaseColor}
-                  highlightColor={theme.colors.skeletonHighlightColor}
-                  speed={800}
-                >
-                  <SkeletonPlaceholder.Item
-                    width={scale(110)}
-                    height={verticalScale(25)}
-                    borderRadius={scale(14)}
-                  />
-                </SkeletonPlaceholder>
-              )}
-            </View>
-          </>
-        )}
-
-        {/* Play & Trailer Buttons */}
-        {!showSkeleton && !imageError && onPressPlay && (
-          <>
-            <Animated.View style={styles.centeredContent}>
-              {renderButtons?.play?.() ?? (
-                <PlayButton
-                  color={theme.colors.buttonText}
-                  backgroundColor={theme.colors.button}
-                  onPress={() => handlePressPlay({ is_trailer: false })}
-                />
-              )}
-            </Animated.View>
-
-            <Animated.View style={styles.trailerButtonWrapper}>
-              {renderButtons?.trailer?.() ?? (
-                <TrailerButton
-                  color={theme.colors.buttonText}
-                  backgroundColor={theme.colors.button}
-                  onPress={() => handlePressPlay({ is_trailer: true })}
-                />
-              )}
-            </Animated.View>
-          </>
-        )}
-
-        {/* Error UI */}
-        {imageError && !isLoading && (
-          <Animated.View style={styles.errorContainer}>
-            <Text style={styles.errorText}>Failed to load image</Text>
-          </Animated.View>
-        )}
-      </View>
-    );
-  }
-);

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

@@ -1,356 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 11 Nov 2025 at 09:23 PM
- */
-
-import React, { useMemo, useCallback } 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 { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import moment from 'moment';
-import { useInternalTheme } from '../../../../theme/hook';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-type Props = {
-  content?: IContentData;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-  visible?: boolean;
-  userData?: {
-    is_buy_or_rent?: 'BUY' | 'RENT';
-    rent_expiry_date?: any;
-  };
-
-  labels?: {
-    purchased?: string;
-    rented?: string;
-    buyOrRent?: string;
-    rentedExpiryPrefix?: string;
-    purchasedMsg?: string;
-  };
-
-  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 = React.memo(
-  ({
-    content,
-    theme,
-    userData,
-    isLoading = false,
-    style,
-    labels,
-    visible = true,
-  }: Props): React.ReactElement | null => {
-    const { theme: appliedTheme } = useInternalTheme(theme);
-
-    // All hooks must be called before any early returns
-    const textLabels = useMemo(
-      () => ({
-        purchased: labels?.purchased || 'Purchased',
-        rented: labels?.rented || 'Rented',
-        buyOrRent: labels?.buyOrRent || 'Buy or Rent',
-        rentedExpiryPrefix: labels?.rentedExpiryPrefix || '',
-        purchasedMsg: labels?.purchasedMsg || 'You purchased this content',
-      }),
-      [labels]
-    );
-
-    const containerStyle = useMemo(
-      () => [
-        styles.container,
-        style?.container,
-        {
-          backgroundColor: appliedTheme.colors.background,
-          borderColor: appliedTheme.colors.border,
-        },
-      ],
-      [
-        style?.container,
-        appliedTheme.colors.background,
-        appliedTheme.colors.border,
-      ]
-    );
-
-    const badgeStyle = useMemo(
-      () => [
-        styles.badge,
-        {
-          backgroundColor: appliedTheme.colors.primary,
-          shadowColor: appliedTheme.colors.textPrimary,
-        },
-        style?.badge,
-      ],
-      [
-        appliedTheme.colors.primary,
-        appliedTheme.colors.textPrimary,
-        style?.badge,
-      ]
-    );
-
-    const badgeTextStyle = useMemo(
-      () => ({
-        color: appliedTheme.colors.onPrimary,
-        fontWeight: '600' as const,
-      }),
-      [appliedTheme.colors.onPrimary]
-    );
-
-    // Memoize price info style
-    const priceTextStyle = useMemo(
-      () => [
-        styles.subTitle,
-        { color: appliedTheme.colors.textPrimary },
-        style?.price,
-      ],
-      [appliedTheme.colors.textPrimary, style?.price]
-    );
-
-    // Memoize expiry text style
-    const expiryTextStyle = useMemo(
-      () => ({
-        color: appliedTheme.colors.textSecondary,
-        marginTop: scale(4),
-      }),
-      [appliedTheme.colors.textSecondary]
-    );
-
-    const formatRentExpiryLabel = useCallback((rawDate: any): string => {
-      if (!rawDate) return '';
-
-      const m = moment(rawDate);
-      if (!m.isValid()) {
-        return String(rawDate);
-      }
-
-      const now = moment();
-
-      // Already expired states – keep copy short for chips
-      if (m.isBefore(now)) {
-        const daysAgo = now.diff(m, 'days');
-
-        if (m.isSame(now, 'day')) {
-          return 'today';
-        }
-
-        if (daysAgo === 1) {
-          return 'yesterday';
-        }
-
-        if (daysAgo < 7) {
-          return `${daysAgo}d ago`;
-        }
-
-        if (m.year() === now.year()) {
-          return m.format('D MMM');
-        }
-
-        return m.format('D MMM YYYY');
-      }
-
-      // Future / active rentals
-      const daysDiff = m.diff(now, 'days');
-
-      if (daysDiff === 0) {
-        return 'today';
-      }
-
-      if (daysDiff === 1) {
-        return 'tomorrow';
-      }
-
-      if (daysDiff < 7) {
-        return `in ${daysDiff}d`;
-      }
-
-      if (m.year() === now.year()) {
-        return m.format('D MMM');
-      }
-
-      return m.format('D MMM YYYY');
-    }, []);
-
-    // Extract content values safely
-    const content_offering_type = content?.content_offering_type;
-    const price = content?.price;
-    const is_buy_or_rent = content?.is_buy_or_rent;
-    const rent_duration = content?.rent_duration;
-
-    const renderBadge = useCallback(() => {
-      let text = textLabels.buyOrRent;
-
-      if (userData?.is_buy_or_rent === 'BUY') {
-        text = textLabels.purchased;
-      } else if (userData?.is_buy_or_rent === 'RENT') {
-        text = textLabels.rented;
-      }
-
-      return (
-        <View style={badgeStyle}>
-          <Text type="caption" style={badgeTextStyle}>
-            {text}
-          </Text>
-        </View>
-      );
-    }, [textLabels, userData?.is_buy_or_rent, badgeStyle, badgeTextStyle]);
-
-    const renderPriceInfo = useCallback(() => {
-      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={priceTextStyle}>
-          {text}
-        </Text>
-      );
-    }, [price, is_buy_or_rent, rent_duration, priceTextStyle]);
-
-    const renderUserExpiry = useCallback(() => {
-      if (!userData?.is_buy_or_rent) return null;
-
-      if (userData.is_buy_or_rent === 'BUY') {
-        return (
-          <Text type="caption" style={expiryTextStyle}>
-            {textLabels.purchasedMsg}
-          </Text>
-        );
-      }
-
-      if (userData.is_buy_or_rent === 'RENT') {
-        const formattedLabel = formatRentExpiryLabel(
-          userData?.rent_expiry_date
-        );
-
-        if (!formattedLabel) return null;
-
-        return (
-          <Text type="caption" style={expiryTextStyle}>
-            {textLabels.rentedExpiryPrefix
-              ? `${textLabels.rentedExpiryPrefix} ${formattedLabel}`
-              : formattedLabel}
-          </Text>
-        );
-      }
-
-      return null;
-    }, [userData, textLabels, expiryTextStyle, formatRentExpiryLabel]);
-
-    // Early returns after all hooks
-    if (!visible) return null;
-
-    if (isLoading) {
-      return (
-        <View style={containerStyle}>
-          <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;
-
-    if (content_offering_type !== 'BUY_OR_RENT') return null;
-
-    return (
-      <View style={containerStyle}>
-        <View style={styles.headerRow}>{renderBadge()}</View>
-
-        {!userData?.is_buy_or_rent && renderPriceInfo()}
-
-        {renderUserExpiry()}
-      </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',
-  },
-});