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

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

@@ -0,0 +1,454 @@
+/**
+ * @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';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+// 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 {
+  season_id: string;
+  season_number: number;
+  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';
+}
+
+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,
+    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>
+            <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 = ({ 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}
+          season_number={selectedSeason.season_number}
+          onPress={onPress}
+          style={{ width: cardWidth }}
+          thumbnailHeight={thumbnailHeight}
+        />
+      ) : null,
+    [theme, selectedSeason, onPress, cardWidth, thumbnailHeight]
+  );
+
+  const renderLoadingItem = useCallback(
+    () => (
+      <EpisodeCardItem
+        theme={theme}
+        season_id=""
+        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
+        }}
+        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'
+  }
+});

package/src/components/ContentView/components/GenreTags.tsx

@@ -0,0 +1,93 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { Text } from '../../Text';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { IContentData } from '../../../types';
+import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type Props = {
+  genres?: IContentData['genres'];
+  theme: ITheme;
+  isLoading?: boolean;
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    tagContainer?: StyleProp<ViewStyle>;
+    tagText?: StyleProp<TextStyle>;
+    skeletonTag?: StyleProp<ViewStyle>;
+  };
+};
+
+export const GenreTags = ({ genres, theme, isLoading = false, style }: Props): React.ReactElement => {
+  if (isLoading || !genres?.length) {
+    return (
+      <SkeletonPlaceholder
+        backgroundColor={theme.colors.skeletonBaseColor}
+        highlightColor={theme.colors.skeletonHighlightColor}
+        borderRadius={scale(16)}
+      >
+        <View style={StyleSheet.flatten([styles.tagRow, style?.container])}>
+          {[1, 2, 3].map((_, idx) => (
+            <View key={idx} style={StyleSheet.flatten([styles.skeletonTag, style?.skeletonTag])} />
+          ))}
+        </View>
+      </SkeletonPlaceholder>
+    );
+  }
+
+  return (
+    <View style={StyleSheet.flatten([styles.tagRow, style?.container])}>
+      {genres.map((tag, idx) => (
+        <View
+          key={idx}
+          style={StyleSheet.flatten([
+            styles.tagContainer,
+            { backgroundColor: theme.colors.surfaceVariant, borderColor: theme.colors.border },
+            style?.tagContainer
+          ])}
+        >
+          <Text
+            style={StyleSheet.flatten([styles.tagText, { color: theme.colors.textPrimary }, style?.tagText])}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {tag?.name || String(tag)}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  tagRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: scale(4),
+    paddingHorizontal: scale(10),
+    marginVertical: verticalScale(6)
+  },
+  tagContainer: {
+    paddingHorizontal: scale(10),
+    paddingVertical: scale(4),
+    borderWidth: scale(0.5),
+    borderRadius: scale(14),
+    maxWidth: '100%',
+    alignSelf: 'flex-start'
+  },
+  tagText: {
+    fontSize: RFValue(9),
+    maxWidth: scale(110)
+  },
+  skeletonTag: {
+    width: scale(56),
+    height: scale(24),
+    borderRadius: scale(14)
+  }
+});