@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/components/Content/Sections.tsx

@@ -1,273 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025
- */
-import React, { useMemo } from 'react';
-import Sliders from './Card/Sliders';
-import Cards from './Card';
-import type { IGetSectionData, MoreFetchData, IAdItem } from '../../types';
-import type { IHistoryItem } from './Card/NowWatching/NowWatching';
-import type { ICategory } from './Card/Category/Category';
-import type { ThemeOverride } from '../../theme/themes';
-import type { IContentLoading } from './Content';
-import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
-
-export interface ICustomComponentsForSections {
-  type: string;
-  component: React.ReactElement;
-}
-
-export interface IProps {
-  type: IGetSectionData['type'];
-  ads?: IServeAd[];
-  data: {
-    sectionData: IGetSectionData['content'] | null;
-    historyData?: IHistoryItem[];
-    category?: ICategory[];
-  };
-  name: string;
-  customComponents?: ICustomComponentsForSections[];
-  theme?: ThemeOverride;
-  index: number;
-  section_id: string;
-  events?: {
-    onPressItem?: (item: IContentData | IAdItem) => void;
-    onPressMore?: (params: {
-      section_id: string;
-      name: string;
-      type: IGetSectionData['type'];
-    }) => void;
-    onPressCategory?: (category: ICategory) => void;
-    onAdVisible?: (ad: IServeAd, percent: number) => void;
-    onDisplayAds?: (ad: IServeAd) => void;
-  };
-  sectionProps?: {
-    showPlayBtn?: boolean;
-  };
-  isLoading?: IContentLoading;
-  moreFetchData?: MoreFetchData<IContentData>;
-  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-  onDisplayAds?: (ad: IServeAd) => void;
-  screenDimensions?: { width: number; height: number };
-  viewportOffsets?: {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-  };
-}
-const createCommonProps = (
-  type: IGetSectionData['type'],
-  props: Omit<IProps, 'customComponents' | 'type'>
-) => {
-  const effectiveIsLoading =
-    props.isLoading?.section || props.section_id === `dummy-${type}`;
-
-  const onPressMoreHandler = props.events?.onPressMore
-    ? (params: { section_id: string; name: string; type: string }) => {
-        props.events?.onPressMore?.({
-          section_id: params.section_id,
-          name: params.name,
-          type,
-        });
-      }
-    : undefined;
-
-  return {
-    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: onPressMoreHandler,
-    onAdVisible: props.events?.onAdVisible,
-    isLoading: effectiveIsLoading,
-    moreFetchDataHistory: props.moreFetchDataHistory,
-    moreFetchData: props.moreFetchData,
-    onDisplayAds: props.onDisplayAds || props.events?.onDisplayAds,
-    screenDimensions: props.screenDimensions,
-    viewportOffsets: props.viewportOffsets,
-  };
-};
-
-const renderDefaultComponent = (
-  type: IGetSectionData['type'],
-  props: Omit<IProps, 'customComponents' | 'type'>
-): React.ReactNode => {
-  const commonProps = createCommonProps(type, props);
-  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;
-  }
-};
-
-// ----------------------------------------
-// Sections Component
-// ----------------------------------------
-const Sections: React.FC<IProps> = ({
-  type,
-  data,
-  name,
-  customComponents = [],
-  theme,
-  index,
-  section_id,
-  events,
-  sectionProps,
-  isLoading,
-  moreFetchData,
-  moreFetchDataHistory,
-  onDisplayAds,
-  screenDimensions,
-  viewportOffsets,
-}) => {
-  const commonProps = useMemo(
-    () => ({ data: data.sectionData, title: name }),
-    [data.sectionData, name]
-  );
-
-  const customComponent = useMemo(
-    () => customComponents.find((c) => c.type === type),
-    [customComponents, type]
-  );
-
-  const defaultRendered = useMemo(
-    () =>
-      renderDefaultComponent(type, {
-        data,
-        name,
-        section_id,
-        index,
-        theme,
-        events,
-        sectionProps,
-        isLoading,
-        moreFetchData,
-        moreFetchDataHistory,
-        onDisplayAds,
-        screenDimensions,
-        viewportOffsets,
-      }),
-    [
-      type,
-      data,
-      name,
-      section_id,
-      index,
-      theme,
-      events,
-      sectionProps,
-      isLoading,
-      moreFetchData,
-      moreFetchDataHistory,
-      onDisplayAds,
-      screenDimensions,
-      viewportOffsets,
-    ]
-  );
-
-  const filterProps = useMemo(
-    () => ({
-      data,
-      name,
-      section_id,
-      index,
-      theme,
-      events,
-      sectionProps,
-      isLoading,
-      moreFetchData,
-      moreFetchDataHistory,
-      onDisplayAds,
-      screenDimensions,
-      viewportOffsets,
-    }),
-    [
-      data,
-      name,
-      section_id,
-      index,
-      theme,
-      events,
-      sectionProps,
-      isLoading,
-      moreFetchData,
-      moreFetchDataHistory,
-      onDisplayAds,
-      screenDimensions,
-      viewportOffsets,
-    ]
-  );
-
-  const fallbackComponents = useMemo(
-    () =>
-      customComponents.filter(
-        ({ type: customType }) =>
-          renderDefaultComponent(
-            customType as IGetSectionData['type'],
-            filterProps
-          ) === null
-      ),
-    [customComponents, filterProps]
-  );
-
-  if (customComponent) {
-    return React.cloneElement(customComponent.component, {
-      ...(customComponent.component?.props ?? {}),
-      ...commonProps,
-    });
-  }
-
-  if (defaultRendered) return defaultRendered;
-
-  return (
-    <>
-      {fallbackComponents.map(({ component, type: key }) =>
-        React.cloneElement(component, {
-          ...(component?.props ?? {}),
-          key,
-          ...commonProps,
-        })
-      )}
-    </>
-  );
-};
-
-export default React.memo(Sections);

package/src/components/ContentView/ContentView.tsx

@@ -1,242 +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 ContentView = React.memo(
-  ({
-    content,
-    seasons,
-    isLoading = false,
-    seasonsIsLoading = false,
-    theme,
-    text,
-    recommendedContent,
-    events,
-    heroBannerProps,
-    titleStyles,
-    genreTagsStyles,
-    aboutSectionStyles,
-    castStyles,
-    recommendedContentCardStyles,
-    history,
-    episodeCardMode,
-    pricingAndExpiryInfo,
-  }: ComponentProps) => {
-    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}
-          >
-            <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 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']>;
-}