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

package/src/components/Content/Card/NowWatching/NowWatching.tsx

@@ -0,0 +1,413 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 28 Jun 2025 at 12:45 PM
+ */
+
+import React, { memo, useCallback, useMemo, useRef, useEffect } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type ListRenderItem,
+  type TextStyle
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import LinearGradient from 'react-native-linear-gradient';
+import FastImage from 'react-native-fast-image';
+import { Play } from 'lucide-react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+
+import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import { useTheme } from '../../../../theme/hook/useTheme';
+import NavigateToMore from '../components/NavigateToMore';
+import type { IContentData, IGetSectionData, MoreFetchData } from '../../../../types';
+import type { AppTheme, ITheme } from '../../../../theme/themes';
+import { Text } from '../../../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export interface IHistoryItem {
+  _id: string;
+  content: IContentData;
+  content_type: 'movie' | 'series' | 'live_stream';
+  currentTime: number;
+  duration: number;
+  season_number?: number;
+  episode_number?: number;
+  completed: boolean;
+  current_season?: any;
+  current_episode?: any;
+}
+
+type Props = {
+  section_id: string;
+  title: string;
+  historyData?: IHistoryItem[];
+  type: IGetSectionData['type'];
+  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
+  theme?: AppTheme;
+  onPressItem?: (item: IContentData) => void;
+  onPressMore?: (params: {
+    section_id: IGetSectionData['_id'];
+    name: IGetSectionData['name'];
+    type: IGetSectionData['type'];
+  }) => void;
+
+  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  itemWidth?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+  isLoadingHistory?: boolean;
+};
+
+const ITEM_WIDTH = moderateScale(230);
+const BORDER_RADIUS = moderateScale(8);
+
+const NowWatchingItem = memo(
+  ({
+    item,
+    index,
+    isLast,
+    appliedTheme,
+    onPressItem,
+    renderItemImage,
+    itemStyle,
+    itemWidth,
+    borderRadius
+  }: {
+    item: IHistoryItem;
+    index: number;
+    isLast: boolean;
+    appliedTheme: ITheme;
+    onPressItem?: (item: IContentData) => void;
+    renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+    itemStyle?: StyleProp<ViewStyle>;
+    itemWidth: number;
+    borderRadius: number;
+  }) => {
+    const percentage = Math.max(0, Math.min(100, Math.round((item.currentTime / item.duration) * 100)));
+
+    const progress = useSharedValue(0);
+
+    useEffect(() => {
+      progress.value = withTiming(percentage, { duration: 500 });
+    }, [percentage, progress]);
+
+    const animatedProgressStyle = useAnimatedStyle(() => ({
+      width: `${progress.value}%`
+    }));
+
+    const styles = useMemo(
+      () => getStyles(appliedTheme, itemWidth, borderRadius),
+      [appliedTheme, itemWidth, borderRadius]
+    );
+
+    return (
+      <TouchableOpacity
+        style={[styles.item, itemStyle, index === 0 && styles.firstItem, isLast && { marginRight: moderateScale(12) }]}
+        activeOpacity={0.9}
+        onPress={() => onPressItem?.(item.content)}
+      >
+        <View style={styles.cardWrapper}>
+          {renderItemImage ? (
+            renderItemImage({ item: item.content, index })
+          ) : (
+            <FastImage source={{ uri: item.content?.thumbnail }} style={styles.poster}>
+              <LinearGradient
+                colors={['rgba(0,0,0,0.95)', 'transparent']}
+                start={{ x: 0, y: 1 }}
+                end={{ x: 0, y: 0 }}
+                style={styles.gradientOverlay}
+              />
+            </FastImage>
+          )}
+          <View style={styles.infoContainer}>
+            <View style={styles.textSection}>
+              <Text style={styles.titleText} numberOfLines={1}>
+                {item.content?.name}
+              </Text>
+              {item.content?.type === 'series' && (
+                <Text style={styles.subTitleText}>
+                  {item.season_number ? `S${item.season_number}` : ''}
+                  {item.episode_number ? ` E${item.episode_number}` : ''}
+                </Text>
+              )}
+              <View style={styles.progressBackground}>
+                <Animated.View style={[styles.progressForeground, animatedProgressStyle]} />
+              </View>
+            </View>
+            <View style={styles.playIconWrapper}>
+              <Play size={moderateScale(20)} color={appliedTheme.colors.primary} fill={appliedTheme.colors.primary} />
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+);
+
+const NowWatching: React.FC<Props> = ({
+  section_id,
+  title,
+  type,
+  historyData: initialData,
+  moreFetchDataHistory,
+  isLoading = false,
+  theme,
+  titleStyle,
+  onPressItem,
+  onPressMore,
+  renderItemImage,
+  itemWidth = ITEM_WIDTH,
+  borderRadius = BORDER_RADIUS,
+  skeletonCount = 4,
+  containerStyle,
+  itemStyle,
+  isLoadingHistory
+}) => {
+  const flatListRef = useRef<FlatList<IHistoryItem>>(null);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const { theme: appliedTheme } = useTheme(theme);
+  const styles = useMemo(
+    () => getStyles(appliedTheme, itemWidth, borderRadius),
+    [appliedTheme, itemWidth, borderRadius]
+  );
+
+  const {
+    data,
+    loadMoreData,
+    pagination,
+    loading: isPaginating
+  } = usePaginatedSection<IHistoryItem>(section_id, moreFetchDataHistory, initialData, isLoading || isLoadingHistory);
+
+  const handlePressMore = useCallback(() => {
+    onPressMore?.({ section_id, name: title, type });
+  }, [onPressMore, section_id, title, type]);
+
+  const listData = useMemo(() => data ?? [], [data]);
+
+  const handleEndReached = useCallback(() => {
+    if (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
+      onEndReachedCalledDuringMomentum.current = true;
+      loadMoreData(pagination.nextPage);
+    }
+  }, [loadMoreData, pagination]);
+
+  const renderItem: ListRenderItem<IHistoryItem> = useCallback(
+    ({ item, index }) => {
+      const isLast = index === listData.length - 1;
+      return (
+        <NowWatchingItem
+          item={item}
+          index={index}
+          isLast={isLast}
+          appliedTheme={appliedTheme}
+          onPressItem={onPressItem}
+          renderItemImage={renderItemImage}
+          itemStyle={itemStyle}
+          itemWidth={itemWidth}
+          borderRadius={borderRadius}
+        />
+      );
+    },
+    [listData.length, appliedTheme, onPressItem, renderItemImage, itemStyle, itemWidth, borderRadius]
+  );
+
+  const renderSkeletonItem = (index: number) => (
+    <View
+      key={index}
+      style={[styles.item, itemStyle, index === 0 && styles.firstItem, { marginRight: moderateScale(12) }]}
+    >
+      <SkeletonPlaceholder
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+      >
+        <View style={styles.cardWrapper}>
+          <View style={styles.poster} />
+          <View style={styles.infoContainer}>
+            <View style={styles.textSection}>
+              <View style={styles.skeletonTitle} />
+              <View style={styles.skeletonSubTitle} />
+              <View style={styles.progressBackground} />
+            </View>
+            <View style={styles.playIconSkeleton} />
+          </View>
+        </View>
+      </SkeletonPlaceholder>
+    </View>
+  );
+  if (!isLoadingHistory && !isLoading && initialData?.length === 0) return null;
+
+  if (!isLoading && !isLoadingHistory && listData.length === 0) return null;
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {!isLoading && !isLoadingHistory && title && (
+        <NavigateToMore
+          title={title}
+          onPress={handlePressMore}
+          titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+          containerStyle={styles.navigateToMoreContainer}
+          showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+        />
+      )}
+      {(isLoading || isLoadingHistory) && (
+        <SkeletonPlaceholder
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        >
+          <SkeletonPlaceholder.Item
+            width={moderateScale(100)}
+            height={verticalScale(14)}
+            borderRadius={moderateScale(4)}
+            marginLeft={moderateScale(12)}
+            marginBottom={verticalScale(6)}
+          />
+        </SkeletonPlaceholder>
+      )}
+      <FlatList
+        ref={flatListRef}
+        horizontal
+        data={isLoading || isLoadingHistory ? Array(skeletonCount).fill(0) : listData}
+        keyExtractor={(_, index) => index.toString()}
+        renderItem={({ item, index }) =>
+          isLoading || isLoadingHistory
+            ? renderSkeletonItem(index)
+            : renderItem({
+                item,
+                index,
+                separators: {
+                  highlight: () => {},
+                  unhighlight: () => {},
+                  updateProps: () => {}
+                }
+              })
+        }
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.listContent}
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.5}
+        onMomentumScrollBegin={() => {
+          onEndReachedCalledDuringMomentum.current = false;
+        }}
+        ListFooterComponent={isPaginating ? renderSkeletonItem(0) : null}
+      />
+    </View>
+  );
+};
+
+const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
+  StyleSheet.create({
+    container: {
+      marginVertical: verticalScale(6)
+    },
+    listContent: {
+      paddingRight: moderateScale(15)
+    },
+    item: {
+      marginRight: moderateScale(12)
+    },
+    firstItem: {
+      marginLeft: moderateScale(10)
+    },
+    navigateToMoreContainer: {
+      paddingHorizontal: moderateScale(10),
+      marginBottom: verticalScale(8)
+    },
+    title: {
+      fontSize: RFValue(13),
+      fontWeight: '600'
+    },
+    cardWrapper: {
+      width: itemWidth,
+      borderRadius,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.surfaceVariant,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 4,
+      elevation: 2
+    },
+    poster: {
+      width: '100%',
+      height: itemWidth * (9 / 16),
+      borderRadius,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.surfaceVariant
+    },
+    gradientOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      borderRadius
+    },
+    infoContainer: {
+      position: 'absolute',
+      bottom: 6,
+      left: 8,
+      right: 8,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    textSection: {
+      flex: 1,
+      paddingRight: 8
+    },
+    titleText: {
+      color: theme.colors.textPrimary,
+      fontWeight: '600',
+      fontSize: RFValue(11)
+    },
+    subTitleText: {
+      color: theme.colors.textSecondary,
+      fontSize: RFValue(10),
+      opacity: 0.85,
+      marginTop: verticalScale(2)
+    },
+    progressBackground: {
+      marginTop: verticalScale(4),
+      height: verticalScale(4),
+      backgroundColor: '#4F4E4E',
+      borderRadius: 6,
+      width: '100%'
+    },
+    progressForeground: {
+      height: '100%',
+      borderRadius: 6,
+      backgroundColor: theme.colors.primary
+    },
+    playIconWrapper: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: moderateScale(32),
+      height: moderateScale(32),
+      borderRadius: moderateScale(16),
+      backgroundColor: theme.colors.blueBackground
+    },
+    skeletonTitle: {
+      width: '80%',
+      height: verticalScale(10),
+      borderRadius: 4,
+      marginBottom: verticalScale(4)
+    },
+    skeletonSubTitle: {
+      width: '60%',
+      height: verticalScale(8),
+      borderRadius: 4,
+      marginBottom: verticalScale(6)
+    },
+    playIconSkeleton: {
+      width: moderateScale(32),
+      height: moderateScale(32),
+      borderRadius: moderateScale(16)
+    }
+  });
+
+export default memo(NowWatching);