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

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

@@ -1,251 +0,0 @@
-/**
- * @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

@@ -1,266 +0,0 @@
-/**
- * @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',
-  },
-});