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

package/src/components/ContentView/MoreContentList.tsx

@@ -1,327 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 01 Jul 2025 at 02:28 PM
- */
-
-import React, { useCallback, useRef, useMemo } from 'react';
-import { useSkeletonItems } from '../../hooks/useSkeletonItems';
-import {
-  FlatList,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  type FlatListProps,
-} from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import Display from '../../utils/Display';
-import { Text } from '../Text';
-import { View } from '../View';
-import AppHeader, { type AppHeaderProps } from '../Headers/AppHeader';
-import { RFValue } from 'react-native-responsive-fontsize';
-import CardPoster from '../Content/Card/components/CardPoster';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook';
-import Animated from 'react-native-reanimated';
-import { Search } from 'lucide-react-native';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-interface Props {
-  headerProps?: AppHeaderProps;
-  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;
-}
-
-const AnimatedFlatList = Animated.createAnimatedComponent(
-  FlatList as React.ComponentType<FlatListProps<IContentData>>
-);
-
-const MoreContentList: React.FC<Props> = React.memo(
-  ({
-    headerProps,
-    contentList = [],
-    onItemPress,
-    isLoading = false,
-    error = false,
-    errorText = 'Something went wrong!',
-    theme,
-    moreDataIsLoading = false,
-    onEndReached,
-    skeletonCount = 12,
-    numColumns = 3,
-    footerComponent,
-    refreshing = false,
-    onRefresh,
-  }) => {
-    const { theme: appliedTheme } = useInternalTheme(theme);
-    const onEndReachedCalledDuringMomentum = useRef(false);
-
-    // Memoize computed values
-    const isEmpty = useMemo(
-      () => !isLoading && (!contentList || contentList.length === 0),
-      [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 header title style
-    const headerTitleStyle = useMemo(
-      () => StyleSheet.flatten([styles.headerTitle, headerProps?.titleStyle]),
-      [headerProps?.titleStyle]
-    );
-
-    // Memoize default right icon
-    const defaultRightIcon = useMemo(
-      () => (
-        <Search size={scale(23)} color={appliedTheme.colors.onBackground} />
-      ),
-      [appliedTheme.colors.onBackground]
-    );
-
-    // 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}
-            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}
-          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 }}>
-        <AppHeader
-          title="More Content"
-          titleAlign="left"
-          titleStyle={headerTitleStyle}
-          onBackPress={headerProps?.onBackPress || (() => {})}
-          onRightPress={headerProps?.onRightPress || (() => {})}
-          rightIcon={headerProps?.rightIcon || defaultRightIcon}
-          theme={theme}
-          {...headerProps}
-        />
-        {renderContent}
-      </View>
-    );
-  }
-);
-
-export default MoreContentList;
-
-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/One/ContentViewOne.tsx

@@ -1,243 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 01 Jul 2025 at 02:28 PM
- */
-import React, { useMemo, useCallback } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import { HeroBanner } from './components/HeroBanner';
-import { GenreTags } from './components/GenreTags';
-import { AboutSection } from './components/AboutSection';
-import { Title } from './components/Title';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import { CastCard } from './components/CastCard';
-import Cards from '../../Content/Card';
-import { scale } from 'react-native-size-matters';
-import { EpisodeCard } from './components/EpisodeCard';
-import type { ComponentProps } from '../../../types/content/content-view.types';
-import { NotFoundFallback } from '../../Fallbacks';
-import { MiniInfo } from './components/MiniInfo';
-
-export const ContentViewOne = React.memo(
-  ({
-    content,
-    seasons,
-    isLoading = false,
-    seasonsIsLoading = false,
-    theme,
-    text,
-    recommendedContent,
-    events,
-    heroBannerProps,
-    titleStyles,
-    genreTagsStyles,
-    aboutSectionStyles,
-    castStyles,
-    recommendedContentCardStyles,
-    history,
-    episodeCardMode,
-    pricingAndExpiryInfo,
-  }: Omit<ComponentProps, 'isLiked'>) => {
-    const { theme: appliedTheme } = useInternalTheme(theme);
-
-    // Memoize computed values
-    const seekTime = useMemo(
-      () => history?.currentTime || 0,
-      [history?.currentTime]
-    );
-    const isComplete = useMemo(
-      () => history?.completed || false,
-      [history?.completed]
-    );
-    const currentEpisode = useMemo(
-      () => history?.current_episode,
-      [history?.current_episode]
-    );
-    const isNotFound = useMemo(
-      () => !isLoading && !content,
-      [isLoading, content]
-    );
-
-    // Memoize play handler
-    const handlePlayPress = useCallback(
-      ({ is_trailer }: { is_trailer?: boolean }) => {
-        if (!content) return;
-        events?.onPlay?.({
-          id: content._id,
-          slug: content.slug,
-          type: content.type,
-          current_episode: currentEpisode,
-          mode: 'fullscreen',
-          is_trailer,
-          seekTime: isComplete ? 0 : seekTime,
-        });
-      },
-      [content, currentEpisode, isComplete, seekTime, events]
-    );
-
-    // Memoize episode press handler
-    const handleEpisodePress = useCallback(
-      ({
-        season_id,
-        episode_id,
-        episode_number,
-      }: {
-        season_id: string;
-        episode_id: string;
-        episode_number: number;
-      }) => {
-        if (!content || seasonsIsLoading) return;
-        events?.onPlay?.({
-          id: content._id,
-          slug: content.slug,
-          type: content.type,
-          current_episode: episode_id,
-          current_season: season_id,
-          episode_number,
-        });
-      },
-      [content, seasonsIsLoading, events]
-    );
-
-    // Memoize recommended item press handler
-    const handleRecommendedItemPress = useCallback(
-      (item: any) => {
-        events?.onPressRecommendedItem?.({ item });
-      },
-      [events]
-    );
-
-    // Memoize not found text
-    const notFoundText = useMemo(
-      () => ({
-        title: text?.notFound?.title || 'Oops! Content Not Found',
-        subtitle:
-          text?.notFound?.subtitle ||
-          "We couldn't find anything to show here. Please check back later.",
-        buttonText: text?.notFound?.buttonText || 'Go Back',
-      }),
-      [text?.notFound]
-    );
-
-    // Memoize show episodes condition
-    const showEpisodes = useMemo(
-      () =>
-        content?.type === 'series' &&
-        (seasonsIsLoading || (seasons && seasons.length > 0)),
-      [content?.type, seasonsIsLoading, seasons]
-    );
-
-    // Memoize show recommended condition
-    const showRecommended = useMemo(
-      () => recommendedContent && recommendedContent?.content,
-      [recommendedContent]
-    );
-
-    return (
-      <>
-        {isNotFound ? (
-          <NotFoundFallback
-            title={notFoundText.title}
-            subtitle={notFoundText.subtitle}
-            backButtonText={notFoundText.buttonText}
-            onPressBack={events?.onBackPress}
-            theme={theme}
-          />
-        ) : (
-          <ScrollView
-            showsVerticalScrollIndicator={false}
-            keyboardShouldPersistTaps="handled"
-            contentContainerStyle={styles.scrollContent}
-            bounces={false}
-          >
-            <HeroBanner
-              backgroundImage={content?.thumbnail}
-              title={content?.name}
-              theme={theme}
-              isLoading={isLoading}
-              content_offering_type={content?.content_offering_type}
-              onPressPlay={handlePlayPress}
-              onBackPress={events?.onBackPress}
-              {...heroBannerProps}
-            />
-            <Title
-              title={content?.name}
-              subtitle={content?.u_age}
-              rating={content?.rating}
-              theme={appliedTheme}
-              isLoading={isLoading}
-              style={titleStyles}
-            />
-
-            <GenreTags
-              genres={content?.genres}
-              theme={appliedTheme}
-              isLoading={isLoading}
-              style={genreTagsStyles}
-            />
-            <MiniInfo
-              content={content}
-              theme={theme}
-              isLoading={isLoading}
-              {...pricingAndExpiryInfo}
-            />
-
-            <AboutSection
-              theme={appliedTheme}
-              description={content?.description}
-              release_year={content?.release_year}
-              isLoading={isLoading}
-              style={aboutSectionStyles}
-            />
-            <CastCard
-              theme={appliedTheme}
-              data={content?.cast || null}
-              isLoading={isLoading}
-              onItemPress={() => {}}
-              style={castStyles}
-            />
-            {showEpisodes && (
-              <EpisodeCard
-                isLoading={seasonsIsLoading}
-                seasons={seasonsIsLoading ? [] : (seasons ?? [])}
-                onPress={handleEpisodePress}
-                theme={theme}
-                mode={episodeCardMode ?? 'horizontal'}
-              />
-            )}
-
-            {showRecommended && recommendedContent && (
-              <Cards.Styles.Four
-                section_id={recommendedContent._id}
-                title={recommendedContent.name}
-                type={recommendedContent.type}
-                data={recommendedContent.content}
-                isLoading={isLoading}
-                theme={theme}
-                onPressItem={handleRecommendedItemPress}
-                onPressMore={events?.onPressRecommendedMore}
-                moreFetchData={events?.moreFetchDataRecommended}
-                {...recommendedContentCardStyles}
-              />
-            )}
-          </ScrollView>
-        )}
-      </>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  scrollContent: {
-    paddingBottom: scale(80),
-  },
-});
-
-export namespace ContentViewOne {
-  export type Props = ComponentProps;
-  export type RecommendedContent = Props['recommendedContent'];
-  export type HeroBannerProps = Props['heroBannerProps'];
-  export type MenuAction = NonNullable<
-    NonNullable<ComponentProps['heroBannerProps']>['menuActions']
-  >[number];
-  export type History = NonNullable<ComponentProps['history']>;
-}