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

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

@@ -1,267 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Tue 14 Jul 2026 at 3:08 PM
- */
-
-import React, { useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { scale, verticalScale } from 'react-native-size-matters';
-import FastImage, { type ImageStyle } from 'react-native-fast-image';
-import tinycolor from 'tinycolor2';
-
-import BackBtn from '../../../Button/BackBtn';
-import type { HeroBannerProps } from '../../../../types/content/content-view.types';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { useTheme } from '../../../../theme';
-import { Text } from '../../../Text';
-import { useImageLoader } from '../../../../hooks/Images';
-import LiveBadge from '../../../Content/Card/components/LiveBadge';
-
-const BANNER_HEIGHT = verticalScale(200);
-
-export const HeroBanner = React.memo(
-  ({
-    backgroundImage,
-    title,
-    titleImage,
-    theme: themeOverride,
-    isLoading = false,
-    onBackPress,
-    contentType,
-  }: HeroBannerProps) => {
-    const { theme } = useTheme(themeOverride);
-    const isLiveStream = contentType === 'live_stream';
-
-    const {
-      imageError,
-      showSkeleton: imageShowSkeleton,
-      imageSource,
-      handleLoad: handleImageLoad,
-      handleError: handleImageError,
-    } = useImageLoader({
-      imageUri: backgroundImage || '',
-      isLoading,
-    });
-
-    const showSkeleton = useMemo(
-      () => isLoading || (imageShowSkeleton && !!backgroundImage),
-      [isLoading, imageShowSkeleton, backgroundImage]
-    );
-
-    const shouldShowLiveBadge = !showSkeleton && !imageError && isLiveStream;
-
-    const gradientColors = useMemo(() => {
-      const bgColorBase = theme.colors.background;
-      return [
-        tinycolor(bgColorBase).toRgbString(),
-        tinycolor(bgColorBase).setAlpha(0.66).toRgbString(),
-        tinycolor(bgColorBase).setAlpha(0.2).toRgbString(),
-        tinycolor(bgColorBase).setAlpha(0.1).toRgbString(),
-        'rgba(0, 0, 0, 0)',
-      ];
-    }, [theme.colors.background]);
-
-    const containerStyle = [
-      styles.container,
-      { backgroundColor: theme.colors.backgroundDisabled },
-    ];
-
-    const defaultBackBtnStyle = [
-      styles.defaultBackBtn,
-      { backgroundColor: theme.colors.background },
-    ];
-
-    const liveBadgeStyle = [
-      styles.liveBadgeInline,
-      { marginLeft: onBackPress ? scale(12) : 0 },
-    ];
-
-    const imageContainerStyle = [
-      styles.imageContainer,
-      { backgroundColor: theme.colors.backgroundDisabled },
-    ];
-
-    const titleTextStyle = [
-      styles.titleText,
-      { color: theme.colors.textPrimary },
-    ];
-
-    const errorContainerStyle = [
-      styles.errorContainer,
-      { backgroundColor: theme.colors.backgroundDisabled },
-    ];
-
-    const errorTextStyle = [
-      styles.errorText,
-      { color: theme.colors.textSecondary },
-    ];
-
-    return (
-      <View style={containerStyle} accessibilityLabel={title}>
-        {/* Header Row (Back Button & Live Badge) */}
-        {(onBackPress || shouldShowLiveBadge) && (
-          <View style={styles.headerContainer}>
-            {onBackPress && (
-              <BackBtn
-                theme={themeOverride}
-                onPress={onBackPress}
-                style={defaultBackBtnStyle}
-                size={scale(32)}
-              />
-            )}
-
-            {shouldShowLiveBadge && (
-              <LiveBadge
-                position="topLeft"
-                theme={theme}
-                style={liveBadgeStyle}
-                size="large"
-              />
-            )}
-          </View>
-        )}
-
-        {/* Gradient Overlay */}
-        {!showSkeleton && (
-          <LinearGradient
-            colors={gradientColors}
-            style={styles.absoluteFillZ1}
-            start={{ x: 0, y: 1 }}
-            end={{ x: 0, y: 0 }}
-          />
-        )}
-
-        {/* Background Image */}
-        {!isLoading && (
-          <>
-            <View style={imageContainerStyle}>
-              <FastImage
-                source={imageSource}
-                style={styles.image as ImageStyle}
-                resizeMode={FastImage.resizeMode.contain}
-                onLoad={handleImageLoad}
-                onError={handleImageError}
-                accessibilityLabel={`Background image for ${title}`}
-              />
-            </View>
-
-            {/* Title Image or Text – Bottom Left */}
-            {!showSkeleton && (
-              <View
-                style={
-                  titleImage
-                    ? styles.titleImageWrapper
-                    : styles.titleTextWrapper
-                }
-              >
-                {titleImage ? (
-                  <FastImage
-                    source={{ uri: titleImage }}
-                    style={styles.titleImage as ImageStyle}
-                    resizeMode={FastImage.resizeMode.contain}
-                    accessibilityLabel={`Title image for ${title}`}
-                  />
-                ) : (
-                  <Text
-                    style={titleTextStyle}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                  >
-                    {title}
-                  </Text>
-                )}
-              </View>
-            )}
-          </>
-        )}
-
-        {/* Error UI */}
-        {imageError && !isLoading && (
-          <View style={errorContainerStyle}>
-            <Text style={errorTextStyle}>Failed to load image</Text>
-          </View>
-        )}
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    height: BANNER_HEIGHT,
-    width: '100%',
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  errorContainer: {
-    ...StyleSheet.absoluteFill,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1,
-  },
-  errorText: {
-    fontSize: RFValue(15),
-    textAlign: 'center',
-  },
-  imageContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-  image: {
-    width: '100%',
-    height: BANNER_HEIGHT,
-    aspectRatio: 16 / 9,
-    alignSelf: 'flex-start',
-  },
-  titleImageWrapper: {
-    position: 'absolute',
-    bottom: verticalScale(12),
-    left: scale(12),
-    zIndex: 3,
-  },
-  titleImage: {
-    width: scale(160),
-    height: verticalScale(55),
-  },
-  titleTextWrapper: {
-    position: 'absolute',
-    bottom: verticalScale(10),
-    left: scale(12),
-    right: scale(12),
-    zIndex: 3,
-  },
-  titleText: {
-    fontSize: RFValue(18),
-    fontWeight: 'bold',
-    textShadowColor: 'rgba(0, 0, 0, 0.6)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 3,
-  },
-  headerContainer: {
-    position: 'absolute',
-    top: scale(10),
-    left: 0,
-    gap: scale(7),
-    flexDirection: 'row',
-    alignItems: 'center',
-    zIndex: 15,
-  },
-  defaultBackBtn: {
-    position: 'relative',
-    top: 0,
-  },
-  absoluteFillZ1: {
-    ...StyleSheet.absoluteFill,
-    zIndex: 1,
-  },
-
-  liveBadgeInline: {
-    position: 'relative',
-    top: 0,
-    left: 0,
-  },
-});

package/src/components/ContentView/Two/components/LikeShareActions.tsx

@@ -1,125 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo } from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { scale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ITheme } from '../../../../theme/themes';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-import { Heart, Share2 } from 'lucide-react-native';
-import type { LikeShareEventArgs } from '../../../../types';
-
-type Props = {
-  theme: ITheme;
-  contentId: IContentData['_id'];
-  isLiked?: boolean;
-  isLoading?: boolean;
-  onPressLike?: (args: LikeShareEventArgs) => void;
-  onPressShare?: (args: LikeShareEventArgs) => void;
-  style?: {
-    container?: StyleProp<ViewStyle>;
-    likeButton?: StyleProp<ViewStyle>;
-    shareButton?: StyleProp<ViewStyle>;
-  };
-};
-
-export const LikeShareActions = React.memo(
-  ({
-    theme,
-    contentId,
-    isLiked = false,
-    isLoading = false,
-    onPressLike,
-    onPressShare,
-    style,
-  }: Props) => {
-    const styles = useMemo(() => createStyles(theme), [theme]);
-
-    if (isLoading) {
-      return (
-        <SkeletonPlaceholder
-          backgroundColor={theme.colors.skeletonBaseColor}
-          highlightColor={theme.colors.skeletonHighlightColor}
-        >
-          <View style={styles.skeletonRow}>
-            <SkeletonPlaceholder.Item
-              width={scale(22)}
-              height={scale(22)}
-              borderRadius={scale(11)}
-            />
-            <SkeletonPlaceholder.Item
-              width={scale(22)}
-              height={scale(22)}
-              borderRadius={scale(11)}
-              marginLeft={scale(12)}
-            />
-          </View>
-        </SkeletonPlaceholder>
-      );
-    }
-
-    return (
-      <View style={[styles.container, style?.container]}>
-        <TouchableOpacity
-          activeOpacity={0.7}
-          style={[styles.iconWrapper, style?.likeButton]}
-          onPress={() =>
-            onPressLike?.({
-              id: contentId,
-              source: 'title',
-            })
-          }
-        >
-          <Heart
-            size={RFValue(18)}
-            color={
-              isLiked ? theme.colors.premiumIcon : theme.colors.textSecondary
-            }
-            fill={isLiked ? theme.colors.premiumIcon : theme.colors.white}
-          />
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          activeOpacity={0.7}
-          style={[styles.iconWrapper, style?.shareButton]}
-          onPress={() =>
-            onPressShare?.({
-              id: contentId,
-              source: 'title',
-            })
-          }
-        >
-          <Share2 size={RFValue(18)} color={theme.colors.textSecondary} />
-        </TouchableOpacity>
-      </View>
-    );
-  }
-);
-
-const createStyles = (theme: ITheme) =>
-  StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    iconWrapper: {
-      marginLeft: scale(12),
-      padding: scale(6),
-      borderRadius: scale(20),
-      backgroundColor: theme.colors.surfaceVariant,
-    },
-    skeletonRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-  });

package/src/components/ContentView/Two/components/MoreLikeThisContentList .tsx

@@ -1,308 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useCallback, useRef, useMemo } from 'react';
-import {
-  FlatList,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  type FlatListProps,
-} from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import Animated from 'react-native-reanimated';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-import { useSkeletonItems } from '../../../../hooks';
-import Display from '../../../../utils/Display';
-import { Text } from '../../../Text';
-import View from '../../../View/View';
-import CardPoster from '../../../Content/Card/components/CardPoster';
-import type { ThemeOverride } from '../../../../theme';
-import { useTheme } from '../../../../theme';
-
-interface Props {
-  contentList: IContentData[];
-  onItemPress?: (item: IContentData) => void;
-  isLoading?: boolean;
-  error?: boolean | string | Error;
-  errorText?: string;
-  theme?: ThemeOverride;
-  moreDataIsLoading?: boolean;
-  onEndReached?: () => void;
-  skeletonCount?: number;
-  numColumns?: number;
-  footerComponent?: React.ReactNode;
-  refreshing?: boolean;
-  onRefresh?: () => void;
-  hasFetchedOnce?: boolean;
-}
-
-const AnimatedFlatList = Animated.createAnimatedComponent(
-  FlatList as React.ComponentType<FlatListProps<IContentData>>
-);
-
-const MoreLikeThisContentList: React.FC<Props> = React.memo(
-  ({
-    contentList = [],
-    onItemPress,
-    isLoading = false,
-    error = false,
-    errorText = 'Something went wrong!',
-    theme,
-    moreDataIsLoading = false,
-    onEndReached,
-    skeletonCount = 12,
-    numColumns = 3,
-    footerComponent,
-    refreshing = false,
-    onRefresh,
-    hasFetchedOnce = false,
-  }) => {
-    const { theme: appliedTheme } = useTheme(theme);
-    const onEndReachedCalledDuringMomentum = useRef(false);
-
-    // Memoize computed values
-    const isEmpty = useMemo(
-      () =>
-        hasFetchedOnce &&
-        !isLoading &&
-        Array.isArray(contentList) &&
-        contentList.length === 0,
-      [hasFetchedOnce, isLoading, contentList]
-    );
-
-    const errorMessage = useMemo(() => {
-      if (typeof error === 'string') return error;
-      if (error instanceof Error) return error.message;
-      return errorText;
-    }, [error, errorText]);
-
-    // Memoize skeleton items
-    const skeletonItems = useSkeletonItems(skeletonCount);
-
-    // Memoize skeleton data array
-    const skeletonData = useMemo(
-      () => skeletonItems.map((_, index) => ({ _id: `skeleton-${index}` })),
-      [skeletonItems]
-    );
-
-    const keyExtractor = useCallback((item: IContentData, index: number) => {
-      return item._id?.toString() || index.toString();
-    }, []);
-
-    const renderItem = useCallback(
-      ({ item }: { item: IContentData }) => (
-        <View style={styles.cardWrapper}>
-          <TouchableOpacity
-            onPress={() => onItemPress?.(item)}
-            activeOpacity={0.7}
-          >
-            <CardPoster
-              content_offering_type={item.content_offering_type}
-              contentType={item.type}
-              posterUri={item.poster}
-              borderRadius={5}
-              isLoading={false}
-              theme={appliedTheme}
-              imageStyle={styles.itemContainer}
-            />
-          </TouchableOpacity>
-        </View>
-      ),
-      [onItemPress, appliedTheme]
-    );
-
-    const renderSkeletonItem = useCallback(
-      ({ index }: { index: number }) => (
-        <View style={styles.cardWrapper} key={`skeleton-${index}`}>
-          <CardPoster
-            posterUri=""
-            borderRadius={5}
-            isLoading={true}
-            theme={appliedTheme}
-            imageStyle={styles.itemContainer}
-          />
-        </View>
-      ),
-      [appliedTheme]
-    );
-
-    // Memoize footer component
-    const footerComponentMemo = useMemo(() => {
-      if (footerComponent) return footerComponent;
-      if (moreDataIsLoading) {
-        return (
-          <View style={styles.footerLoading}>
-            <ActivityIndicator size="small" />
-          </View>
-        );
-      }
-      return null;
-    }, [footerComponent, moreDataIsLoading]);
-
-    // Memoize onEndReached handler
-    const handleEndReached = useCallback(() => {
-      if (
-        !onEndReachedCalledDuringMomentum.current &&
-        onEndReached &&
-        !moreDataIsLoading
-      ) {
-        onEndReached();
-        onEndReachedCalledDuringMomentum.current = true;
-      }
-    }, [onEndReached, moreDataIsLoading]);
-
-    // Memoize onMomentumScrollBegin handler
-    const handleMomentumScrollBegin = useCallback(() => {
-      onEndReachedCalledDuringMomentum.current = false;
-    }, []);
-
-    // Memoize content container style
-    const contentContainerStyle = useMemo(
-      () => [
-        styles.listContent,
-        {
-          minHeight: Display.fullHeight - verticalScale(100),
-        },
-      ],
-      []
-    );
-
-    // Memoize skeleton key extractor
-    const skeletonKeyExtractor = useCallback(
-      (_: any, index: number) => `skeleton-${index}`,
-      []
-    );
-
-    // Memoize render content
-    const renderContent = useMemo(() => {
-      if (isLoading) {
-        return (
-          <FlatList
-            data={skeletonData}
-            numColumns={numColumns}
-            scrollEnabled={false}
-            keyExtractor={skeletonKeyExtractor}
-            renderItem={renderSkeletonItem}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={contentContainerStyle}
-          />
-        );
-      }
-
-      if (error) {
-        return (
-          <View style={styles.centered}>
-            <Text style={styles.errorText}>{errorMessage}</Text>
-          </View>
-        );
-      }
-
-      if (isEmpty) {
-        return (
-          <View style={styles.centered}>
-            <Text style={styles.emptyText}>No content found</Text>
-          </View>
-        );
-      }
-
-      return (
-        <AnimatedFlatList
-          data={contentList}
-          numColumns={numColumns}
-          showsVerticalScrollIndicator={false}
-          scrollEnabled={false} // ✅ ADD
-          nestedScrollEnabled={false} // ✅ ADD
-          removeClippedSubviews={false} // ✅ ADD
-          // removeClippedSubviews
-          keyExtractor={keyExtractor}
-          renderItem={renderItem}
-          initialNumToRender={6}
-          bounces={false}
-          scrollEventThrottle={16}
-          contentContainerStyle={styles.listContent}
-          ListFooterComponent={footerComponentMemo as React.ReactElement}
-          onEndReachedThreshold={0.7}
-          onEndReached={handleEndReached}
-          onMomentumScrollBegin={handleMomentumScrollBegin}
-          refreshing={refreshing}
-          onRefresh={onRefresh}
-          windowSize={5}
-          maxToRenderPerBatch={5}
-          updateCellsBatchingPeriod={50}
-        />
-      );
-    }, [
-      isLoading,
-      error,
-      isEmpty,
-      skeletonData,
-      skeletonKeyExtractor,
-      renderSkeletonItem,
-      contentContainerStyle,
-      errorMessage,
-      numColumns,
-      contentList,
-      keyExtractor,
-      renderItem,
-      footerComponentMemo,
-      handleEndReached,
-      handleMomentumScrollBegin,
-      refreshing,
-      onRefresh,
-    ]);
-
-    return <View style={styles.container}>{renderContent}</View>;
-  }
-);
-
-export default MoreLikeThisContentList;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  listContent: {
-    paddingHorizontal: scale(6),
-    paddingBottom: scale(100),
-  },
-  cardWrapper: {
-    flexBasis: '33.33%',
-    maxWidth: '33.33%',
-    padding: scale(4),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  itemContainer: {
-    width: '100%',
-    aspectRatio: 2 / 3,
-    borderRadius: 5,
-  },
-  centered: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: verticalScale(50),
-  },
-  errorText: {
-    fontSize: RFValue(14),
-    color: 'red',
-    fontWeight: '500',
-  },
-  emptyText: {
-    fontSize: RFValue(14),
-    fontWeight: '400',
-  },
-  headerTitle: {
-    fontSize: RFValue(15),
-    textTransform: 'capitalize',
-  },
-  footerLoading: {
-    marginTop: verticalScale(30),
-    paddingVertical: verticalScale(10),
-    alignItems: 'center',
-  },
-});