@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

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

@@ -0,0 +1,1017 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  useWindowDimensions,
+  type AccessibilityProps,
+} from 'react-native';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
+import FastImage, { type ImageStyle } from 'react-native-fast-image';
+import { ActivityIndicator } from 'react-native';
+import { Play, Plus, CheckCircle2, Info } from 'lucide-react-native';
+import { Text } from '../../../../Text';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import type { ISectionContent } from '../../../../../types';
+import type { ITheme, ThemeOverride } from '../../../../../theme/themes';
+import { useTheme } from '../../../../../theme';
+import { AppStatusBar } from '../../../../common/AppStatusBar';
+import type { ListViewToken } from 'react-native';
+
+type SkeletonItem = {
+  _id: string;
+  isSkeleton: true;
+};
+
+const SkeletonGradient = memo<{ theme: ITheme }>(({ theme }) => {
+  const gradients = [
+    {
+      colors: [theme.colors.background, 'rgba(0,0,0,0)'],
+      style: {
+        top: 0,
+        height: verticalScale(SLIDER_HEIGHT) / GRADIENT_DIVIDER_BOTTOM,
+      },
+    },
+    {
+      colors: ['rgba(0,0,0,0)', theme.colors.background],
+      style: { bottom: 0 },
+    },
+  ];
+
+  return (
+    <>
+      {gradients.map((g, i) => (
+        <LinearGradient
+          key={i}
+          colors={g.colors}
+          pointerEvents="none"
+          style={[StyleSheet.absoluteFill, g.style]}
+        />
+      ))}
+    </>
+  );
+});
+
+SkeletonGradient.displayName = 'SkeletonGradient';
+
+const S = SkeletonPlaceholder.Item;
+
+const ContentInfoSkeleton = memo<{ theme: ITheme }>(({ theme }) => {
+  const circle = moderateScale(44);
+
+  return (
+    <View
+      style={[
+        styles.contentInfoContainer,
+        { backgroundColor: theme.colors.background },
+      ]}
+    >
+      <SkeletonPlaceholder
+        backgroundColor={theme.colors.skeletonBaseColor}
+        highlightColor={theme.colors.skeletonHighlightColor}
+      >
+        <S
+          width={moderateScale(140)}
+          height={moderateScale(10)}
+          borderRadius={6}
+          alignSelf="center"
+          marginBottom={verticalScale(18)}
+        />
+        <S
+          height={verticalScale(60)}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <S
+            width={circle}
+            height={circle}
+            borderRadius={circle / 2}
+            position="absolute"
+            left={moderateScale(16)}
+          />
+          <S
+            width={moderateScale(140)}
+            height={verticalScale(48)}
+            borderRadius={6}
+          />
+          <S
+            width={circle}
+            height={circle}
+            borderRadius={circle / 2}
+            position="absolute"
+            right={moderateScale(16)}
+          />
+        </S>
+      </SkeletonPlaceholder>
+    </View>
+  );
+});
+
+ContentInfoSkeleton.displayName = 'ContentInfoSkeleton';
+
+const SLIDER_HEIGHT = 370;
+const TITLE_IMAGE_HEIGHT = 55;
+const TITLE_IMAGE_WIDTH_PERCENT = '80%';
+const AUTO_PLAY_INTERVAL = 5000;
+const LOOP_MULTIPLIER = 3;
+const VIEWABILITY_THRESHOLD = 50;
+const GRADIENT_DIVIDER_BOTTOM = 2;
+const GRADIENT_DIVIDER_TOP = 1.1;
+
+type SliderThreeProps = {
+  index?: number;
+  data: ISectionContent | null;
+  onPressItem?: (item: IContentData) => void;
+  isLoading?: boolean;
+  theme?: ThemeOverride;
+  onToggleWatchlist?: (
+    item: IContentData,
+    { isFavorite }: { isFavorite: boolean }
+  ) => void;
+  checkWatchlistStatus?: (
+    itemIds: string[]
+  ) => Record<string, boolean> | Promise<Record<string, boolean>>;
+} & AccessibilityProps;
+
+type BackImageProps = {
+  item: IContentData | SkeletonItem;
+  index: number;
+  x: SharedValue<number>;
+  theme: ITheme;
+  sliderDataLength: number;
+  width: number;
+};
+
+type GradientProps = {
+  theme: ITheme;
+};
+
+type RenderItemProps = {
+  item: IContentData | SkeletonItem;
+  index: number;
+  x: SharedValue<number>;
+  theme: ITheme;
+};
+
+type ContentInfoProps = {
+  theme: ITheme;
+  item: IContentData;
+  onPressItem?: (item: IContentData) => void;
+  isFavorite?: boolean;
+  onToggleWatchlist?: (
+    item: IContentData,
+    { isFavorite }: { isFavorite: boolean }
+  ) => void;
+};
+
+const SliderThree: React.FC<SliderThreeProps> = ({
+  index = 0,
+  data,
+  onPressItem,
+  isLoading = false,
+  theme,
+  onToggleWatchlist,
+  checkWatchlistStatus,
+  accessibilityLabel = 'Netflix style slider',
+  accessibilityHint = 'Swipe to view content',
+}) => {
+  const { width } = useWindowDimensions();
+  const { theme: appliedTheme } = useTheme(theme);
+  const scrollX = useSharedValue(0);
+  const flatListRef =
+    useRef<Animated.FlatList<IContentData | SkeletonItem>>(null);
+
+  const autoPlayIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const currentIndexRef = useRef(0);
+  const isDraggingRef = useRef(false);
+  const watchlistCache = useRef<Map<string, boolean>>(new Map());
+  const isCheckingRef = useRef<boolean>(false);
+  const [isInWatchlist, setIsInWatchlist] = useState<boolean>(false);
+  const skeletonItems = useMemo<SkeletonItem[]>(
+    () =>
+      Array.from({ length: 3 }).map((_, i) => ({
+        _id: `skeleton-${i}`,
+        isSkeleton: true,
+      })),
+    []
+  );
+
+  const sliderData = useMemo<(IContentData | SkeletonItem)[]>(() => {
+    if (isLoading) return skeletonItems;
+
+    return (data?.data ?? []).filter(
+      (item): item is IContentData => !('type' in item && item.type === 'ads')
+    );
+  }, [data, isLoading, skeletonItems]);
+
+  const [displayIndex, setDisplayIndex] = useState(0);
+
+  // Sync watchlist status for current display item
+  useEffect(() => {
+    const item = sliderData[displayIndex];
+    if (!item || 'isSkeleton' in item || !item._id) {
+      return;
+    }
+
+    // Update from cache immediately
+    setIsInWatchlist(watchlistCache.current.get(item._id) ?? false);
+
+    // Fetch uncached items if checkWatchlistStatus is available
+    if (
+      !checkWatchlistStatus ||
+      sliderData.length === 0 ||
+      isCheckingRef.current
+    ) {
+      return;
+    }
+
+    const itemIds = sliderData
+      .filter((i): i is IContentData => i !== null && !!i._id)
+      .map((i) => i._id);
+
+    if (itemIds.length === 0) {
+      return;
+    }
+
+    const uncachedIds = itemIds.filter((id) => !watchlistCache.current.has(id));
+
+    if (uncachedIds.length === 0) {
+      return;
+    }
+
+    isCheckingRef.current = true;
+    (async () => {
+      try {
+        const result = checkWatchlistStatus(uncachedIds);
+        const statusResult = result instanceof Promise ? await result : result;
+        Object.entries(statusResult)?.forEach?.(([itemId, status]) => {
+          watchlistCache.current.set(itemId, status);
+        });
+        // Update current item status after fetch
+        if (sliderData[displayIndex]?._id) {
+          setIsInWatchlist(
+            watchlistCache.current.get(sliderData[displayIndex]._id) ?? false
+          );
+        }
+      } catch (error) {
+        console.error('Error checking watchlist status:', error);
+        uncachedIds?.forEach?.((id) => watchlistCache.current.set(id, false));
+        if (sliderData[displayIndex]?._id) {
+          setIsInWatchlist(false);
+        }
+      } finally {
+        isCheckingRef.current = false;
+      }
+    })();
+  }, [sliderData, checkWatchlistStatus, displayIndex]);
+
+  const infiniteData = useMemo(() => {
+    if (!sliderData.length) return [];
+
+    if (isLoading) return sliderData;
+
+    return Array.from({ length: LOOP_MULTIPLIER }).flatMap(() => sliderData);
+  }, [sliderData, isLoading]);
+
+  const initialScrollIndex = useMemo(
+    () => (isLoading ? 0 : sliderData.length),
+    [isLoading, sliderData.length]
+  );
+
+  const [autoPlay, setAutoPlay] = useState(true);
+
+  const normalizeIndex = useCallback(
+    (idx: number) => (sliderData.length ? idx % sliderData.length : 0),
+    [sliderData.length]
+  );
+
+  const resetToMiddleSection = useCallback(() => {
+    const totalItems = sliderData.length;
+    const rawIndex = currentIndexRef.current;
+    const maxIndex = infiniteData.length - 1;
+
+    if (rawIndex < totalItems || rawIndex >= totalItems * 2) {
+      const middleIndex = totalItems + normalizeIndex(rawIndex);
+      if (middleIndex >= 0 && middleIndex <= maxIndex && flatListRef.current) {
+        flatListRef.current.scrollToIndex({
+          index: middleIndex,
+          animated: false,
+        });
+        currentIndexRef.current = middleIndex;
+      }
+    }
+  }, [sliderData.length, normalizeIndex, infiniteData.length]);
+
+  const onViewableItemsChangedRef = useRef<
+    ({ viewableItems }: { viewableItems: ListViewToken[] }) => void
+  >(() => {});
+
+  const onViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ListViewToken[] }) => {
+      if (!viewableItems.length) return;
+
+      const rawIndex = viewableItems[0]?.index ?? 0;
+      currentIndexRef.current = rawIndex;
+      setDisplayIndex(normalizeIndex(rawIndex));
+    },
+    [normalizeIndex]
+  );
+
+  useEffect(() => {
+    onViewableItemsChangedRef.current = onViewableItemsChanged;
+  }, [onViewableItemsChanged]);
+
+  const stableOnViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ListViewToken[] }) => {
+      onViewableItemsChangedRef.current?.({ viewableItems });
+    },
+    []
+  );
+
+  const viewabilityConfigCallbackPairs = useRef([
+    {
+      viewabilityConfig: {
+        itemVisiblePercentThreshold: VIEWABILITY_THRESHOLD,
+        waitForInteraction: false,
+      },
+      onViewableItemsChanged: stableOnViewableItemsChanged,
+    },
+  ]);
+
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+    },
+  });
+
+  useAnimatedReaction(
+    () => scrollX.value,
+    (scrollXVal) => {
+      const len = sliderData.length;
+      if (len === 0 || width <= 0) return;
+      const raw = Math.round(scrollXVal / width);
+      const normalized = ((raw % len) + len) % len;
+      runOnJS(setDisplayIndex)(normalized);
+    },
+    [width, sliderData.length]
+  );
+
+  const handleScrollBeginDrag = useCallback(() => {
+    setAutoPlay(false);
+    isDraggingRef.current = true;
+  }, []);
+
+  const handleMomentumScrollEnd = useCallback(() => {
+    isDraggingRef.current = false;
+    resetToMiddleSection();
+    setAutoPlay(true);
+  }, [resetToMiddleSection]);
+  const handleToggleWatchlist = useCallback(
+    async (item: IContentData, { isFavorite }: { isFavorite: boolean }) => {
+      if (!item._id) return;
+
+      const newStatus = !isFavorite;
+      setIsInWatchlist(newStatus);
+      watchlistCache.current.set(item._id, newStatus);
+
+      try {
+        if (onToggleWatchlist) {
+          await onToggleWatchlist(item, { isFavorite });
+        }
+      } catch (error) {
+        console.error('Error toggling watchlist:', error);
+        const revertedStatus = isFavorite;
+        setIsInWatchlist(revertedStatus);
+        watchlistCache.current.set(item._id, revertedStatus);
+      }
+    },
+    [onToggleWatchlist]
+  );
+
+  // Initial scroll position sync
+  useEffect(() => {
+    if (sliderData.length > 0) {
+      currentIndexRef.current = initialScrollIndex;
+      if (!isLoading && width > 0) scrollX.value = initialScrollIndex * width;
+    }
+    if (!sliderData.length) return;
+    const t = setTimeout(() => {
+      setDisplayIndex(normalizeIndex(currentIndexRef.current));
+    }, 150);
+    return () => clearTimeout(t);
+  }, [
+    sliderData.length,
+    initialScrollIndex,
+    isLoading,
+    width,
+    normalizeIndex,
+    scrollX,
+  ]);
+
+  useEffect(() => {
+    onViewableItemsChangedRef.current = onViewableItemsChanged;
+  }, [onViewableItemsChanged]);
+
+  // Auto-play interval + image preload
+  useEffect(() => {
+    if (isLoading || sliderData.length === 0) return;
+
+    const preloadId = setTimeout(() => {
+      const uris: string[] = [];
+      const indices = [
+        displayIndex,
+        (displayIndex - 1 + sliderData.length) % sliderData.length,
+        (displayIndex + 1) % sliderData.length,
+      ];
+      for (const i of indices) {
+        const slideItem = sliderData[i];
+        if (slideItem && !('isSkeleton' in slideItem)) {
+          const poster = slideItem.poster?.trim?.();
+          if (poster?.length) uris.push(poster);
+          const title = slideItem.title_image?.trim?.();
+          if (title?.length) uris.push(title);
+        }
+      }
+      if (uris.length > 0) FastImage.preload(uris.map((uri) => ({ uri })));
+    }, 0);
+
+    if (!autoPlay || sliderData.length <= 1) {
+      return () => clearTimeout(preloadId);
+    }
+    autoPlayIntervalRef.current = setInterval(() => {
+      if (!isDraggingRef.current && flatListRef.current) {
+        const nextIndex = currentIndexRef.current + 1;
+        const maxIndex = infiniteData.length - 1;
+        if (nextIndex >= 0 && nextIndex <= maxIndex) {
+          flatListRef.current.scrollToIndex({
+            index: nextIndex,
+            animated: true,
+          });
+        }
+      }
+    }, AUTO_PLAY_INTERVAL);
+    return () => {
+      clearTimeout(preloadId);
+      if (autoPlayIntervalRef.current) {
+        clearInterval(autoPlayIntervalRef.current);
+      }
+    };
+  }, [
+    autoPlay,
+    sliderData.length,
+    infiniteData.length,
+    displayIndex,
+    sliderData,
+    isLoading,
+  ]);
+
+  const renderItem = useCallback(
+    ({
+      item: listItem,
+      index: itemIndex,
+    }: {
+      item: IContentData | SkeletonItem;
+      index: number;
+    }) => (
+      <RenderItem
+        item={listItem}
+        index={itemIndex}
+        x={scrollX}
+        theme={appliedTheme}
+      />
+    ),
+    [scrollX, appliedTheme]
+  );
+
+  const keyExtractor = useCallback(
+    (listItem: IContentData | SkeletonItem, i: number) =>
+      `item-${listItem._id ?? i}-${i}`,
+    []
+  );
+
+  const getItemLayout = useCallback(
+    (
+      _: ArrayLike<IContentData | SkeletonItem> | null | undefined,
+      i: number
+    ) => ({
+      length: width,
+      offset: width * i,
+      index: i,
+    }),
+    [width]
+  );
+
+  const backImageList = useMemo(() => {
+    return sliderData.map((item, i) => (
+      <BackImage
+        key={`bg-${i}-${index}`}
+        item={item}
+        index={i}
+        x={scrollX}
+        theme={appliedTheme}
+        sliderDataLength={sliderData.length}
+        width={width}
+      />
+    ));
+  }, [sliderData, index, scrollX, appliedTheme, width]);
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <View
+      style={styles.container}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+    >
+      <AppStatusBar theme={theme} transparent={true} />
+
+      {backImageList}
+
+      <Gradient theme={appliedTheme} />
+
+      <Animated.FlatList
+        ref={flatListRef}
+        data={infiniteData}
+        style={styles.sliderList}
+        horizontal
+        pagingEnabled
+        bounces={false}
+        showsHorizontalScrollIndicator={false}
+        initialScrollIndex={initialScrollIndex}
+        getItemLayout={getItemLayout}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
+        onScrollBeginDrag={handleScrollBeginDrag}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={5}
+        windowSize={5}
+        initialNumToRender={3}
+        updateCellsBatchingPeriod={100}
+      />
+
+      {isLoading ? (
+        <ContentInfoSkeleton theme={appliedTheme} />
+      ) : (
+        sliderData[displayIndex] &&
+        !('isSkeleton' in sliderData[displayIndex]) && (
+          <ContentInfo
+            theme={appliedTheme}
+            item={sliderData[displayIndex]}
+            onPressItem={onPressItem}
+            isFavorite={isInWatchlist}
+            onToggleWatchlist={handleToggleWatchlist}
+          />
+        )
+      )}
+    </View>
+  );
+};
+
+export default memo(SliderThree);
+
+const BackImage = memo<BackImageProps>(
+  ({ item, index, x, theme, sliderDataLength, width }) => {
+    const [loadError, setLoadError] = useState(false);
+    const isSkeleton = 'isSkeleton' in item && item.isSkeleton;
+    const posterUri = isSkeleton
+      ? ''
+      : ((item as IContentData).poster?.trim?.() ?? '');
+    const hasValidUri = posterUri.length > 0;
+    const prevPosterUriRef = useRef(posterUri);
+
+    const handleLoad = useCallback(() => setLoadError(false), []);
+    const handleError = useCallback(() => setLoadError(true), []);
+
+    useEffect(() => {
+      if (prevPosterUriRef.current !== posterUri) {
+        prevPosterUriRef.current = posterUri;
+        setLoadError(false);
+      }
+      if (!loadError || !hasValidUri) return;
+      const id = setTimeout(() => setLoadError(false), 1000);
+      return () => clearTimeout(id);
+    }, [posterUri, loadError, hasValidUri]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      'worklet';
+      if (sliderDataLength <= 0 || width <= 0) {
+        return { opacity: index === 0 ? 1 : 0 };
+      }
+
+      const scrollIndex = x.value / width;
+      const normalizedIndex =
+        ((Math.round(scrollIndex) % sliderDataLength) + sliderDataLength) %
+        sliderDataLength;
+
+      // Show full opacity for current item
+      if (normalizedIndex === index) {
+        return { opacity: 1 };
+      }
+
+      // Calculate smooth transition for adjacent slides
+      const normalizedScroll =
+        ((scrollIndex % sliderDataLength) + sliderDataLength) %
+        sliderDataLength;
+      let distance = Math.abs(normalizedScroll - index);
+
+      // Handle wrap-around
+      if (distance > sliderDataLength / 2) {
+        distance = sliderDataLength - distance;
+      }
+
+      // Fade adjacent images (within 1 slide)
+      if (distance <= 1) {
+        return { opacity: Math.max(0, 1 - distance) };
+      }
+
+      return { opacity: 0 };
+    });
+
+    const containerStyle = [
+      StyleSheet.absoluteFill,
+      {
+        width,
+        height: verticalScale(SLIDER_HEIGHT),
+      },
+      animatedStyle,
+    ];
+
+    if (isSkeleton) {
+      return (
+        <Animated.View style={containerStyle}>
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              {
+                width,
+                height: verticalScale(SLIDER_HEIGHT),
+                backgroundColor: theme.colors.black,
+              },
+            ]}
+          >
+            <SkeletonPlaceholder
+              backgroundColor={theme.colors.skeletonBaseColor}
+              highlightColor={theme.colors.skeletonHighlightColor}
+            >
+              <SkeletonPlaceholder.Item
+                width={width}
+                height={verticalScale(SLIDER_HEIGHT)}
+              />
+            </SkeletonPlaceholder>
+          </View>
+        </Animated.View>
+      );
+    }
+
+    return (
+      <Animated.View style={containerStyle}>
+        {hasValidUri && !loadError && (
+          <FastImage
+            key={`poster-${item._id}-${posterUri}`}
+            source={{
+              uri: posterUri,
+              priority: FastImage.priority.normal,
+              cache: FastImage.cacheControl.immutable,
+            }}
+            style={[
+              StyleSheet.absoluteFill as ImageStyle,
+              {
+                width,
+                height: verticalScale(SLIDER_HEIGHT),
+                backgroundColor: theme.colors.black,
+              } as ImageStyle,
+            ]}
+            resizeMode={FastImage.resizeMode.cover}
+            onLoad={handleLoad}
+            onError={handleError}
+          />
+        )}
+        {(!hasValidUri || loadError) && (
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              {
+                width,
+                height: verticalScale(SLIDER_HEIGHT),
+                backgroundColor: theme.colors.black,
+              },
+            ]}
+          />
+        )}
+      </Animated.View>
+    );
+  }
+);
+
+BackImage.displayName = 'BackImage';
+
+const Gradient = memo<GradientProps>(({ theme }) => {
+  const { width } = useWindowDimensions();
+  const sliderHeight = verticalScale(SLIDER_HEIGHT);
+  const bottomGradientHeight =
+    verticalScale(SLIDER_HEIGHT) / GRADIENT_DIVIDER_TOP + 2;
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[styles.gradientContainer, { width, height: sliderHeight + 1 }]}
+    >
+      <LinearGradient
+        colors={[theme.colors.background, 'rgba(0,0,0,0)']}
+        style={styles.gradientBottom}
+        pointerEvents="none"
+      />
+      <LinearGradient
+        colors={['rgba(0,0,0,0)', theme.colors.background]}
+        style={[styles.gradientTop, { height: bottomGradientHeight }]}
+        pointerEvents="none"
+      />
+    </View>
+  );
+});
+
+Gradient.displayName = 'Gradient';
+
+const RenderItem = memo<RenderItemProps>(({ item, index, x, theme }) => {
+  const { width } = useWindowDimensions();
+  const titleUri =
+    'isSkeleton' in item ? '' : (item.title_image?.trim?.() ?? '');
+  const hasTitleUri = titleUri.length > 0;
+  const [titleLoadError, setTitleLoadError] = useState(false);
+
+  useEffect(() => {
+    setTitleLoadError(false);
+  }, [titleUri]);
+
+  const handleTitleLoad = useCallback(() => setTitleLoadError(false), []);
+  const handleTitleError = useCallback(() => setTitleLoadError(true), []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      x.value,
+      [(index - 1) * width, index * width, (index + 1) * width],
+      [-0.5, 1, -0.5],
+      Extrapolation.CLAMP
+    ),
+  }));
+
+  if ('isSkeleton' in item) {
+    const skeletonContainerStyle = {
+      width,
+      height: verticalScale(SLIDER_HEIGHT),
+      position: 'relative' as const,
+      overflow: 'hidden' as const,
+    };
+
+    return (
+      <View style={skeletonContainerStyle}>
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+        >
+          <SkeletonPlaceholder.Item
+            width={width}
+            height={verticalScale(SLIDER_HEIGHT)}
+          />
+        </SkeletonPlaceholder>
+
+        <SkeletonGradient theme={theme} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ width, height: verticalScale(SLIDER_HEIGHT) }}>
+      {hasTitleUri && !titleLoadError && (
+        <Animated.View style={[styles.titleImage, animatedStyle]}>
+          <FastImage
+            key={`title-${item._id}-${titleUri}`}
+            source={{
+              uri: titleUri,
+              priority: FastImage.priority.normal,
+              cache: FastImage.cacheControl.immutable,
+            }}
+            style={{ width: '100%', height: '100%' } as ImageStyle}
+            resizeMode={FastImage.resizeMode.contain}
+            onLoad={handleTitleLoad}
+            onError={handleTitleError}
+          />
+        </Animated.View>
+      )}
+    </View>
+  );
+});
+
+RenderItem.displayName = 'RenderItem';
+
+const ContentInfo = memo<ContentInfoProps>(
+  ({ theme, item, onPressItem, isFavorite = false, onToggleWatchlist }) => {
+    const [isWatchlistLoading, setIsWatchlistLoading] =
+      useState<boolean>(false);
+    const handleWatchlistPress = useCallback(async () => {
+      if (!item._id) return;
+
+      setIsWatchlistLoading(true);
+
+      try {
+        await onToggleWatchlist?.(item, { isFavorite });
+      } catch (error) {
+        console.error('Error toggling watchlist:', error);
+      } finally {
+        setIsWatchlistLoading(false);
+      }
+    }, [item, isFavorite, onToggleWatchlist]);
+    const handlePlayPress = useCallback(() => {
+      onPressItem?.(item);
+    }, [item, onPressItem]);
+
+    const handleInfoPress = useCallback(() => {
+      onPressItem?.(item);
+    }, [item, onPressItem]);
+
+    const genresText = useMemo(
+      () => item.genres?.map((g) => g.name).join(' • ') ?? '',
+      [item.genres]
+    );
+
+    return (
+      <View
+        style={[
+          styles.contentInfoContainer,
+          { backgroundColor: theme.colors.background },
+        ]}
+      >
+        {genresText ? (
+          <Text style={[styles.genreText, { color: theme.colors.white }]}>
+            {genresText}
+          </Text>
+        ) : null}
+
+        <View style={styles.btnContainer}>
+          <TouchableOpacity
+            style={styles.mylistBtn}
+            onPress={handleWatchlistPress}
+            accessibilityRole="button"
+            accessibilityLabel={
+              isFavorite ? 'Remove from My List' : 'Add to My List'
+            }
+          >
+            {isWatchlistLoading ? (
+              <ActivityIndicator color={theme.colors.textPrimary} />
+            ) : isFavorite ? (
+              <CheckCircle2 size={22} color={theme.colors.textPrimary} />
+            ) : (
+              <Plus size={22} color={theme.colors.textPrimary} />
+            )}
+            <Text style={{ color: theme.colors.textPrimary }}>My List</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={[styles.playBtn, { backgroundColor: theme.colors.button }]}
+            onPress={handlePlayPress}
+            accessibilityRole="button"
+            accessibilityLabel="Play content"
+          >
+            <Play size={20} color={theme.colors.buttonText} />
+            <Text style={[styles.playText, { color: theme.colors.buttonText }]}>
+              Play
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={styles.infoBtn}
+            onPress={handleInfoPress}
+            activeOpacity={0.8}
+            accessibilityRole="button"
+            accessibilityLabel="View content information"
+          >
+            <Info size={22} color={theme.colors.textPrimary} />
+            <Text style={{ color: theme.colors.textPrimary }}>Info</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+);
+
+ContentInfo.displayName = 'ContentInfo';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  sliderList: {
+    height: verticalScale(SLIDER_HEIGHT),
+  },
+  gradientContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  gradientBottom: {
+    position: 'absolute',
+    top: 0,
+    height: verticalScale(SLIDER_HEIGHT) / GRADIENT_DIVIDER_BOTTOM,
+    width: '100%',
+    left: 0,
+    right: 0,
+  },
+  gradientTop: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: verticalScale(SLIDER_HEIGHT) / GRADIENT_DIVIDER_TOP,
+  },
+  titleImage: {
+    position: 'absolute',
+    bottom: 0,
+    height: verticalScale(TITLE_IMAGE_HEIGHT),
+    width: TITLE_IMAGE_WIDTH_PERCENT,
+    alignSelf: 'center',
+  },
+  contentInfoContainer: {
+    paddingHorizontal: moderateScale(16),
+    paddingTop: moderateScale(12),
+    paddingBottom: verticalScale(15),
+  },
+  genreText: {
+    fontSize: moderateScale(12),
+    textAlign: 'center',
+    marginBottom: verticalScale(16),
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    minHeight: verticalScale(50),
+    paddingVertical: verticalScale(4),
+  },
+  mylistBtn: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: verticalScale(6),
+    position: 'absolute',
+    left: moderateScale(16),
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: moderateScale(4),
+  },
+  playBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+    paddingHorizontal: moderateScale(28),
+    paddingVertical: verticalScale(10),
+    borderRadius: 4,
+    gap: moderateScale(8),
+    minWidth: moderateScale(90),
+  },
+  playText: {
+    color: '#000',
+    fontSize: moderateScale(18),
+    fontWeight: '600',
+  },
+  infoBtn: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: verticalScale(6),
+    position: 'absolute',
+    right: moderateScale(16),
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: moderateScale(4),
+  },
+});