@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.5

package/lib/module/components/Content/Card/Sliders/Styles/Three.js

@@ -0,0 +1,714 @@
+"use strict";
+
+import { StatusBar, StyleSheet, TouchableOpacity, View, useWindowDimensions } 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, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import FastImage from 'react-native-fast-image';
+import { ActivityIndicator } from 'react-native';
+import { Play, Plus, CheckCircle2, Info } from 'lucide-react-native';
+import { Text } from "../../../../Text/index.js";
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { useInternalTheme } from "../../../../../theme/hook/useInternalTheme.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SkeletonGradient = /*#__PURE__*/memo(({
+  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 /*#__PURE__*/_jsx(_Fragment, {
+    children: gradients.map((g, i) => /*#__PURE__*/_jsx(LinearGradient, {
+      colors: g.colors,
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFillObject, g.style]
+    }, i))
+  });
+});
+SkeletonGradient.displayName = 'SkeletonGradient';
+const S = SkeletonPlaceholder.Item;
+const ContentInfoSkeleton = /*#__PURE__*/memo(({
+  theme
+}) => {
+  const circle = moderateScale(44);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.contentInfoContainer, {
+      backgroundColor: theme.colors.background
+    }],
+    children: /*#__PURE__*/_jsxs(SkeletonPlaceholder, {
+      backgroundColor: theme.colors.skeletonBaseColor,
+      highlightColor: theme.colors.skeletonHighlightColor,
+      children: [/*#__PURE__*/_jsx(S, {
+        width: moderateScale(140),
+        height: moderateScale(10),
+        borderRadius: 6,
+        alignSelf: "center",
+        marginBottom: verticalScale(18)
+      }), /*#__PURE__*/_jsxs(S, {
+        height: verticalScale(60),
+        justifyContent: "center",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(S, {
+          width: circle,
+          height: circle,
+          borderRadius: circle / 2,
+          position: "absolute",
+          left: moderateScale(16)
+        }), /*#__PURE__*/_jsx(S, {
+          width: moderateScale(140),
+          height: verticalScale(48),
+          borderRadius: 6
+        }), /*#__PURE__*/_jsx(S, {
+          width: circle,
+          height: circle,
+          borderRadius: circle / 2,
+          position: "absolute",
+          right: moderateScale(16)
+        })]
+      })]
+    })
+  });
+});
+ContentInfoSkeleton.displayName = 'ContentInfoSkeleton';
+const SLIDER_HEIGHT = 370;
+const TITLE_IMAGE_HEIGHT = 55;
+const TITLE_IMAGE_WIDTH_PERCENT = '80%';
+// const SKELETON_COUNT = 1;
+const AUTO_PLAY_INTERVAL = 5000;
+const LOOP_MULTIPLIER = 3;
+const VIEWABILITY_THRESHOLD = 50;
+const GRADIENT_DIVIDER_BOTTOM = 2;
+const GRADIENT_DIVIDER_TOP = 1.1;
+const SliderThree = ({
+  index = 0,
+  data,
+  onPressItem,
+  isLoading = false,
+  theme,
+  onToggleWatchlist,
+  checkWatchlistStatus,
+  accessibilityLabel = 'Netflix style slider',
+  accessibilityHint = 'Swipe to view content'
+}) => {
+  const {
+    width
+  } = useWindowDimensions();
+  const {
+    theme: appliedTheme
+  } = useInternalTheme(theme);
+  const scrollX = useSharedValue(0);
+  const flatListRef = useRef(null);
+  const autoPlayIntervalRef = useRef(null);
+  const currentIndexRef = useRef(0);
+  const isDraggingRef = useRef(false);
+  const watchlistCache = useRef(new Map());
+  const isCheckingRef = useRef(false);
+  const [isInWatchlist, setIsInWatchlist] = useState(false);
+  const skeletonItems = useMemo(() => Array.from({
+    length: 3
+  }).map((_, i) => ({
+    _id: `skeleton-${i}`,
+    isSkeleton: true
+  })), []);
+  const sliderData = useMemo(() => {
+    if (isLoading) return skeletonItems;
+    return (data?.data ?? []).filter(item => !('type' in item && item.type === 'ads'));
+  }, [data, isLoading, skeletonItems]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  useEffect(() => {
+    if (!checkWatchlistStatus || sliderData.length === 0 || isCheckingRef.current) {
+      return;
+    }
+    const itemIds = sliderData.filter(item => item !== null && !!item._id).map(item => item._id);
+    if (itemIds.length === 0) {
+      return;
+    }
+    const uncachedIds = itemIds.filter(id => !watchlistCache.current.has(id));
+    if (uncachedIds.length === 0) {
+      if (sliderData[currentIndex]?._id) {
+        setIsInWatchlist(watchlistCache.current.get(sliderData[currentIndex]._id) ?? false);
+      }
+      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);
+        });
+        if (sliderData[currentIndex]?._id) {
+          setIsInWatchlist(watchlistCache.current.get(sliderData[currentIndex]._id) ?? false);
+        }
+      } catch (error) {
+        console.error('Error checking watchlist status:', error);
+        uncachedIds?.forEach?.(id => watchlistCache.current.set(id, false));
+        if (sliderData[currentIndex]?._id) {
+          setIsInWatchlist(false);
+        }
+      } finally {
+        isCheckingRef.current = false;
+      }
+    })();
+  }, [sliderData, checkWatchlistStatus, currentIndex]);
+  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 => 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(() => {});
+  const onViewableItemsChanged = useCallback(({
+    viewableItems
+  }) => {
+    if (!viewableItems.length) return;
+    const rawIndex = viewableItems[0]?.index ?? 0;
+    currentIndexRef.current = rawIndex;
+    setCurrentIndex(normalizeIndex(rawIndex));
+  }, [normalizeIndex]);
+  useEffect(() => {
+    onViewableItemsChangedRef.current = onViewableItemsChanged;
+  }, [onViewableItemsChanged]);
+  const stableOnViewableItemsChanged = useCallback(({
+    viewableItems
+  }) => {
+    onViewableItemsChangedRef.current?.({
+      viewableItems
+    });
+  }, []);
+  const viewabilityConfigCallbackPairs = useRef([{
+    viewabilityConfig: {
+      itemVisiblePercentThreshold: VIEWABILITY_THRESHOLD,
+      waitForInteraction: false
+    },
+    onViewableItemsChanged: stableOnViewableItemsChanged
+  }]);
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: event => {
+      scrollX.value = event.contentOffset.x;
+    }
+  });
+  const handleScrollBeginDrag = useCallback(() => {
+    setAutoPlay(false);
+    isDraggingRef.current = true;
+  }, []);
+  const handleMomentumScrollEnd = useCallback(() => {
+    isDraggingRef.current = false;
+    resetToMiddleSection();
+    setAutoPlay(true);
+  }, [resetToMiddleSection]);
+  const handleToggleWatchlist = useCallback(async (item, {
+    isFavorite
+  }) => {
+    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 sync (scrollX, currentIndexRef) + debounced currentIndex; single effect to limit useEffect count
+  useEffect(() => {
+    if (sliderData.length > 0) {
+      currentIndexRef.current = initialScrollIndex;
+      if (!isLoading && width > 0) scrollX.value = initialScrollIndex * width;
+    }
+    if (!sliderData.length) return;
+    const t = setTimeout(() => setCurrentIndex(normalizeIndex(currentIndexRef.current)), 150);
+    return () => clearTimeout(t);
+  }, [sliderData.length, initialScrollIndex, isLoading, width, normalizeIndex, scrollX]);
+  useEffect(() => {
+    onViewableItemsChangedRef.current = onViewableItemsChanged;
+  }, [onViewableItemsChanged]);
+
+  // Auto-play interval + deferred image preload (single effect to limit useEffect count)
+  useEffect(() => {
+    if (isLoading || sliderData.length === 0) return;
+    const preloadId = setTimeout(() => {
+      const uris = [];
+      const indices = [currentIndex, (currentIndex - 1 + sliderData.length) % sliderData.length, (currentIndex + 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, currentIndex, sliderData, isLoading]);
+  const renderItem = useCallback(({
+    item: listItem,
+    index: itemIndex
+  }) => /*#__PURE__*/_jsx(RenderItem, {
+    item: listItem,
+    index: itemIndex,
+    x: scrollX,
+    theme: appliedTheme
+  }), [scrollX, appliedTheme]);
+  const keyExtractor = useCallback((listItem, i) => `item-${listItem._id ?? i}-${i}`, []);
+  const getItemLayout = useCallback((_, i) => ({
+    length: width,
+    offset: width * i,
+    index: i
+  }), [width]);
+  const backImageList = useMemo(() => {
+    if (isLoading) return null;
+    return sliderData.map((item, i) => /*#__PURE__*/_jsx(BackImage, {
+      item: item,
+      index: i,
+      x: scrollX,
+      theme: appliedTheme,
+      sliderDataLength: sliderData.length,
+      width: width
+    }, `bg-${i}-${index}`));
+  }, [isLoading, sliderData, index, scrollX, appliedTheme, width]);
+  if (!data) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      translucent: true,
+      backgroundColor: "transparent"
+    }), backImageList, /*#__PURE__*/_jsx(Gradient, {
+      theme: appliedTheme
+    }), /*#__PURE__*/_jsx(Animated.FlatList, {
+      ref: flatListRef,
+      data: infiniteData,
+      horizontal: true,
+      pagingEnabled: true,
+      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 ? /*#__PURE__*/_jsx(ContentInfoSkeleton, {
+      theme: appliedTheme
+    }) : sliderData[currentIndex] && !('isSkeleton' in sliderData[currentIndex]) && /*#__PURE__*/_jsx(ContentInfo, {
+      theme: appliedTheme,
+      item: sliderData[currentIndex],
+      onPressItem: onPressItem,
+      isFavorite: isInWatchlist,
+      onToggleWatchlist: handleToggleWatchlist
+    })]
+  });
+};
+export default /*#__PURE__*/memo(SliderThree);
+const BackImage = /*#__PURE__*/memo(({
+  item,
+  index,
+  x,
+  theme,
+  sliderDataLength,
+  width
+}) => {
+  const [loadError, setLoadError] = useState(false);
+  const posterUri = item.poster?.trim?.() ?? '';
+  const hasValidUri = posterUri.length > 0;
+  const prevPosterUriRef = useRef(posterUri);
+  const handleLoad = useCallback(() => setLoadError(false), []);
+  const handleError = useCallback(() => setLoadError(true), []);
+
+  // Reset error when URI changes; retry once after load error (transient failures)
+  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';
+
+    const totalWidth = sliderDataLength * width;
+    if (totalWidth <= 0 || width <= 0) {
+      return {
+        opacity: index === 0 ? 1 : 0
+      };
+    }
+    const scrollInWidth = (x.value % totalWidth + totalWidth) % totalWidth;
+    const normalizedScroll = scrollInWidth / width - 1;
+    const distance = Math.abs(normalizedScroll - index);
+    if (distance < 0.01) return {
+      opacity: 1
+    };
+    const raw = distance <= 1 ? 1 - distance : 0;
+    const opacity = Math.min(1, Math.max(0, raw));
+    return {
+      opacity
+    };
+  });
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [StyleSheet.absoluteFillObject, {
+      width,
+      height: verticalScale(SLIDER_HEIGHT)
+    }, animatedStyle],
+    children: [hasValidUri && !loadError && /*#__PURE__*/_jsx(FastImage, {
+      source: {
+        uri: posterUri,
+        priority: FastImage.priority.normal,
+        cache: FastImage.cacheControl.immutable
+      },
+      style: [StyleSheet.absoluteFillObject, {
+        width,
+        height: verticalScale(SLIDER_HEIGHT),
+        backgroundColor: theme.colors.black
+      }],
+      resizeMode: FastImage.resizeMode.cover,
+      onLoad: handleLoad,
+      onError: handleError
+    }, `poster-${item._id}-${posterUri}`), (!hasValidUri || loadError) && /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFillObject, {
+        width,
+        height: verticalScale(SLIDER_HEIGHT),
+        backgroundColor: theme.colors.black
+      }]
+    })]
+  });
+});
+BackImage.displayName = 'BackImage';
+const Gradient = /*#__PURE__*/memo(({
+  theme
+}) => {
+  const {
+    width
+  } = useWindowDimensions();
+  return /*#__PURE__*/_jsxs(View, {
+    pointerEvents: "none",
+    style: [styles.gradientContainer, {
+      width,
+      height: verticalScale(SLIDER_HEIGHT)
+    }],
+    children: [/*#__PURE__*/_jsx(LinearGradient, {
+      colors: [theme.colors.background, 'rgba(0,0,0,0)'],
+      style: styles.gradientBottom,
+      pointerEvents: "none"
+    }), /*#__PURE__*/_jsx(LinearGradient, {
+      colors: ['rgba(0,0,0,0)', theme.colors.background],
+      style: styles.gradientTop,
+      pointerEvents: "none"
+    })]
+  });
+});
+Gradient.displayName = 'Gradient';
+const RenderItem = /*#__PURE__*/memo(({
+  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) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        width,
+        height: verticalScale(SLIDER_HEIGHT),
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      children: [/*#__PURE__*/_jsx(SkeletonPlaceholder, {
+        backgroundColor: theme.colors.skeletonBaseColor,
+        highlightColor: theme.colors.skeletonHighlightColor,
+        children: /*#__PURE__*/_jsx(SkeletonPlaceholder.Item, {
+          width: width,
+          height: verticalScale(SLIDER_HEIGHT)
+        })
+      }), /*#__PURE__*/_jsx(SkeletonGradient, {
+        theme: theme
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width,
+      height: verticalScale(SLIDER_HEIGHT)
+    },
+    children: hasTitleUri && !titleLoadError && /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.titleImage, animatedStyle],
+      children: /*#__PURE__*/_jsx(FastImage, {
+        source: {
+          uri: titleUri,
+          priority: FastImage.priority.normal,
+          cache: FastImage.cacheControl.immutable
+        },
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        resizeMode: FastImage.resizeMode.contain,
+        onLoad: handleTitleLoad,
+        onError: handleTitleError
+      }, `title-${item._id}-${titleUri}`)
+    })
+  });
+});
+RenderItem.displayName = 'RenderItem';
+const ContentInfo = /*#__PURE__*/memo(({
+  theme,
+  item,
+  onPressItem,
+  isFavorite = false,
+  onToggleWatchlist
+}) => {
+  const [isWatchlistLoading, setIsWatchlistLoading] = useState(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 /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentInfoContainer, {
+      backgroundColor: theme.colors.background
+    }],
+    children: [genresText ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.genreText, {
+        color: theme.colors.white
+      }],
+      children: genresText
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.btnContainer,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.mylistBtn,
+        onPress: handleWatchlistPress,
+        accessibilityRole: "button",
+        accessibilityLabel: isFavorite ? 'Remove from My List' : 'Add to My List',
+        children: [isWatchlistLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          color: theme.colors.textPrimary
+        }) : isFavorite ? /*#__PURE__*/_jsx(CheckCircle2, {
+          size: 22,
+          color: theme.colors.textPrimary
+        }) : /*#__PURE__*/_jsx(Plus, {
+          size: 22,
+          color: theme.colors.textPrimary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.textPrimary
+          },
+          children: "My List"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.playBtn, {
+          backgroundColor: theme.colors.button
+        }],
+        onPress: handlePlayPress,
+        accessibilityRole: "button",
+        accessibilityLabel: "Play content",
+        children: [/*#__PURE__*/_jsx(Play, {
+          size: 20,
+          color: theme.colors.buttonText
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.playText, {
+            color: theme.colors.buttonText
+          }],
+          children: "Play"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.infoBtn,
+        onPress: handleInfoPress,
+        activeOpacity: 0.8,
+        accessibilityRole: "button",
+        accessibilityLabel: "View content information",
+        children: [/*#__PURE__*/_jsx(Info, {
+          size: 22,
+          color: theme.colors.textPrimary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.textPrimary
+          },
+          children: "Info"
+        })]
+      })]
+    })]
+  });
+});
+ContentInfo.displayName = 'ContentInfo';
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  gradientContainer: {
+    ...StyleSheet.absoluteFillObject
+  },
+  gradientBottom: {
+    position: 'absolute',
+    top: 0,
+    height: verticalScale(SLIDER_HEIGHT) / GRADIENT_DIVIDER_BOTTOM,
+    width: '100%'
+  },
+  gradientTop: {
+    position: 'absolute',
+    bottom: 0,
+    height: verticalScale(SLIDER_HEIGHT) / GRADIENT_DIVIDER_TOP,
+    width: '100%'
+  },
+  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)
+  }
+});
+//# sourceMappingURL=Three.js.map