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

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

@@ -1,56 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 02 Jul 2025 at 03:38 PM
- * */
-
-import React, { useMemo } from 'react';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  type GestureResponderEvent,
-} from 'react-native';
-import { PlayCircleIcon } from 'lucide-react-native';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { useSafePressHandler } from '../../../../hooks/useSafeCallback';
-
-interface Props {
-  onPress?: (event: GestureResponderEvent) => void;
-  size?: number;
-  color?: string;
-  backgroundColor?: string;
-}
-
-export const PlayButton = React.memo(
-  ({
-    onPress,
-    size = scale(40),
-    color = 'black',
-    backgroundColor = '#FFD700',
-  }: Props) => {
-    const buttonStyle = useMemo(
-      () => [styles.button, { backgroundColor, borderRadius: size }],
-      [backgroundColor, size]
-    );
-
-    const handlePress = useSafePressHandler(onPress);
-
-    return (
-      <TouchableOpacity
-        activeOpacity={0.8}
-        onPress={handlePress}
-        style={buttonStyle}
-      >
-        <PlayCircleIcon size={size} color={color} />
-      </TouchableOpacity>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  button: {
-    padding: moderateScale(6),
-    marginBottom: verticalScale(10),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

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

@@ -1,149 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 01 Jul 2025 at 02:28 PM
- */
-
-import React, { useMemo } from 'react';
-import {
-  View,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-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 { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-type Props = {
-  title: IContentData['name'];
-  subtitle: string;
-  rating: IContentData['rating'];
-  theme: ITheme;
-  isLoading?: boolean;
-  style?: {
-    container?: StyleProp<ViewStyle>;
-    title?: StyleProp<TextStyle>;
-    subTitle?: StyleProp<TextStyle>;
-    rating?: StyleProp<TextStyle>;
-  };
-};
-
-export const Title = React.memo(
-  ({
-    title,
-    subtitle,
-    rating,
-    theme,
-    isLoading = false,
-    style,
-  }: Props): React.ReactElement => {
-    const containerStyle = useMemo(
-      () => StyleSheet.flatten([styles.container, style?.container]),
-      [style?.container]
-    );
-
-    const titleStyle = useMemo(
-      () => StyleSheet.flatten([styles.title, style?.title]),
-      [style?.title]
-    );
-
-    const subTitleStyle = useMemo(
-      () => StyleSheet.flatten([styles.subTitle, style?.subTitle]),
-      [style?.subTitle]
-    );
-
-    const ratingStyle = useMemo(
-      () => StyleSheet.flatten([styles.rating, style?.rating]),
-      [style?.rating]
-    );
-
-    if (isLoading) {
-      return (
-        <View style={containerStyle}>
-          <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
-          >
-            <SkeletonPlaceholder.Item>
-              {/* Title & Subtitle */}
-              <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
-                <SkeletonPlaceholder.Item
-                  width={scale(160)}
-                  height={scale(22)}
-                  borderRadius={scale(4)}
-                />
-                <SkeletonPlaceholder.Item
-                  width={scale(60)}
-                  height={scale(22)}
-                  borderRadius={scale(4)}
-                  marginLeft={scale(6)}
-                />
-              </SkeletonPlaceholder.Item>
-
-              {/* Rating */}
-              <SkeletonPlaceholder.Item
-                width={scale(36)}
-                height={scale(16)}
-                borderRadius={scale(4)}
-                marginTop={scale(6)}
-              />
-            </SkeletonPlaceholder.Item>
-          </SkeletonPlaceholder>
-        </View>
-      );
-    }
-
-    return (
-      <View style={containerStyle}>
-        <View>
-          <Text
-            color={theme.colors.textPrimary}
-            style={titleStyle}
-            ellipsizeMode="tail"
-          >
-            {title}
-            {!!subtitle && (
-              <Text
-                color={theme.colors.textSecondary}
-                style={subTitleStyle}
-                ellipsizeMode="tail"
-              >
-                {' '}
-                {`: ${subtitle}`}
-              </Text>
-            )}
-          </Text>
-        </View>
-
-        {!!rating && (
-          <Text color={theme.colors.textSecondary} style={ratingStyle}>
-            ⭐ {rating}
-          </Text>
-        )}
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: scale(12),
-    marginTop: scale(5),
-  },
-  title: {
-    fontSize: RFValue(15),
-    fontWeight: 'bold',
-  },
-  subTitle: {
-    fontSize: RFValue(15),
-    marginLeft: scale(6),
-  },
-  rating: {
-    fontSize: RFValue(12),
-    marginTop: scale(4),
-  },
-});

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

@@ -1,76 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 02 Jul 2025 at 03:39 PM
- */
-
-import React, { useMemo } from 'react';
-import { PlayCircle } from 'lucide-react-native';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  type GestureResponderEvent,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { Text } from '../../../Text';
-import { useSafePressHandler } from '../../../../hooks/useSafeCallback';
-
-interface Props {
-  onPress?: (event: GestureResponderEvent) => void;
-  label?: string;
-  iconSize?: number;
-  color?: string;
-  backgroundColor?: string;
-  textStyle?: TextStyle;
-  style?: ViewStyle;
-}
-
-export const TrailerButton = React.memo(
-  ({
-    onPress,
-    label = 'Watch Trailer',
-    iconSize = scale(18),
-    color = '#000',
-    backgroundColor = '#FFD700',
-    textStyle,
-    style,
-  }: Props) => {
-    const buttonStyle = useMemo(
-      () => [styles.button, { backgroundColor }, style],
-      [backgroundColor, style]
-    );
-
-    const textStyleMemo = useMemo(() => [styles.text, textStyle], [textStyle]);
-
-    const handlePress = useSafePressHandler(onPress);
-
-    return (
-      <TouchableOpacity
-        onPress={handlePress}
-        activeOpacity={0.8}
-        style={buttonStyle}
-      >
-        <PlayCircle size={iconSize} color={color} />
-        <Text style={textStyleMemo} color={color}>
-          {label}
-        </Text>
-      </TouchableOpacity>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    paddingVertical: verticalScale(3),
-    paddingHorizontal: scale(6),
-    borderRadius: moderateScale(20),
-    alignItems: 'center',
-  },
-  text: {
-    fontWeight: '600',
-    fontSize: scale(12),
-    marginLeft: scale(2),
-  },
-});

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

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