@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.0

package/src/components/ContentView/components/CastCard.tsx

@@ -0,0 +1,212 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 09:58 PM
+ */
+import React, { useCallback } from 'react';
+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 type { IContentCast } from '../../../types';
+
+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(80);
+const PLACEHOLDER_COUNT = 6;
+
+export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onItemPress, style = {} }: Props) => {
+  const placeholderData: IContentCast[] = Array.from({ length: PLACEHOLDER_COUNT }).map((_, idx) => ({
+    _id: `skeleton-${idx}`,
+    name: '',
+    avatar: '',
+    castType: ''
+  }));
+
+  const listData = 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: scale(16),
+    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: scale(11),
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  role: {
+    fontSize: scale(11),
+    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'
+  }
+});

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

@@ -0,0 +1,428 @@
+/**
+ * @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 } 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 { IContentEpisodes, IContentSeasons } from '../../../types';
+import type { ITheme } from '../../../theme/themes';
+import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
+
+// 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 = scale(12);
+const SUBTITLE_FONT_SIZE = scale(10);
+const SUBTITLE_LINE_HEIGHT = scale(14);
+
+// Types
+interface IOnPressParams {
+  season_id: string;
+  episode_id: string;
+  episode_number: number;
+}
+
+interface EpisodeCardItemProps {
+  season_id: string;
+  episode: IContentEpisodes;
+  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: ITheme;
+  isLoading?: boolean;
+  mode?: 'horizontal' | 'vertical';
+}
+
+// Memoized EpisodeCardItem
+const EpisodeCardItem = memo(
+  ({ season_id, episode, onPress, theme, style, thumbnailHeight, isLoading = false }: 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 : theme.dark ? 0 : BORDER_WIDTH,
+          borderColor: isVerticalMode ? 'transparent' : theme.dark ? 'transparent' : theme.colors.border
+        }
+      ],
+      [style, isVerticalMode, theme]
+    );
+
+    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}>
+            <FastImage
+              source={{ uri: episode.thumbnail, priority: FastImage.priority.high }}
+              style={styles.thumbnail}
+              resizeMode={FastImage.resizeMode.cover}
+              fallback
+            />
+            <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>
+            {!!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 = ({ seasons, onPress, theme, isLoading = false, mode = 'horizontal' }: EpisodeCardProps) => {
+  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 renderEpisodeItem = useCallback(
+    ({ item }: { item: IContentEpisodes }) =>
+      selectedSeason ? (
+        <EpisodeCardItem
+          theme={theme}
+          season_id={selectedSeason._id}
+          episode={item}
+          onPress={onPress}
+          style={{ width: cardWidth }}
+          thumbnailHeight={thumbnailHeight}
+        />
+      ) : null,
+    [theme, selectedSeason, onPress, cardWidth, thumbnailHeight]
+  );
+
+  const renderLoadingItem = useCallback(
+    () => (
+      <EpisodeCardItem
+        theme={theme}
+        season_id=""
+        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
+        }}
+        onPress={onPress}
+        style={{ width: cardWidth }}
+        thumbnailHeight={thumbnailHeight}
+        isLoading
+      />
+    ),
+    [theme, onPress, cardWidth, thumbnailHeight]
+  );
+
+  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}
+      />
+      <FlatList
+        data={selectedSeason.episodes || []}
+        keyExtractor={(item) => item._id}
+        horizontal={mode === 'horizontal'}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.listContainer}
+        renderItem={renderEpisodeItem}
+        ListEmptyComponent={
+          <View style={styles.emptyContainer}>
+            <Text color={theme.colors.textSecondary}>No episodes available</Text>
+          </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%',
+    paddingVertical: verticalScale(2),
+    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'
+  }
+});