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

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

@@ -0,0 +1,321 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Wed 25 Jun 2025 at 05:28 PM
+ */
+
+import React, { memo, useCallback, useMemo, useState } from 'react';
+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';
+import LinearGradient from 'react-native-linear-gradient';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { Play } from 'lucide-react-native';
+import { Text } from '../../../../Text';
+import Display from '../../../../../utils/Display';
+import type { IContentData, ISectionContent } from '../../../../../types';
+import type { AppTheme } from '../../../../../theme/themes';
+import { useTheme } from '../../../../../theme/hook/useTheme';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+// Constants
+const DEFAULT_SKELETON_COUNT = 3;
+const CAROUSEL_WIDTH = Display.fullWidth;
+const CAROUSEL_HEIGHT = verticalScale(180);
+const BORDER_RADIUS = scale(10);
+
+// Define props
+type SliderOneProps = {
+  index: number;
+  data: ISectionContent | null;
+  onPressItem?: (item: IContentData) => void;
+  showPlayIcon?: boolean;
+  isLoading?: boolean;
+  skeletonCount?: number;
+  theme?: AppTheme;
+} & AccessibilityProps;
+
+// ImageTouchable component
+type ImageTouchableProps = {
+  children: React.ReactNode;
+  onImagePress?: () => void;
+};
+
+const ImageTouchable: React.FC<ImageTouchableProps> = ({ children, onImagePress }) => (
+  <TouchableOpacity
+    activeOpacity={0.8}
+    style={styles.imageWrapper}
+    onPress={onImagePress}
+    accessibilityRole="button"
+    accessibilityLabel="View content"
+  >
+    {children}
+  </TouchableOpacity>
+);
+
+// Main component
+const SliderOne: React.FC<SliderOneProps> = ({
+  index,
+  data,
+  onPressItem,
+  showPlayIcon = false,
+  isLoading = false,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  theme,
+  accessibilityLabel = 'Content carousel',
+  accessibilityHint = 'Swipe to view content'
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const contentData = useMemo(() => data?.data ?? [], [data]);
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+
+  const gradientColors = useMemo(
+    () => [appliedTheme.colors.primary, appliedTheme.colors.primary],
+    [appliedTheme.colors.primary]
+  );
+
+  const handleSnapToItem = useCallback((i: number) => setActiveIndex(i), []);
+
+  // Render carousel item
+  const renderCarouselItem = useCallback(
+    ({ item }: { item: IContentData }) => (
+      <View style={styles.sliderContainer}>
+        <ImageTouchable onImagePress={() => onPressItem?.(item)}>
+          <FastImage
+            source={{
+              uri: item.thumbnail,
+              priority: FastImage.priority.normal,
+              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}>
+              <View style={styles.playOverlay}>
+                <TouchableOpacity
+                  onPress={() => onPressItem?.(item)}
+                  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} />
+                </TouchableOpacity>
+                <Text
+                  style={[styles.playText, { color: appliedTheme.colors.white }]}
+                  numberOfLines={1}
+                  accessibilityLabel={item.name}
+                >
+                  {item.name}
+                </Text>
+              </View>
+            </LinearGradient>
+          )}
+        </ImageTouchable>
+      </View>
+    ),
+    [onPressItem, showPlayIcon, appliedTheme.colors]
+  );
+
+  // Render skeleton item
+  const renderSkeletonItem = useCallback(
+    () => (
+      <View style={styles.sliderContainer}>
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          speed={1000}
+        >
+          <SkeletonPlaceholder.Item width={CAROUSEL_WIDTH} height={CAROUSEL_HEIGHT} borderRadius={BORDER_RADIUS} />
+        </SkeletonPlaceholder>
+      </View>
+    ),
+    [appliedTheme.colors]
+  );
+
+  // Render indicator
+  const renderIndicator = useCallback(
+    (_: number, i: number) => (
+      <View key={i} style={styles.indicatorWrapper}>
+        {isLoading ? (
+          <SkeletonPlaceholder
+            backgroundColor={appliedTheme.colors.skeletonBaseColor}
+            highlightColor={appliedTheme.colors.skeletonHighlightColor}
+            speed={2000}
+          >
+            <SkeletonPlaceholder.Item width={scale(18)} height={scale(8)} borderRadius={scale(50)} />
+          </SkeletonPlaceholder>
+        ) : i === activeIndex ? (
+          <LinearGradient
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            colors={gradientColors}
+            style={styles.activeIndicator}
+          />
+        ) : (
+          <View style={[styles.inactiveIndicator, { backgroundColor: appliedTheme.colors.onSurface }]} />
+        )}
+      </View>
+    ),
+    [
+      isLoading,
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+      appliedTheme.colors.onSurface,
+      activeIndex,
+      gradientColors
+    ]
+  );
+
+  // Common carousel props
+  const carouselProps = {
+    width: CAROUSEL_WIDTH,
+    height: CAROUSEL_HEIGHT,
+    autoPlay: !isLoading && contentData.length > 1,
+    loop: true,
+    scrollAnimationDuration: 1000,
+    autoPlayInterval: 2500,
+    style: styles.carousel
+  };
+  if (!data) {
+    return null;
+  }
+  if (isLoading) {
+    return (
+      <View style={styles.container} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+        <Carousel
+          {...carouselProps}
+          data={Array.from({ length: skeletonCount })}
+          renderItem={renderSkeletonItem}
+          mode="parallax"
+          modeConfig={{
+            parallaxScrollingOffset: 48,
+            parallaxScrollingScale: 0.9
+          }}
+          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)}
+          </View>
+        </View>
+      </View>
+    );
+  }
+  if (!isLoading && !contentData.length) {
+    return null;
+  }
+  return (
+    <View style={styles.container} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+      <Carousel
+        {...carouselProps}
+        data={contentData}
+        renderItem={renderCarouselItem}
+        onSnapToItem={handleSnapToItem}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingOffset: 48,
+          parallaxScrollingScale: 0.9
+        }}
+        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>
+      )}
+    </View>
+  );
+};
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: verticalScale(6),
+    marginBottom: verticalScale(1)
+  },
+  carousel: {
+    borderRadius: BORDER_RADIUS
+  },
+  sliderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginTop: verticalScale(-15)
+  },
+  imageWrapper: {
+    borderRadius: BORDER_RADIUS,
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  sliderImage: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+    borderRadius: BORDER_RADIUS,
+    backgroundColor: '#444'
+  },
+  gradientOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end'
+  },
+  playOverlay: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: scale(8),
+    paddingBottom: verticalScale(10),
+    paddingHorizontal: scale(12)
+  },
+  playIcon: {
+    width: scale(40),
+    height: scale(40),
+    borderRadius: scale(50),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  playText: {
+    fontSize: RFValue(15),
+    fontWeight: 'bold',
+    maxWidth: scale(220)
+  },
+  indicatorContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    marginTop: verticalScale(-7)
+  },
+  indicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: scale(6)
+  },
+  indicatorWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  activeIndicator: {
+    width: scale(18),
+    height: scale(8),
+    borderRadius: scale(50)
+  },
+  inactiveIndicator: {
+    width: scale(8),
+    height: scale(8),
+    borderRadius: scale(50)
+  },
+  emptyState: {
+    padding: scale(12),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  emptyText: {
+    fontSize: RFValue(13),
+    fontWeight: '500',
+    color: '#fff',
+    textAlign: 'center'
+  }
+});
+
+export default memo(SliderOne);

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

@@ -0,0 +1,210 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 30 Jun 2025 at 11:30 PM
+ */
+import React, { memo, useCallback, useMemo, useState } from 'react';
+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';
+import LinearGradient from 'react-native-linear-gradient';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { Text } from '../../../../Text';
+import { useTheme } from '../../../../../theme/hook/useTheme';
+import Display from '../../../../../utils/Display';
+import { ThumbnailCard } from '../../components/ThumbnailCard';
+import type { IContentData, ISectionContent } from '../../../../../types';
+import type { AppTheme } from '../../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+const FULL_WIDTH = Display.fullWidth;
+const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
+
+type SliderTwoProps = {
+  data: ISectionContent | null;
+  onPressItem?: (item: IContentData) => void;
+  isLoading?: boolean;
+  skeletonCount?: number;
+  theme?: AppTheme;
+} & AccessibilityProps;
+
+const SliderTwo: React.FC<SliderTwoProps> = ({
+  data,
+  onPressItem,
+  isLoading = true,
+  skeletonCount = 3,
+  accessibilityLabel = 'Full Width Slider',
+  accessibilityHint = 'Swipe to view content',
+  theme
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const contentData = useMemo(() => data?.data ?? [], [data]);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const gradientColors = useMemo(
+    () => [appliedTheme.colors.primary, appliedTheme.colors.primary],
+    [appliedTheme.colors.primary]
+  );
+  const handleSnapToItem = useCallback((i: number) => setActiveIndex(i), []);
+
+  const renderSkeletonItem = useCallback(
+    () => (
+      <View style={styles.itemWrapper}>
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        >
+          <SkeletonPlaceholder.Item width={FULL_WIDTH} height={FULL_HEIGHT} />
+        </SkeletonPlaceholder>
+      </View>
+    ),
+    [appliedTheme.colors]
+  );
+
+  const renderCarouselItem = useCallback(
+    ({ item }: { item: IContentData }) => (
+      <TouchableOpacity
+        activeOpacity={0.85}
+        onPress={() => onPressItem?.(item)}
+        style={styles.itemWrapper}
+        accessibilityRole="button"
+        accessibilityLabel={`View ${item.name}`}
+      >
+        <ThumbnailCard
+          thumbnailUri={item.thumbnail}
+          theme={appliedTheme}
+          isLoading={isLoading}
+          wrapperStyle={styles.image}
+          resizeMode={FastImage.resizeMode.cover}
+        />
+        <LinearGradient
+          colors={['transparent', 'rgba(0,0,0,0.7)']}
+          start={{ x: 0.5, y: 0 }}
+          end={{ x: 0.5, y: 1 }}
+          style={styles.gradientBottomOverlay}
+        />
+      </TouchableOpacity>
+    ),
+    [appliedTheme, isLoading, onPressItem]
+  );
+
+  const renderIndicator = useCallback(
+    (_: number, i: number) => (
+      <View key={i} style={styles.indicatorWrapper}>
+        {isLoading ? (
+          <SkeletonPlaceholder
+            backgroundColor={appliedTheme.colors.skeletonBaseColor}
+            highlightColor={appliedTheme.colors.skeletonHighlightColor}
+            speed={2000}
+          >
+            <SkeletonPlaceholder.Item width={scale(18)} height={scale(8)} borderRadius={scale(50)} />
+          </SkeletonPlaceholder>
+        ) : i === activeIndex ? (
+          <LinearGradient
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            colors={gradientColors}
+            style={styles.activeIndicator}
+          />
+        ) : (
+          <View style={[styles.inactiveIndicator, { backgroundColor: appliedTheme.colors.onSurface }]} />
+        )}
+      </View>
+    ),
+    [
+      isLoading,
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+      appliedTheme.colors.onSurface,
+      activeIndex,
+      gradientColors
+    ]
+  );
+
+  if (!data || (!isLoading && contentData.length === 0)) {
+    return (
+      <View style={[styles.container, styles.emptyState]}>
+        <Text style={styles.emptyText}>No content available</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+      <Carousel
+        width={FULL_WIDTH}
+        height={FULL_HEIGHT}
+        autoPlay={!isLoading && contentData.length > 1}
+        loop={!isLoading && contentData.length > 1}
+        scrollAnimationDuration={1000}
+        autoPlayInterval={3000}
+        data={isLoading ? (Array.from({ length: skeletonCount }) as IContentData[]) : contentData}
+        renderItem={isLoading ? renderSkeletonItem : renderCarouselItem}
+        onSnapToItem={handleSnapToItem}
+        onConfigurePanGesture={(gesture: any) => gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])}
+      />
+      <View style={styles.indicatorContainer}>
+        <View style={styles.indicator}>{Array.from({ length: contentData.length }, renderIndicator)}</View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginVertical: verticalScale(6)
+  },
+  itemWrapper: {
+    overflow: 'hidden'
+  },
+  image: {
+    width: FULL_WIDTH,
+    height: FULL_HEIGHT
+  },
+  gradientBottomOverlay: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: verticalScale(120),
+    zIndex: 2
+  },
+  indicatorContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    marginTop: verticalScale(10)
+  },
+  indicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: scale(6)
+  },
+  indicatorWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  activeIndicator: {
+    width: scale(18),
+    height: scale(8),
+    borderRadius: scale(50)
+  },
+  inactiveIndicator: {
+    width: scale(8),
+    height: scale(8),
+    borderRadius: scale(50)
+  },
+  emptyState: {
+    padding: scale(12),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  emptyText: {
+    fontSize: RFValue(13),
+    fontWeight: '500',
+    color: '#fff',
+    textAlign: 'center'
+  }
+});
+
+export default memo(SliderTwo);

package/src/components/{Section → Content}/Card/Sliders/index.ts

@@ -3,11 +3,13 @@
  * @lastModified Mon 09 Jun 2025 at 03:12 PM
  */
 import SliderOne from './Styles/One';
+import SliderTwo from './Styles/Two';
 
 const Sliders = {
   Styles: {
     One: SliderOne,
-  },
+    Two: SliderTwo
+  }
 };
 
 export default Sliders;