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

package/src/components/Content/Sections.tsx

@@ -1,16 +1,16 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:50 PM
+ * @lastModified Sun 08 Jun 2025
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import Sliders from './Card/Sliders';
 import Cards from './Card';
-import type { IGetSectionData, MoreFetchData } from '../../types';
+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 } from '@zezosoft/zezo-ott-api-client';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
 
 export interface ICustomComponentsForSections {
   type: string;
@@ -19,6 +19,7 @@ export interface ICustomComponentsForSections {
 
 export interface IProps {
   type: IGetSectionData['type'];
+  ads?: IServeAd[];
   data: {
     sectionData: IGetSectionData['content'] | null;
     historyData?: IHistoryItem[];
@@ -30,13 +31,15 @@ export interface IProps {
   index: number;
   section_id: string;
   events?: {
-    onPressItem?: (item: IContentData) => void;
+    onPressItem?: (item: IContentData | IAdItem) => void;
     onPressMore?: (params: {
-      section_id: IGetSectionData['_id'];
-      name: IGetSectionData['name'];
+      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;
@@ -44,15 +47,33 @@ export interface IProps {
   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 renderDefaultComponent = (
+const createCommonProps = (
   type: IGetSectionData['type'],
   props: Omit<IProps, 'customComponents' | 'type'>
-): React.ReactNode => {
+) => {
   const effectiveIsLoading =
     props.isLoading?.section || props.section_id === `dummy-${type}`;
-  const commonProps = {
+
+  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,
@@ -60,11 +81,22 @@ const renderDefaultComponent = (
     data: props.data?.sectionData || null,
     index: props.index,
     onPressItem: props.events?.onPressItem,
-    onPressMore: props.events?.onPressMore,
+    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 (
@@ -106,6 +138,9 @@ const renderDefaultComponent = (
   }
 };
 
+// ----------------------------------------
+// Sections Component
+// ----------------------------------------
 const Sections: React.FC<IProps> = ({
   type,
   data,
@@ -119,9 +154,100 @@ const Sections: React.FC<IProps> = ({
   isLoading,
   moreFetchData,
   moreFetchDataHistory,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets,
 }) => {
-  const commonProps = { data: data.sectionData, title: name };
-  const customComponent = customComponents.find((c) => c.type === type);
+  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 ?? {}),
@@ -129,48 +255,19 @@ const Sections: React.FC<IProps> = ({
     });
   }
 
-  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,
-          })
-        )}
+      {fallbackComponents.map(({ component, type: key }) =>
+        React.cloneElement(component, {
+          ...(component?.props ?? {}),
+          key,
+          ...commonProps,
+        })
+      )}
     </>
   );
 };
 
-export default Sections;
+export default React.memo(Sections);

package/src/components/ContentView/ContentView.tsx

@@ -2,6 +2,7 @@
  * @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';
@@ -16,148 +17,213 @@ import type { ComponentProps } from '../../types/content/content-view.types';
 import { NotFoundFallback } from '../Fallbacks';
 import { MiniInfo } from './components/MiniInfo';
 
-export const ContentView = ({
-  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);
-  const seekTime = history?.currentTime || 0;
-  const isComplete = history?.completed || false;
-  const currentEpisode = history?.current_episode;
+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);
 
-  const isNotFound = !isLoading && !content;
+    // 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]
+    );
 
-  return (
-    <>
-      {isNotFound ? (
-        <NotFoundFallback
-          title={text?.notFound?.title || 'Oops! Content Not Found'}
-          subtitle={
-            text?.notFound?.subtitle ||
-            'We couldn’t find anything to show here. Please check back later.'
-          }
-          backButtonText={text?.notFound?.buttonText || 'Go Back'}
-          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={({ is_trailer }) =>
-              events?.onPlay?.({
-                id: content._id,
-                slug: content.slug,
-                type: content.type,
-                current_episode: currentEpisode,
-                mode: 'fullscreen',
-                is_trailer,
-                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}
-          />
+    // 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]
+    );
 
-          <GenreTags
-            genres={content?.genres}
-            theme={appliedTheme}
-            isLoading={isLoading}
-            style={genreTagsStyles}
-          />
-          <MiniInfo
-            content={content}
+    // 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}
-            isLoading={isLoading}
-            {...pricingAndExpiryInfo}
           />
+        ) : (
+          <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}
+            />
 
-          <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}
-          />
-          {content?.type === 'series' &&
-            (seasonsIsLoading || (seasons && seasons.length > 0)) && (
+            <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={({ 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,
-                    });
-                  }
-                }}
+                onPress={handleEpisodePress}
                 theme={theme}
                 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={theme}
-              onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
-              onPressMore={events?.onPressRecommendedMore}
-              moreFetchData={events?.moreFetchDataRecommended}
-              {...recommendedContentCardStyles}
-            />
-          )}
-        </ScrollView>
-      )}
-    </>
-  );
-};
+            {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: {