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

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

@@ -1,602 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Thu 03 Jul 2025 at 01:46 AM
- */
-
-import React, { useState, useMemo, useCallback, memo } from 'react';
-import {
-  View,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  type ListRenderItemInfo,
-} from 'react-native';
-import FastImage from 'react-native-fast-image';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { Text } from '../../../Text';
-import Display from '../../../../utils/Display';
-import type { ITheme, ThemeOverride } from '../../../../theme/themes';
-import { ThumbnailCard } from '../../../Content/Card/components/ThumbnailCard';
-import { RFValue } from 'react-native-responsive-fontsize';
-import RentOrBuyIcon from '../../../Content/Card/components/RentOrBuyIcon';
-import { useInternalTheme } from '../../../../theme/hook';
-import type {
-  IContentEpisodes,
-  IContentOfferingType,
-  IContentSeasons,
-} from '@zezosoft/zezo-ott-api-client';
-
-// Constants
-const SKELETON_COUNT = 3;
-const LOADING_EPISODES = 4;
-const THUMBNAIL_ASPECT_RATIO = 16 / 9;
-const CARD_ELEVATION = 2;
-const BORDER_WIDTH = scale(0.5);
-const TAB_PADDING_HORIZONTAL = scale(10);
-const TAB_PADDING_VERTICAL = verticalScale(6);
-const TAB_MARGIN_RIGHT = scale(6);
-const CONTAINER_PADDING_HORIZONTAL = scale(8);
-const CONTAINER_GAP = verticalScale(8);
-const TEXT_PADDING = scale(6);
-const TITLE_FONT_SIZE = RFValue(11);
-const SUBTITLE_FONT_SIZE = RFValue(9);
-const SUBTITLE_LINE_HEIGHT = RFValue(13);
-
-// Types
-interface IOnPressParams {
-  season_id: string;
-  episode_id: string;
-  episode_number: number;
-}
-
-interface EpisodeCardItemProps {
-  content_offering_type: IContentOfferingType;
-  season_id: string;
-  season_number: number;
-  episode: IContentEpisodes;
-  isDarkMode: boolean;
-  onPress: (e: IOnPressParams) => void;
-  theme: ITheme;
-  style?: React.ComponentProps<typeof TouchableOpacity>['style'];
-  thumbnailHeight: number;
-  isLoading?: boolean;
-}
-
-interface EpisodeCardProps {
-  seasons: IContentSeasons[];
-  onPress: (e: IOnPressParams) => void;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-  mode?: 'horizontal' | 'vertical';
-  content_offering_type: IContentOfferingType;
-}
-
-const formatDate = (dateString: string): string => {
-  const date = new Date(dateString);
-  return date.toLocaleDateString('en-US', {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric',
-  });
-};
-
-// Memoized EpisodeCardItem
-const EpisodeCardItem = memo(
-  ({
-    season_id,
-    season_number,
-    episode,
-    onPress,
-    isDarkMode,
-    theme,
-    style,
-    thumbnailHeight,
-    isLoading = false,
-    content_offering_type,
-  }: EpisodeCardItemProps) => {
-    const handlePress = useCallback(() => {
-      if (!isLoading) {
-        onPress?.({
-          season_id,
-          episode_id: episode._id,
-          episode_number: episode.number,
-        });
-      }
-    }, [season_id, episode._id, episode.number, onPress, isLoading]);
-
-    const isVerticalMode = useMemo(
-      () => style && (style as any).width === Display.fullWidth - scale(16),
-      [style]
-    );
-
-    const cardStyle = useMemo(
-      () => [
-        styles.card,
-        style,
-        {
-          shadowColor: isVerticalMode ? 'transparent' : '#000',
-          shadowOffset: { width: 0, height: isVerticalMode ? 0 : 1 },
-          shadowOpacity: isVerticalMode ? 0 : 0.1,
-          shadowRadius: isVerticalMode ? 0 : 2,
-          backgroundColor: isVerticalMode
-            ? 'transparent'
-            : theme.colors.surfaceVariant,
-          flexDirection: isVerticalMode
-            ? ('row' as const)
-            : ('column' as const),
-          borderWidth: isVerticalMode ? 0 : isDarkMode ? 0 : BORDER_WIDTH,
-          borderColor: isVerticalMode
-            ? 'transparent'
-            : isDarkMode
-              ? 'transparent'
-              : theme.colors.border,
-        },
-      ],
-      [
-        style,
-        isVerticalMode,
-        theme.colors.surfaceVariant,
-        theme.colors.border,
-        isDarkMode,
-      ]
-    );
-
-    const windowWidth = Display.fullWidth;
-
-    const thumbnailStyle = useMemo(
-      () => [
-        styles.thumbnailCommon,
-        isVerticalMode
-          ? {
-              borderRadius: moderateScale(6),
-              width: windowWidth * 0.45,
-              aspectRatio: THUMBNAIL_ASPECT_RATIO,
-              height: thumbnailHeight,
-            }
-          : { borderRadius: 0, height: thumbnailHeight },
-      ],
-      [isVerticalMode, thumbnailHeight, windowWidth]
-    );
-
-    if (isLoading) {
-      return (
-        <View style={cardStyle}>
-          <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
-          >
-            {isVerticalMode ? (
-              <SkeletonPlaceholder.Item
-                flexDirection="row"
-                alignItems="flex-start"
-                width="100%"
-              >
-                <SkeletonPlaceholder.Item
-                  width="45%"
-                  aspectRatio={THUMBNAIL_ASPECT_RATIO}
-                  borderRadius={moderateScale(6)}
-                />
-                <SkeletonPlaceholder.Item
-                  width="55%"
-                  paddingLeft={scale(6)}
-                  justifyContent="center"
-                  paddingTop={scale(2)}
-                >
-                  <SkeletonPlaceholder.Item
-                    width="80%"
-                    height={verticalScale(12)}
-                    borderRadius={moderateScale(4)}
-                  />
-                  {Array(4)
-                    .fill(0)
-                    .map((_, index) => (
-                      <SkeletonPlaceholder.Item
-                        key={`skeleton_${index}`}
-                        marginTop={verticalScale(5)}
-                        width={`${80 - index * 5}%`}
-                        height={verticalScale(8)}
-                        borderRadius={moderateScale(4)}
-                      />
-                    ))}
-                </SkeletonPlaceholder.Item>
-              </SkeletonPlaceholder.Item>
-            ) : (
-              <SkeletonPlaceholder.Item
-                width="100%"
-                height={thumbnailHeight + scale(40)}
-                borderRadius={moderateScale(8)}
-              />
-            )}
-          </SkeletonPlaceholder>
-        </View>
-      );
-    }
-
-    return (
-      <TouchableOpacity
-        activeOpacity={0.85}
-        onPress={handlePress}
-        style={cardStyle}
-        accessibilityRole="button"
-        accessibilityLabel={episode.name || `Episode ${episode.number}`}
-      >
-        <View style={[styles.cardContent, isVerticalMode && styles.cardGrid]}>
-          <View style={thumbnailStyle}>
-            <RentOrBuyIcon
-              theme={theme}
-              content_offering_type={
-                content_offering_type === 'BUY_OR_RENT'
-                  ? content_offering_type
-                  : episode.content_offering_type
-              }
-            />
-            <ThumbnailCard
-              thumbnailUri={episode.thumbnail}
-              theme={theme}
-              // wrapperStyle={styles.thumbnail}
-              resizeMode={FastImage.resizeMode.cover}
-            />
-          </View>
-          <View
-            style={[isVerticalMode ? styles.textRightHalf : styles.textWrapper]}
-          >
-            <Text
-              numberOfLines={1}
-              color={theme.colors.textPrimary}
-              style={styles.title}
-            >
-              {episode.name || `Episode ${episode.number}`}
-            </Text>
-            <Text
-              color={theme.colors.onSurface}
-              style={{ fontSize: RFValue(9), marginTop: verticalScale(2) }}
-            >
-              {`S${String(season_number).padStart(2, '0')} | E${String(episode.number).padStart(2, '0')} | `}
-              {episode.createdAt && formatDate(episode.createdAt)}
-            </Text>
-            {!!episode.description && (
-              <Text
-                numberOfLines={isVerticalMode ? 4 : 2}
-                color={theme.colors.textSecondary}
-                style={styles.subtitle}
-              >
-                {episode.description}
-              </Text>
-            )}
-          </View>
-        </View>
-      </TouchableOpacity>
-    );
-  },
-  (prevProps, nextProps) =>
-    prevProps.season_id === nextProps.season_id &&
-    prevProps.episode._id === nextProps.episode._id &&
-    prevProps.isLoading === nextProps.isLoading &&
-    prevProps.thumbnailHeight === nextProps.thumbnailHeight &&
-    prevProps.theme === nextProps.theme
-);
-
-// Main Component
-export const EpisodeCard = React.memo(
-  ({
-    seasons,
-    onPress,
-    theme: themeOverride,
-    isLoading = false,
-    mode = 'horizontal' as 'horizontal' | 'vertical',
-    content_offering_type,
-  }: EpisodeCardProps) => {
-    const { isDarkMode, theme } = useInternalTheme(themeOverride);
-    const [selectedSeasonIndex, setSelectedSeasonIndex] = useState(0);
-    const windowWidth = Display.fullWidth;
-
-    const selectedSeason = useMemo(
-      () => seasons[selectedSeasonIndex] || null,
-      [seasons, selectedSeasonIndex]
-    );
-
-    const cardWidth = useMemo(
-      () =>
-        mode === 'horizontal'
-          ? Math.min(windowWidth * 0.45, moderateScale(180))
-          : windowWidth - scale(16),
-      [windowWidth, mode]
-    );
-
-    const thumbnailHeight = useMemo(
-      () => (mode === 'vertical' ? verticalScale(100) : cardWidth * (9 / 16)),
-      [cardWidth, mode]
-    );
-
-    const renderSeasonTab = useCallback(
-      ({ item: season, index }: { item: IContentSeasons; index: number }) => (
-        <TouchableOpacity
-          key={season._id}
-          activeOpacity={0.7}
-          onPress={() => setSelectedSeasonIndex(index)}
-          style={[
-            styles.tab,
-            {
-              backgroundColor:
-                selectedSeasonIndex === index
-                  ? theme.colors.button
-                  : theme.colors.surfaceVariant,
-              borderColor: theme.colors.border,
-            },
-          ]}
-          accessibilityRole="tab"
-          accessibilityState={{ selected: selectedSeasonIndex === index }}
-          accessibilityLabel={season.name || `Season ${index + 1}`}
-        >
-          <Text
-            style={[
-              styles.tabText,
-              {
-                color:
-                  selectedSeasonIndex === index
-                    ? theme.colors.buttonText
-                    : theme.colors.textPrimary,
-              },
-            ]}
-          >
-            {season.name || `Season ${index + 1}`}
-          </Text>
-        </TouchableOpacity>
-      ),
-      [selectedSeasonIndex, theme]
-    );
-
-    const renderVerticalEpisodes = (
-      episodes: IContentEpisodes[],
-      season: IContentSeasons
-    ) => {
-      return episodes.map((item) => (
-        <EpisodeCardItem
-          key={item._id}
-          theme={theme}
-          season_id={season._id}
-          episode={item}
-          isDarkMode={isDarkMode}
-          season_number={season.season_number}
-          onPress={onPress}
-          style={{ width: cardWidth }}
-          thumbnailHeight={thumbnailHeight}
-          content_offering_type={content_offering_type}
-        />
-      ));
-    };
-
-    const renderEpisodeItem = useCallback(
-      ({ item }: ListRenderItemInfo<IContentEpisodes>) =>
-        selectedSeason ? (
-          <EpisodeCardItem
-            theme={theme}
-            season_id={selectedSeason._id}
-            episode={item}
-            isDarkMode={isDarkMode}
-            season_number={selectedSeason.season_number}
-            onPress={onPress}
-            style={{ width: cardWidth }}
-            thumbnailHeight={thumbnailHeight}
-            content_offering_type={content_offering_type}
-          />
-        ) : null,
-      [
-        selectedSeason,
-        theme,
-        isDarkMode,
-        onPress,
-        cardWidth,
-        thumbnailHeight,
-        content_offering_type,
-      ]
-    );
-
-    const renderLoadingItem = useCallback(
-      () => (
-        <EpisodeCardItem
-          theme={theme}
-          season_id=""
-          isDarkMode={isDarkMode}
-          season_number={0}
-          episode={{
-            _id: '',
-            number: 0,
-            thumbnail: '',
-            name: '',
-            description: '',
-            duration: 0,
-            source_link: '',
-            trailer_source_link: '',
-            subtitles: [],
-            createdAt: '',
-            updatedAt: '',
-            source_type: 'HLS',
-            content_offering_type: 'FREE',
-            status: true,
-            data: '',
-          }}
-          onPress={onPress}
-          style={{ width: cardWidth }}
-          thumbnailHeight={thumbnailHeight}
-          content_offering_type={content_offering_type}
-          isLoading
-        />
-      ),
-      [
-        theme,
-        isDarkMode,
-        onPress,
-        cardWidth,
-        thumbnailHeight,
-        content_offering_type,
-      ]
-    );
-
-    if (isLoading) {
-      return (
-        <View
-          style={[
-            styles.container,
-            { backgroundColor: theme.colors.background },
-          ]}
-        >
-          <FlatList
-            data={Array(SKELETON_COUNT).fill(0)}
-            keyExtractor={(_, index) => `skeleton_tab_${index}`}
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.tabsContainer}
-            renderItem={() => (
-              <SkeletonPlaceholder
-                backgroundColor={theme.colors.skeletonBaseColor}
-                highlightColor={theme.colors.skeletonHighlightColor}
-              >
-                <SkeletonPlaceholder.Item
-                  width={scale(80)}
-                  height={verticalScale(28)}
-                  borderRadius={moderateScale(16)}
-                  marginRight={TAB_MARGIN_RIGHT}
-                />
-              </SkeletonPlaceholder>
-            )}
-          />
-          <FlatList
-            data={Array(LOADING_EPISODES).fill({})}
-            keyExtractor={(_, index) => `loading_${index}`}
-            horizontal={mode === 'horizontal'}
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.listContainer}
-            renderItem={renderLoadingItem}
-          />
-        </View>
-      );
-    }
-
-    if (!seasons?.length || !selectedSeason) {
-      return (
-        <View style={styles.emptyContainer}>
-          <Text color={theme.colors.textSecondary}>No seasons available</Text>
-        </View>
-      );
-    }
-
-    return (
-      <View
-        style={[styles.container, { backgroundColor: theme.colors.background }]}
-      >
-        <FlatList
-          data={seasons}
-          renderItem={renderSeasonTab}
-          keyExtractor={(item) => item._id}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.tabsContainer}
-        />
-        {/* Episodes */}
-        {mode === 'horizontal' ? (
-          <FlatList
-            data={selectedSeason.episodes || []}
-            keyExtractor={(item) => item._id}
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.listContainer}
-            renderItem={renderEpisodeItem}
-            ListEmptyComponent={
-              <View style={styles.emptyContainer}>
-                <Text color={theme.colors.textSecondary}>
-                  No episodes available
-                </Text>
-              </View>
-            }
-          />
-        ) : (
-          <View style={styles.listContainer}>
-            {selectedSeason.episodes?.length ? (
-              renderVerticalEpisodes(selectedSeason.episodes, selectedSeason)
-            ) : (
-              <View style={styles.emptyContainer}>
-                <Text color={theme.colors.textSecondary}>
-                  No episodes available
-                </Text>
-              </View>
-            )}
-          </View>
-        )}
-      </View>
-    );
-  }
-);
-
-// Styles
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: verticalScale(4),
-    flexDirection: 'column',
-    gap: CONTAINER_GAP,
-  },
-  tabsContainer: {
-    paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
-  },
-  tab: {
-    paddingHorizontal: TAB_PADDING_HORIZONTAL,
-    paddingVertical: TAB_PADDING_VERTICAL,
-    borderRadius: moderateScale(16),
-    marginRight: TAB_MARGIN_RIGHT,
-    borderWidth: BORDER_WIDTH,
-  },
-  tabText: {
-    fontSize: TITLE_FONT_SIZE,
-    fontWeight: '600',
-  },
-  listContainer: {
-    paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
-    gap: CONTAINER_GAP,
-  },
-  card: {
-    borderRadius: moderateScale(8),
-    overflow: 'hidden',
-    elevation: CARD_ELEVATION,
-  },
-  cardContent: {
-    flexDirection: 'column',
-    width: '100%',
-  },
-  cardGrid: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  thumbnailCommon: {
-    overflow: 'hidden',
-    backgroundColor: '#ccc',
-    width: '100%',
-  },
-  thumbnail: {
-    width: '100%',
-    height: '100%',
-  },
-  textWrapper: {
-    padding: TEXT_PADDING,
-  },
-  textRightHalf: {
-    flex: 1,
-    width: '55%',
-    paddingHorizontal: TEXT_PADDING,
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: TITLE_FONT_SIZE,
-    fontWeight: '600',
-  },
-  subtitle: {
-    fontSize: SUBTITLE_FONT_SIZE,
-    lineHeight: SUBTITLE_LINE_HEIGHT,
-    opacity: 0.8,
-    marginTop: verticalScale(2),
-  },
-  emptyContainer: {
-    padding: CONTAINER_PADDING_HORIZONTAL,
-    alignItems: 'center',
-  },
-});