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

package/src/components/ContentView/One/ContentViewOne.tsx

@@ -0,0 +1,251 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo, useCallback } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { HeroBanner } from './components/HeroBanner';
+import { GenreTags } from '../shared/GenreTags';
+import { AboutSection } from '../shared/AboutSection';
+import { Title } from './components/Title';
+import { useTheme } from '../../../theme';
+import { CastCard } from './components/CastCard';
+import Cards from '../../Content/Card';
+import { scale } from 'react-native-size-matters';
+import { EpisodeCard } from '../shared/EpisodeCard';
+import type { ComponentProps } from '../../../types/content/content-view.types';
+import { NotFoundFallback } from '../../Fallbacks';
+import { MiniInfo } from './components/MiniInfo';
+
+export const ContentViewOne = React.memo(
+  ({
+    content,
+    seasons,
+    isLoading = false,
+    seasonsIsLoading = false,
+    theme,
+    text,
+    recommendedContent,
+    events,
+    heroBannerProps,
+    titleStyles,
+    genreTagsStyles,
+    aboutSectionStyles,
+    castStyles,
+    recommendedContentCardStyles,
+    history,
+    episodeCardMode,
+    pricingAndExpiryInfo,
+  }: Omit<ComponentProps, 'isLiked'>) => {
+    const { theme: appliedTheme } = useTheme(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,
+          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]
+    );
+
+    // Memoize episode press handler
+    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]
+    );
+
+    // 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}
+            bounces={false}
+          >
+            <HeroBanner
+              backgroundImage={content?.thumbnail}
+              title={content?.name}
+              theme={theme}
+              isLoading={isLoading}
+              content_offering_type={content?.content_offering_type}
+              contentType={content?.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}
+              layoutMode="badge"
+            />
+            <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 ContentViewOne {
+  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/One/components/CastCard.tsx

@@ -0,0 +1,266 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type ListRenderItem,
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import FastImage, { type ImageStyle } from 'react-native-fast-image';
+import { scale } from 'react-native-size-matters';
+import { Text } from '../../../Text';
+import type { ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentCast } from '@zezosoft/zezo-ott-api-client';
+
+type StyleProps = {
+  container?: StyleProp<ViewStyle>;
+  heading?: StyleProp<TextStyle>;
+  listContent?: StyleProp<ViewStyle>;
+  card?: StyleProp<ViewStyle>;
+  image?: StyleProp<ImageStyle>;
+  name?: StyleProp<TextStyle>;
+  role?: StyleProp<TextStyle>;
+  imageSkeleton?: StyleProp<ViewStyle>;
+  nameSkeleton?: StyleProp<ViewStyle>;
+  roleSkeleton?: StyleProp<ViewStyle>;
+};
+
+type Props = {
+  theme: ITheme;
+  data: IContentCast[] | null;
+  isLoading?: boolean;
+  heading?: string;
+  onItemPress?: (cast: IContentCast) => void;
+  style?: StyleProps;
+};
+
+const IMAGE_SIZE = scale(70);
+const PLACEHOLDER_COUNT = 6;
+
+export const CastCard = React.memo(
+  ({
+    theme,
+    data,
+    isLoading = false,
+    heading = 'Cast',
+    onItemPress,
+    style = {},
+  }: Props) => {
+    const placeholderData = useSkeletonItems<IContentCast>(
+      PLACEHOLDER_COUNT,
+      (idx) => ({
+        _id: `skeleton-${idx}`,
+        name: '',
+        avatar: '',
+        castType: '',
+        type: 'actor',
+      })
+    );
+
+    const listData = useMemo(
+      () => (isLoading ? placeholderData : (data ?? [])),
+      [isLoading, placeholderData, data]
+    );
+
+    const renderItem: ListRenderItem<IContentCast> = useCallback(
+      ({ item }) => {
+        if (isLoading) {
+          return (
+            <View style={[styles.card, style.card]}>
+              <View style={[styles.imageSkeleton, style.imageSkeleton]} />
+              <View style={[styles.nameSkeleton, style.nameSkeleton]} />
+              <View style={[styles.roleSkeleton, style.roleSkeleton]} />
+            </View>
+          );
+        }
+
+        return (
+          <TouchableOpacity
+            style={[styles.card, style.card]}
+            activeOpacity={0.9}
+            onPress={() => onItemPress?.(item)}
+          >
+            <FastImage
+              source={{ uri: String(item.avatar) }}
+              style={[
+                styles.image,
+                { backgroundColor: theme.colors.skeletonBaseColor },
+                style.image,
+              ]}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[
+                styles.name,
+                { color: theme.colors.textPrimary },
+                style.name,
+              ]}
+            >
+              {item.name}
+            </Text>
+            {!!item.castType && (
+              <Text
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={[
+                  styles.role,
+                  { color: theme.colors.textSecondary },
+                  style.role,
+                ]}
+              >
+                as {item.castType}
+              </Text>
+            )}
+          </TouchableOpacity>
+        );
+      },
+      [isLoading, onItemPress, style, theme.colors]
+    );
+
+    if (!listData.length) return null;
+
+    return (
+      <View style={[styles.container, style.container]}>
+        {isLoading ? (
+          <SkeletonPlaceholder
+            backgroundColor={theme.colors.skeletonBaseColor}
+            highlightColor={theme.colors.skeletonHighlightColor}
+          >
+            <SkeletonPlaceholder.Item
+              width={scale(70)}
+              height={scale(16)}
+              borderRadius={scale(4)}
+              marginBottom={scale(8)}
+              marginLeft={scale(12)}
+            />
+            <SkeletonPlaceholder.Item
+              flexDirection="row"
+              paddingLeft={scale(12)}
+            >
+              {placeholderData.map((_, idx) => (
+                <SkeletonPlaceholder.Item
+                  key={idx}
+                  alignItems="center"
+                  marginRight={scale(10)}
+                >
+                  <SkeletonPlaceholder.Item
+                    width={IMAGE_SIZE}
+                    height={IMAGE_SIZE}
+                    borderRadius={IMAGE_SIZE / 2}
+                    marginBottom={scale(6)}
+                  />
+                  <SkeletonPlaceholder.Item
+                    width={scale(60)}
+                    height={scale(12)}
+                    borderRadius={scale(4)}
+                    marginBottom={scale(4)}
+                  />
+                  <SkeletonPlaceholder.Item
+                    width={scale(50)}
+                    height={scale(10)}
+                    borderRadius={scale(4)}
+                  />
+                </SkeletonPlaceholder.Item>
+              ))}
+            </SkeletonPlaceholder.Item>
+          </SkeletonPlaceholder>
+        ) : (
+          <>
+            <Text
+              style={[
+                styles.heading,
+                { color: theme.colors.primary },
+                style.heading,
+              ]}
+            >
+              {heading}
+            </Text>
+            <FlatList
+              horizontal
+              data={listData}
+              keyExtractor={(item) => item._id.toString()}
+              renderItem={renderItem}
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={[styles.listContent, style.listContent]}
+              initialNumToRender={6}
+              getItemLayout={(_, index) => ({
+                length: IMAGE_SIZE + scale(10),
+                offset: (IMAGE_SIZE + scale(10)) * index,
+                index,
+              })}
+            />
+          </>
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: scale(10),
+  },
+  heading: {
+    fontSize: RFValue(13),
+    fontWeight: 'bold',
+    marginBottom: scale(8),
+    paddingHorizontal: scale(12),
+  },
+  listContent: {
+    paddingHorizontal: scale(12),
+  },
+  card: {
+    width: IMAGE_SIZE,
+    marginRight: scale(10),
+    alignItems: 'center',
+  },
+  image: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: IMAGE_SIZE / 2,
+    marginBottom: scale(6),
+  },
+  name: {
+    fontSize: RFValue(9),
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  role: {
+    fontSize: RFValue(9),
+    textAlign: 'center',
+    marginTop: scale(2),
+  },
+  imageSkeleton: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: IMAGE_SIZE / 2,
+    backgroundColor: '#ddd',
+    marginBottom: scale(6),
+  },
+  nameSkeleton: {
+    width: scale(60),
+    height: scale(12),
+    borderRadius: scale(4),
+    backgroundColor: '#ddd',
+    marginBottom: scale(4),
+  },
+  roleSkeleton: {
+    width: scale(50),
+    height: scale(10),
+    borderRadius: scale(4),
+    backgroundColor: '#ddd',
+  },
+});