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

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

@@ -1,377 +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 FastImage, {
-  type ResizeMode,
-  type ImageStyle,
-} 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 RentOrBuyIcon from './RentOrBuyIcon';
-import LiveBadge from './LiveBadge';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-import { useImageLoader } from '../../../../hooks';
-import LinearGradient from 'react-native-linear-gradient';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { convertColorWithOpacity } from '../../../../utils/colorUtils';
-
-// Rank number styling constants
-const RANK_NUMBER_SIZE = scale(40);
-const RANK_NUMBER_BORDER_RADIUS = scale(30);
-const RANK_NUMBER_TEXT_SIZE = RFValue(25);
-const RANK_NUMBER_TEXT_MARGIN_TOP = scale(2);
-const RANK_NUMBER_TEXT_MARGIN_RIGHT = scale(6);
-const GRADIENT_START = { x: 1, y: 0.5 };
-const GRADIENT_END = { x: 0.5, y: 1 };
-
-// Vertical badge styling constants
-const VERTICAL_BADGE_TEXT_SIZE = RFValue(7);
-
-export type CardPosterProps = {
-  content_offering_type?: IContentData['content_offering_type'];
-  contentType?: IContentData['type'];
-  posterUri: string;
-  theme: ITheme;
-  isLoading?: boolean;
-  borderRadius?: number;
-  posterWrapperStyle?: StyleProp<ViewStyle>;
-  imageStyle?: StyleProp<ImageStyle>;
-  resizeMode?: ResizeMode;
-  showRankNumber?: boolean;
-  rankNumber?: number;
-  isLive?: boolean;
-};
-
-// ----------------------------------
-// Image Fallback
-// ----------------------------------
-type ImageFallbackProps = {
-  errorColor: string;
-  bg: string;
-};
-
-const ImageFallback = React.memo<ImageFallbackProps>(({ errorColor, bg }) => (
-  <View
-    style={[styles.absolute, styles.center, { backgroundColor: bg }]}
-    accessible
-    accessibilityRole="image"
-    accessibilityLabel="Image failed to load"
-  >
-    <ImageOff size={scale(18)} color={errorColor} />
-    <Text style={styles.fallbackText} color={errorColor}>
-      Image Failed
-    </Text>
-  </View>
-));
-
-ImageFallback.displayName = 'ImageFallback';
-const CardPoster: React.FC<CardPosterProps> = ({
-  content_offering_type,
-  contentType,
-  posterUri,
-  theme,
-  borderRadius = scale(6),
-  posterWrapperStyle,
-  imageStyle,
-  isLoading = false,
-  resizeMode = FastImage.resizeMode.cover,
-  showRankNumber = false,
-  rankNumber,
-  isLive = false,
-}) => {
-  const { showSkeleton, showFallback, imageSource, handleLoad, handleError } =
-    useImageLoader({
-      imageUri: posterUri,
-      isLoading,
-    });
-
-  // Memoize theme colors
-  const themeColors = useMemo(
-    () => ({
-      background: theme.colors.background,
-      skeletonBaseColor: theme.colors.skeletonBaseColor,
-      skeletonHighlightColor: theme.colors.skeletonHighlightColor,
-      error: theme.colors.error,
-      errorContainer: theme.colors.errorContainer,
-      border: theme.colors.border,
-    }),
-    [theme.colors]
-  );
-
-  // Memoize wrapper style
-  const wrapperStyle = useMemo(
-    () => [
-      styles.posterWrapper,
-      {
-        width: '100%' as const,
-        aspectRatio: 2 / 3,
-        borderRadius,
-        backgroundColor: themeColors.background,
-        borderWidth: showSkeleton ? scale(0.5) : showFallback ? scale(0.3) : 0,
-        borderColor: showSkeleton
-          ? themeColors.border
-          : showFallback
-            ? themeColors.error
-            : 'transparent',
-      } as ViewStyle,
-      posterWrapperStyle,
-    ],
-    [
-      borderRadius,
-      themeColors.background,
-      themeColors.border,
-      themeColors.error,
-      showSkeleton,
-      showFallback,
-      posterWrapperStyle,
-    ]
-  );
-
-  // Memoize skeleton item style
-
-  // Memoize image style array
-  const imageStyleArray = useMemo(
-    () => [styles.absolute, imageStyle],
-    [imageStyle]
-  );
-
-  // Check if content type is vertical
-  const isVerticalContent = useMemo(
-    () => contentType === 'VERTICAL_STREAM',
-    [contentType]
-  );
-
-  // Memoize vertical badge gradient colors using primary colors
-  const verticalBadgeColors = useMemo(() => {
-    const primary = theme.colors.primary;
-    const secondary = theme.colors.secondary || primary;
-
-    return [
-      convertColorWithOpacity(primary, 0.9),
-      convertColorWithOpacity(secondary, 0.9),
-    ];
-  }, [theme.colors.primary, theme.colors.secondary]);
-
-  // Derived visibility flags for clearer JSX conditions
-  const shouldShowRentOrBuyIcon =
-    !showSkeleton && !showFallback && !!content_offering_type;
-  const shouldShowVerticalBadge =
-    !showSkeleton && !showFallback && isVerticalContent;
-  const shouldShowFallback = !isLoading && !showSkeleton && showFallback;
-  const shouldShowRankNumber = !showSkeleton && !!showRankNumber;
-  const shouldShowLiveBadge =
-    !showSkeleton && !showFallback && (isLive || contentType === 'live_stream');
-
-  return (
-    <View style={wrapperStyle}>
-      {/* Rent/Buy */}
-      {shouldShowRentOrBuyIcon && (
-        <RentOrBuyIcon
-          key={posterUri}
-          content_offering_type={content_offering_type}
-          theme={theme}
-        />
-      )}
-
-      {/* Live Badge */}
-      {shouldShowLiveBadge && (
-        <LiveBadge
-          key={`${posterUri}-live`}
-          theme={theme}
-          position={shouldShowRentOrBuyIcon ? 'topRight' : 'topLeft'}
-        />
-      )}
-
-      {/* Vertical Badge */}
-      {shouldShowVerticalBadge && (
-        <View
-          style={[
-            styles.verticalBadgeContainer,
-            showRankNumber && styles.verticalBadgeContainerRight,
-          ]}
-          accessible
-          accessibilityRole="text"
-          accessibilityLabel="Vertical video"
-        >
-          <LinearGradient
-            colors={verticalBadgeColors}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            style={[
-              styles.verticalBadge,
-              showRankNumber && styles.verticalBadgeRight,
-            ]}
-          >
-            <Text style={styles.verticalBadgeText} color="#FFFFFF">
-              VERTICAL
-            </Text>
-          </LinearGradient>
-        </View>
-      )}
-
-      {/* Valid Image - Render when not showing fallback */}
-      {!showFallback && (
-        <FastImage
-          key={`${posterUri}-image`}
-          source={imageSource}
-          style={imageStyleArray as ImageStyle}
-          resizeMode={resizeMode}
-          onLoad={handleLoad}
-          onError={handleError}
-        />
-      )}
-
-      {/* Skeleton */}
-      {showSkeleton && (
-        <View style={[styles.absolute]} pointerEvents="none">
-          <SkeletonPlaceholder
-            backgroundColor={themeColors.skeletonBaseColor}
-            highlightColor={themeColors.skeletonHighlightColor}
-          >
-            <SkeletonPlaceholder.Item width="100%" height="100%" />
-          </SkeletonPlaceholder>
-        </View>
-      )}
-
-      {/* Fallback */}
-      {shouldShowFallback && (
-        <ImageFallback
-          key={`${posterUri}-fallback`}
-          errorColor={themeColors.error}
-          bg={themeColors.errorContainer}
-        />
-      )}
-
-      {/* Rank Number */}
-      {shouldShowRankNumber && (
-        <View
-          style={styles.numberContainer}
-          accessible
-          accessibilityRole="text"
-          accessibilityLabel={
-            typeof rankNumber === 'number'
-              ? `Rank ${rankNumber}`
-              : 'Rank number'
-          }
-        >
-          <LinearGradient
-            colors={theme.colors.backgroundLayoutGradient}
-            start={GRADIENT_START}
-            end={GRADIENT_END}
-            style={[styles.rankNumberBox]}
-          >
-            <Text
-              style={styles.rankNumberText}
-              color={theme.colors.textPrimary}
-            >
-              {rankNumber ?? ''}
-            </Text>
-          </LinearGradient>
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default React.memo(CardPoster);
-
-const styles = StyleSheet.create({
-  posterWrapper: {
-    overflow: 'hidden',
-    position: 'relative',
-  },
-
-  absolute: {
-    ...StyleSheet.absoluteFill,
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  fallbackWrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    borderWidth: scale(1),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  fallback: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  fallbackText: { marginTop: scale(4), fontSize: 10 },
-  numberContainer: {
-    position: 'absolute',
-    bottom: -1,
-    left: 0,
-    zIndex: 10,
-  },
-  rankNumberBox: {
-    width: RANK_NUMBER_SIZE,
-    height: RANK_NUMBER_SIZE,
-    borderTopRightRadius: RANK_NUMBER_BORDER_RADIUS,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  rankNumberText: {
-    fontSize: RANK_NUMBER_TEXT_SIZE,
-    fontWeight: '900',
-    textShadowColor: 'rgba(0, 0, 0, 0.6)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 3,
-    marginTop: RANK_NUMBER_TEXT_MARGIN_TOP,
-    marginRight: RANK_NUMBER_TEXT_MARGIN_RIGHT,
-    letterSpacing: 0.5,
-  },
-  verticalBadgeContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 15,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-
-    elevation: 6,
-  },
-  verticalBadgeContainerRight: {
-    left: 'auto',
-    right: 0,
-    width: 'auto',
-  },
-  verticalBadge: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 0,
-  },
-  verticalBadgeRight: {
-    width: 'auto',
-    paddingHorizontal: scale(10),
-    borderTopLeftRadius: scale(4),
-  },
-  verticalBadgeText: {
-    fontSize: VERTICAL_BADGE_TEXT_SIZE,
-    fontWeight: '700',
-    letterSpacing: scale(0.5),
-    textAlign: 'center',
-    textShadowColor: 'rgba(0, 0, 0, 0.3)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 2,
-    paddingHorizontal: scale(8),
-    paddingVertical: scale(1),
-  },
-});

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

@@ -1,125 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Tue 14 Jul 2026 at 11:48 AM
- */
-
-import React, { useEffect, useRef, useMemo } from 'react';
-import {
-  View,
-  StyleSheet,
-  Animated,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import { scale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { Text } from '../../../Text';
-import type { ITheme } from '../../../../theme/themes';
-import { toRgba } from '../../../../theme/utils/toRgba';
-
-interface LiveBadgeProps {
-  theme?: ITheme;
-  position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-  style?: StyleProp<ViewStyle>;
-  size?: 'small' | 'large';
-}
-
-const LiveBadge: React.FC<LiveBadgeProps> = ({
-  theme,
-  position = 'topRight',
-  style,
-  size = 'small',
-}) => {
-  const pulseAnimation = useRef(new Animated.Value(0.4)).current;
-  const isLargeSize = size === 'large';
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(pulseAnimation, {
-          toValue: 1,
-          duration: 800,
-          useNativeDriver: true,
-        }),
-        Animated.timing(pulseAnimation, {
-          toValue: 0.4,
-          duration: 800,
-          useNativeDriver: true,
-        }),
-      ])
-    ).start();
-  }, [pulseAnimation]);
-
-  const badgePositionStyle = useMemo<ViewStyle>(() => {
-    const isTop = position.startsWith('top');
-    const isLeft = position.endsWith('Left');
-    return {
-      [isTop ? 'top' : 'bottom']: scale(6),
-      [isLeft ? 'left' : 'right']: scale(6),
-    };
-  }, [position]);
-
-  const badgeContainerStyle = useMemo(
-    () => [
-      styles.container,
-      isLargeSize && {
-        paddingHorizontal: scale(7),
-        paddingVertical: scale(2),
-        borderRadius: scale(4.5),
-      },
-      { backgroundColor: toRgba(theme?.colors.alert.error || '#FF3B30', 0.85) },
-      badgePositionStyle,
-      style,
-    ],
-    [theme?.colors.alert.error, isLargeSize, badgePositionStyle, style]
-  );
-
-  return (
-    <View style={badgeContainerStyle}>
-      <Animated.View
-        style={[
-          styles.dot,
-          isLargeSize && {
-            width: scale(6),
-            height: scale(6),
-            borderRadius: scale(3),
-            marginRight: scale(5),
-          },
-          { opacity: pulseAnimation },
-        ]}
-      />
-      <Text
-        style={[styles.text, isLargeSize && { fontSize: RFValue(9.5) }]}
-        color="#FFFFFF"
-      >
-        LIVE
-      </Text>
-    </View>
-  );
-};
-
-export default React.memo(LiveBadge);
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    zIndex: 15,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: scale(5),
-    paddingVertical: scale(1.5),
-    borderRadius: scale(3.5),
-  },
-  dot: {
-    width: scale(4.2),
-    height: scale(4.2),
-    borderRadius: scale(2.1),
-    marginRight: scale(3.5),
-    backgroundColor: '#FFFFFF',
-  },
-  text: {
-    fontSize: RFValue(7.2),
-    fontWeight: '800',
-    letterSpacing: 0.5,
-  },
-});

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

@@ -1,97 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React from 'react';
-import {
-  StyleSheet,
-  View,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import ShowAllButton, { type ShowAllButtonProps } from './ShowAllButton';
-import { Text } from '../../../Text';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { useTheme } from '../../../../theme';
-import type { ThemeOverride } from '../../../../theme/themes';
-
-interface IProps {
-  title: string;
-  onPress: () => void;
-  titleStyle?: StyleProp<TextStyle>;
-  containerStyle?: StyleProp<ViewStyle>;
-  showAllProps?: Partial<ShowAllButtonProps>;
-  isLoading?: boolean;
-  theme?: ThemeOverride;
-}
-
-const NavigateToMore: React.FC<IProps> = ({
-  onPress,
-  title,
-  titleStyle,
-  containerStyle,
-  showAllProps,
-  isLoading = false,
-  theme,
-}): React.ReactElement => {
-  const { theme: appliedTheme } = useTheme(theme);
-
-  if (isLoading) {
-    return (
-      <SkeletonPlaceholder
-        highlightColor={appliedTheme.colors.skeletonHighlightColor}
-        backgroundColor={appliedTheme.colors.skeletonBaseColor}
-      >
-        <View style={[styles.container, containerStyle]}>
-          <View style={styles.titleWrapper}>
-            <SkeletonPlaceholder.Item
-              width={moderateScale(100)}
-              height={verticalScale(14)}
-              borderRadius={moderateScale(4)}
-            />
-          </View>
-        </View>
-      </SkeletonPlaceholder>
-    );
-  }
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      <View style={styles.titleWrapper}>
-        <Text
-          style={[styles.title, titleStyle]}
-          numberOfLines={1}
-          ellipsizeMode="tail"
-        >
-          {title}
-        </Text>
-      </View>
-      <ShowAllButton onPress={onPress} {...showAllProps} />
-    </View>
-  );
-};
-
-export default NavigateToMore;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: verticalScale(6),
-    marginTop: verticalScale(1),
-  },
-  titleWrapper: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: RFValue(13),
-    fontWeight: '500',
-    textTransform: 'capitalize',
-  },
-});