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

package/src/components/ContentView/MoreContentList.tsx

@@ -0,0 +1,238 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+import React, { useCallback, useRef } from 'react';
+import { FlatList, StyleSheet, TouchableOpacity, ActivityIndicator, type FlatListProps } from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import Display from '../../utils/Display';
+import type { IContentData } from '../../types';
+import { Text } from '../Text';
+import { View } from '../View';
+import AppHeader, { type AppHeaderProps } from '../Headers/AppHeader';
+import { RFValue } from 'react-native-responsive-fontsize';
+import CardPoster from '../Content/Card/components/CardPoster';
+import type { AppTheme } from '../../theme/themes';
+import { useTheme } from '../../theme';
+import Animated from 'react-native-reanimated';
+import { Search } from 'lucide-react-native';
+
+interface Props {
+  headerProps?: AppHeaderProps;
+  contentList: IContentData[];
+  onItemPress?: (item: IContentData) => void;
+  isLoading?: boolean;
+  error?: boolean | string | Error;
+  errorText?: string;
+  theme?: AppTheme;
+  moreDataIsLoading?: boolean;
+  onEndReached?: () => void;
+  skeletonCount?: number;
+  numColumns?: number;
+  footerComponent?: React.ReactNode;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+}
+
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList as React.ComponentType<FlatListProps<IContentData>>);
+
+const MoreContentList: React.FC<Props> = ({
+  headerProps,
+  contentList = [],
+  onItemPress,
+  isLoading = false,
+  error = false,
+  errorText = 'Something went wrong!',
+  theme,
+  moreDataIsLoading = false,
+  onEndReached,
+  skeletonCount = 12,
+  numColumns = 3,
+  footerComponent,
+  refreshing = false,
+  onRefresh
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const isEmpty = !isLoading && (!contentList || contentList.length === 0);
+
+  const getErrorMessage = () => {
+    if (typeof error === 'string') return error;
+    if (error instanceof Error) return error.message;
+    return errorText;
+  };
+
+  const keyExtractor = useCallback((item: IContentData, index: number) => {
+    return item._id?.toString() || index.toString();
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item }: { item: IContentData }) => (
+      <View style={styles.cardWrapper}>
+        <TouchableOpacity onPress={() => onItemPress?.(item)} activeOpacity={0.7}>
+          <CardPoster
+            posterUri={item.poster}
+            borderRadius={5}
+            isLoading={false}
+            theme={appliedTheme}
+            imageStyle={styles.itemContainer}
+          />
+        </TouchableOpacity>
+      </View>
+    ),
+    [onItemPress, appliedTheme]
+  );
+
+  const renderSkeletonItem = useCallback(
+    ({ index }: { index: number }) => (
+      <View style={styles.cardWrapper} key={`skeleton-${index}`}>
+        <CardPoster
+          posterUri=""
+          borderRadius={5}
+          isLoading={true}
+          theme={appliedTheme}
+          imageStyle={styles.itemContainer}
+        />
+      </View>
+    ),
+    [appliedTheme]
+  );
+
+  const renderFooter = () => {
+    if (footerComponent) return footerComponent;
+
+    return moreDataIsLoading ? (
+      <View style={styles.footerLoading}>
+        <ActivityIndicator size="small" />
+      </View>
+    ) : null;
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <FlatList
+          data={Array.from({ length: skeletonCount })}
+          numColumns={numColumns}
+          keyExtractor={(_, index) => `skeleton-${index}`}
+          renderItem={renderSkeletonItem}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={[
+            styles.listContent,
+            {
+              minHeight: Display.fullHeight - verticalScale(100)
+            }
+          ]}
+        />
+      );
+    }
+
+    if (error) {
+      return (
+        <View style={styles.centered}>
+          <Text style={styles.errorText}>{getErrorMessage()}</Text>
+        </View>
+      );
+    }
+
+    if (isEmpty) {
+      return (
+        <View style={styles.centered}>
+          <Text style={styles.emptyText}>No content found</Text>
+        </View>
+      );
+    }
+
+    return (
+      <AnimatedFlatList
+        data={contentList}
+        numColumns={numColumns}
+        showsVerticalScrollIndicator={false}
+        removeClippedSubviews
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        initialNumToRender={6}
+        bounces={false}
+        scrollEventThrottle={16}
+        contentContainerStyle={styles.listContent}
+        ListFooterComponent={renderFooter}
+        onEndReachedThreshold={0.7}
+        onEndReached={() => {
+          if (!onEndReachedCalledDuringMomentum.current && onEndReached && !moreDataIsLoading) {
+            onEndReached();
+            onEndReachedCalledDuringMomentum.current = true;
+          }
+        }}
+        onMomentumScrollBegin={() => {
+          onEndReachedCalledDuringMomentum.current = false;
+        }}
+        refreshing={refreshing}
+        onRefresh={onRefresh}
+        windowSize={5}
+        maxToRenderPerBatch={5}
+        updateCellsBatchingPeriod={50}
+      />
+    );
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <AppHeader
+        title="More Content"
+        titleAlign="left"
+        titleStyle={StyleSheet.flatten([styles.headerTitle, headerProps?.titleStyle])}
+        onBackPress={headerProps?.onBackPress || (() => {})}
+        onRightPress={headerProps?.onRightPress || (() => {})}
+        rightIcon={headerProps?.rightIcon || <Search size={scale(23)} color={appliedTheme.colors.onBackground} />}
+        {...headerProps}
+      />
+      {renderContent()}
+    </View>
+  );
+};
+
+export default MoreContentList;
+
+const styles = StyleSheet.create({
+  listContent: {
+    paddingHorizontal: scale(6),
+    paddingBottom: scale(100)
+  },
+  cardWrapper: {
+    flexBasis: '33.33%',
+    maxWidth: '33.33%',
+    padding: scale(4),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  itemContainer: {
+    width: '100%',
+    aspectRatio: 2 / 3,
+    borderRadius: 5
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: verticalScale(50)
+  },
+  errorText: {
+    fontSize: RFValue(14),
+    color: 'red',
+    fontWeight: '500'
+  },
+  emptyText: {
+    fontSize: RFValue(14),
+    fontWeight: '400'
+  },
+  headerTitle: {
+    fontSize: RFValue(15),
+    textTransform: 'capitalize'
+  },
+  footerLoading: {
+    marginTop: verticalScale(30),
+    paddingVertical: verticalScale(10),
+    alignItems: 'center'
+  }
+});

package/src/components/ContentView/components/AboutSection.tsx

@@ -0,0 +1,139 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  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';
+
+type Props = {
+  theme: ITheme;
+  title?: string;
+  description?: string;
+  isLoading?: boolean;
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    body?: StyleProp<TextStyle>;
+    scrollExpanded?: StyleProp<ViewStyle>;
+    toggleText?: StyleProp<TextStyle>;
+    skeletonLine?: StyleProp<ViewStyle>;
+  };
+};
+
+export const AboutSection = ({ theme, title = 'About', description, isLoading = false, style }: Props) => {
+  const [expanded, setExpanded] = useState(false);
+  const scrollRef = useRef<ScrollView>(null);
+
+  const toggle = () => {
+    if (expanded) {
+      scrollRef.current?.scrollTo({ y: 0, animated: false });
+    }
+    setExpanded((prev) => !prev);
+  };
+
+  if (isLoading || !description) {
+    return (
+      <SkeletonPlaceholder
+        backgroundColor={theme.colors.skeletonBaseColor}
+        highlightColor={theme.colors.skeletonHighlightColor}
+      >
+        <SkeletonPlaceholder.Item paddingHorizontal={scale(12)} marginTop={verticalScale(7)}>
+          <SkeletonPlaceholder.Item
+            width={scale(70)}
+            height={scale(16)}
+            borderRadius={scale(4)}
+            marginBottom={scale(10)}
+            style={style?.skeletonLine}
+          />
+          {Array.from({ length: 4 }).map((_, idx) => (
+            <SkeletonPlaceholder.Item
+              key={idx}
+              width={idx === 3 ? '80%' : idx % 3 === 0 ? '95%' : '100%'}
+              height={scale(14)}
+              borderRadius={scale(4)}
+              marginBottom={scale(6)}
+              style={style?.skeletonLine}
+            />
+          ))}
+        </SkeletonPlaceholder.Item>
+      </SkeletonPlaceholder>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style?.container]}>
+      <Text color={theme.colors.primary} style={[styles.title, style?.title]}>
+        {title}
+      </Text>
+
+      {!expanded ? (
+        <Text
+          color={theme.colors.textSecondary}
+          style={[styles.body, style?.body]}
+          numberOfLines={5}
+          ellipsizeMode="tail"
+        >
+          {description}
+        </Text>
+      ) : (
+        <ScrollView
+          style={[styles.scrollExpanded, style?.scrollExpanded]}
+          showsVerticalScrollIndicator
+          ref={scrollRef}
+          nestedScrollEnabled
+        >
+          <Text color={theme.colors.textSecondary} style={[styles.body, style?.body]}>
+            {description}
+          </Text>
+        </ScrollView>
+      )}
+
+      {description.length > 150 && (
+        <TouchableOpacity onPress={toggle}>
+          <Text style={[styles.toggleText, { color: theme.colors.primary }, style?.toggleText]}>
+            {expanded ? 'See less' : 'See more'}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: scale(12),
+    marginTop: verticalScale(7)
+  },
+  title: {
+    fontSize: RFValue(14),
+    fontWeight: 'bold',
+    marginBottom: scale(6)
+  },
+  body: {
+    fontSize: RFValue(10),
+    lineHeight: scale(16),
+    textAlign: 'auto'
+  },
+  scrollExpanded: {
+    maxHeight: verticalScale(250)
+  },
+  toggleText: {
+    fontSize: RFValue(9.5),
+    fontWeight: '600',
+    marginTop: scale(4)
+  }
+});

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

@@ -0,0 +1,213 @@
+/**
+ * @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';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+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(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: ''
+  }));
+
+  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: RFValue(14),
+    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: RFValue(9),
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  role: {
+    fontSize: RFValue(9),
+    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'
+  }
+});