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

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

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

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