@zezosoft/zezo-ott-react-native-ui-kit 1.3.4 → 1.3.6

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

@@ -0,0 +1,332 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo, useCallback, useState } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { useTheme } from '../../../theme';
+import { CastCard } from '../One/components/CastCard';
+import { scale } from 'react-native-size-matters';
+import type {
+  ComponentProps,
+  LikeShareEventArgs,
+} from '../../../types/content/content-view.types';
+import { NotFoundFallback } from '../../Fallbacks';
+import {
+  Details,
+  HeroBanner,
+  PlayOrTrailer,
+  SectionTabs,
+  Title,
+  type playButtonConfig,
+} from './components';
+import { AboutSection } from '../shared/AboutSection';
+import { GenreTags } from '../shared/GenreTags';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import MoreLikeThisContentList from './components/MoreLikeThisContentList ';
+import { EpisodeCard } from '../shared/EpisodeCard';
+import { MiniInfo } from '../One/components/MiniInfo';
+
+export const ContentViewTwo = React.memo(
+  ({
+    content,
+    seasons,
+    isLoading = false,
+    seasonsIsLoading = false,
+    theme,
+    text,
+    recommendedContent,
+    isLiked = false,
+    events,
+    titleStyles,
+    genreTagsStyles,
+    aboutSectionStyles,
+    castStyles,
+    history,
+    episodeCardMode,
+    playButtonConfig,
+    pricingAndExpiryInfo,
+  }: Omit<ComponentProps, 'heroBannerProps'> & {
+    playButtonConfig?: playButtonConfig;
+  }) => {
+    const { theme: appliedTheme } = useTheme(theme);
+    const hasFetchedOnce = !!recommendedContent?.content;
+
+    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,
+          title: content.name,
+          slug: content.slug,
+          type: content.type,
+          current_episode: currentEpisode,
+          mode: 'fullscreen',
+          is_trailer,
+          seekTime: isComplete ? 0 : seekTime,
+        });
+      },
+      [content, currentEpisode, isComplete, seekTime, events]
+    );
+
+    const handleLikePress = useCallback(
+      async (args: LikeShareEventArgs) => {
+        await events?.onLikeContent?.(args);
+      },
+      [events]
+    );
+
+    const handleSharePress = useCallback(
+      async (args: LikeShareEventArgs) => {
+        const { id, source } = args;
+
+        if (!events?.onShareContent) {
+          console.error('Share API not provided');
+          return;
+        }
+
+        try {
+          await events.onShareContent({ id, source });
+        } catch (error) {
+          console.error('Share API failed', error);
+        }
+      },
+      [events]
+    );
+
+    const handleEpisodePress = useCallback(
+      ({
+        season_id,
+        episode_id,
+        episode_title,
+        episode_number,
+      }: {
+        season_id: string;
+        episode_id: string;
+        episode_title: string;
+        episode_number: number;
+      }) => {
+        if (!content || seasonsIsLoading) return;
+        events?.onPlay?.({
+          id: content._id,
+          title: content.name,
+          slug: content.slug,
+          type: content.type,
+          episode_title,
+          current_episode: episode_id,
+          current_season: season_id,
+          episode_number,
+        });
+      },
+      [content, seasonsIsLoading, events]
+    );
+
+    const handleRecommendedItemPress = useCallback(
+      (item: any) => {
+        events?.onPressRecommendedItem?.({ item });
+      },
+      [events]
+    );
+
+    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]
+    );
+
+    const showEpisodes = useMemo(
+      () =>
+        content?.type === 'series' &&
+        (seasonsIsLoading || (seasons && seasons.length > 0)),
+      [content?.type, seasonsIsLoading, seasons]
+    );
+
+    const [activeTab, setActiveTab] = useState<'more' | 'details'>('more');
+
+    return (
+      <>
+        {isNotFound ? (
+          <NotFoundFallback
+            title={notFoundText.title}
+            subtitle={notFoundText.subtitle}
+            backButtonText={notFoundText.buttonText}
+            onPressBack={events?.onBackPress}
+            theme={theme}
+          />
+        ) : (
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            keyboardShouldPersistTaps="handled"
+            bounces={false}
+            contentContainerStyle={styles.scrollContent}
+          >
+            <HeroBanner
+              backgroundImage={content?.thumbnail}
+              title={content?.name}
+              theme={theme}
+              isLoading={isLoading}
+              onBackPress={events?.onBackPress}
+              titleImage={content?.title_image}
+              contentType={content?.type}
+            />
+            <Title
+              contentId={content?._id}
+              subtitle={content?.u_age}
+              rating={content?.rating}
+              releaseYear={content?.release_year}
+              duration={content?.duration}
+              language={
+                typeof content?.language === 'string'
+                  ? content.language
+                  : (content?.language?.name ?? null)
+              }
+              theme={appliedTheme}
+              isLoading={isLoading}
+              isLiked={isLiked}
+              onPressLike={handleLikePress}
+              onPressShare={handleSharePress}
+              style={titleStyles}
+            />
+
+            <PlayOrTrailer
+              onPressPlay={handlePlayPress}
+              theme={theme}
+              isLoading={isLoading}
+              playButtonConfig={playButtonConfig}
+              contentType={content?.type}
+            />
+
+            <GenreTags
+              genres={content?.genres}
+              theme={appliedTheme}
+              isLoading={isLoading}
+              style={genreTagsStyles}
+              layoutMode="inline"
+            />
+
+            {pricingAndExpiryInfo?.visible && (
+              <MiniInfo
+                content={content}
+                theme={theme}
+                isLoading={isLoading}
+                {...pricingAndExpiryInfo}
+              />
+            )}
+            <AboutSection
+              theme={appliedTheme}
+              description={content?.description}
+              release_year={content?.release_year}
+              isLoading={isLoading}
+              style={aboutSectionStyles}
+            />
+            {showEpisodes && (
+              <EpisodeCard
+                isLoading={seasonsIsLoading}
+                seasons={seasonsIsLoading ? [] : (seasons ?? [])}
+                onPress={handleEpisodePress}
+                theme={theme}
+                mode={
+                  episodeCardMode ?? ('horizontal' as 'horizontal' | 'vertical')
+                }
+                content_offering_type={content?.content_offering_type}
+              />
+            )}
+            <CastCard
+              theme={appliedTheme}
+              data={content?.cast || null}
+              isLoading={isLoading}
+              onItemPress={() => {}}
+              style={castStyles}
+            />
+            <SectionTabs
+              theme={appliedTheme}
+              isLoading={isLoading}
+              activeTab={activeTab}
+              onTabChange={setActiveTab}
+            />
+
+            {activeTab === 'more' && (
+              <MoreLikeThisContentList
+                contentList={
+                  recommendedContent?.content?.data?.filter(
+                    (item): item is IContentData =>
+                      'name' in item && '_id' in item
+                  ) ?? []
+                }
+                isLoading={isLoading}
+                hasFetchedOnce={hasFetchedOnce}
+                theme={theme}
+                onItemPress={handleRecommendedItemPress}
+                moreDataIsLoading={false}
+              />
+            )}
+
+            {activeTab === 'details' && (
+              <Details
+                theme={appliedTheme}
+                isLoading={isLoading}
+                content={content}
+              />
+            )}
+
+            {/* {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(30),
+    flexGrow: 1,
+  },
+});
+
+export namespace ContentViewTwo {
+  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']>;
+}

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

@@ -0,0 +1,196 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo, useMemo } from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Text } from '../../../Text';
+import type { ITheme } from '../../../../theme/themes';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+
+type ContentPerson = {
+  _id: string;
+  name: string;
+  type?: string;
+};
+
+type Props = {
+  theme: ITheme;
+  isLoading?: boolean;
+  content: IContentData;
+};
+
+const InfoRow = memo(
+  ({
+    label,
+    value,
+    theme,
+  }: {
+    label: string;
+    value?: string;
+    theme: ITheme;
+  }) => {
+    const displayValue = value && value.trim().length > 0 ? value : 'N/A';
+
+    return (
+      <View style={styles.row}>
+        <Text style={[styles.label, { color: theme.colors.textPrimary }]}>
+          {label}
+        </Text>
+
+        <Text style={[styles.value, { color: theme.colors.textPrimary }]}>
+          {displayValue}
+        </Text>
+      </View>
+    );
+  }
+);
+
+export const Details: React.FC<Props> = ({
+  theme,
+  isLoading = false,
+  content,
+}) => {
+  const castList = useMemo(() => content?.cast ?? [], [content?.cast]);
+
+  const { actors, directors, writers, producers } = useMemo(() => {
+    const grouped = {
+      actors: [] as ContentPerson[],
+      directors: [] as ContentPerson[],
+      writers: [] as ContentPerson[],
+      producers: [] as ContentPerson[],
+    };
+
+    castList.forEach((person) => {
+      switch (person.type) {
+        case 'actor':
+          grouped.actors.push(person);
+          break;
+        case 'director':
+          grouped.directors.push(person);
+          break;
+        case 'writer':
+          grouped.writers.push(person);
+          break;
+        case 'producer':
+          grouped.producers.push(person);
+          break;
+        default:
+          break;
+      }
+    });
+
+    return grouped;
+  }, [castList]);
+
+  if (isLoading) {
+    return (
+      <SkeletonPlaceholder
+        backgroundColor={theme.colors.skeletonBaseColor}
+        highlightColor={theme.colors.skeletonHighlightColor}
+      >
+        <SkeletonPlaceholder.Item
+          paddingHorizontal={scale(14)}
+          marginTop={verticalScale(16)}
+        >
+          {Array.from({ length: 6 }).map((_, index) => (
+            <SkeletonPlaceholder.Item
+              key={index}
+              flexDirection="row"
+              alignItems="center"
+              marginBottom={verticalScale(14)}
+            >
+              <SkeletonPlaceholder.Item
+                width={scale(120)}
+                height={verticalScale(14)}
+                borderRadius={4}
+              />
+              <SkeletonPlaceholder.Item
+                flex={1}
+                height={verticalScale(14)}
+                marginLeft={scale(12)}
+                borderRadius={4}
+              />
+            </SkeletonPlaceholder.Item>
+          ))}
+        </SkeletonPlaceholder.Item>
+      </SkeletonPlaceholder>
+    );
+  }
+  if (!castList.length) {
+    return null;
+  }
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.content}
+      showsVerticalScrollIndicator={false}
+    >
+      <InfoRow
+        label="Year of release"
+        value={content?.release_year ? String(content.release_year) : 'N/A'}
+        theme={theme}
+      />
+
+      <InfoRow
+        label="Cast"
+        value={actors.map((a) => a.name).join(', ')}
+        theme={theme}
+      />
+
+      <InfoRow
+        label="Director"
+        value={directors.map((d) => d.name).join(', ')}
+        theme={theme}
+      />
+
+      <InfoRow
+        label="Writers"
+        value={writers.map((w) => w.name).join(', ')}
+        theme={theme}
+      />
+
+      <InfoRow
+        label="Producers"
+        value={producers.map((p) => p.name).join(', ')}
+        theme={theme}
+      />
+
+      <InfoRow label="Maturity" value={content?.u_age} theme={theme} />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  content: {
+    paddingHorizontal: scale(14),
+    paddingBottom: verticalScale(24),
+  },
+
+  row: {
+    flexDirection: 'row',
+    marginBottom: verticalScale(16),
+    alignItems: 'flex-start',
+  },
+
+  label: {
+    flex: 0.55,
+    fontSize: RFValue(11),
+    lineHeight: RFValue(20),
+    opacity: 0.85,
+  },
+
+  value: {
+    flex: 0.55,
+    fontSize: RFValue(11),
+  },
+});