@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.1

package/src/components/Content/Content.tsx

@@ -0,0 +1,218 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Jun 2025 at 03:50 PM
+ */
+import React, { useMemo } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  type FlatListProps,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { scale } from 'react-native-size-matters';
+import Animated, { type AnimatedStyle, type SharedValue } from 'react-native-reanimated';
+
+import SectionType from './Sections';
+import type { IContentData, IGetSectionData, MoreFetchData } from '../../types';
+import { dummySections } from '../../constants/dummySections';
+import CategoryCard, { type ICategory } from './Card/Category/Category';
+import NoContentFallback from './Card/components/NoContentFallback';
+import type { IHistoryItem } from './Card/NowWatching/NowWatching';
+import type { AppTheme } from '../../theme/themes';
+
+export interface ICustomComponentsForContent {
+  type: string;
+  component: React.ReactElement;
+}
+
+export type IContentLoading = {
+  category?: boolean;
+  history?: boolean;
+  section?: boolean;
+  InfiniteScrollIsLoading?: boolean;
+};
+export interface IContentProps {
+  contentData: {
+    category?: ICategory[];
+    sectionData: IGetSectionData[] | null;
+    historyData?: IHistoryItem[];
+  };
+  customComponents?: ICustomComponentsForContent[];
+  LoaderComponent?: React.ReactNode;
+  ErrorComponent?: React.ReactNode;
+  InfiniteScrollLoaderComponent?: React.ReactNode;
+  onScroll?:
+    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
+    | SharedValue<((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined>;
+  contentContainerStyle?: StyleProp<ViewStyle> | AnimatedStyle<StyleProp<ViewStyle>>;
+  onEndReached?: () => void;
+  theme?: AppTheme;
+  autoSwitchTheme?: boolean;
+  events?: {
+    onPressItem?: (item: IContentData) => void;
+    onPressMore?: (params: {
+      section_id: IGetSectionData['_id'];
+      name: IGetSectionData['name'];
+      type: IGetSectionData['type'];
+    }) => void;
+    activeCategory?: ICategory;
+    onPressCategory?: (category: ICategory) => void;
+  };
+
+  sectionProps?: {
+    showPlayBtn?: boolean;
+  };
+  moreFetchData?: MoreFetchData<IContentData>;
+  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
+  isLoading?: IContentLoading;
+}
+
+const AnimatedFlatList = Animated.createAnimatedComponent(
+  FlatList as React.ComponentType<FlatListProps<IGetSectionData>>
+);
+interface FooterProps {
+  isEmpty: boolean;
+  ErrorComponent?: React.ReactNode;
+  InfiniteScrollIsLoading?: boolean;
+  InfiniteScrollLoaderComponent?: React.ReactNode;
+}
+
+const ContentFooter = ({
+  isEmpty,
+  ErrorComponent,
+  InfiniteScrollIsLoading,
+  InfiniteScrollLoaderComponent
+}: FooterProps) => {
+  if (InfiniteScrollIsLoading) {
+    return (
+      InfiniteScrollLoaderComponent ?? (
+        <Animated.View
+          style={{
+            paddingVertical: scale(30),
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <ActivityIndicator size="small" />
+        </Animated.View>
+      )
+    );
+  }
+
+  if (isEmpty) {
+    return ErrorComponent ? <>{ErrorComponent}</> : <NoContentFallback />;
+  }
+
+  return null;
+};
+
+export const Content: React.FC<IContentProps> = ({
+  customComponents,
+  InfiniteScrollLoaderComponent,
+  LoaderComponent,
+  ErrorComponent,
+  onScroll,
+  contentContainerStyle,
+  contentData,
+  onEndReached,
+  theme,
+  events,
+  sectionProps,
+  moreFetchData,
+  moreFetchDataHistory,
+  isLoading
+}) => {
+  const sectionData = useMemo<IGetSectionData[]>(() => contentData?.sectionData ?? [], [contentData?.sectionData]);
+  const headerComponent = useMemo(() => {
+    if (!contentData?.category || contentData.category.length === 0) return null;
+
+    return (
+      <CategoryCard
+        category={contentData.category}
+        onPressCategory={events?.onPressCategory}
+        activeCategory={events?.activeCategory}
+        isLoading={isLoading?.category}
+        mode="filled"
+        theme={theme}
+        key={'category'}
+      />
+    );
+  }, [contentData?.category, events?.onPressCategory, events?.activeCategory, isLoading?.category, theme]);
+
+  const renderItem = ({ item, index }: { item: IGetSectionData | null; index: number }) => {
+    if (!item) return null;
+
+    const isDummy = item?._id?.startsWith('dummy');
+    const isLoadingItem = isLoading?.section || isDummy;
+
+    if ((isDummy || isLoading?.section) && LoaderComponent) {
+      return LoaderComponent;
+    }
+
+    return (
+      <SectionType
+        key={index}
+        index={index}
+        type={item?.type || 'normal'}
+        data={{
+          sectionData: item.content || null,
+          historyData: contentData.historyData,
+          category: contentData.category
+        }}
+        name={item?.name || `Section ${index}`}
+        theme={theme}
+        customComponents={customComponents}
+        section_id={item?._id || index.toString()}
+        events={events}
+        isLoading={{
+          section: isLoadingItem,
+          history: isLoading?.history,
+          category: isLoading?.category
+        }}
+        sectionProps={sectionProps}
+        moreFetchDataHistory={moreFetchDataHistory}
+        moreFetchData={moreFetchData}
+      />
+    );
+  };
+
+  const isEmpty = !isLoading?.section && (!sectionData || sectionData.length === 0);
+
+  return (
+    <AnimatedFlatList
+      initialNumToRender={5}
+      showsVerticalScrollIndicator={false}
+      removeClippedSubviews
+      onScroll={onScroll as any}
+      scrollEventThrottle={16}
+      data={isLoading?.section ? dummySections : sectionData}
+      renderItem={renderItem as any}
+      keyExtractor={(_item, index) => index.toString()}
+      onEndReached={() => onEndReached?.()}
+      ListHeaderComponent={headerComponent}
+      ListFooterComponent={
+        <ContentFooter
+          InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
+          InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
+          isEmpty={isEmpty}
+          ErrorComponent={ErrorComponent}
+        />
+      }
+      onEndReachedThreshold={0.7}
+      contentContainerStyle={[
+        {
+          paddingBottom: scale(100)
+        },
+        contentContainerStyle
+      ]}
+    />
+  );
+};
+
+export namespace Content {
+  export type Props = IContentProps;
+  export type Data = Props['contentData'];
+}

package/src/components/Content/Sections.tsx

@@ -0,0 +1,169 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Jun 2025 at 03:50 PM
+ */
+import React from 'react';
+import Sliders from './Card/Sliders';
+import Cards from './Card';
+import type { IContentData, IGetSectionData, MoreFetchData } from '../../types';
+import type { IHistoryItem } from './Card/NowWatching/NowWatching';
+import type { ICategory } from './Card/Category/Category';
+import type { AppTheme } from '../../theme/themes';
+import type { IContentLoading } from './Content';
+
+export interface ICustomComponentsForSections {
+  type: string;
+  component: React.ReactElement;
+}
+
+export interface IProps {
+  type: IGetSectionData['type'];
+  data: {
+    sectionData: IGetSectionData['content'] | null;
+    historyData?: IHistoryItem[];
+    category?: ICategory[];
+  };
+  name: string;
+  customComponents?: ICustomComponentsForSections[];
+  theme?: AppTheme;
+  index: number;
+  section_id: string;
+  events?: {
+    onPressItem?: (item: IContentData) => void;
+    onPressMore?: (params: {
+      section_id: IGetSectionData['_id'];
+      name: IGetSectionData['name'];
+      type: IGetSectionData['type'];
+    }) => void;
+    onPressCategory?: (category: ICategory) => void;
+  };
+  sectionProps?: {
+    showPlayBtn?: boolean;
+  };
+  isLoading?: IContentLoading;
+  moreFetchData?: MoreFetchData<IContentData>;
+  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
+}
+
+const renderDefaultComponent = (
+  type: IGetSectionData['type'],
+  props: Omit<IProps, 'customComponents' | 'type'>
+): React.ReactNode => {
+  const effectiveIsLoading = props.isLoading?.section || props.section_id === `dummy-${type}`;
+  const commonProps = {
+    theme: props.theme,
+    title: props.name,
+    section_id: props.section_id,
+    type,
+    data: props.data?.sectionData || null,
+    index: props.index,
+    onPressItem: props.events?.onPressItem,
+    onPressMore: props.events?.onPressMore,
+    isLoading: effectiveIsLoading,
+    moreFetchDataHistory: props.moreFetchDataHistory,
+    moreFetchData: props.moreFetchData
+  };
+  switch (type) {
+    case 'slider':
+      return <Sliders.Styles.One {...commonProps} showPlayIcon={props.sectionProps?.showPlayBtn} />;
+    case 'slider_style_2':
+      return <Sliders.Styles.Two {...commonProps} />;
+    case 'normal':
+      return <Cards.Styles.One {...commonProps} />;
+    case 'new_releases':
+      return <Cards.Styles.One {...commonProps} />;
+    case 'card_style_2':
+      return <Cards.Styles.Two {...commonProps} />;
+    case 'card_style_3':
+      return <Cards.Styles.Three {...commonProps} />;
+    case 'card_style_4':
+      return <Cards.Styles.Four {...commonProps} />;
+    case 'card_style_5':
+      return <Cards.Styles.Five {...commonProps} />;
+    case 'card_style_6':
+      return <Cards.Styles.Six {...commonProps} />;
+    case 'continue_watching':
+      return (
+        <Cards.Styles.NowWatching
+          {...commonProps}
+          historyData={props.data.historyData}
+          isLoadingHistory={props.isLoading?.history}
+        />
+      );
+    case 'card_rotate_in_out':
+      return <Cards.Styles.RotateCarousel {...commonProps} />;
+    case 'top_10':
+      return <Cards.Styles.TopTen {...commonProps} />;
+    default:
+      return null;
+  }
+};
+
+const Sections: React.FC<IProps> = ({
+  type,
+  data,
+  name,
+  customComponents = [],
+  theme,
+  index,
+  section_id,
+  events,
+  sectionProps,
+  isLoading,
+  moreFetchData,
+  moreFetchDataHistory
+}) => {
+  const commonProps = { data: data.sectionData, title: name };
+  const customComponent = customComponents.find((c) => c.type === type);
+  if (customComponent) {
+    return React.cloneElement(customComponent.component, {
+      ...(customComponent.component?.props ?? {}),
+      ...commonProps
+    });
+  }
+
+  const defaultRendered = renderDefaultComponent(type, {
+    data,
+    name,
+    section_id,
+    index,
+    theme,
+    events,
+    sectionProps,
+    isLoading,
+    moreFetchData,
+    moreFetchDataHistory
+  });
+
+  if (defaultRendered) return defaultRendered;
+
+  return (
+    <>
+      {customComponents
+        .filter(
+          ({ type: customType }) =>
+            renderDefaultComponent(customType as IGetSectionData['type'], {
+              data,
+              name,
+              section_id,
+              index,
+              theme,
+              events,
+              sectionProps,
+              isLoading,
+              moreFetchData,
+              moreFetchDataHistory
+            }) === null
+        )
+        .map(({ component, type: key }) =>
+          React.cloneElement(component, {
+            ...(component?.props ?? {}),
+            key,
+            ...commonProps
+          })
+        )}
+    </>
+  );
+};
+
+export default Sections;

package/src/components/ContentView/ContentView.tsx

@@ -0,0 +1,137 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+import React 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 { useTheme } from '../../theme/hook/useTheme';
+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';
+export const ContentView = ({
+  content,
+  seasons,
+  isLoading = false,
+  seasonsIsLoading = false,
+  theme,
+  recommendedContent,
+  events,
+  heroBannerProps,
+  titleStyles,
+  genreTagsStyles,
+  aboutSectionStyles,
+  castStyles,
+  recommendedContentCardStyles,
+  history,
+  episodeCardMode
+}: ComponentProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const seekTime = history?.currentTime || 0;
+  const isComplete = history?.completed || 0;
+  const currentEpisode = history?.current_episode || 0;
+  return (
+    <ScrollView
+      showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      contentContainerStyle={styles.scrollContent}
+    >
+      <HeroBanner
+        backgroundImage={content?.thumbnail}
+        title={content?.name}
+        theme={appliedTheme}
+        isLoading={isLoading}
+        onPressPlay={() =>
+          events?.onPlay?.({
+            id: content._id,
+            slug: content.slug,
+            type: content.type,
+            current_episode: currentEpisode,
+            mode: 'normal',
+            is_trailer: false,
+            seekTime: isComplete ? 0 : seekTime
+          })
+        }
+        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} />
+      <AboutSection
+        theme={appliedTheme}
+        description={content?.description}
+        isLoading={isLoading}
+        style={aboutSectionStyles}
+      />
+      <CastCard
+        theme={appliedTheme}
+        data={content?.cast || null}
+        isLoading={isLoading}
+        onItemPress={() => {}}
+        style={castStyles}
+      />
+      {content?.type === 'series' && (seasonsIsLoading || (seasons && seasons.length > 0)) && (
+        <EpisodeCard
+          isLoading={seasonsIsLoading}
+          seasons={seasonsIsLoading ? [] : (seasons ?? [])}
+          onPress={({ season_id, episode_id, episode_number }) => {
+            if (!seasonsIsLoading) {
+              events?.onPlay?.({
+                id: content._id,
+                slug: content.slug,
+                type: content.type,
+                current_episode: episode_id,
+                current_season: season_id,
+                episode_number
+              });
+            }
+          }}
+          theme={appliedTheme}
+          mode={episodeCardMode ?? 'horizontal'}
+        />
+      )}
+
+      {recommendedContent && recommendedContent?.content && (
+        <Cards.Styles.Four
+          section_id={recommendedContent._id}
+          title={recommendedContent.name}
+          type={recommendedContent.type}
+          data={recommendedContent.content}
+          isLoading={isLoading}
+          theme={appliedTheme}
+          onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
+          onPressMore={events?.onPressRecommendedMore}
+          moreFetchData={events?.moreFetchDataRecommended}
+          {...recommendedContentCardStyles}
+        />
+      )}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    paddingBottom: scale(80)
+  }
+});
+
+export namespace ContentView {
+  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']>;
+}