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

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

@@ -1,536 +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 } 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,
-  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 {
-  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';
-}
-
-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,
-  }: 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={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',
-  }: 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 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=""
-          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 (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

@@ -1,132 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 01 Jul 2025 at 02:28 PM
- */
-
-import React, { useMemo } from 'react';
-import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
-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 { ITheme } from '../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-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 = React.memo(
-  ({ genres, theme, isLoading = false, style }: Props): React.ReactElement => {
-    // Memoize skeleton array
-    const skeletonItems = useSkeletonItems(3, (i) => i + 1);
-
-    // Memoize tag container base style
-    const tagContainerBaseStyle = useMemo(
-      () => ({
-        backgroundColor: theme.colors.surfaceVariant,
-        borderColor: theme.colors.border,
-      }),
-      [theme.colors.surfaceVariant, theme.colors.border]
-    );
-
-    // Memoize tag text style
-    const tagTextStyle = useMemo(
-      () => [
-        styles.tagText,
-        { color: theme.colors.textPrimary },
-        style?.tagText,
-      ],
-      [theme.colors.textPrimary, style?.tagText]
-    );
-
-    // Memoize container style
-    const containerStyleMemo = useMemo(
-      () => StyleSheet.flatten([styles.tagRow, style?.container]),
-      [style?.container]
-    );
-
-    if (isLoading || !genres?.length) {
-      return (
-        <SkeletonPlaceholder
-          backgroundColor={theme.colors.skeletonBaseColor}
-          highlightColor={theme.colors.skeletonHighlightColor}
-          borderRadius={scale(16)}
-        >
-          <View style={containerStyleMemo}>
-            {skeletonItems.map((_, idx) => (
-              <View
-                key={idx}
-                style={StyleSheet.flatten([
-                  styles.skeletonTag,
-                  style?.skeletonTag,
-                ])}
-              />
-            ))}
-          </View>
-        </SkeletonPlaceholder>
-      );
-    }
-
-    return (
-      <View style={containerStyleMemo}>
-        {genres.map((tag, idx) => (
-          <View
-            key={idx}
-            style={StyleSheet.flatten([
-              styles.tagContainer,
-              tagContainerBaseStyle,
-              style?.tagContainer,
-            ])}
-          >
-            <Text style={tagTextStyle} 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),
-  },
-});