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

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

@@ -0,0 +1,305 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Sat 17 Jan 2026 at 02:28 PM
+ */
+
+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 { useInternalTheme } from '../../../../theme/hook';
+
+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 } = useInternalTheme(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={{ flex: 1 }}>{renderContent}</View>;
+  }
+);
+
+export default MoreLikeThisContentList;
+
+const styles = StyleSheet.create({
+  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',
+  },
+});

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

@@ -0,0 +1,133 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Tue 13 Jun 2025 at 02:28 PM
+ */
+import React, { useCallback, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { Play, ShoppingCart } from 'lucide-react-native';
+import { Button } from '../../../Button';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+
+export type playButtonConfig = {
+  title: string;
+  mode: 'WATCH NOW' | 'RENT NOW' | 'SUBSCRIBE';
+};
+
+interface Props {
+  onPressPlay?: ({ is_trailer }: { is_trailer: boolean }) => void;
+  theme?: ThemeOverride;
+  isLoading?: boolean;
+  playButtonConfig?: playButtonConfig;
+}
+
+export const PlayOrTrailer = React.memo(
+  ({ onPressPlay, theme, isLoading = false, playButtonConfig }: Props) => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
+
+    const iconSize = scale(18);
+    const handlePressPlay = useCallback(
+      ({ is_trailer }: { is_trailer: boolean }) => {
+        onPressPlay?.({ is_trailer });
+      },
+      [onPressPlay]
+    );
+    const playIcon = useMemo(() => {
+      if (playButtonConfig?.mode === 'RENT NOW') {
+        return (
+          <ShoppingCart
+            size={22}
+            color={appliedTheme.colors.black}
+            fill={appliedTheme.colors.black}
+            strokeWidth={2}
+          />
+        );
+      }
+
+      return (
+        <Play
+          size={iconSize}
+          color={appliedTheme.colors.black}
+          fill={appliedTheme.colors.black}
+          stroke="none"
+        />
+      );
+    }, [playButtonConfig, iconSize, appliedTheme]);
+
+    const watchNowTheme: ThemeOverride = {
+      light: {
+        button: appliedTheme.colors.surfaceVariant,
+        buttonText: appliedTheme.colors.black,
+      },
+      dark: {
+        button: appliedTheme.colors.white,
+        buttonText: appliedTheme.colors.black,
+      },
+    };
+
+    const trailerTheme: ThemeOverride = {
+      light: {
+        button: appliedTheme.colors.onBackground,
+        buttonText: appliedTheme.colors.white,
+      },
+      dark: {
+        button: appliedTheme.colors.surface,
+        buttonText: appliedTheme.colors.onSurface,
+      },
+    };
+
+    if (isLoading) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          borderRadius={scale(8)}
+        >
+          <View style={styles.container}>
+            <View style={styles.skeletonButton} />
+            <View style={styles.skeletonButton} />
+          </View>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    return (
+      <View style={styles.container}>
+        <Button.Primary
+          title={playButtonConfig?.title || 'Watch Now'}
+          onPress={() => handlePressPlay({ is_trailer: false })}
+          theme={watchNowTheme}
+          containerStyle={styles.button}
+          leftIcon={playIcon}
+        />
+
+        <Button.Primary
+          title="Trailer"
+          onPress={() => handlePressPlay({ is_trailer: true })}
+          theme={trailerTheme}
+          containerStyle={styles.button}
+        />
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: scale(10),
+    paddingHorizontal: scale(12),
+    alignItems: 'center',
+    marginTop: scale(10),
+  },
+  button: {
+    flex: 1,
+  },
+  skeletonButton: {
+    flex: 1,
+    height: scale(42),
+    borderRadius: scale(8),
+  },
+});

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

@@ -0,0 +1,177 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Fri 16 Jun 2026 at 11:45 AM
+ */
+import React, { useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} 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 { Text } from '../../../Text';
+import type { ITheme } from '../../../../theme/themes';
+
+export type TabKey = 'more' | 'details';
+
+type StyleProps = {
+  container?: StyleProp<ViewStyle>;
+  tab?: StyleProp<ViewStyle>;
+  title?: StyleProp<TextStyle>;
+  indicator?: StyleProp<ViewStyle>;
+};
+
+type Props = {
+  theme: ITheme;
+
+  /** 🔥 Controlled props */
+  activeTab: TabKey;
+  onTabChange: (tab: TabKey) => void;
+
+  /** Optional */
+  isLoading?: boolean;
+  leftTitle?: string;
+  rightTitle?: string;
+
+  style?: StyleProps;
+};
+
+export const SectionTabs = React.memo(
+  ({
+    theme,
+    activeTab,
+    onTabChange,
+    isLoading = false,
+    leftTitle = 'More like this',
+    rightTitle = 'Details',
+    style = {},
+  }: Props) => {
+    const handlePress = useCallback(
+      (tab: TabKey) => {
+        if (tab !== activeTab) {
+          onTabChange(tab);
+        }
+      },
+      [activeTab, onTabChange]
+    );
+
+    /** 🔹 Skeleton loader */
+    if (isLoading) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+        >
+          <SkeletonPlaceholder.Item
+            flexDirection="row"
+            justifyContent="space-between"
+            paddingHorizontal={scale(12)}
+            marginVertical={scale(12)}
+          >
+            <SkeletonPlaceholder.Item
+              width={scale(120)}
+              height={scale(16)}
+              borderRadius={scale(4)}
+            />
+            <SkeletonPlaceholder.Item
+              width={scale(80)}
+              height={scale(16)}
+              borderRadius={scale(4)}
+            />
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    return (
+      <View style={[styles.container, style.container]}>
+        <View style={styles.row}>
+          {/* 🔹 More like this */}
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => handlePress('more')}
+            style={[styles.tab, style.tab]}
+          >
+            <Text
+              style={[
+                styles.title,
+                { color: theme.colors.textPrimary },
+                style.title,
+              ]}
+            >
+              {leftTitle}
+            </Text>
+
+            {activeTab === 'more' && (
+              <View
+                style={[
+                  styles.indicator,
+                  { backgroundColor: theme.colors.primary },
+                  style.indicator,
+                ]}
+              />
+            )}
+          </TouchableOpacity>
+
+          {/* 🔹 Details */}
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => handlePress('details')}
+            style={[styles.tab, style.tab]}
+          >
+            <Text
+              style={[
+                styles.title,
+                { color: theme.colors.textPrimary },
+                style.title,
+              ]}
+            >
+              {rightTitle}
+            </Text>
+
+            {activeTab === 'details' && (
+              <View
+                style={[
+                  styles.indicator,
+                  { backgroundColor: theme.colors.primary },
+                  style.indicator,
+                ]}
+              />
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: scale(12),
+  },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: scale(12),
+    justifyContent: 'space-between',
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: RFValue(14),
+    fontWeight: '600',
+  },
+  indicator: {
+    marginTop: scale(6),
+    marginBottom: scale(10),
+    height: scale(2.5),
+    borderRadius: scale(2),
+    width: '100%',
+  },
+});