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

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

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