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

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

@@ -1,1017 +0,0 @@
-/**
- * @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),
-  },
-});