@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

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

@@ -2,7 +2,8 @@
  * @author Naresh Dhamu
  * @lastModified Wed 02 Jul 2025 at 09:58 PM
  */
-import { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
 import {
   View,
   StyleSheet,
@@ -46,157 +47,166 @@ type Props = {
 const IMAGE_SIZE = scale(70);
 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: '',
-    type: 'actor',
-  }));
+export const CastCard = React.memo(
+  ({
+    theme,
+    data,
+    isLoading = false,
+    heading = 'Cast',
+    onItemPress,
+    style = {},
+  }: Props) => {
+    const placeholderData = useSkeletonItems<IContentCast>(
+      PLACEHOLDER_COUNT,
+      (idx) => ({
+        _id: `skeleton-${idx}`,
+        name: '',
+        avatar: '',
+        castType: '',
+        type: 'actor',
+      })
+    );
 
-  const listData = isLoading ? placeholderData : (data ?? []);
+    const listData = useMemo(
+      () => (isLoading ? placeholderData : (data ?? [])),
+      [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>
-        );
-      }
+    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,
-            ]}
+        return (
+          <TouchableOpacity
+            style={[styles.card, style.card]}
+            activeOpacity={0.9}
+            onPress={() => onItemPress?.(item)}
           >
-            {item.name}
-          </Text>
-          {!!item.castType && (
+            <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.role,
-                { color: theme.colors.textSecondary },
-                style.role,
+                styles.name,
+                { color: theme.colors.textPrimary },
+                style.name,
               ]}
             >
-              as {item.castType}
+              {item.name}
             </Text>
-          )}
-        </TouchableOpacity>
-      );
-    },
-    [isLoading, onItemPress, style, theme.colors]
-  );
+            {!!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;
+    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,
-            ]}
+    return (
+      <View style={[styles.container, style.container]}>
+        {isLoading ? (
+          <SkeletonPlaceholder
+            backgroundColor={theme.colors.skeletonBaseColor}
+            highlightColor={theme.colors.skeletonHighlightColor}
           >
-            {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>
-  );
-};
+            <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: {

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

@@ -264,198 +264,203 @@ const EpisodeCardItem = memo(
 );
 
 // Main Component
-export const EpisodeCard = ({
-  seasons,
-  onPress,
-  theme: themeOverride,
-  isLoading = false,
-  mode = 'horizontal',
-}: EpisodeCardProps) => {
-  const { isDarkMode, theme } = useInternalTheme(themeOverride);
-  const [selectedSeasonIndex, setSelectedSeasonIndex] = useState(0);
-  const windowWidth = Display.fullWidth;
+export const EpisodeCard = React.memo(
+  ({
+    seasons,
+    onPress,
+    theme: themeOverride,
+    isLoading = false,
+    mode = 'horizontal',
+  }: EpisodeCardProps) => {
+    const { isDarkMode, theme } = useInternalTheme(themeOverride);
+    const [selectedSeasonIndex, setSelectedSeasonIndex] = useState(0);
+    const windowWidth = Display.fullWidth;
 
-  const selectedSeason = useMemo(
-    () => seasons[selectedSeasonIndex] || null,
-    [seasons, selectedSeasonIndex]
-  );
+    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 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 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
+    const renderSeasonTab = useCallback(
+      ({ item: season, index }: { item: IContentSeasons; index: number }) => (
+        <TouchableOpacity
+          key={season._id}
+          activeOpacity={0.7}
+          onPress={() => setSelectedSeasonIndex(index)}
           style={[
-            styles.tabText,
+            styles.tab,
             {
-              color:
+              backgroundColor:
                 selectedSeasonIndex === index
-                  ? theme.colors.buttonText
-                  : theme.colors.textPrimary,
+                  ? theme.colors.button
+                  : theme.colors.surfaceVariant,
+              borderColor: theme.colors.border,
             },
           ]}
+          accessibilityRole="tab"
+          accessibilityState={{ selected: selectedSeasonIndex === index }}
+          accessibilityLabel={season.name || `Season ${index + 1}`}
         >
-          {season.name || `Season ${index + 1}`}
-        </Text>
-      </TouchableOpacity>
-    ),
-    [selectedSeasonIndex, theme]
-  );
+          <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 ? (
+    const renderEpisodeItem = useCallback(
+      ({ item }: { item: 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}
+          />
+        ) : null,
+      [selectedSeason, theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
+    );
+
+    const renderLoadingItem = useCallback(
+      () => (
         <EpisodeCardItem
           theme={theme}
-          season_id={selectedSeason._id}
-          episode={item}
+          season_id=""
           isDarkMode={isDarkMode}
-          season_number={selectedSeason.season_number}
+          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}
+          isLoading
         />
-      ) : null,
-    [selectedSeason, theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
-  );
+      ),
+      [theme, isDarkMode, 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>
+      );
+    }
 
-  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}
-        isLoading
-      />
-    ),
-    [theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
-  );
+    if (!seasons?.length || !selectedSeason) {
+      return (
+        <View style={styles.emptyContainer}>
+          <Text color={theme.colors.textSecondary}>No seasons available</Text>
+        </View>
+      );
+    }
 
-  if (isLoading) {
     return (
       <View
         style={[styles.container, { backgroundColor: theme.colors.background }]}
       >
         <FlatList
-          data={Array(SKELETON_COUNT).fill(0)}
-          keyExtractor={(_, index) => `skeleton_tab_${index}`}
+          data={seasons}
+          renderItem={renderSeasonTab}
+          keyExtractor={(item) => item._id}
           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}`}
+          data={selectedSeason.episodes || []}
+          keyExtractor={(item) => item._id}
           horizontal={mode === 'horizontal'}
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.listContainer}
-          renderItem={renderLoadingItem}
+          renderItem={renderEpisodeItem}
+          ListEmptyComponent={
+            <View style={styles.emptyContainer}>
+              <Text color={theme.colors.textSecondary}>
+                No episodes available
+              </Text>
+            </View>
+          }
         />
       </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({