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

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

@@ -0,0 +1,343 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+import React, { useMemo, useCallback, useState } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+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 {
+  AboutSection,
+  Details,
+  GenreTags,
+  HeroBanner,
+  PlayOrTrailer,
+  SectionTabs,
+  Title,
+  type playButtonConfig,
+} from './components';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import MoreLikeThisContentList from './components/MoreLikeThisContentList ';
+import { EpisodeCard } from './components/EpisodeCard';
+
+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 } = useInternalTheme(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,
+          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_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]
+    );
+
+    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]
+    );
+
+    // Memoize show recommended condition
+    // const showRecommended = useMemo(
+    //   () => recommendedContent && recommendedContent?.content,
+    //   [recommendedContent]
+    // );
+
+    const [activeTab, setActiveTab] = useState<'more' | 'details'>('more');
+
+    // const playButtonConfig = useMemo(() => {
+    //   if (!content) return { title: 'Watch Now', mode: 'WATCH NOW' as const };
+
+    //   switch (content.content_offering_type) {
+    //     case 'BUY_OR_RENT':
+    //       return { title: 'Rent Now', mode: 'RENT NOW' as const };
+
+    //     case 'PREMIUM':
+    //       return { title: 'Subscribe', mode: 'SUBSCRIBE' as const };
+
+    //     default:
+    //       return { title: 'Watch Now', mode: 'WATCH NOW' as const };
+    //   }
+    // }, [content]);
+
+    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,
+              { flexGrow: 1 }, // 🔥 IMPORTANT
+            ]}
+          >
+            <HeroBanner
+              backgroundImage={content?.thumbnail}
+              title={content?.name}
+              theme={theme}
+              isLoading={isLoading}
+              onBackPress={events?.onBackPress}
+              titleImage={content?.title_image}
+            />
+            <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}
+            />
+
+            {/* <MiniInfo
+              content={content}
+              theme={theme}
+              isLoading={isLoading}
+              {...pricingAndExpiryInfo}
+            /> */}
+
+            <PlayOrTrailer
+              onPressPlay={handlePlayPress}
+              theme={theme}
+              isLoading={isLoading}
+              playButtonConfig={playButtonConfig}
+            />
+
+            <GenreTags
+              genres={content?.genres}
+              theme={appliedTheme}
+              isLoading={isLoading}
+              style={genreTagsStyles}
+            />
+            <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),
+  },
+});
+
+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/AboutSection.tsx

@@ -0,0 +1,216 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Tue 13 Jun 2026 at 02:28 PM
+ */
+
+import React, { useRef, useState, useCallback, useMemo } from 'react';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { Text } from '../../../Text';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+
+type Props = {
+  theme: ITheme;
+  title?: IContentData['name'];
+  description?: IContentData['description'];
+  release_year?: IContentData['release_year'];
+  isLoading?: boolean;
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    body?: StyleProp<TextStyle>;
+    scrollExpanded?: StyleProp<ViewStyle>;
+    toggleText?: StyleProp<TextStyle>;
+    skeletonLine?: StyleProp<ViewStyle>;
+    releaseYear?: StyleProp<ViewStyle>;
+  };
+};
+
+export const AboutSection = React.memo(
+  ({
+    theme,
+    title = 'About',
+    release_year,
+    description,
+    isLoading = false,
+    style,
+  }: Props) => {
+    const [expanded, setExpanded] = useState(false);
+    const scrollRef = useRef<ScrollView>(null);
+    const skeletonItems = useSkeletonItems(4);
+
+    const toggle = useCallback(() => {
+      if (expanded) {
+        scrollRef.current?.scrollTo({ y: 0, animated: false });
+      }
+      setExpanded((prev) => !prev);
+    }, [expanded]);
+
+    // Memoize show toggle condition
+    const showToggle = useMemo(
+      () => description && description.length > 150,
+      [description]
+    );
+
+    // Memoize container style
+    const containerStyle = useMemo(
+      () => [styles.container, style?.container],
+      [style?.container]
+    );
+
+    // Memoize title style
+    const titleStyleMemo = useMemo(
+      () => [styles.title, style?.title],
+      [style?.title]
+    );
+
+    // Memoize body style
+    const bodyStyleMemo = useMemo(
+      () => [styles.body, style?.body],
+      [style?.body]
+    );
+
+    // Memoize scroll expanded style
+    const scrollExpandedStyleMemo = useMemo(
+      () => [styles.scrollExpanded, style?.scrollExpanded],
+      [style?.scrollExpanded]
+    );
+
+    // Memoize release year style
+    const releaseYearStyleMemo = useMemo(
+      () => [styles.releaseYear, style?.releaseYear],
+      [style?.releaseYear]
+    );
+
+    // Memoize toggle text style
+    const toggleTextStyleMemo = useMemo(
+      () => [
+        styles.toggleText,
+        { color: theme.colors.primary },
+        style?.toggleText,
+      ],
+      [theme.colors.primary, style?.toggleText]
+    );
+
+    if (isLoading || !description) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+        >
+          <SkeletonPlaceholder.Item
+            paddingHorizontal={scale(12)}
+            marginTop={verticalScale(7)}
+          >
+            <SkeletonPlaceholder.Item
+              width={scale(70)}
+              height={scale(16)}
+              borderRadius={scale(4)}
+              marginBottom={scale(10)}
+              style={style?.skeletonLine}
+            />
+            {skeletonItems.map((_, idx) => (
+              <SkeletonPlaceholder.Item
+                key={idx}
+                width={idx === 3 ? '80%' : idx % 3 === 0 ? '95%' : '100%'}
+                height={scale(14)}
+                borderRadius={scale(4)}
+                marginBottom={scale(6)}
+                style={style?.skeletonLine}
+              />
+            ))}
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    return (
+      <View style={containerStyle}>
+        <Text color={theme.colors.primary} style={titleStyleMemo}>
+          {title}
+        </Text>
+
+        {/* Release Year */}
+        {release_year && (
+          <Text color={theme.colors.onSurface} style={releaseYearStyleMemo}>
+            Release:{' '}
+            <Text color={theme.colors.textPrimary}>{release_year}</Text>
+          </Text>
+        )}
+
+        {!expanded ? (
+          <Text
+            color={theme.colors.onSurface}
+            style={bodyStyleMemo}
+            numberOfLines={3}
+            ellipsizeMode="tail"
+          >
+            {description}
+          </Text>
+        ) : (
+          <ScrollView
+            style={scrollExpandedStyleMemo}
+            showsVerticalScrollIndicator
+            ref={scrollRef}
+            nestedScrollEnabled
+          >
+            <Text color={theme.colors.onSurface} style={bodyStyleMemo}>
+              {description}
+            </Text>
+          </ScrollView>
+        )}
+
+        {showToggle && (
+          <TouchableOpacity onPress={toggle}>
+            <Text style={toggleTextStyleMemo}>
+              {expanded ? 'See less' : 'See more'}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: scale(12),
+    marginTop: verticalScale(7),
+  },
+  title: {
+    fontSize: RFValue(13),
+    fontWeight: 'bold',
+    marginBottom: scale(6),
+  },
+  body: {
+    fontSize: RFValue(11),
+    lineHeight: scale(16),
+    textAlign: 'auto',
+  },
+  scrollExpanded: {
+    maxHeight: verticalScale(250),
+  },
+  releaseYear: {
+    fontSize: RFValue(12),
+    fontWeight: '500',
+    marginBottom: scale(6),
+    letterSpacing: 0.3,
+  },
+  toggleText: {
+    fontSize: RFValue(9.5),
+    fontWeight: '600',
+    marginTop: scale(4),
+  },
+});