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

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

@@ -0,0 +1,267 @@
+/**
+ * @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

@@ -0,0 +1,125 @@
+/**
+ * @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

@@ -0,0 +1,308 @@
+/**
+ * @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',
+  },
+});