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

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

@@ -12,19 +12,27 @@ import {
   type StyleProp,
   type ViewStyle,
   type ListRenderItem,
-  type TextStyle
+  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 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 {
+  IContentData,
+  IGetSectionData,
+  MoreFetchData,
+} from '../../../../types';
 import type { AppTheme, ITheme } from '../../../../theme/themes';
 import { Text } from '../../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
@@ -56,7 +64,10 @@ type Props = {
     type: IGetSectionData['type'];
   }) => void;
 
-  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  renderItemImage?: (params: {
+    item: IContentData;
+    index: number;
+  }) => React.ReactNode;
   itemWidth?: number;
   borderRadius?: number;
   skeletonCount?: number;
@@ -80,19 +91,25 @@ const NowWatchingItem = memo(
     renderItemImage,
     itemStyle,
     itemWidth,
-    borderRadius
+    borderRadius,
   }: {
     item: IHistoryItem;
     index: number;
     isLast: boolean;
     appliedTheme: ITheme;
     onPressItem?: (item: IContentData) => void;
-    renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+    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 percentage = Math.max(
+      0,
+      Math.min(100, Math.round((item.currentTime / item.duration) * 100))
+    );
 
     const progress = useSharedValue(0);
 
@@ -101,17 +118,21 @@ const NowWatchingItem = memo(
     }, [percentage, progress]);
 
     const animatedProgressStyle = useAnimatedStyle(() => ({
-      width: `${progress.value}%`
+      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) }]}
+        style={[
+          styles.item,
+          itemStyle,
+          index === 0 && styles.firstItem,
+          isLast && { marginRight: moderateScale(12) },
+        ]}
         activeOpacity={0.9}
         onPress={() => onPressItem?.(item.content)}
       >
@@ -119,7 +140,14 @@ const NowWatchingItem = memo(
           {renderItemImage ? (
             renderItemImage({ item: item.content, index })
           ) : (
-            <FastImage source={{ uri: item.content?.thumbnail }} style={styles.poster}>
+            <FastImage
+              source={{
+                uri: item.content?.thumbnail || item.content?.poster,
+                cache: FastImage.cacheControl.immutable,
+                priority: FastImage.priority.normal,
+              }}
+              style={styles.poster}
+            >
               <LinearGradient
                 colors={['rgba(0,0,0,0.95)', 'transparent']}
                 start={{ x: 0, y: 1 }}
@@ -140,11 +168,17 @@ const NowWatchingItem = memo(
                 </Text>
               )}
               <View style={styles.progressBackground}>
-                <Animated.View style={[styles.progressForeground, animatedProgressStyle]} />
+                <Animated.View
+                  style={[styles.progressForeground, animatedProgressStyle]}
+                />
               </View>
             </View>
             <View style={styles.playIconWrapper}>
-              <Play size={moderateScale(20)} color={appliedTheme.colors.primary} fill={appliedTheme.colors.primary} />
+              <Play
+                size={moderateScale(20)}
+                color={appliedTheme.colors.primary}
+                fill={appliedTheme.colors.primary}
+              />
             </View>
           </View>
         </View>
@@ -170,7 +204,7 @@ const NowWatching: React.FC<Props> = ({
   skeletonCount = 4,
   containerStyle,
   itemStyle,
-  isLoadingHistory
+  isLoadingHistory,
 }) => {
   const flatListRef = useRef<FlatList<IHistoryItem>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
@@ -184,8 +218,13 @@ const NowWatching: React.FC<Props> = ({
     data,
     loadMoreData,
     pagination,
-    loading: isPaginating
-  } = usePaginatedSection<IHistoryItem>(section_id, moreFetchDataHistory, initialData, isLoading || isLoadingHistory);
+    loading: isPaginating,
+  } = usePaginatedSection<IHistoryItem>(
+    section_id,
+    moreFetchDataHistory,
+    initialData,
+    isLoading || isLoadingHistory
+  );
 
   const handlePressMore = useCallback(() => {
     onPressMore?.({ section_id, name: title, type });
@@ -194,7 +233,11 @@ const NowWatching: React.FC<Props> = ({
   const listData = useMemo(() => data ?? [], [data]);
 
   const handleEndReached = useCallback(() => {
-    if (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
+    if (
+      !onEndReachedCalledDuringMomentum.current &&
+      pagination?.hasNextPage &&
+      pagination?.nextPage
+    ) {
       onEndReachedCalledDuringMomentum.current = true;
       loadMoreData(pagination.nextPage);
     }
@@ -217,13 +260,26 @@ const NowWatching: React.FC<Props> = ({
         />
       );
     },
-    [listData.length, appliedTheme, onPressItem, renderItemImage, itemStyle, itemWidth, 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) }]}
+      style={[
+        styles.item,
+        itemStyle,
+        index === 0 && styles.firstItem,
+        { marginRight: moderateScale(12) },
+      ]}
     >
       <SkeletonPlaceholder
         backgroundColor={appliedTheme.colors.skeletonBaseColor}
@@ -253,7 +309,11 @@ const NowWatching: React.FC<Props> = ({
         <NavigateToMore
           title={title}
           onPress={handlePressMore}
-          titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+          titleStyle={[
+            styles.title,
+            { color: appliedTheme.colors.textPrimary },
+            titleStyle,
+          ]}
           containerStyle={styles.navigateToMoreContainer}
           showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
         />
@@ -275,7 +335,11 @@ const NowWatching: React.FC<Props> = ({
       <FlatList
         ref={flatListRef}
         horizontal
-        data={isLoading || isLoadingHistory ? Array(skeletonCount).fill(0) : listData}
+        data={
+          isLoading || isLoadingHistory
+            ? Array(skeletonCount).fill(0)
+            : listData
+        }
         keyExtractor={(_, index) => index.toString()}
         renderItem={({ item, index }) =>
           isLoading || isLoadingHistory
@@ -286,8 +350,8 @@ const NowWatching: React.FC<Props> = ({
                 separators: {
                   highlight: () => {},
                   unhighlight: () => {},
-                  updateProps: () => {}
-                }
+                  updateProps: () => {},
+                },
               })
         }
         showsHorizontalScrollIndicator={false}
@@ -306,24 +370,24 @@ const NowWatching: React.FC<Props> = ({
 const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
   StyleSheet.create({
     container: {
-      marginVertical: verticalScale(6)
+      marginVertical: verticalScale(6),
     },
     listContent: {
-      paddingRight: moderateScale(15)
+      paddingRight: moderateScale(15),
     },
     item: {
-      marginRight: moderateScale(12)
+      marginRight: moderateScale(12),
     },
     firstItem: {
-      marginLeft: moderateScale(10)
+      marginLeft: moderateScale(10),
     },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(10),
-      marginBottom: verticalScale(8)
+      marginBottom: verticalScale(8),
     },
     title: {
       fontSize: RFValue(13),
-      fontWeight: '600'
+      fontWeight: '600',
     },
     cardWrapper: {
       width: itemWidth,
@@ -334,18 +398,18 @@ const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.08,
       shadowRadius: 4,
-      elevation: 2
+      elevation: 2,
     },
     poster: {
       width: '100%',
       height: itemWidth * (9 / 16),
       borderRadius,
       overflow: 'hidden',
-      backgroundColor: theme.colors.surfaceVariant
+      backgroundColor: theme.colors.surfaceVariant,
     },
     gradientOverlay: {
       ...StyleSheet.absoluteFillObject,
-      borderRadius
+      borderRadius,
     },
     infoContainer: {
       position: 'absolute',
@@ -354,34 +418,34 @@ const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
       right: 8,
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'space-between'
+      justifyContent: 'space-between',
     },
     textSection: {
       flex: 1,
-      paddingRight: 8
+      paddingRight: 8,
     },
     titleText: {
-      color: theme.colors.textPrimary,
+      color: theme.colors.white,
       fontWeight: '600',
-      fontSize: RFValue(11)
+      fontSize: RFValue(11),
     },
     subTitleText: {
-      color: theme.colors.textSecondary,
+      color: theme.colors.white,
       fontSize: RFValue(10),
       opacity: 0.85,
-      marginTop: verticalScale(2)
+      marginTop: verticalScale(2),
     },
     progressBackground: {
       marginTop: verticalScale(4),
       height: verticalScale(4),
       backgroundColor: '#4F4E4E',
       borderRadius: 6,
-      width: '100%'
+      width: '100%',
     },
     progressForeground: {
       height: '100%',
       borderRadius: 6,
-      backgroundColor: theme.colors.primary
+      backgroundColor: theme.colors.primary,
     },
     playIconWrapper: {
       justifyContent: 'center',
@@ -389,25 +453,25 @@ const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
       width: moderateScale(32),
       height: moderateScale(32),
       borderRadius: moderateScale(16),
-      backgroundColor: theme.colors.blueBackground
+      backgroundColor: theme.colors.blueBackground,
     },
     skeletonTitle: {
       width: '80%',
       height: verticalScale(10),
       borderRadius: 4,
-      marginBottom: verticalScale(4)
+      marginBottom: verticalScale(4),
     },
     skeletonSubTitle: {
       width: '60%',
       height: verticalScale(8),
       borderRadius: 4,
-      marginBottom: verticalScale(6)
+      marginBottom: verticalScale(6),
     },
     playIconSkeleton: {
       width: moderateScale(32),
       height: moderateScale(32),
-      borderRadius: moderateScale(16)
-    }
+      borderRadius: moderateScale(16),
+    },
   });
 
 export default memo(NowWatching);

package/src/components/Content/Card/Sliders/Styles/One.tsx

@@ -4,7 +4,12 @@
  */
 
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { View, TouchableOpacity, StyleSheet, type AccessibilityProps } from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  type AccessibilityProps,
+} from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
 import { scale, verticalScale } from 'react-native-size-matters';
 import FastImage from 'react-native-fast-image';
@@ -41,7 +46,10 @@ type ImageTouchableProps = {
   onImagePress?: () => void;
 };
 
-const ImageTouchable: React.FC<ImageTouchableProps> = ({ children, onImagePress }) => (
+const ImageTouchable: React.FC<ImageTouchableProps> = ({
+  children,
+  onImagePress,
+}) => (
   <TouchableOpacity
     activeOpacity={0.8}
     style={styles.imageWrapper}
@@ -63,7 +71,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
   skeletonCount = DEFAULT_SKELETON_COUNT,
   theme,
   accessibilityLabel = 'Content carousel',
-  accessibilityHint = 'Swipe to view content'
+  accessibilityHint = 'Swipe to view content',
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const contentData = useMemo(() => data?.data ?? [], [data]);
@@ -85,26 +93,39 @@ const SliderOne: React.FC<SliderOneProps> = ({
             source={{
               uri: item.thumbnail,
               priority: FastImage.priority.normal,
-              cache: FastImage.cacheControl.immutable
+              cache: FastImage.cacheControl.immutable,
             }}
             style={styles.sliderImage}
             resizeMode={FastImage.resizeMode.cover}
             accessibilityLabel={`Image of ${item.name || 'content'}`}
           />
           {showPlayIcon && (
-            <LinearGradient colors={['transparent', 'rgba(0,0,0,0.6)']} style={styles.gradientOverlay}>
+            <LinearGradient
+              colors={['transparent', 'rgba(0,0,0,0.6)']}
+              style={styles.gradientOverlay}
+            >
               <View style={styles.playOverlay}>
                 <TouchableOpacity
                   onPress={() => onPressItem?.(item)}
-                  style={[styles.playIcon, { backgroundColor: appliedTheme.colors.button }]}
+                  style={[
+                    styles.playIcon,
+                    { backgroundColor: appliedTheme.colors.button },
+                  ]}
                   activeOpacity={0.8}
                   accessibilityRole="button"
                   accessibilityLabel="Play content"
                 >
-                  <Play size={scale(25)} color={appliedTheme.colors.black} fill={appliedTheme.colors.black} />
+                  <Play
+                    size={scale(25)}
+                    color={appliedTheme.colors.black}
+                    fill={appliedTheme.colors.black}
+                  />
                 </TouchableOpacity>
                 <Text
-                  style={[styles.playText, { color: appliedTheme.colors.white }]}
+                  style={[
+                    styles.playText,
+                    { color: appliedTheme.colors.white },
+                  ]}
                   numberOfLines={1}
                   accessibilityLabel={item.name}
                 >
@@ -128,7 +149,11 @@ const SliderOne: React.FC<SliderOneProps> = ({
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
           speed={1000}
         >
-          <SkeletonPlaceholder.Item width={CAROUSEL_WIDTH} height={CAROUSEL_HEIGHT} borderRadius={BORDER_RADIUS} />
+          <SkeletonPlaceholder.Item
+            width={CAROUSEL_WIDTH}
+            height={CAROUSEL_HEIGHT}
+            borderRadius={BORDER_RADIUS}
+          />
         </SkeletonPlaceholder>
       </View>
     ),
@@ -145,7 +170,11 @@ const SliderOne: React.FC<SliderOneProps> = ({
             highlightColor={appliedTheme.colors.skeletonHighlightColor}
             speed={2000}
           >
-            <SkeletonPlaceholder.Item width={scale(18)} height={scale(8)} borderRadius={scale(50)} />
+            <SkeletonPlaceholder.Item
+              width={scale(18)}
+              height={scale(8)}
+              borderRadius={scale(50)}
+            />
           </SkeletonPlaceholder>
         ) : i === activeIndex ? (
           <LinearGradient
@@ -155,7 +184,12 @@ const SliderOne: React.FC<SliderOneProps> = ({
             style={styles.activeIndicator}
           />
         ) : (
-          <View style={[styles.inactiveIndicator, { backgroundColor: appliedTheme.colors.onSurface }]} />
+          <View
+            style={[
+              styles.inactiveIndicator,
+              { backgroundColor: appliedTheme.colors.onSurface },
+            ]}
+          />
         )}
       </View>
     ),
@@ -165,7 +199,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
       appliedTheme.colors.skeletonHighlightColor,
       appliedTheme.colors.onSurface,
       activeIndex,
-      gradientColors
+      gradientColors,
     ]
   );
 
@@ -177,14 +211,18 @@ const SliderOne: React.FC<SliderOneProps> = ({
     loop: true,
     scrollAnimationDuration: 1000,
     autoPlayInterval: 2500,
-    style: styles.carousel
+    style: styles.carousel,
   };
   if (!data) {
     return null;
   }
   if (isLoading) {
     return (
-      <View style={styles.container} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+      <View
+        style={styles.container}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+      >
         <Carousel
           {...carouselProps}
           data={Array.from({ length: skeletonCount })}
@@ -192,13 +230,18 @@ const SliderOne: React.FC<SliderOneProps> = ({
           mode="parallax"
           modeConfig={{
             parallaxScrollingOffset: 48,
-            parallaxScrollingScale: 0.9
+            parallaxScrollingScale: 0.9,
           }}
-          onConfigurePanGesture={(gesture) => gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])}
+          onConfigurePanGesture={(gesture) =>
+            gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])
+          }
         />
         <View style={styles.indicatorContainer}>
           <View style={styles.indicator}>
-            {Array.from({ length: isLoading ? skeletonCount : contentData.length }, renderIndicator)}
+            {Array.from(
+              { length: isLoading ? skeletonCount : contentData.length },
+              renderIndicator
+            )}
           </View>
         </View>
       </View>
@@ -208,7 +251,11 @@ const SliderOne: React.FC<SliderOneProps> = ({
     return null;
   }
   return (
-    <View style={styles.container} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+    <View
+      style={styles.container}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+    >
       <Carousel
         {...carouselProps}
         data={contentData}
@@ -217,13 +264,17 @@ const SliderOne: React.FC<SliderOneProps> = ({
         mode="parallax"
         modeConfig={{
           parallaxScrollingOffset: 48,
-          parallaxScrollingScale: 0.9
+          parallaxScrollingScale: 0.9,
         }}
-        onConfigurePanGesture={(gesture) => gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])}
+        onConfigurePanGesture={(gesture) =>
+          gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])
+        }
       />
       {index === 0 && (
         <View style={styles.indicatorContainer}>
-          <View style={styles.indicator}>{Array.from({ length: contentData.length }, renderIndicator)}</View>
+          <View style={styles.indicator}>
+            {Array.from({ length: contentData.length }, renderIndicator)}
+          </View>
         </View>
       )}
     </View>
@@ -236,86 +287,86 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     marginTop: verticalScale(6),
-    marginBottom: verticalScale(1)
+    marginBottom: verticalScale(1),
   },
   carousel: {
-    borderRadius: BORDER_RADIUS
+    borderRadius: BORDER_RADIUS,
   },
   sliderContainer: {
     flex: 1,
     justifyContent: 'center',
-    marginTop: verticalScale(-15)
+    marginTop: verticalScale(-15),
   },
   imageWrapper: {
     borderRadius: BORDER_RADIUS,
     overflow: 'hidden',
-    position: 'relative'
+    position: 'relative',
   },
   sliderImage: {
     width: '100%',
     aspectRatio: 16 / 9,
     borderRadius: BORDER_RADIUS,
-    backgroundColor: '#444'
+    backgroundColor: '#444',
   },
   gradientOverlay: {
     ...StyleSheet.absoluteFillObject,
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
   },
   playOverlay: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: scale(8),
     paddingBottom: verticalScale(10),
-    paddingHorizontal: scale(12)
+    paddingHorizontal: scale(12),
   },
   playIcon: {
     width: scale(40),
     height: scale(40),
     borderRadius: scale(50),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   playText: {
     fontSize: RFValue(15),
     fontWeight: 'bold',
-    maxWidth: scale(220)
+    maxWidth: scale(220),
   },
   indicatorContainer: {
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
-    marginTop: verticalScale(-7)
+    marginTop: verticalScale(-7),
   },
   indicator: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: scale(6)
+    gap: scale(6),
   },
   indicatorWrapper: {
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   activeIndicator: {
     width: scale(18),
     height: scale(8),
-    borderRadius: scale(50)
+    borderRadius: scale(50),
   },
   inactiveIndicator: {
     width: scale(8),
     height: scale(8),
-    borderRadius: scale(50)
+    borderRadius: scale(50),
   },
   emptyState: {
     padding: scale(12),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   emptyText: {
     fontSize: RFValue(13),
     fontWeight: '500',
     color: '#fff',
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 });
 
 export default memo(SliderOne);